/* ".TD-box-news-title" - the blue ribbon-shaped widget-title bar (icon +
   uppercase text + pointed right edge) used by cl_subcate.ascx, cl_tinmoi.ascx
   and cl_vanbanmoi.ascx (VanBanMoi/CateHome/NewsListWithFeatured here). Only
   cl_subcate.ascx's own inline <style> actually defines this class anywhere
   in the legacy source - the other two controls just use it, assuming
   something else on the page already defined it (the same "accidentally
   shared, never actually defines its own CSS" pattern already found once
   this session for FeaturedNews's tab-switch script). Centralized here
   instead of copy-pasting per-widget, since three unrelated widgets already
   depend on it and per-widget copies are exactly how the icon+ribbon detail
   below got silently dropped the first time this was ported (an earlier,
   incomplete extraction here kept only background-color/padding/text-
   transform, missing the background-image icon and the ribbon-shaped
   :before pointer - found via a direct side-by-side comparison against a
   working reference render of the same widget). */

.TD-box-news-title {
    border-bottom: 1px solid var(--hy-blue);
    padding-left: 0;
}

.TD-box-news-title > a {
    padding: 8px 8px 2px 31px;
    background: var(--hy-blue);
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    background-image: url(/img/ic-title.png);
    background-position: left center;
    background-position-x: 5px;
    background-repeat: no-repeat;
    font-family: Roboto, sans-serif, arial;
}

.TD-box-news-title > a:before {
    position: absolute;
    content: '';
    left: 100%;
    bottom: 0;
    width: 20px;
    height: 100%;
    display: inline-block;
    border-bottom: 32px var(--hy-blue) solid;
    border-left: 0px transparent solid;
    border-right: 18px transparent solid;
}

/* Category View More buttons */
.hasViewMore {
    text-align: right;
    padding: 10px 0 2px;
    margin-top: 10px;
    border-top: 1px dashed #e2e8f0;
}

.hasViewMore a,
.article-news-list-type19 .hasViewMore a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--hy-blue) 0%, var(--hy-blue) 100%);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(var(--hy-rgb), 0.28);
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}

.hasViewMore a:hover,
.article-news-list-type19 .hasViewMore a:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--hy-blue-dark) 0%, var(--hy-blue-deep) 100%);
    box-shadow: 0 4px 12px rgba(var(--hy-rgb), 0.40);
    transform: translateY(-1px);
    text-decoration: none !important;
}