/* Related Articles added by Tuyen Pham */
section.related-articles.product-related-articles{
	width: 100%;
	max-width: none; 
    margin: 0;         /* no auto-centering box */
    padding: 0;
}
/* Use CSS grid — BEST for auto-flow layouts */
.product-related-articles .article-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 25% each on desktop */
    gap: 30px; /* spacing between cards */
}

/* Tablet – 2 per row (50%) */
@media (max-width: 1024px){
    .product-related-articles .article-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile – 1 per row (100%) */
@media (max-width: 600px){
    .product-related-articles .article-list {
        grid-template-columns: 1fr;
    }
}
section.related-articles.product-related-articles .article-list .article .image {
    position: relative;
    line-height: 0;
    background-color: #d9d9d9;
    max-height: 170px;
    overflow: hidden;
}
section.related-articles.product-related-articles .article-list .article .image a {
    transform: scale(1);
    transition: all 100ms ease-in;
    display: flex;
    justify-content: center;
}
section.related-articles.product-related-articles .article-list .article .image a img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}
section.related-articles.product-related-articles .article-list .article .image .category {
    position: absolute;
    top: 20px;
    left: 0;
    background-color: #d62717;
    color: #fff;
    padding: 6px 8px 6px 10px;
    font: 400 0.8rem/1rem 'montserrat';
    font-weight: 600;
    text-transform: uppercase;
    z-index: 2;
}
section.related-articles.product-related-articles .article-list .article .image .category a {
    color: #fff;
}
section.related-articles.product-related-articles .article-list .article .content{
	    border-radius: 1px;
    border: 1px solid #d9d9d9;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
	
    padding: 15px 20px;

}
.product-related-articles .article-list .article{
	flex-basis: 100% !important;
    width: 100% !important;
    margin-bottom: 30px;
	    display: flex;
    flex-direction: column;
}
section.related-articles.product-related-articles .article-list .article .content .date {
    font: 400 0.875rem/1.125rem 'montserrat';
    text-transform: uppercase;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}
.woocommerce div.product section.product-tabs .woocommerce-tabs 
section.related-articles.product-related-articles .article-list .article .content h3, section.related-articles.product-related-articles .article-list .article .content h3{
	    font: 600 1.2rem/1.8rem 'montserrat';
    letter-spacing: -0.025rem;
    color: #231f20;
	padding: 0;
	margin-top: 5px;
	margin-bottom: 15px;
}
section.related-articles.product-related-articles .article-list .article .content .cta a {
    display: flex;
    position: relative;
    color: #006cb4;
    transition: all 100ms ease-in;
    font-size: 0.9rem;
    text-transform: uppercase;
    outline: none;
    font-weight: 600;
    align-items: flex-end;
    display: inline-block;
}
section.related-articles.product-related-articles .article-list .article .content .cta a:after {
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20enable-background%3D%22new%200%200%2030%2030%22%20viewBox%3D%220%200%2030%2030%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22%22%3E%3Cswitch%3E%3CforeignObject%20height%3D%221%22%20requiredExtensions%3D%22http%3A%2F%2Fns.adobe.com%2FAdobeIllustrator%2F10.0%2F%22%20width%3D%221%22%2F%3E%3Cpath%20d%3D%22m12.6%2021.8c.3-.3.5-.6.8-.8%201.1-1%202.1-1.9%203-2.7l1.7-1.3c.4-.3.8-.6%201.1-.8.4-.3.9-.6%201.3-1-.1-.1-.2-.2-.2-.4-.5-.7-.9-1.3-1.4-2-.7-.8-1-1.1-1.4-1.5l-.2-.3c-.8-.8-1.7-1.6-2.8-2.7-.6-.5-1.1-1.1-1.7-1.6-.8-.7-1.6-1.5-2.5-2.3-.3-.2-.7-.4-1.1-.6h-.1c-.1-.1-.2-.1-.3-.1-.3.1-.6%200-.8-.1l.1.1c.1.2.1.5%200%20.7v.2c0%20.2.1.4.3.6.3.5.6%201%20.9%201.3l.9.9c1.2%201.2%202.5%202.4%203.6%203.6.9.9%201.5%201.6%202.1%202.3l.4.5.2.1-.1.2v.2l-.3.3-1.2.8c-.3.2-.7.5-1%20.7-.1.1-.3.2-.4.4-.9.7-1.7%201.5-2.5%202.3s-1.5%201.6-2%202.7c-.5.9-.8%202-1.1%203.4%201.2-.3%202.1-.9%202.9-1.5.8-.5%201.3-1%201.8-1.6z%22%20fill%3D%22rgb%280%2C108%2C180%29%22%2F%3E%3C%2Fswitch%3E%3C%2Fsvg%3E);
    width: 20px;
    height: 20px;
    margin-left: 2px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
}