:root {
    --color-bg-primary: #FBFBF9;
    --color-bg-secondary: #F3F4EE;
    --color-bg-tertiary: #EBECE4;
    --color-card-bg: #FFFFFF;
    --color-card-hover: #F6F8F2;
    --color-text-primary: #1F261E;
    --color-text-secondary: #525E50;
    --color-text-muted: #7B8779;
    --color-brand-primary: #5A6E4F;
    --color-brand-primary-hover: #495A3F;
    --color-brand-secondary: #768A69;
    --color-brand-accent: #9CAE74;
    --color-brand-accent-warm: #C59B4B;
    --color-brand-highlight: #D6E2C2;
    --ui-border: rgba(90, 110, 79, 0.12);
    --ui-chip-border: rgba(90, 110, 79, 0.2);
    --ui-divider: rgba(90, 110, 79, 0.08);
    --ui-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
    --ui-shadow-hover: 0 14px 38px rgba(70, 85, 60, 0.12);
    --gradient-hero: linear-gradient(135deg, #F5F7F0 0%, #E9EEE2 100%);
    --gradient-button: linear-gradient(135deg, #647B57 0%, #4D5F43 100%);
    --gradient-accent: linear-gradient(135deg, #A4B77C 0%, #899E5F 100%);
    --font-family-base: 'M PLUS 1', sans-serif;
    --radius-card: 24px;
    --radius-image: 20px;
    --radius-pill: 9999px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body.news-portal-body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    max-width: 100vw;
    width: 100%;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

a:hover {
    color: var(--color-brand-primary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container-portal {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.section-heading-accent {
    display: inline-block;
    width: 48px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: var(--radius-pill);
    margin-top: 10px;
}

.capsule-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--ui-chip-border);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand-primary);
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
}

.portal-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-primary);
    color: #FFFFFF !important;
    font-weight: 600;
    border: none;
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 14px rgba(90, 110, 79, 0.2);
}

.portal-btn-primary:hover {
    background: var(--color-brand-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(90, 110, 79, 0.3);
}

.portal-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-secondary);
    color: #3D4B35;
    font-weight: 600;
    border: 1px solid var(--ui-chip-border);
    transition: all 0.25s ease;
}

.portal-btn-secondary:hover {
    background: var(--color-brand-primary);
    color: #FFFFFF !important;
    border-color: var(--color-brand-primary);
}

@media (max-width: 768px) {
    .container-portal {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ===== header ===== */
.site-header {
    font-family: 'M PLUS 1', sans-serif;
    z-index: 1030;
    box-shadow: 0 4px 20px rgba(70, 85, 60, 0.06);
}

.site-header .site-header-top-bar {
    background-color: #F3F4EE;
    border-bottom: 1px solid rgba(90, 110, 79, 0.1);
    font-size: 0.8125rem;
    color: #525E50;
}

.site-header .site-header-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 9999px;
    background-color: #5A6E4F;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
}

.site-header .site-header-ticker-text {
    color: #1F261E;
    font-weight: 500;
}

.site-header .site-header-meta {
    color: #525E50;
    font-weight: 500;
}

.site-header .site-header-navbar {
    background-color: #FBFBF9;
    padding: 12px 0;
    border-bottom: 1px solid rgba(90, 110, 79, 0.12);
}

.site-header .site-header-brand {
    text-decoration: none;
}

.site-header .site-header-logo {
    width: 42px;
    height: 42px;
    max-width: 46px;
    object-fit: contain;
}

.site-header .site-header-brand-text {
    font-size: 1.375rem;
    font-weight: 800;
    color: #1F261E;
    letter-spacing: -0.02em;
}

.site-header .site-header-nav-list {
    gap: 4px;
}

.site-header .site-header-nav-link {
    color: #1F261E;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 8px 14px;
    border-radius: 9999px;
    transition: color 0.25s ease, background-color 0.25s ease;
}

.site-header .site-header-nav-link:hover,
.site-header .site-header-nav-link:focus {
    color: #5A6E4F;
    background-color: #F3F4EE;
}

.site-header .site-header-cta-btn {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-radius: 9999px;
    padding: 9px 20px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    box-shadow: 0 4px 12px rgba(90, 110, 79, 0.25);
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    text-decoration: none;
}

.site-header .site-header-cta-btn:hover,
.site-header .site-header-cta-btn:focus {
    background-color: #46563D;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(90, 110, 79, 0.35);
}

.site-header .site-header-toggler {
    border: 1px solid rgba(90, 110, 79, 0.25);
    background-color: #F3F4EE;
    border-radius: 8px;
    padding: 6px 10px;
    color: #1F261E;
    outline: none;
    box-shadow: none;
}

.site-header .site-header-toggler:focus {
    box-shadow: 0 0 0 2px rgba(90, 110, 79, 0.2);
}

.site-header .site-header-toggler-icon {
    font-size: 1.5rem;
    line-height: 1;
    color: #1F261E;
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 991.98px) {
    .site-header .site-header-navbar {
        background-color: #FBFBF9;
    }

    .site-header #headerNavbarNav {
        background-color: #FFFFFF;
        border: 1px solid rgba(90, 110, 79, 0.15);
        border-radius: 16px;
        padding: 16px;
        margin-top: 12px;
        box-shadow: 0 10px 30px rgba(70, 85, 60, 0.08);
    }

    .site-header .site-header-nav-list {
        gap: 6px;
    }

    .site-header .site-header-nav-link {
        padding: 10px 16px;
        border-radius: 8px;
    }

    .site-header .site-header-action-wrapper {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(90, 110, 79, 0.1);
        width: 100%;
    }

    .site-header .site-header-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== hero ===== */
.blx-hero-section {
    background-color: #FBFBF9;
    color: #1F261E;
    position: relative;
    overflow: hidden;
}

.blx-pill-badge {
    background: #EFF3EA;
    border: 1px solid rgba(90, 110, 79, 0.25);
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5A6E4F;
}

.blx-pulse-indicator {
    width: 8px;
    height: 8px;
    background-color: #5A6E4F;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(90, 110, 79, 0.2);
}

.blx-hero-main-title {
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #1F261E;
    overflow-wrap: anywhere;
}

.blx-accent-bar {
    width: 48px;
    height: 4px;
    background: linear-gradient(135deg, #9CAE74 0%, #5A6E4F 100%);
    border-radius: 9999px;
}

.blx-hero-lead-text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #525E50;
    overflow-wrap: anywhere;
}


.blx-card-magazine {
    background: #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

.blx-card-magazine:hover {
    transform: translateY(-4px);
    background-color: #F6F8F2;
    box-shadow: 0 14px 38px rgba(70, 85, 60, 0.12);
}

.blx-card-img-wrap {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #EBECE4;
}

.blx-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.blx-card-magazine:hover .blx-card-img {
    transform: scale(1.04);
}

.blx-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}

.blx-category-chip {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 14px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #FFFFFF;
    backdrop-filter: blur(8px);
    z-index: 2;
}

.blx-chip-tech {
    background-color: rgba(90, 110, 79, 0.9);
}

.blx-chip-review {
    background-color: rgba(197, 155, 75, 0.95);
}

.blx-chip-smarthome {
    background-color: rgba(118, 138, 105, 0.92);
}

.blx-chip-hot {
    background-color: #D34533;
}

.blx-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blx-meta-group {
    font-size: 0.8125rem;
    color: #7B8779;
}

.blx-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.blx-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.blx-title-link {
    color: #1F261E;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blx-title-link:hover {
    color: #5A6E4F;
}


.blx-media-frame {
    border-radius: 24px;
    aspect-ratio: 16 / 9;
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.08);
    background-color: #2D3728;
}

.blx-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.blx-media-frame:hover .blx-media-img {
    transform: scale(1.03);
}

.blx-media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(15, 22, 14, 0.1) 0%, rgba(15, 22, 14, 0.85) 100%);
    pointer-events: none;
}

.blx-play-button-wrap {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    text-decoration: none;
}

.blx-play-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #5A6E4F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.blx-play-button:hover {
    transform: scale(1.1);
    background-color: #5A6E4F;
    color: #FFFFFF;
}

.blx-playlist-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px;
    z-index: 2;
    color: #FFFFFF;
}

.blx-media-stat {
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    padding: 4px 10px;
    border-radius: 9999px;
    color: #E1E6DC;
}

.blx-media-title {
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.blx-media-title .blx-title-link {
    color: #FFFFFF;
}

.blx-media-title .blx-title-link:hover {
    color: #D6E2C2;
}

.blx-media-desc {
    font-size: 0.85rem;
    color: #E1E6DC;
    max-width: 90%;
    overflow-wrap: anywhere;
}


.blx-thumb-card {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid rgba(90, 110, 79, 0.12);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.blx-thumb-card:hover {
    background-color: #F6F8F2;
    transform: translateY(-2px);
}

.blx-thumb-img-wrap {
    width: 75px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #EBECE4;
}

.blx-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blx-thumb-date {
    font-size: 0.72rem;
    color: #7B8779;
    display: block;
    margin-bottom: 2px;
}

.blx-thumb-title {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.blx-thumb-link {
    color: #1F261E;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blx-thumb-link:hover {
    color: #5A6E4F;
}


.blx-card-spotlight-tall {
    border-radius: 24px;
    min-height: 480px;
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.08);
    background-color: #1F261E;
}

.blx-spotlight-bg-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.blx-spotlight-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.blx-card-spotlight-tall:hover .blx-spotlight-bg-img {
    transform: scale(1.04);
}

.blx-spotlight-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(18, 24, 17, 0.3) 0%, rgba(18, 24, 17, 0.92) 100%);
    z-index: 1;
    pointer-events: none;
}

.blx-spotlight-top,
.blx-spotlight-bottom {
    z-index: 2;
}

.blx-read-time-pill {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    color: #FFFFFF;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.blx-spotlight-title {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.blx-spotlight-title .blx-title-link {
    color: #FFFFFF;
}

.blx-spotlight-title .blx-title-link:hover {
    color: #D6E2C2;
}

.blx-spotlight-excerpt {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #E1E6DC !important;
    overflow-wrap: anywhere;
}

