Hiển thị danh sách project Behance trên WordPress

<?php
 function tdk_get_behance_projects($atts)
{
    $atts = shortcode_atts(
        array(
            'username' => '',
            'limit' => 12 //Mình set mặc định 12 luôn vì RSS giới hạn tối đa hiển thị 12 project
        ),
        $atts,
        'behance'
    );
    if (empty($atts['username'])) {
        return '<p>Vui lòng cung cấp username Behance.</p>';
    }

    $rss_url = "https://www.behance.net/feeds/user?username=" . esc_attr($atts['username']);
    $rss = simplexml_load_file($rss_url);

    if (!$rss) {
        return '<p>Không thể lấy hoặc không có dữ liệu RSS từ Behance.</p>';
    }

    $output = "<div class='tdk-behance'>
		 <div class='tdk-behance-containeer'>
   		   <div class='tdk-behance-wrapper'>";
    $count = 0;

    foreach ($rss->channel->item as $item) {
        if ($count >= $atts['limit']) {
            break;
        }

        $title = esc_html($item->title);
        $url = esc_url($item->link);
        $desc = (string) $item->description;

        preg_match('/<img src=[\'"]([^\'"]+)[\'"]/', $desc, $matches);
        $image_url = isset($matches[1]) ? esc_url($matches[1]) : '';

        $output .= "<div class='tdk-behance-projects'>
		      <a href='{$url}' target='_blank' rel='noopener'>
			 <img decoding='async' src='{$image_url}' alt='{$title}' width='808' height='632' title='{$title}' class='tdk-behance-project-img'>
		           <h3 class='tdk-behance-project-title'>{$title}</h3>
		      </a>
		    </div>";
        $count++;
    }

    $output .= '</div></div>';

    return $output;
}

add_shortcode('behance', 'tdk_get_behance_projects');
?>

/*----- PORTFOLIO -----*/
:root{
   --color-gradient-border-white:linear-gradient(135deg, #9d9d9d 0%, rgb(30 30 31) 60%); // Màu viền hình
   --color-heading: #FCFCFC; // Màu tiêu đề
   --color-hover: #ffdb6e; // Màu tiêu đề khi hover
}
.tdk-behance, .tdk-behance * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.tdk-behance .tdk-behance-containeer {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    overflow: hidden;
}
.tdk-behance .tdk-behance-containeer .tdk-behance-wrapper {
    margin-left: 0;
    margin-right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
}
.tdk-behance a > img, .beh-img-tit-cat > img {
    width: 100%;
    height: auto;
}
.tdk-behance .tdk-behance-projects a{
    text-decoration:none!important;
    position:relative;
}
.tdk-behance .tdk-behance-projects{
    padding-top:6px;
    margin-bottom: clamp(0.625rem, 0.4808rem + 0.641vw, 1.25rem);
    transition:.2s all;
    max-width: 47%;
}
.tdk-behance .tdk-behance-projects:hover{
    transform:translatey(-6px);
}
.tdk-behance .tdk-behance-projects:hover .tdk-behance-project-title{
    color:var(--color-hover);
}
.tdk-behance-project-title{
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-heading);
		margin-top:0.8rem!important;
}
.tdk-behance-project-img{
    background: var(--color-gradient-border-white);
    padding: 1px;
    position: relative;
    border-radius:clamp(0.625rem, 0.5385rem + 0.3846vw, 1rem);
}
/*----- END PORFOLIO -----*/