body{
    background-color: #F3F5F7;
}

section {
    padding: 40px 0;
}
.btn-primary-custom {
    background-color: #f6d65a;
    color: #3c5e63;
    border: none;
    font-weight: 600;
}
.btn-primary-custom:hover {
    background-color: #e1c249;
    color: #2e4a4e;
}
.btn-outline-light-custom {
    color: #e0ebe6;
    border-color: #e0ebe6;
    font-weight: 600;
}
.btn-outline-light-custom:hover {
    background-color: #e0ebe6;
    color: #3c5e63;
}
.category-label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    color: #6d6d6d;
    margin-bottom: 0.5rem;
}
.category-tabs .btn {
    text-transform: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 0;
    border: 1px solid #dee2e6;
    color: #3c5e63;
    background-color: #f8f9fa;
    margin-right: 0.25rem;
}
.category-tabs .btn.active,
.category-tabs .btn:hover {
    background-color: #e9ecef;
}
.search-article {
    max-width: 400px;
}
.article-card {
    border: none;
    margin: 1.5 rem;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    background-color: white;
    border-radius: 0.3rem;
}

.article-meta {
    font-size: 0.75rem;
    color: #999;
    font-style: italic;
}
.article-title {
    margin-top: 0.3rem;
    font-weight: 700;
    font-size: 1rem;
    color: #3c5e63;
}
.article-content {
    font-size: 0.85rem;
    color: #575757;
    margin-top: 0.5rem;
    min-height: 4.5rem;
}
.btn-outline-loker {
    --bs-btn-color: #335c67;
    --bs-btn-border-color: #335c67;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #335c67;
    --bs-btn-hover-border-color: #335c67;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #335c67;
    --bs-btn-active-border-color: #335c67;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #335c67;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #335c67;
    --bs-gradient: none;
}
.btn-outline-loker:hover {
    background-color: #e09f3e !important;
    color: white;
}
.btn:hover {
    background-color: #e09f3e !important;
    color: white;
}
.read-more {
    font-weight: 600;
    color: #3c5e63;
    font-size: 0.9rem;
    text-decoration: none;
}
.read-more:hover {
    text-decoration: underline;
}
.btn-load-more {
    margin: 2rem auto 3rem auto;
    display: block;
    background-color: #e9ecef;
    border: 1px solid #ccc;
    color: #3c5e63;
    font-weight: 600;
}

/* Responsive overrides */
@media (max-width: 768px) {
    .article-content {
        min-height: auto;
    }
}
/* Related articles card image height */
.related-article-img {
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
}
/* Share button spacing */
.btn-share {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}
/* Breadcrumb small text color */
.breadcrumb-item small {
    color: #757575;
}
/* Social icons spacing */
.social-icons a {
    margin-right: 1rem;
    font-size: 1.3rem;
    color: #ddd;
}
.social-icons a:hover {
    color: white;
}
/* Header logo size */
.navbar-brand img {
    height: 40px;
    width: auto;
}
/* Scroll to top button style */
#btnScrollTop {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: none;
    background-color: #3a5f69;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 0.5rem 0.65rem;
    cursor: pointer;
    z-index: 1031;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}
#btnScrollTop:hover {
    background-color: #2e4750;
}

/* Pagination style */
.pagination > li > a,
.pagination > li > span {
    padding: 6px 12px;
    margin: 0 2px;
    font-size: 0.9rem;
}
.pagination .page-item.active .page-link {
    background-color: #3a606e;
    border-color: #3a606e;
    color: #fff;
    pointer-events: none;
}

.arrow-guide {
    display: inline-block;
    border-top: 2px dotted #f89e1b;
    width: 110px;
    position: relative;
    top: 10px;
    margin-left: 1rem;
    margin-right: 1rem;
}

.pagination .page-link {
    color: #222 !important;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: background 0.2s, color 0.2s;
}
.pagination .page-link:hover,
.pagination .page-link:focus {
    color: #f89e1b !important;
    background-color: #fffbe8;
}
.pagination .page-item.active .page-link {
    color: #fff !important;
    background-color: #3a606e;
    border-color: #3a606e;
    pointer-events: none;
}

/* Responsive image in blog content (force all images to fit container) */
.blog-content img,
.blog-detail img,
.article-card img,
.related-article-img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive for iframe (YouTube, etc) */
.blog-content iframe,
.blog-detail iframe {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Extra force for small screens */
@media (max-width: 576px) {
    .blog-content img,
    .blog-detail img,
    .article-card img,
    .related-article-img {
        max-width: 50% !important;
        width: 50% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .blog-content iframe,
    .blog-detail iframe {
        max-width: 50% !important;
        width: 50% !important;
        height: auto !important;
        min-height: 180px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Optional: for tablets */
@media (max-width: 900px) {
    .blog-content img,
    .blog-detail img,
    .article-card img,
    .related-article-img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .blog-content iframe,
    .blog-detail iframe {
        max-width: 500px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 180px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}