.blx-btn-pill-primary {
    background: linear-gradient(135deg, #647B57 0%, #4D5F43 100%);
    color: #FFFFFF !important;
    padding: 10px 22px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.blx-btn-pill-primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #748F65 0%, #576C4C 100%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    color: #FFFFFF !important;
}


@media (max-width: 767.98px) {
    .blx-hero-main-title {
        font-size: 1.25rem;
        hyphens: auto;
    }

    .blx-card-title {
        font-size: 0.95rem;
    }

    .blx-card-spotlight-tall {
        min-height: 380px;
        padding: 18px !important;
    }

    .blx-playlist-panel {
        padding: 16px;
    }

    .blx-play-button {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }
}

/* ===== tech-news-grid ===== */
.blx-tech-news-section {
    background-color: #FBFBF9;
    color: #1F261E;
    font-family: 'M PLUS 1', sans-serif;
}

.blx-tech-news-section .blx-eyebrow-pill {
    background-color: #EFF3EA;
    color: #5A6E4F;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.2);
}

.blx-tech-news-section .blx-section-title {
    color: #1F261E;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.blx-tech-news-section .blx-title-accent {
    width: 48px;
    height: 4px;
    background: #9CAE74;
    border-radius: 9999px;
}

.blx-tech-news-section .blx-section-desc {
    color: #525E50;
    font-size: 0.95rem;
    line-height: 1.6;
}

.blx-tech-news-section .blx-filter-pill {
    background-color: #FFFFFF;
    color: #525E50;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.2);
    cursor: pointer;
    transition: all 0.25s ease;
}

.blx-tech-news-section .blx-filter-pill:hover {
    background-color: #EFF3EA;
    color: #1F261E;
}

.blx-tech-news-section .blx-filter-pill.active {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-color: #5A6E4F;
}

.blx-tech-news-section .blx-news-card {
    background-color: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
    border: 1px solid rgba(90, 110, 79, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.blx-tech-news-section .blx-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px rgba(70, 85, 60, 0.12);
    background-color: #F6F8F2;
}

.blx-tech-news-section .blx-card-media-wrapper {
    aspect-ratio: 16 / 9;
    width: 100%;
    background-color: #EBECE4;
}

.blx-tech-news-section .blx-card-img {
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blx-tech-news-section .blx-news-card:hover .blx-card-img {
    transform: scale(1.04);
}

.blx-tech-news-section .blx-card-tag {
    top: 14px;
    left: 14px;
    background: rgba(251, 251, 249, 0.9);
    color: #3D4B35;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 9999px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(90, 110, 79, 0.15);
}

.blx-tech-news-section .blx-card-meta {
    color: #7B8779;
    font-size: 0.8125rem;
    font-weight: 600;
}

.blx-tech-news-section .blx-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
}

.blx-tech-news-section .blx-title-link {
    color: #1F261E;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blx-tech-news-section .blx-title-link:hover {
    color: #5A6E4F;
}

.blx-tech-news-section .blx-card-text {
    color: #525E50;
    font-size: 0.875rem;
    line-height: 1.6;
}

.blx-tech-news-section .blx-card-footer {
    border-color: rgba(90, 110, 79, 0.08) !important;
}

.blx-tech-news-section .blx-learn-more-btn {
    background-color: #5A6E4F;
    color: #FFFFFF;
    padding: 10px 24px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.blx-tech-news-section .blx-learn-more-btn:hover {
    background-color: #46563D;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(70, 85, 60, 0.25);
}

@media (max-width: 767.98px) {
    .blx-tech-news-section .blx-section-title {
        font-size: 1.35rem;
    }

    .blx-tech-news-section .blx-card-title {
        font-size: 1.1rem;
    }
}

/* ===== gadget-reviews-grid ===== */
.gadget-reviews-grid-section {
    background-color: #FBFBF9;
    color: #1F261E;
}

.gadget-reviews-grid-section .gadget-grid-eyebrow {
    background-color: #EFF3EA;
    color: #3D4B35;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.2);
}

.gadget-reviews-grid-section .gadget-grid-eyebrow i {
    color: #5A6E4F;
}

.gadget-reviews-grid-section .gadget-grid-title {
    font-size: 1.875rem;
    font-weight: 800;
    color: #1F261E;
    line-height: 1.25;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.gadget-reviews-grid-section .gadget-grid-accent-line {
    width: 48px;
    height: 4px;
    background: #9CAE74;
    border-radius: 9999px;
    margin-top: 10px;
}

.gadget-reviews-grid-section .gadget-grid-subtitle {
    color: #525E50;
    font-size: 0.9375rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.gadget-reviews-grid-section .gadget-filter-btn {
    background-color: #F3F4EE;
    color: #3D4B35;
    border: 1px solid rgba(90, 110, 79, 0.16);
    padding: 8px 18px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
}

.gadget-reviews-grid-section .gadget-filter-btn:hover {
    background-color: #E2E8DA;
    color: #1F261E;
}

.gadget-reviews-grid-section .gadget-filter-btn.active {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-color: #5A6E4F;
}

.gadget-reviews-grid-section .gadget-card {
    background-color: #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(90, 110, 79, 0.12);
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease;
}

.gadget-reviews-grid-section .gadget-card:hover {
    background-color: #F6F8F2;
    transform: translateY(-4px);
    box-shadow: 0 14px 38px rgba(70, 85, 60, 0.12);
}

.gadget-reviews-grid-section .gadget-card-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    aspect-ratio: 16 / 9;
}

.gadget-reviews-grid-section .gadget-card-img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gadget-reviews-grid-section .gadget-card:hover .gadget-card-img {
    transform: scale(1.04);
}

.gadget-reviews-grid-section .gadget-card-badge-box {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
}

.gadget-reviews-grid-section .gadget-category-pill {
    background-color: rgba(251, 251, 249, 0.92);
    backdrop-filter: blur(6px);
    color: #3D4B35;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.2);
    display: inline-flex;
    align-items: center;
}

.gadget-reviews-grid-section .gadget-card-meta {
    font-size: 0.8125rem;
    color: #7B8779;
    font-weight: 500;
}

.gadget-reviews-grid-section .gadget-meta-item {
    display: inline-flex;
    align-items: center;
}

.gadget-reviews-grid-section .gadget-meta-divider {
    color: rgba(90, 110, 79, 0.35);
}

.gadget-reviews-grid-section .gadget-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.gadget-reviews-grid-section .gadget-title-link {
    color: #1F261E;
    text-decoration: none;
    transition: color 0.2s ease;
}

.gadget-reviews-grid-section .gadget-title-link:hover {
    color: #5A6E4F;
}

.gadget-reviews-grid-section .gadget-card-text {
    color: #525E50;
    font-size: 0.9375rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.gadget-reviews-grid-section .gadget-card-actions {
    border-color: rgba(90, 110, 79, 0.1) !important;
}

.gadget-reviews-grid-section .gadget-btn-learn-more {
    background-color: #5A6E4F;
    color: #FFFFFF;
    padding: 10px 24px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.gadget-reviews-grid-section .gadget-btn-learn-more:hover {
    background-color: #46563D;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(70, 85, 60, 0.2);
}

@media (max-width: 767px) {
    .gadget-reviews-grid-section .gadget-grid-title {
        font-size: 1.25rem;
    }

    .gadget-reviews-grid-section .gadget-card-title {
        font-size: 1.05rem;
    }

    .gadget-reviews-grid-section .gadget-card {
        border-radius: 18px;
    }

    .gadget-reviews-grid-section .gadget-card-thumb {
        border-radius: 16px 16px 0 0;
    }

    .gadget-reviews-grid-section .gadget-card-body {
        padding: 16px !important;
    }

    .gadget-reviews-grid-section .gadget-btn-learn-more {
        width: 100%;
    }
}

/* ===== smart-home-grid ===== */
.smart-home-grid-section {
    background-color: #FBFBF9;
    color: #1F261E;
}

.smart-home-grid-section .smart-home-grid-badge {
    background-color: #EFF3EA;
    color: #3D4B35;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.2);
}

.smart-home-grid-section .smart-home-grid-badge i {
    color: #5A6E4F;
    font-size: 1rem;
}

.smart-home-grid-section .smart-home-grid-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.3;
    color: #1F261E;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.smart-home-grid-section .smart-home-grid-accent-line {
    width: 48px;
    height: 4px;
    background: #9CAE74;
    border-radius: 9999px;
}

.smart-home-grid-section .smart-home-grid-subtitle {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #525E50;
    max-width: 720px;
}

.smart-home-grid-section .smart-home-grid-counter {
    background-color: #F3F4EE;
    color: #525E50;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.12);
}

.smart-home-grid-section .smart-home-grid-counter i {
    color: #5A6E4F;
}

.smart-home-grid-section .smart-home-card {
    background-color: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
    border: 1px solid rgba(90, 110, 79, 0.08);
    overflow: hidden;
}

.smart-home-grid-section .smart-home-card:hover {
    transform: translateY(-4px);
    background-color: #F6F8F2;
    box-shadow: 0 14px 38px rgba(70, 85, 60, 0.12);
}

.smart-home-grid-section .smart-home-card-media {
    aspect-ratio: 16 / 9;
    border-radius: 20px 20px 0 0;
    background-color: #EBECE4;
}

.smart-home-grid-section .smart-home-card-img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.smart-home-grid-section .smart-home-card:hover .smart-home-card-img {
    transform: scale(1.04);
}

.smart-home-grid-section .smart-home-card-category {
    top: 14px;
    left: 14px;
    background: rgba(251, 251, 249, 0.9);
    backdrop-filter: blur(8px);
    color: #3D4B35;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.smart-home-grid-section .smart-home-card-category i {
    color: #5A6E4F;
}

.smart-home-grid-section .smart-home-card-meta {
    font-size: 0.8125rem;
    color: #7B8779;
}

.smart-home-grid-section .smart-home-card-meta .meta-item i {
    color: #5A6E4F;
}

.smart-home-grid-section .smart-home-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1F261E;
    margin-top: 4px;
}

.smart-home-grid-section .smart-home-card-title-link {
    color: #1F261E;
    text-decoration: none;
    transition: color 0.2s ease;
}

.smart-home-grid-section .smart-home-card-title-link:hover {
    color: #5A6E4F;
}

.smart-home-grid-section .smart-home-card-excerpt {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #525E50;
    overflow-wrap: anywhere;
}

.smart-home-grid-section .smart-home-btn {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-radius: 9999px;
    padding: 10px 24px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    border: none;
}

.smart-home-grid-section .smart-home-btn i {
    color: #FFFFFF;
    transition: transform 0.2s ease;
}

.smart-home-grid-section .smart-home-btn:hover {
    background-color: #46563D;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(70, 85, 60, 0.25);
}

.smart-home-grid-section .smart-home-btn:hover i {
    transform: translateX(3px);
}

@media (max-width: 767px) {
    .smart-home-grid-section .smart-home-grid-title {
        font-size: 1.25rem;
        hyphens: auto;
    }

    .smart-home-grid-section .smart-home-card-title {
        font-size: 1rem;
        hyphens: auto;
    }

    .smart-home-grid-section .smart-home-card-body {
        padding: 16px;
    }
}

/* ===== events-widget ===== */
.events-widget-section {
    background-color: #FBFBF9;
    font-family: 'M PLUS 1', sans-serif;
    color: #1F261E;
    position: relative;
}

.events-widget-section .events-widget-eyebrow {
    background-color: #EFF3EA;
    color: #5A6E4F;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.2);
}

.events-widget-section .events-widget-title {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #1F261E;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.events-widget-section .events-widget-accent-line {
    width: 48px;
    height: 4px;
    background: #9CAE74;
    border-radius: 9999px;
    margin-top: 10px;
}

.events-widget-section .events-widget-subtitle {
    color: #525E50;
    font-size: 0.95rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.events-widget-section .events-widget-filters-wrap {
    border-bottom: 1px solid rgba(90, 110, 79, 0.12);
    padding-bottom: 12px;
}

.events-widget-section .events-widget-filter-btn {
    background-color: #FFFFFF;
    color: #525E50;
    border: 1px solid rgba(90, 110, 79, 0.2);
    border-radius: 9999px;
    padding: 8px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.events-widget-section .events-widget-filter-btn:hover {
    background-color: #EFF3EA;
    color: #1F261E;
    border-color: #5A6E4F;
}

.events-widget-section .events-widget-filter-btn.active {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-color: #5A6E4F;
    box-shadow: 0 4px 14px rgba(90, 110, 79, 0.25);
}

.events-widget-section .events-widget-card {
    background-color: #FFFFFF;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
    border: 1px solid rgba(90, 110, 79, 0.08);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease;
}

.events-widget-section .events-widget-card:hover {
    transform: translateY(-4px);
    background-color: #F6F8F2;
    box-shadow: 0 14px 38px rgba(70, 85, 60, 0.12);
}

.events-widget-section .events-widget-date-pill {
    background: #F3F4EE;
    border: 1px solid rgba(90, 110, 79, 0.15);
    border-radius: 12px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 58px;
}

.events-widget-section .events-widget-date-day {
    font-size: 1.1rem;
    font-weight: 800;
    color: #5A6E4F;
    line-height: 1.1;
}

.events-widget-section .events-widget-date-year {
    font-size: 0.7rem;
    font-weight: 600;
    color: #7B8779;
    line-height: 1;
}

.events-widget-section .events-widget-type-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 9999px;
}

.events-widget-section .events-widget-type-badge.expo {
    background-color: #EFF3EA;
    color: #495A3F;
    border: 1px solid rgba(90, 110, 79, 0.25);
}

.events-widget-section .events-widget-type-badge.keynote {
    background-color: #FFF6E5;
    color: #9C6B17;
    border: 1px solid rgba(197, 155, 75, 0.3);
}

.events-widget-section .events-widget-type-badge.conference {
    background-color: #EBF3F8;
    color: #2F6184;
    border: 1px solid rgba(47, 97, 132, 0.25);
}

.events-widget-section .events-widget-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1F261E;
    margin-bottom: 12px;
    overflow-wrap: anywhere;
}

.events-widget-section .events-widget-card-desc {
    font-size: 0.875rem;
    color: #525E50;
    line-height: 1.6;
    margin-bottom: 16px;
    overflow-wrap: anywhere;
}

.events-widget-section .events-widget-meta-list li {
    font-size: 0.8125rem;
    color: #525E50;
    line-height: 1.4;
}

.events-widget-section .events-widget-meta-list li i {
    color: #5A6E4F;
    font-size: 1rem;
    flex-shrink: 0;
}

.events-widget-section .events-widget-card-footer {
    border-color: rgba(90, 110, 79, 0.12) !important;
}

.events-widget-section .events-widget-action-link {
    color: #5A6E4F;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.events-widget-section .events-widget-action-link:hover {
    color: #3D4B35;
    transform: translateX(2px);
}

.events-widget-section .events-widget-remind-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(90, 110, 79, 0.2);
    background-color: #EFF3EA;
    color: #5A6E4F;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.events-widget-section .events-widget-remind-btn:hover,
.events-widget-section .events-widget-remind-btn.active {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-color: #5A6E4F;
}

.events-widget-section .events-widget-bottom-banner {
    background-color: #F3F4EE;
    border: 1px solid rgba(90, 110, 79, 0.15);
    border-radius: 20px;
}

.events-widget-section .events-widget-bottom-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #5A6E4F;
    color: #FFFFFF;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.events-widget-section .events-widget-bottom-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1F261E;
    overflow-wrap: anywhere;
}

.events-widget-section .events-widget-bottom-desc {
    font-size: 0.875rem;
    color: #525E50;
    overflow-wrap: anywhere;
}

.events-widget-section .events-widget-primary-btn {
    background-color: #5A6E4F;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 12px 26px;
    border-radius: 9999px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(70, 85, 60, 0.15);
    transition: all 0.25s ease;
}

.events-widget-section .events-widget-primary-btn:hover {
    background-color: #46563D;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(70, 85, 60, 0.25);
}

@media (max-width: 767px) {
    .events-widget-section .events-widget-title {
        font-size: 1.45rem;
    }

    .events-widget-section .events-widget-card {
        padding: 18px;
    }

    .events-widget-section .events-widget-bottom-banner {
        text-align: center;
        flex-direction: column;
    }

    .events-widget-section .events-widget-bottom-banner>div {
        flex-direction: column;
        text-align: center;
    }

    .events-widget-section .events-widget-primary-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== weather-widget ===== */
.weather-widget-section {
    background-color: #F3F4EE;
    position: relative;
    overflow: hidden
}

.weather-widget-section .weather-widget-container {
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
    border: 1px solid rgba(90, 110, 79, 0.12)
}

.weather-widget-section .weather-badge {
    background: #EFF3EA;
    color: #495A3F;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.2)
}

.weather-widget-section .weather-title {
    color: #1F261E;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em
}

@media (max-width:767px) {
    .weather-widget-section .weather-title {
        font-size: 1.125rem;
        hyphens: auto
    }
}

.weather-widget-section .weather-accent-line {
    height: 4px;
    width: 48px;
    background: linear-gradient(135deg, #A4B77C 0%, #899E5F 100%);
    border-radius: 9999px
}

.weather-widget-section .weather-subtitle {
    color: #525E50;
    font-size: 0.9375rem;
    line-height: 1.6
}

.weather-widget-section .weather-city-btn {
    background: #EFF3EA;
    color: #3D4B35;
    border: 1px solid rgba(90, 110, 79, 0.2);
    padding: 8px 18px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
    cursor: pointer
}

.weather-widget-section .weather-city-btn:hover {
    background: #5A6E4F;
    color: #FFFFFF;
    border-color: #5A6E4F
}

.weather-widget-section .weather-city-btn.active {
    background: #5A6E4F;
    color: #FFFFFF;
    border-color: #5A6E4F;
    box-shadow: 0 4px 12px rgba(90, 110, 79, 0.25)
}

.weather-widget-section .current-weather-card {
    background: linear-gradient(135deg, #F5F7F0 0%, #E9EEE2 100%);
    border-radius: 20px;
    border: 1px solid rgba(90, 110, 79, 0.12)
}

.weather-widget-section .current-location-tag {
    background: #FFFFFF;
    color: #5A6E4F;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.15)
}

.weather-widget-section .current-condition-text {
    color: #1F261E;
    font-size: 1.125rem;
    font-weight: 700
}

.weather-widget-section .current-weather-icon i {
    font-size: 2.75rem;
    color: #C59B4B
}

.weather-widget-section .current-temp {
    font-size: 3.5rem;
    font-weight: 900;
    color: #1F261E;
    line-height: 1
}

.weather-widget-section .temp-unit {
    font-size: 1.5rem;
    font-weight: 700;
    color: #5A6E4F
}

.weather-widget-section .temp-high-low {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1F261E
}

.weather-widget-section .feels-like {
    font-size: 0.8125rem;
    color: #7B8779
}

.weather-widget-section .weather-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    border-top-color: rgba(90, 110, 79, 0.12) !important
}

.weather-widget-section .weather-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.weather-widget-section .meta-label {
    font-size: 0.75rem;
    color: #525E50;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.weather-widget-section .meta-val {
    font-size: 0.875rem;
    color: #1F261E;
    font-weight: 700
}

.weather-widget-section .text-success-custom {
    color: #495A3F !important
}

.weather-widget-section .forecast-mini-card {
    background: #FBFBF9;
    border-radius: 16px;
    border: 1px solid rgba(90, 110, 79, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease
}

.weather-widget-section .forecast-mini-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(70, 85, 60, 0.08);
    background: #FFFFFF
}

.weather-widget-section .forecast-day {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1F261E
}

.weather-widget-section .forecast-icon i {
    font-size: 1.75rem;
    color: #5A6E4F
}

.weather-widget-section .forecast-status {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #525E50
}

.weather-widget-section .forecast-temp-range {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1F261E
}

.weather-widget-section .forecast-energy-chip {
    background: #EFF3EA;
    color: #495A3F;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.weather-widget-section .smart-advisory-card {
    background: #FBFBF9;
    border-radius: 16px;
    border: 1px solid rgba(90, 110, 79, 0.14)
}

.weather-widget-section .advisory-icon-wrapper {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #5A6E4F;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0
}

.weather-widget-section .advisory-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1F261E;
    line-height: 1.2
}

@media (max-width:767px) {
    .weather-widget-section .advisory-title {
        font-size: 0.8125rem
    }
}

.weather-widget-section .advisory-desc {
    font-size: 0.8125rem;
    color: #525E50;
    line-height: 1.5
}

/* ===== urgent-alerts ===== */
.urgent-alerts-section {
    background-color: #FBFBF9;
    padding-top: 50px;
    padding-bottom: 50px;
}

.urgent-alerts-section .urgent-alerts-card {
    background: linear-gradient(135deg, #F5F7F0 0%, #E9EEE2 100%);
    border-radius: 24px;
    padding: 40px 30px;
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.08);
    border: 1px solid rgba(90, 110, 79, 0.15);
}

@media (min-width: 992px) {
    .urgent-alerts-section .urgent-alerts-card {
        padding: 56px 48px;
    }
}

.urgent-alerts-section .urgent-decor-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.urgent-alerts-section .urgent-decor-1 {
    width: 220px;
    height: 220px;
    top: -80px;
    right: -60px;
    background: radial-gradient(circle, rgba(156, 174, 116, 0.25) 0%, rgba(156, 174, 116, 0) 70%);
}

.urgent-alerts-section .urgent-decor-2 {
    width: 280px;
    height: 280px;
    bottom: -100px;
    left: -80px;
    background: radial-gradient(circle, rgba(90, 110, 79, 0.15) 0%, rgba(90, 110, 79, 0) 70%);
}

.urgent-alerts-section .urgent-badge {
    background-color: #EFF3EA;
    border: 1px solid rgba(90, 110, 79, 0.25);
    border-radius: 9999px;
    padding: 6px 14px;
}

.urgent-alerts-section .urgent-badge-pulse {
    width: 8px;
    height: 8px;
    background-color: #C59B4B;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(197, 155, 75, 0.25);
}

.urgent-alerts-section .urgent-badge-icon {
    font-size: 1rem;
    color: #5A6E4F;
}

.urgent-alerts-section .urgent-badge-text {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #3D4B35;
    letter-spacing: 0.02em;
}

.urgent-alerts-section .urgent-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 800;
    font-size: 1.625rem;
    line-height: 1.3;
    color: #1F261E;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .urgent-alerts-section .urgent-title {
        font-size: 16px;
        line-height: 1.3;
    }
}

.urgent-alerts-section .urgent-accent-line {
    height: 4px;
    width: 48px;
    background: linear-gradient(135deg, #A4B77C 0%, #899E5F 100%);
    border-radius: 9999px;
}

.urgent-alerts-section .urgent-desc {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #525E50;
    overflow-wrap: anywhere;
}

.urgent-alerts-section .urgent-feature-chip {
    background-color: #FFFFFF;
    border: 1px solid rgba(90, 110, 79, 0.15);
    border-radius: 9999px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #3D4B35;
    box-shadow: 0 2px 8px rgba(70, 85, 60, 0.04);
}

.urgent-alerts-section .urgent-feature-chip i {
    color: #5A6E4F;
    font-size: 0.95rem;
}

.urgent-alerts-section .urgent-form-box {
    background-color: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(70, 85, 60, 0.08);
    border: 1px solid rgba(90, 110, 79, 0.12);
}

.urgent-alerts-section .urgent-form-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1F261E;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .urgent-alerts-section .urgent-form-title {
        font-size: 14px;
    }
}

.urgent-alerts-section .urgent-form-subtitle {
    font-size: 0.8125rem;
    color: #7B8779;
}

.urgent-alerts-section .urgent-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #3D4B35;
    margin-bottom: 6px;
}

.urgent-alerts-section .urgent-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.urgent-alerts-section .urgent-input-icon {
    position: absolute;
    left: 16px;
    color: #5A6E4F;
    font-size: 1.125rem;
    pointer-events: none;
}

.urgent-alerts-section .urgent-input {
    background-color: #F9FAF7;
    border: 1.5px solid rgba(90, 110, 79, 0.2);
    border-radius: 9999px;
    padding: 12px 18px 12px 46px;
    font-size: 0.875rem;
    color: #1F261E;
    transition: all 0.25s ease;
}

.urgent-alerts-section .urgent-input::placeholder {
    color: #7B8779;
    opacity: 0.9;
}

.urgent-alerts-section .urgent-input:focus {
    background-color: #FFFFFF;
    border-color: #5A6E4F;
    box-shadow: 0 0 0 3px rgba(90, 110, 79, 0.15);
    color: #1F261E;
}

.urgent-alerts-section .urgent-helper-text {
    font-size: 0.75rem;
    color: #7B8779;
    display: flex;
    align-items: center;
    gap: 4px;
}

.urgent-alerts-section .urgent-helper-text i {
    color: #5A6E4F;
}

.urgent-alerts-section .urgent-checkbox {
    border-color: rgba(90, 110, 79, 0.35);
    background-color: #F9FAF7;
    border-radius: 4px;
    cursor: pointer;
}

.urgent-alerts-section .urgent-checkbox:checked {
    background-color: #5A6E4F;
    border-color: #5A6E4F;
}

.urgent-alerts-section .urgent-check-label {
    font-size: 0.75rem;
    color: #525E50;
    line-height: 1.5;
    cursor: pointer;
}

.urgent-alerts-section .urgent-submit-btn {
    background: #5A6E4F;
    color: #FFFFFF;
    border: none;
    border-radius: 9999px;
    padding: 13px 24px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 15px rgba(90, 110, 79, 0.25);
}

.urgent-alerts-section .urgent-submit-btn:hover,
.urgent-alerts-section .urgent-submit-btn:focus {
    background: #46563D;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(70, 85, 60, 0.35);
}

.urgent-alerts-section .urgent-submit-btn:active {
    transform: translateY(0);
}

/* ===== footer ===== */
.blx-site-footer {
    background-color: #FBFBF9;
    padding-top: 40px;
    padding-bottom: 40px;
    color: #1F261E;
    font-family: 'M PLUS 1', sans-serif;
}

.blx-site-footer .blx-site-footer__main-card {
    background-color: #F3F4EE;
    border-radius: 24px;
    padding: 40px 32px 30px;
    border: 1px solid rgba(90, 110, 79, 0.12);
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
}

.blx-site-footer .blx-site-footer__brand-link {
    text-decoration: none;
    color: #1F261E;
}

.blx-site-footer .blx-site-footer__logo {
    width: 44px;
    height: 44px;
    max-width: 44px;
    object-fit: contain;
    display: block;
}

.blx-site-footer .blx-site-footer__brand-name {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1F261E;
}

.blx-site-footer .blx-site-footer__brand-desc {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #525E50;
    margin-bottom: 18px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.blx-site-footer .blx-site-footer__badge-pill {
    background-color: #FFFFFF;
    border: 1px solid rgba(90, 110, 79, 0.2);
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5A6E4F;
}

.blx-site-footer .blx-site-footer__badge-pill i {
    color: #9CAE74;
    font-size: 1rem;
}

.blx-site-footer .blx-site-footer__nav-title {
    font-size: 1rem;
    font-weight: 800;
    color: #1F261E;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 8px;
    line-height: 1.3;
}

.blx-site-footer .blx-site-footer__nav-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 3px;
    background-color: #9CAE74;
    border-radius: 9999px;
}

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

.blx-site-footer .blx-site-footer__link {
    color: #525E50;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.25s ease, transform 0.25s ease;
    overflow-wrap: anywhere;
}

.blx-site-footer .blx-site-footer__link i {
    font-size: 0.95rem;
    color: #5A6E4F;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.blx-site-footer .blx-site-footer__link:hover {
    color: #1F261E;
    transform: translateX(3px);
}

.blx-site-footer .blx-site-footer__link:hover i {
    color: #495A3F;
}

.blx-site-footer .blx-site-footer__divider {
    border: 0;
    border-top: 1px solid rgba(90, 110, 79, 0.12);
    opacity: 1;
}

.blx-site-footer .blx-site-footer__copyright {
    font-size: 0.8125rem;
    color: #7B8779;
    font-weight: 500;
}

.blx-site-footer .blx-site-footer__back-to-top {
    background-color: #EFF3EA;
    color: #3D4B35;
    border: 1px solid rgba(90, 110, 79, 0.2);
    border-radius: 9999px;
    padding: 8px 18px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blx-site-footer .blx-site-footer__back-to-top i {
    font-size: 0.9rem;
}

.blx-site-footer .blx-site-footer__back-to-top:hover {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-color: #5A6E4F;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(90, 110, 79, 0.2);
}

@media (max-width: 767px) {
    .blx-site-footer .blx-site-footer__main-card {
        padding: 24px 18px 20px;
        border-radius: 18px;
    }

    .blx-site-footer .blx-site-footer__nav-title {
        font-size: 0.9375rem;
    }

    .blx-site-footer .blx-site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .blx-site-footer .blx-site-footer__back-to-top {
        width: 100%;
        justify-content: center;
    }
}

/* ===== PAGE: privacy ===== */
#privacy-content.policy-content { color: #1F261E; font-family: 'M PLUS 1', sans-serif; font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; word-break: normal; } #privacy-content.policy-content .policy-meta-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background-color: #F3F4EE; border-radius: 16px; margin-bottom: 32px; border: 1px solid rgba(90, 110, 79, 0.15); } #privacy-content.policy-content .policy-pill-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.875rem; color: #5A6E4F; } #privacy-content.policy-content .policy-update-date { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; color: #525E50; font-weight: 500; } #privacy-content.policy-content h2 { font-size: 1.35rem; font-weight: 800; color: #1F261E; line-height: 1.35; margin-top: 40px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid rgba(90, 110, 79, 0.15); position: relative; } #privacy-content.policy-content h2::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 48px; height: 2px; background: #9CAE74; border-radius: 9999px; } #privacy-content.policy-content h3 { font-size: 1.1rem; font-weight: 700; color: #3D4B35; line-height: 1.4; margin-top: 24px; margin-bottom: 12px; } #privacy-content.policy-content p { color: #525E50; margin-bottom: 16px; text-align: justify; } #privacy-content.policy-content ul, #privacy-content.policy-content ol { color: #525E50; margin-bottom: 20px; padding-left: 24px; } #privacy-content.policy-content li { margin-bottom: 8px; line-height: 1.7; } #privacy-content.policy-content strong { color: #1F261E; font-weight: 600; } @media (max-width: 767px) { #privacy-content.policy-content { font-size: 0.9375rem; line-height: 1.75; hyphens: auto; } #privacy-content.policy-content h2 { font-size: 1rem; margin-top: 28px; margin-bottom: 12px; } #privacy-content.policy-content h3 { font-size: 0.875rem; margin-top: 20px; margin-bottom: 8px; } #privacy-content.policy-content .policy-meta-bar { padding: 10px 14px; margin-bottom: 20px; } }

/* ===== PAGE: terms ===== */
.policy-content { width: 100%; max-width: 900px; margin: 0 auto; padding: 40px 20px 80px; font-family: 'M PLUS 1', sans-serif; color: #1F261E; line-height: 1.8; hyphens: auto; } .policy-content .policy-card { background: #FFFFFF; border-radius: 24px; padding: 48px 40px; box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06); border: 1px solid rgba(90, 110, 79, 0.12); } .policy-content .policy-meta-pill { display: inline-flex; align-items: center; gap: 8px; background: #F3F4EE; border: 1px solid rgba(90, 110, 79, 0.15); color: #525E50; font-size: 0.875rem; font-weight: 500; padding: 6px 16px; border-radius: 9999px; margin-bottom: 32px; } .policy-content .policy-meta-pill i { color: #5A6E4F; font-size: 1.1rem; } .policy-content .policy-section { margin-bottom: 36px; } .policy-content .policy-section:last-child { margin-bottom: 0; } .policy-content h2 { font-size: 1.25rem; font-weight: 700; color: #1F261E; margin-bottom: 16px; position: relative; padding-left: 14px; line-height: 1.4; letter-spacing: -0.01em; overflow-wrap: anywhere; } .policy-content h2::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; background: #9CAE74; border-radius: 9999px; } .policy-content p { font-size: 0.975rem; color: #525E50; margin-bottom: 16px; line-height: 1.8; overflow-wrap: anywhere; } .policy-content ul, .policy-content ol { margin: 0 0 20px 0; padding-left: 24px; color: #525E50; font-size: 0.95rem; line-height: 1.75; } .policy-content li { margin-bottom: 10px; overflow-wrap: anywhere; } .policy-content li:last-child { margin-bottom: 0; } .policy-content strong { color: #1F261E; font-weight: 600; } @media (max-width: 767px) { .policy-content { padding: 24px 16px 56px; } .policy-content .policy-card { padding: 24px 18px; border-radius: 18px; } .policy-content h2 { font-size: 1rem; padding-left: 10px; margin-bottom: 12px; } .policy-content p, .policy-content ul, .policy-content ol { font-size: 0.875rem; line-height: 1.65; } .policy-content ul, .policy-content ol { padding-left: 18px; } }

/* ===== PAGE: cookies ===== */
.policy-content { padding: 40px 16px 80px; max-width: 960px; margin: 0 auto; color: #1F261E; font-family: 'M PLUS 1', sans-serif; } .policy-content .policy-card { background: #FFFFFF; border-radius: 24px; padding: 40px; box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06); border: 1px solid rgba(90, 110, 79, 0.12); } .policy-content .policy-section { margin-bottom: 36px; } .policy-content .policy-section:last-child { margin-bottom: 0; } .policy-content h2 { font-size: 1.35rem; font-weight: 800; color: #1F261E; line-height: 1.3; margin-top: 0; margin-bottom: 16px; position: relative; padding-bottom: 10px; overflow-wrap: anywhere; } .policy-content h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 4px; background: #9CAE74; border-radius: 9999px; } .policy-content h3 { font-size: 1.05rem; font-weight: 700; color: #3D4B35; line-height: 1.35; margin-top: 0; margin-bottom: 10px; display: flex; align-items: center; overflow-wrap: anywhere; } .policy-content h3 i { color: #5A6E4F; font-size: 1.2rem; flex-shrink: 0; } .policy-content p { font-size: 0.95rem; line-height: 1.75; color: #525E50; margin-bottom: 14px; overflow-wrap: anywhere; } .policy-content .policy-cookie-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; } .policy-content .policy-cookie-item { background: #FBFBF9; border: 1px solid rgba(90, 110, 79, 0.1); border-radius: 18px; padding: 22px; } .policy-content .policy-cookie-item p { margin-bottom: 0; font-size: 0.9rem; } .policy-content .policy-browser-list { list-style: none; padding-left: 0; margin: 16px 0; } .policy-content .policy-browser-list li { padding: 10px 14px; margin-bottom: 8px; background: #F3F4EE; border-radius: 12px; font-size: 0.9rem; color: #3D4B35; overflow-wrap: anywhere; } .policy-content .policy-browser-list strong { color: #1F261E; } .policy-content .policy-notice { background: #EFF3EA; border-left: 4px solid #5A6E4F; padding: 14px 18px; border-radius: 8px; font-size: 0.88rem; color: #3D4B35; margin-top: 18px; } .policy-content .policy-notice i { color: #5A6E4F; font-size: 1.05rem; vertical-align: middle; } @media (max-width: 767px) { .policy-content { padding: 24px 12px 60px; } .policy-content .policy-card { padding: 24px 18px; border-radius: 18px; } .policy-content h2 { font-size: 1.15rem; } .policy-content h3 { font-size: 0.98rem; } .policy-content p { font-size: 0.88rem; line-height: 1.65; } .policy-content .policy-cookie-grid { grid-template-columns: 1fr; gap: 14px; } .policy-content .policy-cookie-item { padding: 16px; border-radius: 14px; } .policy-content .policy-browser-list li { font-size: 0.82rem; padding: 8px 12px; } .policy-content .policy-notice { font-size: 0.82rem; padding: 12px 14px; } }

/* ===== PAGE: about ===== */
.about-portal-section {
  background-color: #FBFBF9;
  color: #1F261E;
  font-family: 'M PLUS 1', sans-serif;
}

.about-portal-section .text-dark-sage {
  color: #1F261E;
}

.about-portal-section .text-muted-sage {
  color: #525E50;
}

.about-portal-section .text-primary-sage {
  color: #5A6E4F;
}

.about-portal-section .about-badge-capsule {
  background-color: #EFF3EA;
  color: #3D4B35;
  border: 1px solid rgba(90, 110, 79, 0.2);
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.about-portal-section .about-heading {
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.25;
  color: #1F261E;
  overflow-wrap: anywhere;
}

.about-portal-section .about-accent-line {
  height: 4px;
  width: 48px;
  background: #9CAE74;
  border-radius: 9999px;
}

.about-portal-section .about-text {
  line-height: 1.65;
  color: #525E50;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.about-portal-section .lead-text {
  font-size: 1.05rem;
  color: #1F261E;
  font-weight: 500;
}

.about-portal-section .about-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.about-portal-section .about-pill-btn-primary {
  background-color: #5A6E4F;
  color: #FFFFFF;
  border: 1px solid #5A6E4F;
}

.about-portal-section .about-pill-btn-primary:hover {
  background-color: #46563D;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(70, 85, 60, 0.15);
}

.about-portal-section .about-pill-btn-outline {
  background-color: #EFF3EA;
  color: #3D4B35;
  border: 1px solid rgba(90, 110, 79, 0.2);
}

.about-portal-section .about-pill-btn-outline:hover {
  background-color: #5A6E4F;
  color: #FFFFFF;
}

.about-portal-section .about-main-img {
  width: 100%;
  height: 340px;
  object-fit: cover;
}

.about-portal-section .about-floating-stat-card {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(90, 110, 79, 0.12);
  min-width: 200px;
}

.about-portal-section .stat-icon-capsule {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #5A6E4F;
  flex-shrink: 0;
}

.about-portal-section .about-interactive-block {
  background-color: #F3F4EE;
  border: 1px solid rgba(90, 110, 79, 0.08);
}

.about-portal-section .section-subtitle {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1F261E;
  overflow-wrap: anywhere;
}

.about-portal-section .mission-tab-btn {
  border: 1px solid rgba(90, 110, 79, 0.2);
  background-color: transparent;
  color: #3D4B35;
  padding: 8px 20px;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  cursor: pointer;
}

.about-portal-section .mission-tab-btn:hover {
  background-color: rgba(90, 110, 79, 0.1);
  color: #1F261E;
}

.about-portal-section .mission-tab-btn.active {
  background-color: #5A6E4F;
  color: #FFFFFF;
  border-color: #5A6E4F;
}

.about-portal-section .mission-pane {
  display: none;
  background: #FFFFFF;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(70, 85, 60, 0.04);
}

.about-portal-section .mission-pane.active {
  display: block;
}

.about-portal-section .feature-chip {
  background: #F3F4EE;
  color: #3D4B35;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.about-portal-section .about-pillar-card {
  background: #FFFFFF;
  border: 1px solid rgba(90, 110, 79, 0.08);
  box-shadow: 0 8px 30px rgba(70, 85, 60, 0.04);
  transition: all 0.3s ease;
}

.about-portal-section .about-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(70, 85, 60, 0.1);
  background-color: #F6F8F2;
}

.about-portal-section .pillar-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background-color: #EFF3EA;
  color: #5A6E4F;
}

.about-portal-section .pillar-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1F261E;
  overflow-wrap: anywhere;
}

.about-portal-section .pillar-link {
  color: #5A6E4F;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.about-portal-section .pillar-link:hover {
  color: #3D4B35;
}

.about-portal-section .about-editorial-principles {
  background: #EBECE4;
  border: 1px solid rgba(90, 110, 79, 0.1);
}

.about-portal-section .editorial-badge-box {
  background: #FFFFFF;
  border: 1px solid rgba(90, 110, 79, 0.1);
}

@media (max-width: 767px) {
  .about-portal-section .about-heading {
    font-size: 1.125rem;
  }
  .about-portal-section .section-subtitle {
    font-size: 1rem;
  }
  .about-portal-section .pillar-title {
    font-size: 0.875rem;
  }
  .about-portal-section .about-main-img {
    height: 220px;
  }
  .about-portal-section .about-floating-stat-card {
    position: static;
    margin-top: 12px;
  }
  .about-portal-section .mission-pill-nav {
    flex-direction: column;
  }
  .about-portal-section .mission-tab-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===== PAGE: contact ===== */
.blx-contact-section {
  background-color: #FBFBF9;
  font-family: 'M PLUS 1', sans-serif;
  color: #1F261E;
}

.blx-contact-section .blx-contact-card {
  background-color: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
  border: 1px solid rgba(90, 110, 79, 0.12);
}

.blx-contact-section .blx-badge-pill {
  background: #EFF3EA;
  color: #3D4B35;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 9999px;
  border: 1px solid rgba(90, 110, 79, 0.2);
}

.blx-contact-section .blx-badge-pill i {
  color: #5A6E4F;
  font-size: 1rem;
}

.blx-contact-section .blx-card-title {
  color: #1F261E;
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.blx-contact-section .blx-accent-bar {
  width: 48px;
  height: 4px;
  background: #9CAE74;
  border-radius: 9999px;
}

.blx-contact-section .blx-card-desc {
  color: #525E50;
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 680px;
}

.blx-contact-section .blx-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.blx-contact-section .blx-form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1F261E;
  margin-bottom: 0;
}

.blx-contact-section .blx-required {
  color: #C59B4B;
  font-weight: 700;
}

.blx-contact-section .blx-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.blx-contact-section .blx-input-icon {
  position: absolute;
  left: 16px;
  color: #7B8779;
  font-size: 1.15rem;
  pointer-events: none;
  z-index: 2;
}

.blx-contact-section .blx-form-control {
  width: 100%;
  background-color: #F8F9F5;
  border: 1px solid rgba(90, 110, 79, 0.2);
  border-radius: 12px;
  padding: 12px 16px 12px 46px;
  font-size: 0.95rem;
  color: #1F261E;
  outline: none;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.blx-contact-section .blx-form-control::placeholder {
  color: #7B8779;
  opacity: 0.85;
}

.blx-contact-section .blx-form-control:focus {
  background-color: #FFFFFF;
  border-color: #5A6E4F;
  box-shadow: 0 0 0 4px rgba(90, 110, 79, 0.12);
}

.blx-contact-section select.blx-form-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%235A6E4F' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}

.blx-contact-section textarea.blx-form-control {
  padding-left: 16px;
  resize: vertical;
  min-height: 140px;
}

.blx-contact-section .blx-consent-box {
  background-color: #F8F9F5;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(90, 110, 79, 0.12);
}

.blx-contact-section .blx-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  cursor: pointer;
  accent-color: #5A6E4F;
  flex-shrink: 0;
}

.blx-contact-section .blx-consent-label {
  font-size: 0.875rem;
  color: #525E50;
  line-height: 1.5;
  cursor: pointer;
  margin-bottom: 0;
}

.blx-contact-section .blx-link {
  color: #5A6E4F;
  text-decoration: underline;
  font-weight: 600;
}

.blx-contact-section .blx-link:hover {
  color: #495A3F;
}

.blx-contact-section .blx-btn-submit {
  background: linear-gradient(135deg, #647B57 0%, #4D5F43 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 9999px;
  padding: 14px 42px;
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(70, 85, 60, 0.18);
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.blx-contact-section .blx-btn-submit:hover {
  background: linear-gradient(135deg, #526746 0%, #3D4C35 100%);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(70, 85, 60, 0.24);
}

.blx-contact-section .blx-btn-submit:active {
  transform: translateY(0);
}

@media (max-width: 767px) {
  .blx-contact-section .blx-card-title {
    font-size: 1.35rem;
    hyphens: auto;
  }
  .blx-contact-section .blx-contact-card {
    padding: 24px 16px !important;
    border-radius: 18px;
  }
  .blx-contact-section .blx-btn-submit {
    width: 100%;
    padding: 14px 20px;
  }
}

/* ===== PAGE: tech-news ===== */
.news-catalog-section { background-color: #FBFBF9; position: relative; } .news-catalog-section .news-catalog-badge { background-color: #EFF3EA; color: #5A6E4F; padding: 6px 14px; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; } .news-catalog-section .news-catalog-heading { font-size: 1.875rem; font-weight: 800; color: #1F261E; line-height: 1.25; overflow-wrap: anywhere; } .news-catalog-section .news-catalog-accent-line { height: 4px; width: 48px; background: linear-gradient(135deg, #9CAE74 0%, #5A6E4F 100%); border-radius: 9999px; } .news-catalog-section .news-catalog-intro { font-size: 0.9375rem; line-height: 1.6; color: #525E50; } .news-catalog-section .news-catalog-filter-bar { border-bottom: 1px solid rgba(90, 110, 79, 0.12); padding-bottom: 16px; } .news-catalog-section .news-filter-btn { border: 1px solid rgba(90, 110, 79, 0.2); background-color: transparent; color: #525E50; padding: 8px 18px; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; display: inline-flex; align-items: center; cursor: pointer; transition: all 0.25s ease; } .news-catalog-section .news-filter-btn:hover { background-color: #EFF3EA; color: #1F261E; border-color: #5A6E4F; } .news-catalog-section .news-filter-btn.active { background-color: #5A6E4F; color: #FFFFFF; border-color: #5A6E4F; } .news-catalog-section .news-bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .news-catalog-section .news-bento-card.bento-span-2 { grid-column: span 2; } .news-catalog-section .news-bento-card { background-color: #FFFFFF; border-radius: 24px; border: 1px solid rgba(90, 110, 79, 0.1); box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; height: 100%; } .news-catalog-section .news-bento-card:hover { transform: translateY(-4px); box-shadow: 0 14px 38px rgba(70, 85, 60, 0.12); background-color: #F6F8F2; } .news-catalog-section .news-card-inner { padding: 20px; display: flex; flex-direction: column; height: 100%; } .news-catalog-section .news-card-image-wrap { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; margin-bottom: 16px; background-color: #EBECE4; } .news-catalog-section .bento-span-2 .news-card-image-wrap { aspect-ratio: 16 / 9; } .news-catalog-section .news-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .news-catalog-section .news-bento-card:hover .news-card-img { transform: scale(1.04); } .news-catalog-section .news-card-tag { position: absolute; top: 12px; left: 12px; background: rgba(251, 251, 249, 0.92); backdrop-filter: blur(8px); color: #3D4B35; font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 9999px; border: 1px solid rgba(90, 110, 79, 0.15); } .news-catalog-section .news-card-content { display: flex; flex-direction: column; flex-grow: 1; } .news-catalog-section .news-card-meta { font-size: 0.75rem; color: #7B8779; font-weight: 500; } .news-catalog-section .news-meta-divider { color: rgba(90, 110, 79, 0.3); } .news-catalog-section .news-card-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; margin-bottom: 8px; overflow-wrap: anywhere; } .news-catalog-section .news-card-title a { color: #1F261E; text-decoration: none; transition: color 0.2s ease; } .news-catalog-section .news-card-title a:hover { color: #5A6E4F; } .news-catalog-section .news-card-excerpt { font-size: 0.8125rem; line-height: 1.5; margin-bottom: 12px; color: #525E50; overflow-wrap: anywhere; } .news-catalog-section .news-card-footer { border-top: 1px solid rgba(90, 110, 79, 0.08); } .news-catalog-section .news-btn-action { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 18px; border-radius: 9999px; background-color: #EFF3EA; color: #3D4B35; font-size: 0.8125rem; font-weight: 600; text-decoration: none; transition: all 0.25s ease; } .news-catalog-section .news-btn-action:hover { background-color: #5A6E4F; color: #FFFFFF; } .news-catalog-section .news-empty-state { background-color: #FFFFFF; border-radius: 24px; border: 1px dashed rgba(90, 110, 79, 0.2); } .news-catalog-section .news-empty-icon { font-size: 2.5rem; color: #7B8779; } .news-catalog-section .news-empty-text { color: #525E50; font-weight: 600; } .subscribe-section { background-color: #F3F4EE; position: relative; } .subscribe-section .subscribe-banner-card { background: linear-gradient(135deg, #FFFFFF 0%, #F6F8F2 100%); border-radius: 24px; border: 1px solid rgba(90, 110, 79, 0.12); padding: 36px 32px; box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06); } .subscribe-section .subscribe-badge { background-color: #EFF3EA; color: #5A6E4F; padding: 6px 14px; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; } .subscribe-section .subscribe-title { font-size: 1.5rem; font-weight: 800; color: #1F261E; line-height: 1.3; overflow-wrap: anywhere; } .subscribe-section .subscribe-desc { font-size: 0.875rem; color: #525E50; line-height: 1.6; overflow-wrap: anywhere; } .subscribe-section .subscribe-input-wrapper { position: relative; display: flex; align-items: center; } .subscribe-section .subscribe-input-icon { position: absolute; left: 16px; color: #7B8779; font-size: 1.125rem; pointer-events: none; } .subscribe-section .subscribe-input { width: 100%; background-color: #FFFFFF; border: 1px solid rgba(90, 110, 79, 0.2); border-radius: 9999px; padding: 12px 18px 12px 42px; font-size: 0.875rem; color: #1F261E; outline: none; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .subscribe-section .subscribe-input::placeholder { color: #7B8779; opacity: 1; } .subscribe-section .subscribe-input:focus { border-color: #5A6E4F; box-shadow: 0 0 0 3px rgba(90, 110, 79, 0.15); } .subscribe-section .subscribe-submit-btn { background-color: #5A6E4F; color: #FFFFFF; border: none; border-radius: 9999px; padding: 12px 28px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background-color 0.25s ease, transform 0.2s ease; white-space: nowrap; } .subscribe-section .subscribe-submit-btn:hover { background-color: #46563D; color: #FFFFFF; transform: translateY(-1px); } .subscribe-section .subscribe-policy-note { font-size: 0.6875rem; color: #7B8779; } @media (max-width: 991px) { .news-catalog-section .news-bento-grid { grid-template-columns: repeat(2, 1fr); } .news-catalog-section .news-bento-card.bento-span-2 { grid-column: span 1; } .news-catalog-section .bento-span-2 .news-card-image-wrap { aspect-ratio: 1 / 1; } } @media (max-width: 767px) { .news-catalog-section .news-catalog-heading { font-size: 16px; hyphens: auto; } .news-catalog-section .news-card-title { font-size: 14px; hyphens: auto; } .news-catalog-section .news-bento-grid { grid-template-columns: 1fr; } .news-catalog-section .news-bento-card.bento-span-2 { grid-column: span 1; } .news-catalog-section .news-card-inner { padding: 16px; } .subscribe-section .subscribe-banner-card { padding: 24px 18px; } .subscribe-section .subscribe-title { font-size: 16px; hyphens: auto; } }

/* ===== PAGE: gadget-reviews ===== */
.reviews-catalog {
  background-color: #FBFBF9;
  color: #1F261E;
  font-family: 'M PLUS 1', sans-serif;
}

.reviews-catalog .bg-success-brand {
  background-color: #5A6E4F !important;
}

.reviews-catalog .text-success-brand {
  color: #5A6E4F !important;
}

.reviews-catalog .reviews-catalog__title {
  color: #1F261E;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.reviews-catalog .reviews-catalog__accent-line {
  height: 4px;
  width: 48px;
  background: #9CAE74;
  border-radius: 9999px;
  margin-top: 10px;
}

.reviews-catalog .reviews-catalog__lead {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #525E50;
  max-width: 720px;
}

.reviews-catalog .reviews-catalog__search-box {
  width: 100%;
}

.reviews-catalog .reviews-catalog__search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #7B8779;
  font-size: 1.1rem;
  pointer-events: none;
}

.reviews-catalog .reviews-catalog__search-input {
  background-color: #FFFFFF;
  border: 1px solid rgba(90, 110, 79, 0.2);
  border-radius: 9999px;
  padding: 10px 18px 10px 42px;
  font-size: 0.875rem;
  color: #1F261E;
  box-shadow: 0 4px 14px rgba(70, 85, 60, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.reviews-catalog .reviews-catalog__search-input::placeholder {
  color: #7B8779;
  opacity: 1;
}

.reviews-catalog .reviews-catalog__search-input:focus {
  border-color: #5A6E4F;
  outline: none;
  box-shadow: 0 0 0 3px rgba(90, 110, 79, 0.15);
  background-color: #FFFFFF;
  color: #1F261E;
}

.reviews-catalog .reviews-catalog__filter-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #525E50;
}

.reviews-catalog .reviews-catalog__tag-btn {
  background-color: transparent;
  border: 1px solid rgba(90, 110, 79, 0.25);
  color: #3D4B35;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 9999px;
  transition: all 0.25s ease;
  cursor: pointer;
}

.reviews-catalog .reviews-catalog__tag-btn:hover {
  background-color: #EFF3EA;
  border-color: #5A6E4F;
  color: #1F261E;
}

.reviews-catalog .reviews-catalog__tag-btn.active {
  background-color: #5A6E4F;
  border-color: #5A6E4F;
  color: #FFFFFF;
}

.reviews-catalog .reviews-catalog__row-card {
  background-color: #FFFFFF;
  border-radius: 24px;
  border: 1px solid rgba(90, 110, 79, 0.1);
  box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.reviews-catalog .reviews-catalog__row-card:hover {
  transform: translateY(-2px);
  background-color: #F6F8F2;
  box-shadow: 0 14px 38px rgba(70, 85, 60, 0.12);
}

.reviews-catalog .reviews-catalog__img-wrap {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  background-color: #EBECE4;
}

.reviews-catalog .reviews-catalog__img {
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.reviews-catalog .reviews-catalog__row-card:hover .reviews-catalog__img {
  transform: scale(1.04);
}

.reviews-catalog .reviews-catalog__badge-pill {
  background-color: rgba(31, 38, 30, 0.75);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 9999px;
  backdrop-filter: blur(4px);
  letter-spacing: 0.02em;
}

.reviews-catalog .reviews-catalog__content-col {
  min-width: 0;
}

.reviews-catalog .reviews-catalog__item-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1F261E;
  overflow-wrap: anywhere;
}

.reviews-catalog .reviews-catalog__title-link {
  color: #1F261E;
  text-decoration: none;
  transition: color 0.2s ease;
}

.reviews-catalog .reviews-catalog__title-link:hover {
  color: #5A6E4F;
  text-decoration: none;
}

.reviews-catalog .reviews-catalog__excerpt {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #525E50;
  overflow-wrap: anywhere;
}

.reviews-catalog .reviews-catalog__underlined-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #5A6E4F;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.reviews-catalog .reviews-catalog__underlined-link:hover {
  color: #3D4B35;
  text-decoration: underline;
}

.reviews-catalog .reviews-catalog__action-btn {
  background-color: #5A6E4F;
  color: #FFFFFF;
  border-radius: 9999px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(90, 110, 79, 0.2);
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.reviews-catalog .reviews-catalog__action-btn:hover,
.reviews-catalog .reviews-catalog__action-btn:focus {
  background-color: #46563D;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(70, 85, 60, 0.28);
}

.reviews-catalog .reviews-catalog__reset-btn {
  background-color: #EFF3EA;
  color: #3D4B35;
  border: 1px solid rgba(90, 110, 79, 0.2);
  border-radius: 9999px;
  padding: 8px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.reviews-catalog .reviews-catalog__reset-btn:hover {
  background-color: #5A6E4F;
  color: #FFFFFF;
  border-color: #5A6E4F;
}

.reviews-catalog .reviews-catalog__no-results-icon {
  font-size: 2.5rem;
}

@media (max-width: 767.98px) {
  .reviews-catalog .reviews-catalog__title {
    font-size: 16px;
  }
  
  .reviews-catalog .reviews-catalog__item-title {
    font-size: 14px;
  }

  .reviews-catalog .reviews-catalog__row-card .row {
    flex-direction: column;
  }

  .reviews-catalog .reviews-catalog__content-col {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
  }

  .reviews-catalog .reviews-catalog__action-col {
    padding-top: 0.5rem;
    padding-bottom: 1.25rem;
  }

  .reviews-catalog .reviews-catalog__action-btn {
    width: 100%;
  }
}

/* ===== PAGE: smart-home ===== */
.smart-home-catalog { background-color: #FBFBF9; color: #1F261E; font-family: 'M PLUS 1', sans-serif; } .smart-home-catalog .smart-home-catalog__badge { background-color: #EFF3EA; color: #5A6E4F; font-size: 0.8125rem; font-weight: 600; border: 1px solid rgba(90, 110, 79, 0.2); } .smart-home-catalog .smart-home-catalog__title { color: #1F261E; font-size: 2rem; letter-spacing: -0.02em; } .smart-home-catalog .smart-home-catalog__accent-bar { width: 48px; height: 4px; background-color: #9CAE74; border-radius: 9999px; } .smart-home-catalog .smart-home-catalog__desc { max-width: 680px; font-size: 0.95rem; line-height: 1.65; color: #525E50; } .smart-home-catalog .smart-home-catalog__card { background-color: #FFFFFF; border-radius: 24px; overflow: hidden; border: 1px solid rgba(90, 110, 79, 0.12); box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06); transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.35s ease; } .smart-home-catalog .smart-home-catalog__card:hover { transform: translateY(-4px); background-color: #F6F8F2; box-shadow: 0 14px 38px rgba(70, 85, 60, 0.12); } .smart-home-catalog .smart-home-catalog__img-wrapper { border-radius: 20px 20px 0 0; overflow: hidden; } .smart-home-catalog .smart-home-catalog__img { transition: transform 0.4s ease; } .smart-home-catalog .smart-home-catalog__card:hover .smart-home-catalog__img { transform: scale(1.04); } .smart-home-catalog .smart-home-catalog__card-title { font-size: 1.15rem; line-height: 1.4; overflow-wrap: anywhere; } .smart-home-catalog .smart-home-catalog__card-title a { color: #1F261E; text-decoration: none; transition: color 0.2s ease; } .smart-home-catalog .smart-home-catalog__card:hover .smart-home-catalog__card-title a { color: #5A6E4F; } .smart-home-catalog .smart-home-catalog__card-text { font-size: 0.875rem; line-height: 1.6; color: #525E50; overflow-wrap: anywhere; } .smart-home-catalog .smart-home-catalog__btn { background-color: #5A6E4F; color: #FFFFFF; border-radius: 9999px; padding: 10px 24px; font-weight: 600; font-size: 0.875rem; transition: background-color 0.25s ease, transform 0.25s ease; } .smart-home-catalog .smart-home-catalog__btn:hover { background-color: #46563D; color: #FFFFFF; transform: translateY(-2px); } @media (max-width: 767px) { .smart-home-catalog .smart-home-catalog__title { font-size: 1.5rem; } .smart-home-catalog .smart-home-catalog__card-title { font-size: 1.05rem; } .smart-home-catalog .smart-home-catalog__card { border-radius: 18px; } }

.ec-comment-card.ec-comment-main {
    background-color: #FFFFFF;
    border: 1px solid rgba(90, 110, 79, 0.12);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
}

.ec-comment-card.ec-comment-main:hover {
    border-color: rgba(90, 110, 79, 0.25);
    box-shadow: 0 12px 36px rgba(70, 85, 60, 0.09);
}

.ec-comment-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.ec-avatar-wrap {
    flex-shrink: 0;
}

.ec-comment-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #EFF3EA;
    display: block;
}

.ec-meta-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ec-author-badge-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ec-comment-author {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1F261E;
    line-height: 1.3;
}

.ec-user-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #5A6E4F;
    background-color: #EFF3EA;
    padding: 3px 9px;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}

.ec-comment-time {
    font-size: 0.75rem;
    color: #7B8779;
    font-weight: 500;
}

.ec-comment-body {
    margin-bottom: 16px;
}

.ec-comment-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #354133;
    margin: 0;
    word-break: break-word;
}

.ec-comment-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ec-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.15);
    background-color: #FBFBF9;
    color: #525E50;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.ec-action-btn:hover {
    background-color: #EFF3EA;
    color: #1F261E;
    border-color: #9CAE74;
}

.ec-action-btn i {
    font-size: 0.9375rem;
    color: #5A6E4F;
}

.ec-action-count {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1F261E;
}

.ec-reply-btn:hover i {
    transform: translateX(-2px);
    transition: transform 0.2s ease;
}

.ec-comment-card.ec-comment-reply {
    background-color: #F8F9F5;
    border: 1px solid rgba(90, 110, 79, 0.14);
    border-left: 3px solid #5A6E4F;
    border-radius: 20px;
    padding: 20px 22px;
    margin-left: 36px;
    margin-top: 14px;
    position: relative;
    box-shadow: 0 4px 18px rgba(70, 85, 60, 0.04);
}

@media (max-width: 576px) {
    .ec-comment-card.ec-comment-reply {
        margin-left: 16px;
        padding: 16px;
    }
}

.ec-comment-card.ec-comment-reply .ec-comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #FFFFFF;
    display: block;
}

.ec-badge-editor {
    background-color: #5A6E4F;
    color: #FFFFFF;
    font-weight: 700;
}

.ec-comment-card.ec-comment-reply .ec-comment-text {
    font-size: 0.875rem;
    line-height: 1.68;
    color: #2D382B;
    margin: 0;
    word-break: break-word;
}

.ec-comment-card.ec-comment-reply .ec-action-btn {
    background-color: #FFFFFF;
    border-color: rgba(90, 110, 79, 0.18);
    padding: 5px 12px;
    font-size: 0.75rem;
}

.ec-comment-card.ec-comment-reply .ec-action-btn:hover {
    background-color: #EFF3EA;
    border-color: #5A6E4F;
}


/* ===== PAGE TEMPLATE: tech-news ===== */
.site-header {
    font-family: 'M PLUS 1', sans-serif;
    z-index: 1030;
    box-shadow: 0 4px 20px rgba(70, 85, 60, 0.06);
}

.site-header .site-header-top-bar {
    background-color: #F3F4EE;
    border-bottom: 1px solid rgba(90, 110, 79, 0.1);
    font-size: 0.8125rem;
    color: #525E50;
}

.site-header .site-header-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 9999px;
    background-color: #5A6E4F;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
}

.site-header .site-header-ticker-text {
    color: #1F261E;
    font-weight: 500;
}

.site-header .site-header-meta {
    color: #525E50;
    font-weight: 500;
}

.site-header .site-header-navbar {
    background-color: #FBFBF9;
    padding: 12px 0;
    border-bottom: 1px solid rgba(90, 110, 79, 0.12);
}

.site-header .site-header-brand {
    text-decoration: none;
}

.site-header .site-header-logo {
    width: 42px;
    height: 42px;
    max-width: 46px;
    object-fit: contain;
}

.site-header .site-header-brand-text {
    font-size: 1.375rem;
    font-weight: 800;
    color: #1F261E;
    letter-spacing: -0.02em;
}

.site-header .site-header-nav-list {
    gap: 4px;
}

.site-header .site-header-nav-link {
    color: #1F261E;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 8px 14px;
    border-radius: 9999px;
    transition: color 0.25s ease, background-color 0.25s ease;
}

.site-header .site-header-nav-link:hover,
.site-header .site-header-nav-link:focus {
    color: #5A6E4F;
    background-color: #F3F4EE;
}

.site-header .site-header-cta-btn {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-radius: 9999px;
    padding: 9px 20px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    box-shadow: 0 4px 12px rgba(90, 110, 79, 0.25);
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    text-decoration: none;
}

.site-header .site-header-cta-btn:hover,
.site-header .site-header-cta-btn:focus {
    background-color: #46563D;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(90, 110, 79, 0.35);
}

.site-header .site-header-toggler {
    border: 1px solid rgba(90, 110, 79, 0.25);
    background-color: #F3F4EE;
    border-radius: 8px;
    padding: 6px 10px;
    color: #1F261E;
    outline: none;
    box-shadow: none;
}

.site-header .site-header-toggler:focus {
    box-shadow: 0 0 0 2px rgba(90, 110, 79, 0.2);
}

.site-header .site-header-toggler-icon {
    font-size: 1.5rem;
    line-height: 1;
    color: #1F261E;
    display: inline-block;
    vertical-align: middle;
}

.blx-detail-page {
    background-color: #FBFBF9;
    color: #1F261E;
    font-family: 'M PLUS 1', sans-serif;
}

.blx-detail-hero {
    padding-top: 32px;
    padding-bottom: 20px;
}

.blx-detail-hero .blx-detail-hero__card {
    background: linear-gradient(135deg, #F5F7F0 0%, #E9EEE2 100%);
    border-radius: 24px;
    padding: 40px 36px;
    border: 1px solid rgba(90, 110, 79, 0.12);
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
}

.blx-detail-hero .blx-breadcrumb-link {
    color: #525E50;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.blx-detail-hero .blx-breadcrumb-link:hover {
    color: #1F261E;
}

.blx-detail-hero .blx-breadcrumb-sep {
    font-size: 0.75rem;
    color: #7B8779;
}

.blx-detail-hero .blx-breadcrumb-current {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5A6E4F;
}

.blx-detail-hero .blx-badge-pill {
    background-color: #EFF3EA;
    border: 1px solid rgba(90, 110, 79, 0.2);
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5A6E4F;
}

.blx-detail-hero .blx-detail-hero__title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.25;
    color: #1F261E;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    overflow-wrap: anywhere;
}

.blx-detail-hero .blx-detail-hero__subtitle {
    font-size: 1rem;
    line-height: 1.6;
    color: #525E50;
    margin-bottom: 20px;
    max-width: 860px;
    overflow-wrap: anywhere;
}

.blx-detail-hero .blx-meta-item {
    font-size: 0.8125rem;
    color: #525E50;
    font-weight: 600;
    background-color: #FFFFFF;
    padding: 5px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.15);
}

.blx-detail-hero .blx-meta-item i {
    color: #5A6E4F;
}

.blx-article-card {
    background-color: #FFFFFF;
    border-radius: 24px;
    padding: 36px 32px;
    border: 1px solid rgba(90, 110, 79, 0.12);
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
}

.blx-article-cover-wrap {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: #F3F4EE;
}

.blx-article-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blx-numbered-header {
    margin-bottom: 18px;
}

.blx-section-num {
    background-color: #5A6E4F;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.875rem;
    padding: 4px 10px;
    border-radius: 9999px;
    line-height: 1;
    flex-shrink: 0;
}

.blx-section-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1F261E;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.blx-article-rich-text p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #1F261E;
    margin-bottom: 16px;
    overflow-wrap: anywhere;
}

.blx-quote-callout {
    background-color: #F3F4EE;
    border-left: 4px solid #5A6E4F;
    padding: 20px 24px;
    border-radius: 0 16px 16px 0;
}

.blx-quote-icon {
    font-size: 1.75rem;
    color: #9CAE74;
    flex-shrink: 0;
}

.blx-quote-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1F261E;
    font-style: italic;
}

