/* ==========================================================
   NHẬT NAM TECHNOLOGY
   TƯ VẤN & GIẢI PHÁP
   TU-VAN.CSS – VERSION 2
========================================================== */


/* ==========================================================
   01. VARIABLES
========================================================== */

:root {

    --tv-green: #198754;
    --tv-green-dark: #146c43;
    --tv-green-light: #edf8f2;

    --tv-blue: #0d6efd;
    --tv-dark: #172033;
    --tv-text: #334155;
    --tv-muted: #64748b;

    --tv-border: #dce7e2;
    --tv-bg: #f8fafc;
    --tv-white: #ffffff;

    --tv-radius: 18px;
    --tv-radius-lg: 24px;

    --tv-shadow:
        0 8px 28px rgba(15, 23, 42, 0.07);

    --tv-shadow-hover:
        0 16px 40px rgba(15, 23, 42, 0.12);

    --tv-transition:
        all 0.3s ease;

}


/* ==========================================================
   02. PAGE BASE
========================================================== */

main {
    overflow: hidden;
}

main .tv-hero,
main .tv-intro,
main .tv-articles {
    position: relative;
}

main p {
    color: var(--tv-text);
    line-height: 1.7;
}


/* ==========================================================
   03. HERO
========================================================== */

.tv-hero {

    padding:
        46px 0
        42px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fcfa 100%
        );

}


/* ==========================================================
   HERO CONTAINER
========================================================== */

.tv-hero .container {

    position: relative;
    z-index: 2;

}


/* ==========================================================
   HERO LABEL
========================================================== */

.tv-hero-label {

    display: inline-block;

    margin-bottom: 8px;

    color:
        var(--tv-green-dark);

    font-size:
        0.9rem;

    font-weight:
        600;

    letter-spacing:
        0.04em;

}


/* ==========================================================
   HERO TITLE
========================================================== */

.tv-hero-title {

    max-width:
        680px;

    margin:
        0 0 16px;

    color:
        var(--tv-dark);

    font-size:
        clamp(
            2.25rem,
            4vw,
            3.35rem
        );

    font-weight:
        700;

    line-height:
        1.12;

    letter-spacing:
        -0.025em;

}


.tv-hero-title span {

    color:
        var(--tv-green);

}


/* ==========================================================
   HERO DESCRIPTION
========================================================== */

.tv-hero-description {

    max-width:
        700px;

    margin:
        0 0 20px;

    color:
        var(--tv-text);

    font-size:
        1.02rem;

    line-height:
        1.72;

}


/* ==========================================================
   04. HERO HIGHLIGHTS
========================================================== */

.tv-hero-highlights {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    margin:
        0 0 22px;

}


.tv-highlight {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--tv-text);

    font-size:
        0.96rem;

}


.tv-highlight i {

    flex:
        0 0 auto;

    color:
        var(--tv-green);

    font-size:
        1rem;

}


/* ==========================================================
   05. HERO ACTIONS
========================================================== */

.tv-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        12px;

}


.tv-hero-actions .btn {

    min-height:
        44px;

    padding:
        10px 19px;

    border-radius:
        10px;

    font-size:
        0.92rem;

    font-weight:
        600;

    transition:
        var(--tv-transition);

}


/* Primary */

.tv-btn-primary {

    color:
        #ffffff;

    background:
        var(--tv-green);

    border:
        1px solid
        var(--tv-green);

}


.tv-btn-primary:hover {

    color:
        #ffffff;

    background:
        var(--tv-green-dark);

    border-color:
        var(--tv-green-dark);

    transform:
        translateY(-2px);

}


/* Outline */

.tv-btn-outline {

    color:
        var(--tv-green-dark);

    background:
        #ffffff;

    border:
        1px solid
        rgba(25, 135, 84, 0.35);

}


.tv-btn-outline:hover {

    color:
        #ffffff;

    background:
        var(--tv-green);

    border-color:
        var(--tv-green);

    transform:
        translateY(-2px);

}


/* ==========================================================
   06. HERO IMAGE
========================================================== */

