/* Happy Ecotech — bổ sung style cho các trang CMS mới (giữ nguyên theme gốc). */
:root {
    --he-accent: #1f9d55;
    --he-accent-dark: #187f44;
    --he-ink: #1d2a32;
    --he-muted: #68727a;
    --he-border: #e6ebe8;
    --he-bg-soft: #f6faf8;
}

main { min-height: 40vh; }

/* ---------- FIX: logo footer (logo-full.png lớn) không được giới hạn -> tràn/đè cột link ---------- */
.footer .widget-wrapper .footer-widget .logo img,
.footer .logo img {
    max-width: 180px;
    width: auto;
    height: auto;
}

/* ---------- FIX: icon dịch vụ ở trang KHÔNG dùng .service-section (danh sách, card link) ---------- */
.service-list-section .single-service .icon,
.service-card-link .icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 26px;
    background: var(--he-bg-soft);
}
.service-list-section .single-service .icon img,
.service-card-link .icon img {
    max-width: 72px;
    max-height: 72px;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Card dịch vụ ở trang danh sách: nền trắng + viền như card khác */
.service-list-section .single-service {
    background: #fff;
    border: 1px solid var(--he-border);
    border-radius: 14px;
    padding: 34px 24px;
    text-align: center;
    width: 100%;
    box-shadow: 0 8px 24px rgba(29, 42, 50, .05);
}
.service-list-section .single-service .content h3 { font-size: 22px; margin-bottom: 12px; }

/* ---------- Page hero / breadcrumb ---------- */
.page-hero {
    background: linear-gradient(135deg, #eef6f1 0%, #e3f0ff 100%);
    padding: 130px 0 55px;
}
.page-hero h1 { font-size: 40px; font-weight: 700; color: var(--he-ink); }
.page-hero p { color: var(--he-muted); max-width: 640px; margin: 12px auto 0; }
.page-hero .breadcrumb { margin: 18px 0 0; }
.page-hero .breadcrumb-item, .page-hero .breadcrumb-item a { color: var(--he-muted); text-decoration: none; }
.page-hero .breadcrumb-item a:hover { color: var(--he-accent); }
.page-hero .breadcrumb-item.active { color: var(--he-ink); font-weight: 600; }

/* ---------- Service cards (clickable) ---------- */
.service-card-link { color: inherit; transition: transform .25s ease, box-shadow .25s ease; }
.service-card-link:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(31, 157, 85, .15); }
.service-card-link:focus-visible { outline: 3px solid var(--he-accent); outline-offset: 3px; }
.service-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--he-accent); font-weight: 600; }
.service-more i { transition: transform .2s ease; }
.service-card-link:hover .service-more i { transform: translateX(4px); }

.service-list-section { background: var(--he-bg-soft); }

/* ---------- Service detail ---------- */
.service-cover { width: 100%; border-radius: 14px; }
.service-icon { width: 84px; height: 84px; object-fit: contain; }
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--he-border); }
.feature-list li i { color: var(--he-accent); font-size: 22px; margin-top: 3px; }
.feature-list li p { margin: 4px 0 0; color: var(--he-muted); }
.service-sidebar { background: #fff; border: 1px solid var(--he-border); border-radius: 14px; padding: 26px; box-shadow: 0 8px 24px rgba(29, 42, 50, .05); }
.service-sidebar h4 { font-size: 18px; margin-bottom: 16px; }
.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 0; color: var(--he-ink); text-decoration: none; border-bottom: 1px solid var(--he-border); }
.sidebar-link:hover { color: var(--he-accent); }
.related-list { list-style: none; padding: 0; margin: 0; }
.related-list li a { display: block; padding: 8px 0; color: var(--he-muted); text-decoration: none; }
.related-list li a:hover { color: var(--he-accent); }