.blx-quote-author {
    font-size: 0.8125rem;
    color: #525E50;
    font-weight: 500;
}

.blx-article-secondary-img-wrap {
    border-radius: 18px;
    overflow: hidden;
    max-height: 360px;
    background-color: #F3F4EE;
}

.blx-article-secondary-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blx-custom-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blx-bullet-item {
    position: relative;
    padding-left: 24px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #1F261E;
}

.blx-bullet-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #5A6E4F;
}

.blx-bullet-title {
    color: #1F261E;
    display: block;
    margin-bottom: 2px;
}

.blx-bullet-desc {
    color: #525E50;
}

.blx-comments-section {
    background-color: #FFFFFF;
    border-radius: 24px;
    padding: 32px 28px;
    border: 1px solid rgba(90, 110, 79, 0.12);
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
}

.blx-comments-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1F261E;
}

.blx-comment-count-pill {
    background-color: #EFF3EA;
    color: #5A6E4F;
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 4px 12px;
    border-radius: 9999px;
}

.ec-comment-card {
    background-color: #FBFBF9;
    border: 1px solid rgba(90, 110, 79, 0.12);
    border-radius: 18px;
    padding: 18px;
}

.ec-comment-reply {
    background-color: #F3F4EE;
}

.ec-comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ec-avatar-wrap {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

.ec-comment-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ec-meta-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ec-author-badge-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ec-comment-author {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1F261E;
}

.ec-user-badge {
    background-color: #FFFFFF;
    border: 1px solid rgba(90, 110, 79, 0.2);
    font-size: 0.6875rem;
    font-weight: 600;
    color: #5A6E4F;
    padding: 1px 8px;
    border-radius: 9999px;
}

.ec-badge-editor {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-color: #5A6E4F;
}

.ec-comment-time {
    font-size: 0.75rem;
    color: #7B8779;
}

.ec-comment-body p {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #1F261E;
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}

.blx-comment-action-btn {
    background-color: #FFFFFF;
    border: 1px solid rgba(90, 110, 79, 0.2);
    color: #525E50;
    border-radius: 9999px;
    padding: 4px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.blx-comment-action-btn:hover {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-color: #5A6E4F;
}

.blx-comment-action-btn.active {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-color: #5A6E4F;
}

.blx-comment-action-btn.active i {
    color: #FFFFFF;
}

.blx-comment-form-box {
    background-color: #F3F4EE;
    border: 1px solid rgba(90, 110, 79, 0.12);
}

.blx-form-heading {
    font-size: 1.125rem;
    font-weight: 800;
    color: #1F261E;
}

.blx-form-sub {
    font-size: 0.8125rem;
    color: #525E50;
}

.blx-auth-notice {
    background-color: #EFF3EA;
    border: 1px solid #9CAE74;
    color: #3D4B35;
    font-size: 0.8125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blx-form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1F261E;
    margin-bottom: 4px;
}

.blx-form-input {
    background-color: #FFFFFF;
    border: 1px solid rgba(90, 110, 79, 0.25);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: #1F261E;
}

.blx-form-input:focus {
    background-color: #FFFFFF;
    border-color: #5A6E4F;
    box-shadow: 0 0 0 3px rgba(90, 110, 79, 0.15);
    color: #1F261E;
}

.blx-form-input::placeholder {
    color: #7B8779;
    opacity: 1;
}

.blx-btn-primary {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-radius: 9999px;
    padding: 10px 24px;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 12px rgba(90, 110, 79, 0.25);
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.blx-btn-primary:hover,
.blx-btn-primary:focus {
    background-color: #46563D;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.blx-sidebar-wrapper {
    top: 90px;
    z-index: 10;
}

.blx-sidebar-card {
    background-color: #FFFFFF;
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgba(90, 110, 79, 0.12);
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
}

.blx-sidebar-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1F261E;
}

.blx-sidebar-title i {
    color: #5A6E4F;
}

.blx-fact-tile {
    background-color: #FBFBF9;
    border: 1px solid rgba(90, 110, 79, 0.1);
}

.blx-fact-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #EFF3EA;
    color: #5A6E4F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.blx-fact-label {
    font-size: 0.75rem;
    color: #7B8779;
    display: block;
    font-weight: 500;
}

.blx-fact-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1F261E;
}