.tv-hero-visual {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.tv-hero-visual img {

    display:
        block;

    width:
        100%;

    max-width:
        500px;

    height:
        auto;

    margin:
        0 auto;

    border-radius:
        4px;

    object-fit:
        cover;

}


/* ==========================================================
   07. INTRODUCTION
========================================================== */

.tv-intro {

    padding:
        34px 0 42px;

    background:
        #ffffff;

}


.tv-intro .container {

    max-width:
        1000px;

}


.tv-intro-content {

    position:
        relative;

    padding:
        28px 42px;

    border:
        1px solid
        rgba(25, 135, 84, 0.15);

    border-left:
        5px solid
        var(--tv-green);

    border-radius:
        0 18px 18px 0;

    background:
        linear-gradient(
            135deg,
            #f3faf6 0%,
            #eef8f2 100%
        );

}


/* ==========================================================
   SECTION LABEL
========================================================== */

.tv-section-label {

    display:
        inline-block;

    margin-bottom:
        8px;

    color:
        var(--tv-green-dark);

    font-size:
        0.82rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

}


/* ==========================================================
   INTRO TITLE
========================================================== */

.tv-intro-content h2 {

    margin:
        0 0 14px;

    color:
        var(--tv-dark);

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.3rem
        );

    font-weight:
        700;

    line-height:
        1.25;

}


/* ==========================================================
   INTRO TEXT
========================================================== */

.tv-intro-content p {

    max-width:
        820px;

    margin:
        0 auto 7px;

    color:
        var(--tv-text);

    font-size:
        0.98rem;

    line-height:
        1.7;

}


.tv-intro-content p:last-child {

    margin-bottom:
        0;

}


.tv-intro-content strong {

    color:
        var(--tv-green-dark);

    font-weight:
        700;

}


/* ==========================================================
   08. ARTICLES SECTION
========================================================== */

.tv-articles {

    padding:
        42px 0 70px;

    background:
        #ffffff;

}


/* ==========================================================
   SECTION HEADING
========================================================== */

.tv-section-heading {

    max-width:
        780px;

    margin:
        0 auto 32px;

}


.tv-section-heading h2 {

    margin:
        0 0 8px;

    color:
        var(--tv-dark);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.45rem
        );

    font-weight:
        700;

    line-height:
        1.25;

}


.tv-section-heading p {

    margin:
        0;

    color:
        var(--tv-muted);

    font-size:
        0.98rem;

}


/* ==========================================================
   09. ARTICLE CARD
========================================================== */

.tv-article-card {

    display:
        flex;

    flex-direction:
        column;

    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid
        var(--tv-border);

    border-radius:
        var(--tv-radius);

    background:
        var(--tv-white);

    box-shadow:
        0 5px 20px
        rgba(15, 23, 42, 0.045);

    transition:
        var(--tv-transition);

}


.tv-article-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(25, 135, 84, 0.28);

    box-shadow:
        var(--tv-shadow-hover);

}


/* ==========================================================
   10. ARTICLE IMAGE
========================================================== */

.tv-article-image {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        #eef2f4;

}


.tv-article-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        0.45s ease;

}


.tv-article-card:hover
.tv-article-image img {

    transform:
        scale(1.035);

}


/* ==========================================================
   11. ARTICLE BODY
========================================================== */

.tv-article-body {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        22px 22px 20px;

}


/* ==========================================================
   12. ARTICLE CATEGORY
========================================================== */

.tv-article-category {

    align-self:
        flex-start;

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        28px;

    margin-bottom:
        11px;

    padding:
        5px 11px;

    border-radius:
        50px;

    background:
        var(--tv-green-light);

    color:
        var(--tv-green-dark);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.06em;

}


/* ==========================================================
   13. ARTICLE TITLE
========================================================== */

.tv-article-body h3 {

    margin:
        0 0 8px;

    color:
        var(--tv-dark);

    font-size:
        1.16rem;

    font-weight:
        700;

    line-height:
        1.42;

}


/* ==========================================================
   14. ARTICLE META
========================================================== */

.tv-article-meta {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    margin:
        0 0 12px;

    color:
        var(--tv-muted);

    font-size:
        0.78rem;

}


.tv-article-meta i {

    color:
        var(--tv-green);

}


/* ==========================================================
   15. ARTICLE DESCRIPTION
========================================================== */

