/* Supporting styles for the ".box"/".overlay-info"/".cat" carousel markup
   used by the FeaturedNews widget (ported from cl_tinnoibat2.ascx). This
   markup is correct - it matches the legacy control exactly - but the
   site's main stylesheet (stylee6b4.css) never actually defines these
   classes, leaving the carousel to render as a plain unstyled, always-
   visible stack instead of a proper image carousel with a hover-reveal
   caption. Found live: the real styles exist in the legacy source tree at
   Content/Layout/css/custom-blue.css, a 3986-line theme file that isn't
   referenced by home.Master either (confirmed the same gap exists in the
   sibling Hưng Yên tenant's already-built site too - a pre-existing,
   shared-template issue, not something this port introduced). Extracted
   just the rules this one widget's markup actually needs, rather than
   including the whole unreviewed theme file and risking unrelated
   regressions elsewhere on an otherwise-working site. */

.box {
    position: relative;
    overflow: hidden;
}

#sync1 .box {
    max-height: 427px;
}

.box img {
    transition: all 0.3s ease;
    width: 100%;
    max-width: 640px;
    max-height: 338px;
    padding-top: 3px;
}

.box:hover img {
    transform: scale(1.02);
    display: inline-block;
    line-height: 0;
}

.overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    background: #3d566e;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s;
    width: 100%;
    height: 100%;
}

.box:hover .overlay {
    opacity: 0.8;
}

.overlay-info {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    overflow: hidden;
    transition: all 0.5s;
    width: 100%;
    height: 100%;
}

.box:hover .overlay-info {
    opacity: 1;
}

.cat {
    position: absolute;
    text-transform: capitalize;
    left: 15px;
    top: 0;
    padding: 0;
    margin: 0;
    z-index: 10;
    width: auto;
    height: 36px;
    line-height: 36px;
    color: #fff;
    font-size: 12px;
    opacity: 1;
    transition: all 0.3s;
}

.box:hover .cat {
    opacity: 1;
}

.cat-data span {
    width: 36px;
    height: 36px;
    text-align: center;
    color: #fff;
    line-height: 36px;
    font-weight: 700;
    font-size: 22px;
    background: #d00202;
    display: inline-block;
    margin-right: 5px;
    float: left;
}

.info {
    display: block;
    position: absolute;
    left: 15px;
    bottom: 0;
    z-index: 100;
    text-align: center;
    color: #fff;
    height: 26px;
    line-height: 36px;
    font-weight: normal;
    font-size: 12px;
    opacity: 0;
    transition: all 0.3s;
}

.info span {
    font-size: 12px;
    display: inline-block;
    padding: 0 5px 0 10px;
}

.info span:first-child {
    padding-left: 0;
}

.box:hover .info {
    bottom: 10px;
    opacity: 1;
}

.carousel-caption {
    left: 5px;
    right: 5px;
    bottom: 0;
    z-index: 10;
    padding-top: 0;
    padding-bottom: 0;
    color: #ffffff;
    text-align: left;
    text-shadow: none;
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
}