.blx-related-card {
    background-color: #FBFBF9;
    border: 1px solid rgba(90, 110, 79, 0.1);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.blx-related-card:hover {
    background-color: #F6F8F2;
    transform: translateY(-2px);
}

.blx-related-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #5A6E4F;
    background-color: #EFF3EA;
    padding: 2px 8px;
    border-radius: 9999px;
}

.blx-related-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
}

.blx-related-link {
    color: #1F261E;
    text-decoration: none;
    transition: color 0.2s ease;
    overflow-wrap: anywhere;
}

.blx-related-link:hover {
    color: #5A6E4F;
}

.blx-related-date {
    font-size: 0.6875rem;
    color: #7B8779;
}

.blx-cta-widget {
    background: linear-gradient(135deg, #F3F4EE 0%, #E9EEE2 100%);
    border: 1px solid rgba(90, 110, 79, 0.2);
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
}

.blx-cta-icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #5A6E4F;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.blx-cta-widget-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1F261E;
}

.blx-cta-widget-desc {
    font-size: 0.8125rem;
    color: #525E50;
    line-height: 1.5;
}

.blx-btn-cta-full {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-radius: 9999px;
    padding: 10px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    transition: all 0.25s ease;
    text-decoration: none;
}

.blx-btn-cta-full:hover,
.blx-btn-cta-full:focus {
    background-color: #46563D;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.blx-banner-cta-card {
    background-color: #F3F4EE;
    border: 1px solid rgba(90, 110, 79, 0.15);
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
}