.tv-article-body > p:not(.tv-article-meta) {

    margin:
        0 0 18px;

    color:
        var(--tv-muted);

    font-size:
        0.9rem;

    line-height:
        1.65;

}


/* ==========================================================
   16. READ ARTICLE LINK
========================================================== */

.tv-article-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        auto;

    color:
        var(--tv-green-dark);

    font-size:
        0.9rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        var(--tv-transition);

}


.tv-article-link i {

    transition:
        transform
        0.25s ease;

}


.tv-article-link:hover {

    color:
        var(--tv-green);

}


.tv-article-link:hover i {

    transform:
        translateX(4px);

}


/* ==========================================================
   17. ARTICLE GRID
========================================================== */

.tv-articles .row.g-4 {

    row-gap:
        28px !important;

}


/* ==========================================================
   18. MOBILE / TABLET
========================================================== */

@media (max-width: 991.98px) {

    .tv-hero {

        padding:
            38px 0
            36px;

    }

    .tv-hero-title {

        font-size:
            clamp(
                2rem,
                5vw,
                2.8rem
            );

    }

    .tv-hero-visual {

        margin-top:
            4px;

    }

    .tv-hero-visual img {

        max-width:
            600px;

    }

    .tv-intro {

        padding:
            30px 0
            38px;

    }

    .tv-articles {

        padding:
            36px 0
            55px;

    }

}


/* ==========================================================
   19. MOBILE
========================================================== */

@media (max-width: 767.98px) {

    .tv-hero {

        padding:
            30px 0
            32px;

    }

    .tv-hero-label {

        font-size:
            0.78rem;

    }

    .tv-hero-title {

        margin-bottom:
            13px;

        font-size:
            2rem;

        line-height:
            1.18;

    }

    .tv-hero-description {

        margin-bottom:
            17px;

        font-size:
            0.94rem;

    }

    .tv-hero-highlights {

        gap:
            8px;

        margin-bottom:
            19px;

    }

    .tv-highlight {

        font-size:
            0.9rem;

    }

    .tv-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }

    .tv-hero-actions .btn {

        width:
            100%;

        justify-content:
            center;

    }

    .tv-hero-visual {

        margin-top:
            8px;

    }

    .tv-hero-visual img {

        width:
            100%;

        max-width:
            100%;

    }

    .tv-intro {

        padding:
            26px 0
            32px;

    }

    .tv-intro-content {

        padding:
            24px 20px;

        border-left-width:
            4px;

    }

    .tv-intro-content h2 {

        font-size:
            1.55rem;

    }

    .tv-intro-content p {

        font-size:
            0.92rem;

    }

    .tv-articles {

        padding:
            30px 0
            48px;

    }

    .tv-section-heading {

        margin-bottom:
            24px;

    }

    .tv-section-heading h2 {

        font-size:
            1.65rem;

    }

    .tv-section-heading p {

        font-size:
            0.9rem;

    }

    .tv-article-body {

        padding:
            19px 18px;

    }

    .tv-article-body h3 {

        font-size:
            1.08rem;

    }

}


/* ==========================================================
   20. SMALL MOBILE
========================================================== */

@media (max-width: 575.98px) {

    .tv-hero-title {

        font-size:
            1.8rem;

    }

    .tv-hero-description {

        font-size:
            0.9rem;

    }

    .tv-highlight {

        align-items:
            flex-start;

    }

    .tv-highlight i {

        margin-top:
            3px;

    }

    .tv-intro-content {

        border-radius:
            0 14px 14px 0;

    }

    .tv-intro-content h2 {

        font-size:
            1.4rem;

    }

    .tv-article-image {

        aspect-ratio:
            16 / 9;

    }

}


/* ==========================================================
   21. ACCESSIBILITY
========================================================== */

.tv-article-link:focus-visible,
.tv-hero-actions .btn:focus-visible {

    outline:
        3px solid
        rgba(25, 135, 84, 0.25);

    outline-offset:
        3px;

}


/* ==========================================================
   22. REDUCE MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .tv-article-card,
    .tv-article-image img,
    .tv-hero-actions .btn,
    .tv-article-link,
    .tv-article-link i {

        transition:
            none;

    }

}