/* ---------- Team ---------- */
.single-team { background: #fff; border: 1px solid var(--he-border); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(29, 42, 50, .05); transition: transform .25s ease; }
.single-team:hover { transform: translateY(-6px); }
.team-image { aspect-ratio: 1 / 1; overflow: hidden; background: var(--he-bg-soft); }
.team-image img { width: 100%; height: 100%; object-fit: cover; }
.team-content { padding: 22px 18px 26px; }
.team-content h3 { font-size: 19px; margin-bottom: 4px; }
.team-position { display: block; color: var(--he-accent); font-weight: 600; margin-bottom: 10px; }
.team-content p { color: var(--he-muted); font-size: 14px; }
.team-socials { list-style: none; display: flex; justify-content: center; gap: 10px; padding: 0; margin: 14px 0 0; }
.team-socials a { width: 34px; height: 34px; border-radius: 50%; background: var(--he-bg-soft); color: var(--he-ink); display: inline-flex; align-items: center; justify-content: center; }
.team-socials a:hover { background: var(--he-accent); color: #fff; }

/* ---------- Contact ---------- */
.contact-info { background: #fff; border: 1px solid var(--he-border); border-radius: 14px; padding: 30px; height: 100%; }
.contact-info p { display: flex; align-items: flex-start; gap: 10px; color: var(--he-ink); }
.contact-info p i { color: var(--he-accent); margin-top: 4px; }
.contact-info a { color: inherit; text-decoration: none; }
.contact-info a:hover { color: var(--he-accent); }
.contact-map iframe { width: 100%; height: 220px; border: 0; border-radius: 12px; }
.contact-form-wrap { background: #fff; border: 1px solid var(--he-border); border-radius: 14px; padding: 30px; }
.contact-form-wrap .form-label { font-weight: 600; color: var(--he-ink); }
.contact-form-wrap .req { color: #d6455a; }
.contact-form-wrap .form-control, .contact-form-wrap .form-select { padding: 11px 14px; border-radius: 8px; }
.contact-form-wrap .form-control:focus, .contact-form-wrap .form-select:focus { border-color: var(--he-accent); box-shadow: 0 0 0 .2rem rgba(31, 157, 85, .18); }
.hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 0; width: 0; overflow: hidden; }

/* ---------- Blog ---------- */
.single-news-card { background: #fff; border: 1px solid var(--he-border); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(29, 42, 50, .05); transition: transform .25s ease; }
.single-news-card:hover { transform: translateY(-6px); }
.news-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--he-bg-soft); }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.single-news-card:hover .news-thumb img { transform: scale(1.05); }
.news-body { padding: 22px; }
.news-date { color: var(--he-muted); font-size: 13px; }
.news-body h3 { font-size: 19px; margin: 8px 0 10px; line-height: 1.4; }
.news-body h3 a { color: var(--he-ink); text-decoration: none; }
.news-body h3 a:hover { color: var(--he-accent); }
.news-body p { color: var(--he-muted); font-size: 14px; }
.news-more { display: inline-flex; align-items: center; gap: 6px; color: var(--he-accent); font-weight: 600; text-decoration: none; }
.blog-sidebar { background: #fff; border: 1px solid var(--he-border); border-radius: 14px; padding: 26px; }
.category-list { list-style: none; padding: 0; margin: 0; }
.category-list li a { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--he-border); color: var(--he-ink); text-decoration: none; }
.category-list li a:hover, .category-list li a.active { color: var(--he-accent); }

/* ---------- Post detail ---------- */
.post-cover { width: 100%; border-radius: 14px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; color: var(--he-muted); }
.post-meta i { color: var(--he-accent); }
.post-cat { background: var(--he-bg-soft); color: var(--he-accent); padding: 3px 12px; border-radius: 999px; text-decoration: none; font-size: 13px; }
.post-tags .tag { display: inline-block; margin: 4px 6px 0 0; color: var(--he-muted); font-size: 14px; }

/* ---------- Rich text ---------- */
.richtext-content { color: var(--he-ink); line-height: 1.8; }
.richtext-content h1, .richtext-content h2, .richtext-content h3 { margin: 26px 0 12px; }
.richtext-content p { margin-bottom: 16px; }
.richtext-content img { max-width: 100%; height: auto; border-radius: 10px; }
.richtext-content ul, .richtext-content ol { padding-left: 22px; margin-bottom: 16px; }
.richtext-content a { color: var(--he-accent); }

/* ---------- 404 ---------- */
.error-code { font-size: 120px; font-weight: 800; color: var(--he-accent); line-height: 1; }

/* ---------- Footer bottom ---------- */
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 40px; padding-top: 22px; }
.footer-bottom .copyright { color: rgba(255, 255, 255, .7); margin: 0; }
.footer-bottom-links { list-style: none; display: flex; gap: 20px; justify-content: flex-end; padding: 0; margin: 0; }
.footer-bottom-links a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.footer-bottom-links a:hover { color: #fff; }

/* ---------- Pagination ---------- */
.pagination .page-link { color: var(--he-ink); }
.pagination .page-item.active .page-link { background: var(--he-accent); border-color: var(--he-accent); }

/* ---------- Header submenu ---------- */
.navbar-nav .nav-item .sub-menu { list-style: none; padding: 8px 0; margin: 0; }

@media (max-width: 991px) {
    .footer-bottom-links { justify-content: flex-start; margin-top: 10px; }
    .page-hero { padding-top: 110px; }
    .page-hero h1 { font-size: 30px; }
}