.blx-banner-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #5A6E4F;
    background-color: #FFFFFF;
    padding: 3px 12px;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.2);
}

.blx-banner-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1F261E;
    letter-spacing: -0.02em;
}

.blx-banner-desc {
    font-size: 0.875rem;
    color: #525E50;
}

.blx-site-footer {
    background-color: #FBFBF9;
    padding-top: 40px;
    padding-bottom: 40px;
    color: #1F261E;
    font-family: 'M PLUS 1', sans-serif;
}

.blx-site-footer .blx-site-footer__main-card {
    background-color: #F3F4EE;
    border-radius: 24px;
    padding: 40px 32px 30px;
    border: 1px solid rgba(90, 110, 79, 0.12);
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
}

.blx-site-footer .blx-site-footer__brand-link {
    text-decoration: none;
    color: #1F261E;
}

.blx-site-footer .blx-site-footer__logo {
    width: 44px;
    height: 44px;
    max-width: 44px;
    object-fit: contain;
    display: block;
}

.blx-site-footer .blx-site-footer__brand-name {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1F261E;
}

.blx-site-footer .blx-site-footer__brand-desc {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #525E50;
    margin-bottom: 18px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.blx-site-footer .blx-site-footer__badge-pill {
    background-color: #FFFFFF;
    border: 1px solid rgba(90, 110, 79, 0.2);
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5A6E4F;
}

.blx-site-footer .blx-site-footer__badge-pill i {
    color: #9CAE74;
    font-size: 1rem;
}

.blx-site-footer .blx-site-footer__nav-title {
    font-size: 1rem;
    font-weight: 800;
    color: #1F261E;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 8px;
    line-height: 1.3;
}

.blx-site-footer .blx-site-footer__nav-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 3px;
    background-color: #9CAE74;
    border-radius: 9999px;
}

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

.blx-site-footer .blx-site-footer__link {
    color: #525E50;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.25s ease, transform 0.25s ease;
    overflow-wrap: anywhere;
}

.blx-site-footer .blx-site-footer__link i {
    font-size: 0.95rem;
    color: #5A6E4F;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.blx-site-footer .blx-site-footer__link:hover {
    color: #1F261E;
    transform: translateX(3px);
}

.blx-site-footer .blx-site-footer__link:hover i {
    color: #495A3F;
}

.blx-site-footer .blx-site-footer__divider {
    border: 0;
    border-top: 1px solid rgba(90, 110, 79, 0.12);
    opacity: 1;
}

.blx-site-footer .blx-site-footer__copyright {
    font-size: 0.8125rem;
    color: #7B8779;
    font-weight: 500;
}

.blx-site-footer .blx-site-footer__back-to-top {
    background-color: #EFF3EA;
    color: #3D4B35;
    border: 1px solid rgba(90, 110, 79, 0.2);
    border-radius: 9999px;
    padding: 8px 18px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blx-site-footer .blx-site-footer__back-to-top i {
    font-size: 0.9rem;
}

.blx-site-footer .blx-site-footer__back-to-top:hover {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-color: #5A6E4F;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(90, 110, 79, 0.2);
}

@media (max-width: 991.98px) {
    .site-header #headerNavbarNav {
        background-color: #FFFFFF;
        border: 1px solid rgba(90, 110, 79, 0.15);
        border-radius: 16px;
        padding: 16px;
        margin-top: 12px;
        box-shadow: 0 10px 30px rgba(70, 85, 60, 0.08);
    }

    .site-header .site-header-nav-list {
        gap: 6px;
    }

    .site-header .site-header-nav-link {
        padding: 10px 16px;
        border-radius: 8px;
    }

    .site-header .site-header-action-wrapper {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(90, 110, 79, 0.1);
        width: 100%;
    }

    .site-header .site-header-cta-btn {
        width: 100%;
        justify-content: center;
    }

    .blx-sidebar-wrapper {
        position: static !important;
    }
}

@media (max-width: 767.98px) {
    .blx-detail-hero .blx-detail-hero__card {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .blx-detail-hero .blx-detail-hero__title {
        font-size: 1.125rem;
        hyphens: auto;
    }

    .blx-detail-hero .blx-detail-hero__subtitle {
        font-size: 0.875rem;
    }

    .blx-article-card {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .blx-section-title {
        font-size: 1rem;
    }

    .blx-comments-section {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .blx-comments-title {
        font-size: 1rem;
    }

    .blx-site-footer .blx-site-footer__main-card {
        padding: 24px 18px 20px;
        border-radius: 18px;
    }

    .blx-site-footer .blx-site-footer__nav-title {
        font-size: 0.9375rem;
    }

    .blx-site-footer .blx-site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .blx-site-footer .blx-site-footer__back-to-top {
        width: 100%;
        justify-content: center;
    }

    .ec-comment-reply {
        margin-left: 0 !important;
    }
}

/* ===== PAGE TEMPLATE: gadget-reviews ===== */
.blx-detail-wrapper {
    background-color: #FBFBF9;
    font-family: 'M PLUS 1', sans-serif;
    color: #1F261E;
}

.blx-detail-hero {
    background: linear-gradient(135deg, #F5F7F0 0%, #E9EEE2 100%);
    border-bottom: 1px solid rgba(90, 110, 79, 0.12);
}

.blx-breadcrumb {
    list-style: none;
    font-size: 0.8125rem;
    font-weight: 500;
}

.blx-breadcrumb-link {
    color: #525E50;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blx-breadcrumb-link:hover {
    color: #1F261E;
}

.blx-breadcrumb-sep {
    color: #9CAE74;
    font-size: 0.75rem;
}

.blx-breadcrumb-item.active {
    color: #1F261E;
    font-weight: 600;
}

.blx-badge-pill {
    background-color: #5A6E4F;
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blx-badge-pill.blx-badge-sub {
    background-color: #EFF3EA;
    color: #3D4B35;
    border: 1px solid rgba(90, 110, 79, 0.2);
}

.blx-detail-hero-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.3;
    color: #1F261E;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.blx-detail-hero-lead {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #525E50;
    max-width: 900px;
    overflow-wrap: anywhere;
}

.blx-metric-card {
    background-color: #FFFFFF;
    border: 1px solid rgba(90, 110, 79, 0.12);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(70, 85, 60, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blx-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(70, 85, 60, 0.08);
}

.blx-metric-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #7B8779;
    letter-spacing: 0.02em;
}

.blx-metric-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1F261E;
    line-height: 1.2;
}

.blx-metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: #EFF3EA;
    color: #5A6E4F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.blx-dash-panel {
    background-color: #FFFFFF;
    border-radius: 20px;
    border: 1px solid rgba(90, 110, 79, 0.12);
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
}

.blx-sec-number {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #5A6E4F;
    background-color: #EFF3EA;
    padding: 4px 10px;
    border-radius: 8px;
}

.blx-panel-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1F261E;
    line-height: 1.25;
}

.blx-rich-article .blx-text-para {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: #525E50;
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
}

.blx-callout-quote {
    background-color: #F3F4EE;
    border-left: 4px solid #9CAE74;
    border-radius: 8px;
}

.blx-quote-icon {
    font-size: 1.5rem;
    color: #5A6E4F;
    display: block;
    margin-bottom: 4px;
}

.blx-quote-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1F261E;
    line-height: 1.6;
}

.blx-feature-bullets {
    background-color: #F8F9F5;
    border-radius: 14px;
    border: 1px solid rgba(90, 110, 79, 0.08);
}

.blx-sub-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1F261E;
}

.blx-custom-list {
    list-style: none;
}

.blx-list-item {
    font-size: 0.875rem;
    color: #525E50;
    line-height: 1.5;
}

.blx-list-item i {
    color: #5A6E4F;
    font-size: 1rem;
    flex-shrink: 0;
}

.blx-sharp-img-container {
    border: 1px solid rgba(90, 110, 79, 0.2);
    border-radius: 0;
    overflow: hidden;
}

.blx-sharp-img {
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: cover;
    display: block;
}

.blx-img-caption {
    font-size: 0.75rem;
    color: #7B8779;
    font-weight: 500;
}

.blx-img-status-tag {
    font-size: 0.75rem;
    color: #5A6E4F;
    font-weight: 600;
}

.blx-striped-table {
    border-collapse: collapse;
    font-size: 0.875rem;
}

.blx-striped-table tr {
    border-bottom: 1px solid rgba(90, 110, 79, 0.08);
}

.blx-striped-table tr:nth-child(even) {
    background-color: #F8F9F5;
}

.blx-striped-table th {
    padding: 10px 12px;
    color: #1F261E;
    font-weight: 600;
    width: 40%;
}

.blx-striped-table td {
    padding: 10px 12px;
    color: #525E50;
    font-weight: 500;
}

.blx-cta-card {
    background: linear-gradient(135deg, #F3F4EE 0%, #E8EDE0 100%);
    border: 1px solid rgba(90, 110, 79, 0.16);
    border-radius: 20px;
}

.blx-cta-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background-color: #5A6E4F;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.blx-cta-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1F261E;
}

.blx-cta-desc {
    font-size: 0.875rem;
    color: #525E50;
}

.blx-btn-primary {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-radius: 9999px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(90, 110, 79, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.blx-btn-primary:hover,
.blx-btn-primary:focus {
    background-color: #46563D;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.blx-related-card {
    background-color: #FFFFFF;
    border-radius: 16px;
    border: 1px solid rgba(90, 110, 79, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blx-related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(70, 85, 60, 0.08);
}

.blx-related-thumb {
    width: 72px;
    height: 72px;
    border: 1px solid rgba(90, 110, 79, 0.15);
    object-fit: cover;
    border-radius: 8px;
}

.blx-related-date {
    font-size: 0.75rem;
    color: #7B8779;
    font-weight: 500;
}

.blx-related-title {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
}

.blx-related-link {
    color: #1F261E;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blx-related-link:hover {
    color: #5A6E4F;
}

.blx-related-author {
    font-size: 0.75rem;
    color: #525E50;
}

.ec-comment-card {
    background-color: #FFFFFF;
    border: 1px solid rgba(90, 110, 79, 0.12);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.ec-comment-card.ec-comment-reply {
    background-color: #F8F9F5;
    border-left: 3px solid #5A6E4F;
}

.ec-comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ec-comment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.ec-author-badge-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ec-comment-author {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1F261E;
}

.ec-user-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    background-color: #EFF3EA;
    color: #5A6E4F;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.2);
}

.ec-user-badge.ec-badge-editor {
    background-color: #5A6E4F;
    color: #FFFFFF;
}

.ec-comment-time {
    font-size: 0.75rem;
    color: #7B8779;
}

.ec-comment-text {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #525E50;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.ec-like-btn,
.ec-reply-btn {
    background: none;
    border: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #7B8779;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.ec-like-btn:hover,
.ec-reply-btn:hover {
    color: #5A6E4F;
    background-color: #EFF3EA;
}

.ec-like-btn.is-active {
    color: #5A6E4F;
    font-weight: 700;
}

.blx-form-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #1F261E;
}

.blx-form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1F261E;
}

.blx-input,
.blx-textarea {
    background-color: #F8F9F5;
    border: 1px solid rgba(90, 110, 79, 0.2);
    color: #1F261E;
    border-radius: 10px;
    font-size: 0.875rem;
}

.blx-input:focus,
.blx-textarea:focus {
    background-color: #FFFFFF;
    border-color: #5A6E4F;
    box-shadow: 0 0 0 3px rgba(90, 110, 79, 0.15);
}

.blx-input::placeholder,
.blx-textarea::placeholder {
    color: #7B8779;
}

@media (max-width: 767.98px) {
    .blx-detail-hero-title {
        font-size: 1.125rem;
        line-height: 1.35;
    }

    .blx-panel-title {
        font-size: 1rem;
    }

    .blx-sub-title {
        font-size: 0.875rem;
    }

    .blx-cta-card {
        padding: 20px 16px;
    }

    .blx-striped-table th,
    .blx-striped-table td {
        display: block;
        width: 100%;
    }

    .blx-striped-table th {
        padding-bottom: 2px;
        background-color: #F3F4EE;
    }

    .blx-striped-table td {
        padding-top: 2px;
    }
}

/* ===== PAGE TEMPLATE: smart-home ===== */
.blx-detail-body {
    background-color: #FBFBF9;
    color: #1F261E;
    font-family: 'M PLUS 1', sans-serif;
    overflow-x: hidden;
}

.blx-detail-wrapper {
    min-height: 60vh;
}


.site-header {
    font-family: 'M PLUS 1', sans-serif;
    z-index: 1030;
    box-shadow: 0 4px 20px rgba(70, 85, 60, 0.06);
}

.site-header .site-header-top-bar {
    background-color: #F3F4EE;
    border-bottom: 1px solid rgba(90, 110, 79, 0.1);
    font-size: 0.8125rem;
    color: #525E50;
}

.site-header .site-header-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 9999px;
    background-color: #5A6E4F;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
}

.site-header .site-header-ticker-text {
    color: #1F261E;
    font-weight: 500;
}

.site-header .site-header-meta {
    color: #525E50;
    font-weight: 500;
}

.site-header .site-header-navbar {
    background-color: #FBFBF9;
    padding: 12px 0;
    border-bottom: 1px solid rgba(90, 110, 79, 0.12);
}

.site-header .site-header-brand {
    text-decoration: none;
}

.site-header .site-header-logo {
    width: 42px;
    height: 42px;
    max-width: 46px;
    object-fit: contain;
}

.site-header .site-header-brand-text {
    font-size: 1.375rem;
    font-weight: 800;
    color: #1F261E;
    letter-spacing: -0.02em;
}

.site-header .site-header-nav-list {
    gap: 4px;
}

.site-header .site-header-nav-link {
    color: #1F261E;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 8px 14px;
    border-radius: 9999px;
    transition: color 0.25s ease, background-color 0.25s ease;
}

.site-header .site-header-nav-link:hover,
.site-header .site-header-nav-link:focus,
.site-header .site-header-nav-link.active {
    color: #5A6E4F;
    background-color: #EFF3EA;
}

.site-header .site-header-cta-btn {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-radius: 9999px;
    padding: 9px 20px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    box-shadow: 0 4px 12px rgba(90, 110, 79, 0.25);
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    text-decoration: none;
}

.site-header .site-header-cta-btn:hover,
.site-header .site-header-cta-btn:focus {
    background-color: #46563D;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(90, 110, 79, 0.35);
}

.site-header .site-header-toggler {
    border: 1px solid rgba(90, 110, 79, 0.25);
    background-color: #F3F4EE;
    border-radius: 8px;
    padding: 6px 10px;
    color: #1F261E;
    outline: none;
    box-shadow: none;
}

.site-header .site-header-toggler-icon {
    font-size: 1.5rem;
    line-height: 1;
    color: #1F261E;
    display: inline-block;
    vertical-align: middle;
}


.blx-breadcrumb-area {
    background-color: #F3F4EE;
    border-bottom: 1px solid rgba(90, 110, 79, 0.08);
}

.blx-breadcrumb-list {
    font-size: 0.8125rem;
    color: #525E50;
}

.blx-breadcrumb-link {
    color: #525E50;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.blx-breadcrumb-link:hover {
    color: #1F261E;
}

.blx-breadcrumb-sep {
    color: #9CAE74;
    font-size: 0.75rem;
}

.blx-breadcrumb-current {
    color: #1F261E;
    font-weight: 600;
    overflow-wrap: anywhere;
}


.blx-sticky-col {
    position: sticky;
    top: 90px;
    z-index: 10;
}

.blx-sticky-panel {
    background-color: #FFFFFF;
    border: 1px solid rgba(90, 110, 79, 0.12);
}

.blx-category-pill {
    background-color: #EFF3EA;
    color: #3D4B35;
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid rgba(90, 110, 79, 0.2);
}

.blx-category-pill i {
    color: #5A6E4F;
}

.blx-detail-h1 {
    font-size: 1.625rem;
    font-weight: 800;
    color: #1F261E;
    line-height: 1.3;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.blx-detail-lead {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #525E50;
    overflow-wrap: anywhere;
}

.blx-meta-chip {
    background-color: #F3F4EE;
    color: #525E50;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(90, 110, 79, 0.1);
}

.blx-meta-chip i {
    color: #5A6E4F;
}

.blx-cta-hint {
    font-size: 0.75rem;
    color: #7B8779;
    font-weight: 500;
    display: block;
}

.blx-btn-primary {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-radius: 9999px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    box-shadow: 0 4px 14px rgba(90, 110, 79, 0.25);
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    text-decoration: none;
}

.blx-btn-primary:hover,
.blx-btn-primary:focus {
    background-color: #46563D;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(90, 110, 79, 0.35);
}


.blx-main-image-wrap {
    position: relative;
    padding: 8px;
}

.blx-offset-shape {
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: 6px;
    left: 6px;
    background-color: #EFF3EA;
    border-radius: 24px;
    border: 1px solid rgba(90, 110, 79, 0.15);
    z-index: 1;
}

.blx-image-frame {
    position: relative;
    z-index: 2;
    background-color: #EBECE4;
    border: 1px solid rgba(90, 110, 79, 0.12);
}

.blx-hero-img {
    height: 380px;
    object-fit: cover;
    display: block;
}


.blx-key-facts-card {
    background-color: #F3F4EE;
    border: 1px solid rgba(90, 110, 79, 0.15);
}

.blx-facts-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1F261E;
}

.blx-facts-title i {
    color: #5A6E4F;
}

.blx-fact-badge {
    background-color: #FFFFFF;
    color: #3D4B35;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid rgba(90, 110, 79, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blx-fact-badge i {
    color: #9CAE74;
}


.blx-section-heading {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1F261E;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.blx-num-prefix {
    background: linear-gradient(135deg, #647B57 0%, #4D5F43 100%);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 9999px;
    letter-spacing: 0.05em;
}


.blx-rich-text p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #525E50;
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
}

.blx-styled-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.25rem;
}

.blx-styled-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    font-size: 0.9375rem;
    color: #525E50;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.blx-styled-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #5A6E4F;
}

.blx-quote-card {
    background-color: #EFF3EA;
    border-left: 4px solid #5A6E4F;
}

.blx-quote-icon {
    font-size: 1.5rem;
    color: #5A6E4F;
}

.blx-quote-text {
    font-size: 0.9375rem;
    font-style: italic;
    color: #1F261E;
    line-height: 1.6;
    overflow-wrap: anywhere;
}


.blx-accordion-item {
    border: 1px solid rgba(90, 110, 79, 0.15);
    background-color: #FFFFFF;
    overflow: hidden;
}

.blx-accordion-btn {
    background-color: #F3F4EE;
    color: #1F261E;
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 14px 20px;
    box-shadow: none !important;
}

.blx-accordion-btn:not(.collapsed) {
    background-color: #EFF3EA;
    color: #3D4B35;
}

.blx-accordion-body {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #525E50;
    padding: 16px 20px;
    overflow-wrap: anywhere;
}


.blx-split-cta-card {
    background: linear-gradient(135deg, #F5F7F0 0%, #E9EEE2 100%);
    border: 1px solid rgba(90, 110, 79, 0.2);
}

.blx-cta-split-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #1F261E;
    overflow-wrap: anywhere;
}

.blx-cta-split-desc {
    font-size: 0.875rem;
    color: #525E50;
    overflow-wrap: anywhere;
}


.blx-related-card {
    background-color: #FFFFFF;
    border: 1px solid rgba(90, 110, 79, 0.12);
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.blx-related-card:hover {
    background-color: #F6F8F2;
    transform: translateY(-2px);
}

.blx-related-thumb-wrap {
    width: 120px;
    height: 80px;
    overflow: hidden;
}

.blx-related-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blx-meta-chip-sm {
    font-size: 0.75rem;
    color: #7B8779;
    font-weight: 500;
}

.blx-related-title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.blx-related-link {
    color: #1F261E;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blx-related-link:hover {
    color: #5A6E4F;
}


.ec-comment-card {
    background-color: #FFFFFF;
    border: 1px solid rgba(90, 110, 79, 0.12);
    border-radius: 16px;
    padding: 18px;
}

.ec-comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ec-avatar-wrap {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.ec-comment-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.ec-author-badge-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ec-comment-author {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1F261E;
}

.ec-user-badge {
    background-color: #EFF3EA;
    color: #5A6E4F;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid rgba(90, 110, 79, 0.2);
}

.ec-badge-editor {
    background-color: #5A6E4F;
    color: #FFFFFF;
}

.ec-comment-time {
    font-size: 0.75rem;
    color: #7B8779;
}

.ec-comment-text {
    font-size: 0.875rem;
    color: #525E50;
    line-height: 1.6;
    margin-bottom: 12px;
    overflow-wrap: anywhere;
}

.blx-comment-like-btn,
.blx-comment-reply-btn {
    background-color: #EFF3EA;
    color: #3D4B35;
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(90, 110, 79, 0.15);
    transition: all 0.2s ease;
}

.blx-comment-like-btn:hover,
.blx-comment-reply-btn:hover {
    background-color: #5A6E4F;
    color: #FFFFFF;
}

.blx-comment-like-btn.active {
    background-color: #5A6E4F;
    color: #FFFFFF;
}


.blx-comment-form-wrap {
    background-color: #F3F4EE;
    border: 1px solid rgba(90, 110, 79, 0.15);
}

.blx-form-title {
    font-size: 1rem;
    font-weight: 800;
    color: #1F261E;
}

.blx-form-title i {
    color: #5A6E4F;
}

.blx-auth-msg-box {
    background-color: #FFF3CD;
    color: #856404;
    border: 1px solid #FFEEBA;
    font-size: 0.8125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blx-form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1F261E;
    margin-bottom: 4px;
}

.blx-form-input,
.blx-form-textarea {
    background-color: #FFFFFF;
    border: 1px solid rgba(90, 110, 79, 0.2);
    color: #1F261E;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.875rem;
}

.blx-form-input:focus,
.blx-form-textarea:focus {
    background-color: #FFFFFF;
    border-color: #5A6E4F;
    box-shadow: 0 0 0 3px rgba(90, 110, 79, 0.15);
    color: #1F261E;
}

.blx-form-input::placeholder,
.blx-form-textarea::placeholder {
    color: #7B8779;
    opacity: 0.8;
}


.blx-site-footer {
    background-color: #FBFBF9;
    padding-top: 40px;
    padding-bottom: 40px;
    color: #1F261E;
    font-family: 'M PLUS 1', sans-serif;
}

.blx-site-footer .blx-site-footer__main-card {
    background-color: #F3F4EE;
    border-radius: 24px;
    padding: 40px 32px 30px;
    border: 1px solid rgba(90, 110, 79, 0.12);
    box-shadow: 0 8px 30px rgba(70, 85, 60, 0.06);
}

.blx-site-footer .blx-site-footer__brand-link {
    text-decoration: none;
    color: #1F261E;
}

.blx-site-footer .blx-site-footer__logo {
    width: 44px;
    height: 44px;
    max-width: 44px;
    object-fit: contain;
    display: block;
}

.blx-site-footer .blx-site-footer__brand-name {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1F261E;
}

.blx-site-footer .blx-site-footer__brand-desc {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #525E50;
    margin-bottom: 18px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.blx-site-footer .blx-site-footer__badge-pill {
    background-color: #FFFFFF;
    border: 1px solid rgba(90, 110, 79, 0.2);
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5A6E4F;
}

.blx-site-footer .blx-site-footer__badge-pill i {
    color: #9CAE74;
    font-size: 1rem;
}

.blx-site-footer .blx-site-footer__nav-title {
    font-size: 1rem;
    font-weight: 800;
    color: #1F261E;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 8px;
    line-height: 1.3;
}

.blx-site-footer .blx-site-footer__nav-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 3px;
    background-color: #9CAE74;
    border-radius: 9999px;
}

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

.blx-site-footer .blx-site-footer__link {
    color: #525E50;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.25s ease, transform 0.25s ease;
    overflow-wrap: anywhere;
}

.blx-site-footer .blx-site-footer__link i {
    font-size: 0.95rem;
    color: #5A6E4F;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.blx-site-footer .blx-site-footer__link:hover {
    color: #1F261E;
    transform: translateX(3px);
}

.blx-site-footer .blx-site-footer__link:hover i {
    color: #495A3F;
}

.blx-site-footer .blx-site-footer__divider {
    border: 0;
    border-top: 1px solid rgba(90, 110, 79, 0.12);
    opacity: 1;
}

.blx-site-footer .blx-site-footer__copyright {
    font-size: 0.8125rem;
    color: #7B8779;
    font-weight: 500;
}

.blx-site-footer .blx-site-footer__back-to-top {
    background-color: #EFF3EA;
    color: #3D4B35;
    border: 1px solid rgba(90, 110, 79, 0.2);
    border-radius: 9999px;
    padding: 8px 18px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blx-site-footer .blx-site-footer__back-to-top i {
    font-size: 0.9rem;
}

.blx-site-footer .blx-site-footer__back-to-top:hover {
    background-color: #5A6E4F;
    color: #FFFFFF;
    border-color: #5A6E4F;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(90, 110, 79, 0.2);
}


@media (max-width: 991.98px) {
    .blx-sticky-col {
        position: static;
        margin-bottom: 24px;
    }

    .site-header #headerNavbarNav {
        background-color: #FFFFFF;
        border: 1px solid rgba(90, 110, 79, 0.15);
        border-radius: 16px;
        padding: 16px;
        margin-top: 12px;
        box-shadow: 0 10px 30px rgba(70, 85, 60, 0.08);
    }

    .site-header .site-header-nav-list {
        gap: 6px;
    }

    .site-header .site-header-nav-link {
        padding: 10px 16px;
        border-radius: 8px;
    }

    .site-header .site-header-action-wrapper {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(90, 110, 79, 0.1);
        width: 100%;
    }

    .site-header .site-header-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .blx-detail-h1 {
        font-size: 1.125rem;
    }

    .blx-section-heading {
        font-size: 1rem;
    }

    .blx-cta-split-title {
        font-size: 0.875rem;
    }

    .blx-hero-img {
        height: 220px;
    }

    .blx-site-footer .blx-site-footer__main-card {
        padding: 24px 18px 20px;
        border-radius: 18px;
    }

    .blx-site-footer .blx-site-footer__nav-title {
        font-size: 0.9375rem;
    }

    .blx-site-footer .blx-site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .blx-site-footer .blx-site-footer__back-to-top {
        width: 100%;
        justify-content: center;
    }
}

/* mobile-text-guard */
@media (max-width: 767px) {
  h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, td, th, label {
    overflow-wrap: anywhere;
  }
  a, button, .btn {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  img, video, iframe {
    max-width: 100%;
  }
}