/* ======================================================
   CHANH PHU HOA WEBSITE
   VERSION 3
====================================================== */

:root{
    --red:#ed1c24;
    --red-dark:#c81018;

    --blue:#075aa7;
    --blue-dark:#06477f;

    --yellow:#ffc425;

    --text:#27313c;
    --muted:#687481;

    --light:#f5f8fb;
    --border:#e5ebf0;

    --white:#ffffff;

    --shadow:0 10px 35px rgba(0,0,0,.08);
}


/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    color:var(--text);
    background:#fff;
    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

.container{
    width:1180px;
    max-width:92%;
    margin:0 auto;
}


/* ======================================================
   TOP BAR
====================================================== */

.top-bar{
    background:#f4f7fa;
    color:var(--blue);
    font-size:13px;
    border-bottom:1px solid #edf1f4;
}

.top-bar .container{
    min-height:34px;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.top-bar a{
    color:var(--blue);
    margin-left:22px;
}


/* ======================================================
   HEADER
====================================================== */

.header-main{
    background:#fff;
    padding:17px 0;
}

.header-flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    display:flex;
    align-items:center;
}

.brand img{
    width:92px;
    height:92px;
    object-fit:contain;
    margin-right:18px;
}

.brand h1{
    font-size:27px;
    line-height:1.16;
    color:var(--red);
    font-weight:750;
}

.brand p{
    color:var(--blue);
    font-size:16px;
    font-weight:700;
    margin-top:5px;
}

.header-contact{
    text-align:right;
    color:#66717d;
}

.header-contact span{
    display:block;
    font-size:14px;
}

.header-contact strong{
    display:block;
    color:var(--red);
    font-size:21px;
    margin-top:3px;
}


/* ======================================================
   NAVIGATION
====================================================== */

.main-menu{
    background:var(--red);
    box-shadow:0 3px 10px rgba(0,0,0,.08);
    position:relative;
    z-index:20;
}

.main-menu .container{
    display:flex;
    align-items:center;
}

.main-menu a{
    color:#fff;
    font-size:14px;
    font-weight:650;
    padding:16px 19px;
    display:block;
    transition:.2s;
}

.main-menu a:first-child{
    background:rgba(0,0,0,.08);
}

.main-menu a:hover{
    background:var(--red-dark);
}


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

.hero{
    height:470px;
    position:relative;
    overflow:hidden;
    background:#f8fafc;
}

.hero-photo{
    position:absolute;
    top:0;
    right:0;

    width:61%;
    height:100%;

    background-image:
        url("../images/doi-tuong-bao-tro.png");

    background-size:cover;
    background-position:center 45%;
}

.hero-photo::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            #f8fafc 0%,
            rgba(248,250,252,.93) 7%,
            rgba(248,250,252,.48) 27%,
            rgba(248,250,252,.06) 55%
        );
}

.hero::after{
    content:"";

    position:absolute;
    bottom:0;
    left:0;

    width:100%;
    height:8px;

    background:
        linear-gradient(
            90deg,
            var(--red) 0%,
            var(--red) 33.33%,
            var(--yellow) 33.33%,
            var(--yellow) 66.66%,
            var(--blue) 66.66%,
            var(--blue) 100%
        );
}

.hero-inner{
    height:100%;
    display:flex;
    align-items:center;
    position:relative;
    z-index:3;
}

.hero-content{
    width:515px;
}

.hero-badge{
    display:inline-block;

    padding:7px 13px;
    margin-bottom:18px;

    color:var(--blue);
    background:#eaf3fb;

    border-radius:20px;

    font-size:11px;
    font-weight:750;
    letter-spacing:.3px;
}

.hero-small{
    display:block;

    color:var(--blue);
    font-size:22px;
    font-weight:750;
}

.hero h2{
    color:var(--red);

    font-size:57px;
    line-height:1.04;

    margin:5px 0 20px;

    font-weight:800;
}

.hero p{
    max-width:500px;

    font-size:17px;
    line-height:1.75;

    color:#35404b;
}

.hero-buttons{
    display:flex;
    gap:11px;

    margin-top:28px;
}

.hero-buttons a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:48px;
    padding:0 23px;

    border-radius:25px;

    font-size:14px;
    font-weight:700;

    transition:.2s;
}

.hero-buttons a:hover{
    transform:translateY(-2px);
}

.btn-primary{
    background:var(--red);
    color:#fff;
}

.btn-primary:hover{
    background:var(--red-dark);
}

.btn-secondary{
    background:var(--yellow);
    color:#292929;
}


/* ======================================================
   GENERAL HEADING
====================================================== */

.section-heading{
    text-align:center;
    margin-bottom:38px;
}

.section-heading > span{
    display:block;

    color:var(--blue);

    font-size:12px;
    font-weight:750;
    letter-spacing:.7px;

    margin-bottom:5px;
}

.section-heading h2{
    color:var(--red);

    font-size:28px;
    line-height:1.25;

    font-weight:750;
}

.heading-line{
    width:54px;
    height:3px;

    margin:13px auto 0;

    background:var(--yellow);

    border-radius:4px;
}


/* ======================================================
   INTRO + TIMELINE
====================================================== */

.intro-section{
    padding:52px 0 58px;
    background:#fff;
}

.intro-description{
    width:800px;
    max-width:100%;

    margin:-13px auto 47px;

    text-align:center;

    color:#56616d;

    font-size:15px;
    line-height:1.8;
}

.timeline{
    max-width:950px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(5,1fr);

    position:relative;
}

.timeline::before{
    content:"";

    position:absolute;

    top:23px;
    left:9%;
    right:9%;

    height:2px;

    background:#dfe6ec;
}

.timeline-item{
    text-align:center;
    position:relative;
    z-index:2;
}

.timeline-item strong{
    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 12px;

    border-radius:50%;

    background:#fff;
    border:3px solid var(--blue);

    color:var(--blue);

    font-size:13px;
}

.timeline-item span{
    display:block;

    padding:0 10px;

    color:#5b6672;

    font-size:12px;
}

.timeline-item.highlight strong{
    color:#fff;
    background:var(--red);
    border-color:var(--red);
}

.timeline-item.highlight span{
    color:var(--red);
    font-weight:700;
}


/* ======================================================
   FUNCTIONS
====================================================== */

.function-section,
.activity-section,
.information-section,
.gallery-section,
.reform-section{
    padding-top:60px;
    padding-bottom:65px;
}

.function-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.function-card{
    padding:32px 24px;

    text-align:center;

    background:#fff;

    border:1px solid #edf0f3;
    border-radius:12px;

    box-shadow:
        0 7px 25px rgba(34,58,80,.07);

    transition:.25s;
}

.function-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 14px 32px rgba(34,58,80,.12);
}

.function-icon{
    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 17px;

    border-radius:50%;

    color:var(--red);
    background:#fff1f2;

    font-size:28px;
    font-weight:bold;
}

.function-card:nth-child(2) .function-icon{
    color:var(--blue);
    background:#eef6fd;
}

.function-card:nth-child(3) .function-icon{
    color:var(--red);
}

.function-card:nth-child(4) .function-icon{
    color:var(--blue);
    background:#eef6fd;
}

.function-card h3{
    color:var(--blue);
    font-size:17px;
    margin-bottom:9px;
}

.function-card p{
    color:#67727e;
    font-size:13px;
    line-height:1.7;
}


/* ======================================================
   ACTIVITIES
====================================================== */

.activity-section{
    padding:74px 0 82px;
    background:#fff;
}

.activity-layout{
    display:grid;
    grid-template-columns:1.55fr 1fr;
    gap:25px;
}

.activity-feature{
    height:470px;

    position:relative;

    border-radius:15px;
    overflow:hidden;

    box-shadow:var(--shadow);
}

.activity-feature > img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.activity-feature::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.25) 42%,
            transparent 70%
        );
}

.activity-feature-content{
    position:absolute;

    left:28px;
    right:28px;
    bottom:27px;

    z-index:2;

    color:#fff;
}

.activity-feature-content span{
    color:var(--yellow);
    font-size:11px;
    font-weight:750;
}

.activity-feature-content h3{
    font-size:25px;
    line-height:1.3;

    margin:5px 0 11px;
}

.activity-feature-content a{
    color:#fff;
    font-size:13px;
    font-weight:650;
}

.activity-list{
    display:flex;
    flex-direction:column;
    gap:17px;
}

.activity-list-item{
    flex:1;

    display:grid;
    grid-template-columns:185px 1fr;

    overflow:hidden;

    background:#fff;

    border:1px solid var(--border);
    border-radius:12px;

    box-shadow:0 5px 20px rgba(0,0,0,.055);
}

.activity-list-item img{
    width:185px;
    height:100%;
    object-fit:cover;
}

.activity-list-item > div{
    padding:18px 17px;
}

.activity-list-item span{
    color:var(--red);

    font-size:11px;
    font-weight:700;
}

.activity-list-item h3{
    color:var(--blue-dark);

    font-size:15px;
    line-height:1.45;

    margin:5px 0 8px;
}

.activity-list-item a{
    color:#7a858f;
    font-size:11px;
}


/* ======================================================
   NEWS + DOCUMENTS
====================================================== */

.information-section{
    padding:76px 0 82px;
    background:var(--light);
}

.information-layout{
    display:grid;
    grid-template-columns:1.65fr 1fr;
    gap:38px;
}

.block-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    margin-bottom:22px;
}

.block-heading span,
.document-heading span{
    color:var(--blue);
    font-size:11px;
    font-weight:750;
}

.block-heading h2,
.document-heading h2{
    color:var(--red);
    font-size:24px;
}

.block-heading > a{
    color:var(--blue);
    font-size:12px;
    font-weight:650;
}

.main-news{
    display:grid;
    grid-template-columns:1.1fr 1fr;

    background:#fff;

    border-radius:12px;
    overflow:hidden;

    box-shadow:0 5px 25px rgba(0,0,0,.06);
}

.main-news > img{
    width:100%;
    height:265px;
    object-fit:cover;
}

.main-news-content{
    padding:25px;
}

.news-date{
    color:#9099a3;
    font-size:11px;
}

.main-news-content h3{
    color:var(--blue-dark);

    font-size:19px;
    line-height:1.45;

    margin:8px 0 12px;
}

.main-news-content p{
    color:#6a7580;

    font-size:13px;
    line-height:1.7;
}

.small-news-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px;

    margin-top:17px;
}

.small-news{
    display:grid;
    grid-template-columns:125px 1fr;

    background:#fff;

    border-radius:10px;
    overflow:hidden;

    border:1px solid #e9edf1;
}

.small-news img{
    width:125px;
    height:100px;
    object-fit:cover;
}

.small-news > div{
    padding:13px;
}

.small-news span{
    color:var(--red);
    font-size:10px;
    font-weight:700;
}

.small-news h3{
    color:var(--blue-dark);

    font-size:13px;
    line-height:1.4;

    margin-top:4px;
}


/* DOCUMENTS */

.document-column{
    background:#fff;

    border-radius:13px;

    padding:25px;

    box-shadow:0 5px 25px rgba(0,0,0,.06);
}

.document-heading{
    margin-bottom:17px;
}

.document-tabs{
    display:flex;

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

    margin-bottom:4px;
}

.document-tabs button{
    border:0;
    background:none;

    padding:10px 15px;

    color:#747e88;

    cursor:pointer;

    font-weight:650;
}

.document-tabs button.active{
    color:var(--red);
    border-bottom:3px solid var(--red);
}

.document-item{
    display:grid;
    grid-template-columns:58px 1fr;
    gap:14px;

    padding:18px 0;

    border-bottom:1px solid #edf0f2;
}

.document-date{
    height:57px;

    text-align:center;

    border-radius:7px;
    overflow:hidden;

    border:1px solid #e3e8ec;
}

.document-date strong{
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--blue);

    color:#fff;

    font-size:17px;
}

.document-date span{
    display:block;

    color:#727c86;

    font-size:9px;

    padding-top:3px;
}

.document-item h3{
    color:#35404b;

    font-size:13px;
    line-height:1.45;

    margin-bottom:4px;
}

.document-item p{
    color:var(--blue);
    font-size:10px;
}

.all-documents{
    display:block;

    margin-top:18px;

    text-align:right;

    color:var(--red);

    font-size:12px;
    font-weight:650;
}


/* ======================================================
   GALLERY
====================================================== */

.gallery-section{
    padding:75px 0 80px;
    background:#fff;
}

.gallery-grid{
    height:470px;

    display:grid;

    grid-template-columns:1.4fr 1fr 1fr;
    grid-template-rows:1fr 1fr;

    gap:13px;
}

.gallery-item{
    position:relative;

    overflow:hidden;

    border-radius:10px;
}

.gallery-large{
    grid-row:1 / 3;
}

.gallery-item img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.4s;
}

.gallery-item::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,.58),
            transparent 52%
        );
}

.gallery-item:hover img{
    transform:scale(1.045);
}

.gallery-item span{
    position:absolute;

    left:16px;
    bottom:13px;

    z-index:2;

    color:#fff;

    font-size:13px;
    font-weight:650;
}

.gallery-button{
    text-align:center;
    margin-top:28px;
}

.gallery-button a{
    display:inline-block;

    color:var(--blue);

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

    padding:10px 23px;

    border-radius:22px;

    font-size:12px;
    font-weight:650;
}


/* ======================================================
   FOOTER
====================================================== */

.site-footer{
    background:var(--blue-dark);
    color:#fff;

    padding-top:48px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:55px;
}

.site-footer h3{
    color:#fff;

    font-size:15px;

    margin-bottom:15px;
}

.site-footer p{
    color:#d8e6f3;

    font-size:12px;
    line-height:1.8;
}

.copyright{
    margin-top:40px;
    padding:15px;

    text-align:center;

    background:#033865;

    color:#cbdbea;

    font-size:11px;
}


/* ======================================================
   TABLET
====================================================== */

@media(max-width:950px){

    .brand h1{
        font-size:22px;
    }

    .main-menu .container{
        overflow-x:auto;
    }

    .main-menu a{
        white-space:nowrap;
    }

    .hero-photo{
        width:100%;
        opacity:.28;
    }

    .hero-photo::before{
        background:rgba(248,250,252,.35);
    }

    .hero-content{
        width:560px;
        max-width:100%;
    }

    .timeline{
        grid-template-columns:repeat(5,1fr);
    }

    .function-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .activity-layout,
    .information-layout{
        grid-template-columns:1fr;
    }

    .activity-list{
        display:grid;
        grid-template-columns:repeat(3,1fr);
    }

    .activity-list-item{
        display:block;
    }

    .activity-list-item img{
        width:100%;
        height:160px;
    }

    .gallery-grid{
        height:auto;
        grid-template-columns:repeat(2,1fr);
        grid-template-rows:auto;
    }

    .gallery-item,
    .gallery-large{
        height:240px;
        grid-row:auto;
    }
}


/* ======================================================
   MOBILE
====================================================== */

@media(max-width:600px){

    .top-bar .container{
        justify-content:center;
    }

    .top-bar .container > div{
        display:none;
    }

    .header-main{
        padding:12px 0;
    }

    .brand img{
        width:65px;
        height:65px;
        margin-right:11px;
    }

    .brand h1{
        font-size:16px;
    }

    .brand p{
        font-size:11px;
    }

    .header-contact{
        display:none;
    }

    .main-menu a{
        padding:13px 15px;
        font-size:12px;
    }

    .hero{
        height:470px;
    }

    .hero-photo{
        opacity:.2;
    }

    .hero-badge{
        display:none;
    }

    .hero-small{
        font-size:17px;
    }

    .hero h2{
        font-size:40px;
    }

    .hero p{
        font-size:14px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:flex-start;
    }

    .section-heading h2{
        font-size:23px;
    }

    .timeline{
        grid-template-columns:1fr;
        gap:20px;
    }

    .timeline::before{
        display:none;
    }

    .timeline-item{
        display:grid;
        grid-template-columns:60px 1fr;
        align-items:center;
        text-align:left;
    }

    .timeline-item strong{
        margin:0;
    }

    .timeline-item span{
        padding:0;
    }

    .function-grid{
        grid-template-columns:1fr;
    }

    .activity-feature{
        height:390px;
    }

    .activity-list{
        display:block;
    }

    .activity-list-item{
        display:grid;
        grid-template-columns:130px 1fr;
        margin-bottom:13px;
    }

    .activity-list-item img{
        width:130px;
        height:100%;
    }

    .main-news{
        grid-template-columns:1fr;
    }

    .main-news > img{
        height:230px;
    }

    .small-news-grid{
        grid-template-columns:1fr;
    }

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .gallery-item,
    .gallery-large{
        height:230px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:30px;
    }
}
/* ======================================================
   CẢI CÁCH HÀNH CHÍNH
====================================================== */

.reform-section{
    padding:72px 0 78px;
    background:#fff;
}

.reform-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:28px;
}

.reform-feature{
    display:grid;
    grid-template-columns:85px 1fr;
    gap:22px;

    padding:32px;

    background:
        linear-gradient(
            135deg,
            #075aa7 0%,
            #06477f 100%
        );

    border-radius:15px;

    color:#fff;

    box-shadow:var(--shadow);
}

.reform-icon{
    width:70px;
    height:70px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#ffc425;
    color:#075aa7;

    border-radius:50%;

    font-size:34px;
    font-weight:bold;
}

.reform-feature span{
    color:#ffc425;
    font-size:11px;
    font-weight:700;
}

.reform-feature h3{
    font-size:24px;
    line-height:1.35;

    margin:7px 0 12px;
}

.reform-feature p{
    color:#dceaf6;
    font-size:14px;
    line-height:1.7;

    margin-bottom:15px;
}

.reform-feature a{
    color:#fff;
    font-size:13px;
    font-weight:650;
}

.reform-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.reform-item{
    display:grid;
    grid-template-columns:55px 1fr;
    align-items:center;
    gap:16px;

    padding:20px;

    background:#f7f9fb;

    border:1px solid #e6ebef;
    border-radius:11px;

    transition:.2s;
}

.reform-item:hover{
    transform:translateX(4px);
    border-color:#b8cee2;
}

.reform-number{
    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff;
    color:#ed1c24;

    border-radius:50%;

    font-weight:800;
}

.reform-item h3{
    color:#06477f;
    font-size:15px;
    margin-bottom:3px;
}

.reform-item p{
    color:#74808b;
    font-size:12px;
}

@media(max-width:950px){
    .reform-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){
    .reform-feature{
        grid-template-columns:1fr;
    }
}
/* ==============================================
   TIN TỨC ĐỘNG TỪ DATABASE
============================================== */

.news-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.news-card{
    background:#fff;
    border-radius:10px;
    overflow:hidden;

    border:1px solid #e8edf1;

    box-shadow:
        0 5px 18px rgba(0,0,0,.06);

    transition:.25s;
}

.news-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.10);
}


/* IMAGE */

.news-image{
    display:block;
    height:200px;
    overflow:hidden;
    background:#e9edf0;
}

.news-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.35s;
}

.news-card:hover .news-image img{
    transform:scale(1.04);
}

.news-no-image{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#eef3f7;

    color:#075aa7;

    font-weight:700;
}


/* CONTENT */

.news-content{
    padding:18px 19px 20px;
}

.news-category{
    display:block;

    margin-bottom:7px;

    color:#ed1c24;

    font-size:11px;
    font-weight:700;

    text-transform:uppercase;
}

.news-content h3{
    margin:0 0 10px;

    font-size:16px;
    line-height:1.45;
}

.news-content h3 a{
    color:#172b3a;
    text-decoration:none;
}

.news-content h3 a:hover{
    color:#ed1c24;
}

.news-content p{
    margin:0 0 15px;

    color:#66737d;

    font-size:13px;
    line-height:1.65;
}

.news-meta{
    padding-top:11px;

    border-top:1px solid #edf0f2;

    color:#929ba3;

    font-size:11px;
}

.no-news{
    grid-column:1/-1;

    padding:35px;

    background:#fff;

    text-align:center;

    color:#78838c;

    border-radius:10px;
}


/* RESPONSIVE */

@media(max-width:900px){

    .news-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:600px){

    .news-grid{
        grid-template-columns:1fr;
    }

}
/* =========================================================
   TRANG CHI TIẾT BÀI VIẾT - VERSION 2
========================================================= */


/* BREADCRUMB */

.detail-breadcrumb{
    background:#f5f7f9;
    border-bottom:1px solid #e7ebef;
}

.detail-breadcrumb .container{
    min-height:42px;

    display:flex;
    align-items:center;

    gap:8px;

    font-size:12px;
    color:#8a949d;
}

.detail-breadcrumb a{
    color:#075aa7;
    text-decoration:none;
}

.detail-breadcrumb a:hover{
    color:#ed1c24;
}


/* BACKGROUND */

.detail-wrapper{
    padding:35px 0 65px;
    background:#f4f7f9;
}


/* MAIN GRID */

.detail-layout{
    display:grid;

    grid-template-columns:
        minmax(0, 2.25fr)
        minmax(285px, .75fr);

    gap:30px;

    align-items:start;
}


/* =========================================================
   ARTICLE
========================================================= */

.detail-article{
    background:#fff;

    border-radius:12px;

    padding:38px 44px 40px;

    box-shadow:
        0 5px 22px rgba(22,43,62,.06);
}


/* CATEGORY */

.detail-category{
    display:inline-flex;

    padding:6px 11px;

    margin-bottom:14px;

    background:#edf5fc;

    border-radius:4px;

    color:#075aa7;

    font-size:11px;
    font-weight:700;

    text-transform:uppercase;
}


/* TITLE */

.detail-title{
    margin:0;

    max-width:900px;

    color:#183a55;

    font-size:32px;
    line-height:1.35;

    font-weight:750;

    letter-spacing:-.3px;
}


/* META */

.detail-meta{
    display:flex;
    align-items:center;

    gap:25px;

    margin-top:17px;

    padding-bottom:18px;

    border-bottom:1px solid #e8ecef;

    color:#87929b;

    font-size:11px;
}

.meta-icon{
    color:#075aa7;
    margin-right:5px;
}


/* SUMMARY */

.detail-summary{
    margin:25px 0;

    padding:18px 20px;

    border-left:4px solid #ed1c24;

    background:#f8fafb;

    color:#364956;

    font-size:16px;
    font-weight:600;

    line-height:1.75;
}


/* IMAGE */

.detail-image{
    margin:28px 0 30px;
}

.detail-image img{
    width:100%;

    max-height:610px;

    object-fit:cover;

    border-radius:8px;
}

.detail-image figcaption{
    padding-top:8px;

    text-align:center;

    color:#818b94;

    font-size:11px;
    font-style:italic;
}


/* BODY */

.detail-content{
    color:#283943;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:16px;

    line-height:1.9;

    text-align:justify;

    word-break:normal;
}

.detail-content p{
    margin-bottom:18px;
}


/* ARTICLE FOOT */

.detail-footer{
    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:20px;

    margin-top:38px;

    padding:18px 0;

    border-top:1px solid #e6eaed;
    border-bottom:1px solid #e6eaed;
}

.detail-source{
    color:#78838c;

    font-size:12px;
}

.detail-source strong{
    color:#48545d;
}

.detail-actions{
    display:flex;
    gap:8px;
}

.detail-actions button{
    border:1px solid #dbe2e7;

    background:#fff;

    padding:8px 11px;

    border-radius:5px;

    color:#56636d;

    font-size:11px;

    cursor:pointer;

    transition:.2s;
}

.detail-actions button:hover{
    color:#075aa7;
    border-color:#075aa7;
}


/* BACK */

.detail-back{
    margin-top:22px;
}

.detail-back a{
    color:#075aa7;

    font-size:12px;
    font-weight:650;

    text-decoration:none;
}

.detail-back a:hover{
    color:#ed1c24;
}


/* =========================================================
   SIDEBAR
========================================================= */

.detail-sidebar{
    display:flex;
    flex-direction:column;

    gap:22px;
}


/* WIDGET */

.sidebar-widget{
    padding:22px;

    background:#fff;

    border-radius:10px;

    box-shadow:
        0 5px 20px rgba(22,43,62,.055);
}


/* TITLE */

.widget-title{
    display:flex;
    align-items:center;

    gap:9px;

    padding-bottom:12px;

    margin-bottom:4px;

    border-bottom:1px solid #e7ebee;
}

.widget-title > span{
    width:4px;
    height:19px;

    border-radius:4px;

    background:#ed1c24;
}

.widget-title h2{
    margin:0;

    color:#075aa7;

    font-size:15px;
    font-weight:750;
}


/* RELATED NEWS */

.related-news{
    display:grid;

    grid-template-columns:
        92px 1fr;

    gap:12px;

    padding:15px 0;

    border-bottom:1px solid #edf0f2;

    text-decoration:none;
}

.related-news:last-child{
    border-bottom:0;
}

.related-news img,
.related-placeholder{
    width:92px;
    height:67px;

    border-radius:5px;

    object-fit:cover;
}

.related-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;

    background:#eef3f7;

    color:#075aa7;

    font-size:13px;
    font-weight:bold;
}

.related-news h3{
    margin:0 0 7px;

    color:#344753;

    font-size:12px;
    line-height:1.45;

    font-weight:650;
}

.related-news:hover h3{
    color:#ed1c24;
}

.related-news span{
    color:#98a1a8;
    font-size:10px;
}

.empty-related{
    padding:22px 0;

    color:#8b969e;

    font-size:12px;
}


/* CATEGORY */

.detail-category-list a{
    min-height:42px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    padding:0 5px;

    border-bottom:1px solid #edf0f2;

    color:#44545f;

    font-size:12px;

    text-decoration:none;
}

.detail-category-list a:last-child{
    border-bottom:0;
}

.detail-category-list a strong{
    color:#a1aab1;
}

.detail-category-list a:hover{
    color:#ed1c24;
}

.detail-category-list a:hover strong{
    color:#ed1c24;
}


/* CONTACT */

.sidebar-contact{
    padding:28px 23px;

    text-align:center;

    border-radius:10px;

    background:
        linear-gradient(
            145deg,
            #075aa7,
            #06477f
        );

    color:#fff;
}

.contact-logo img{
    width:72px;
    height:72px;

    margin:0 auto 14px;

    border-radius:50%;

    background:#fff;

    padding:3px;
}

.sidebar-contact h3{
    margin:0;

    font-size:14px;
    line-height:1.45;
}

.sidebar-contact p{
    margin:7px 0;

    color:#ffc425;

    font-size:12px;
    font-weight:650;
}

.contact-line{
    width:45px;
    height:2px;

    margin:15px auto;

    background:#ffc425;
}

.sidebar-contact span{
    font-size:13px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .detail-layout{
        grid-template-columns:
            minmax(0,1.8fr)
            minmax(260px,.8fr);
    }

    .detail-article{
        padding:32px;
    }

    .detail-title{
        font-size:28px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:820px){

    .detail-layout{
        grid-template-columns:1fr;
    }

    .detail-sidebar{
        margin-top:0;
    }

}


@media(max-width:600px){

    .detail-wrapper{
        padding-top:18px;
    }

    .detail-article{
        padding:22px 18px;
        border-radius:7px;
    }

    .detail-title{
        font-size:23px;
    }

    .detail-meta{
        flex-direction:column;

        align-items:flex-start;

        gap:4px;
    }

    .detail-summary{
        padding:15px;

        font-size:14px;
    }

    .detail-content{
        font-size:15px;

        line-height:1.8;

        text-align:left;
    }

    .detail-footer{
        flex-direction:column;

        align-items:flex-start;
    }

}
/* ==========================================
   HTML CONTENT FROM RICH EDITOR
========================================== */

.detail-content p{
    margin:0 0 20px;
}

.detail-content h2{
    margin:32px 0 15px;

    color:#164c75;

    font-size:24px;
    line-height:1.4;
}

.detail-content h3{
    margin:27px 0 13px;

    color:#1c536f;

    font-size:20px;
}

.detail-content ul,
.detail-content ol{
    margin:17px 0 22px;
    padding-left:30px;
}

.detail-content li{
    margin-bottom:8px;
}

.detail-content blockquote{
    margin:25px 0;

    padding:17px 21px;

    background:#f6f8f9;

    border-left:4px solid #ed1c24;

    color:#4b5c66;
}

.detail-content a{
    color:#075aa7;
    text-decoration:underline;
}

.detail-content strong{
    font-weight:700;
}
/* ==================================================
   ẢNH CHÈN TRONG NỘI DUNG BÀI VIẾT
================================================== */

.detail-content figure{
    margin:30px auto;

    max-width:100%;

    text-align:center;
}

.detail-content figure img{
    display:block;

    max-width:100%;
    height:auto;

    margin:0 auto;

    border-radius:8px;
}

.detail-content figure figcaption{
    margin-top:8px;

    color:#7d8790;

    font-size:12px;

    font-style:italic;

    line-height:1.5;

    text-align:center;
}


/* ẢNH THÔNG THƯỜNG */

.detail-content > img,
.detail-content p img{
    display:block;

    max-width:100%;
    height:auto;

    margin:25px auto;

    border-radius:8px;
}
/* ===================================================
   TRANG VĂN BẢN
=================================================== */

.document-page{
    background:#f5f7f9;
}


/* HERO */

.document-hero{
    padding:52px 0 56px;

    background:
        linear-gradient(
            120deg,
            #075aa7,
            #06477f
        );

    color:#fff;
}

.document-hero > .container > span{
    color:#ffc425;

    font-size:11px;
    font-weight:700;

    letter-spacing:.8px;
}

.document-hero h1{
    margin:5px 0;

    font-size:37px;
}

.document-hero p{
    max-width:600px;

    margin:0;

    color:#dceaf6;

    font-size:14px;
}


/* BREADCRUMB */

.document-breadcrumb{
    background:#fff;

    border-bottom:
        1px solid #e8ecef;
}

.document-breadcrumb .container{
    min-height:42px;

    display:flex;
    align-items:center;

    gap:8px;

    color:#89939c;

    font-size:12px;
}

.document-breadcrumb a{
    color:#075aa7;
}


/* CONTENT */

.document-content{
    padding:38px 0 70px;
}


/* SEARCH */

.document-search{
    display:grid;

    grid-template-columns:
        2fr 1fr .7fr auto;

    gap:15px;

    align-items:end;

    margin-bottom:35px;

    padding:22px;

    background:#fff;

    border-radius:10px;

    box-shadow:
        0 5px 20px
        rgba(0,0,0,.05);
}

.search-field label{
    display:block;

    margin-bottom:6px;

    color:#56636d;

    font-size:11px;
    font-weight:700;
}

.search-field input,
.search-field select{
    width:100%;

    height:42px;

    padding:0 11px;

    border:1px solid #dce2e6;

    border-radius:6px;

    outline:none;

    background:#fff;
}

.search-field input:focus,
.search-field select:focus{
    border-color:#075aa7;
}

.search-buttons{
    display:flex;

    gap:7px;
}

.search-buttons button,
.search-buttons a{
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 15px;

    border:0;
    border-radius:6px;

    font-size:11px;
    font-weight:650;

    cursor:pointer;

    text-decoration:none;
}

.search-buttons button{
    background:#ed1c24;
    color:#fff;
}

.search-buttons a{
    background:#e8edf1;
    color:#45545f;
}


/* HEADING */

.document-list-heading{
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    margin-bottom:18px;
}

.document-list-heading span{
    color:#075aa7;

    font-size:10px;
    font-weight:700;
}

.document-list-heading h2{
    margin:3px 0 0;

    color:#ed1c24;

    font-size:24px;
}

.document-list-heading strong{
    color:#7c8790;

    font-size:11px;
}


/* LIST */

.public-document-list{
    display:flex;

    flex-direction:column;

    gap:12px;
}

.public-document-item{
    display:grid;

    grid-template-columns:
        60px 1fr 130px;

    gap:17px;

    align-items:center;

    padding:20px;

    background:#fff;

    border-radius:9px;

    border-left:
        4px solid #075aa7;

    box-shadow:
        0 4px 17px
        rgba(0,0,0,.04);

    transition:.2s;
}

.public-document-item:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 7px 22px
        rgba(0,0,0,.07);
}

.public-document-icon{
    width:52px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:6px;

    background:#fff0f1;
    color:#ed1c24;

    font-size:12px;
    font-weight:800;
}

.public-document-meta{
    display:flex;

    gap:12px;

    align-items:center;

    margin-bottom:5px;
}

.public-document-meta span{
    color:#075aa7;

    font-size:10px;
    font-weight:700;

    text-transform:uppercase;
}

.public-document-meta small{
    color:#939da5;

    font-size:10px;
}

.public-document-info h3{
    margin:0 0 8px;

    color:#263f51;

    font-size:15px;
    line-height:1.5;
}

.public-document-details{
    display:flex;

    flex-wrap:wrap;

    gap:15px;

    color:#77828b;

    font-size:10px;
}

.public-document-actions{
    display:flex;

    justify-content:flex-end;

    gap:6px;
}

.public-document-actions a{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:55px;
    height:34px;

    padding:0 10px;

    border-radius:5px;

    font-size:10px;
    font-weight:650;

    text-decoration:none;
}

.view-file{
    border:1px solid #075aa7;

    color:#075aa7;
}

.download-file{
    background:#075aa7;

    color:#fff;
}

.document-empty{
    padding:45px;

    background:#fff;

    border-radius:8px;

    text-align:center;

    color:#7c8790;
}


/* RESPONSIVE */

@media(max-width:900px){

    .document-search{
        grid-template-columns:
            1fr 1fr;
    }

    .search-keyword{
        grid-column:
            1 / -1;
    }

    .public-document-item{
        grid-template-columns:
            55px 1fr;
    }

    .public-document-actions{
        grid-column:
            2;

        justify-content:flex-start;
    }

}

@media(max-width:600px){

    .document-search{
        grid-template-columns:1fr;
    }

    .search-keyword{
        grid-column:auto;
    }

    .public-document-item{
        grid-template-columns:1fr;
    }

    .public-document-icon{
        display:none;
    }

    .public-document-actions{
        grid-column:auto;
    }

}
/* =================================================
   TRANG CHUYÊN MỤC
================================================= */

.category-page{
    background:#f5f7f9;
}


/* HERO */

.category-hero{
    padding:48px 0 52px;

    background:
        linear-gradient(
            120deg,
            #075aa7,
            #06477f
        );

    color:#fff;
}

.category-hero span{
    color:#ffc425;

    font-size:11px;
    font-weight:700;

    letter-spacing:.7px;
}

.category-hero h1{
    margin:5px 0 0;

    font-size:34px;
}


/* BREADCRUMB */

.category-breadcrumb{
    background:#fff;

    border-bottom:
        1px solid #e8ecef;
}

.category-breadcrumb .container{
    min-height:42px;

    display:flex;
    align-items:center;

    gap:8px;

    font-size:12px;

    color:#89939c;
}

.category-breadcrumb a{
    color:#075aa7;
}


/* CONTENT */

.category-content{
    padding:40px 0 70px;
}

.category-layout{
    display:grid;

    grid-template-columns:
        minmax(0,2.2fr)
        minmax(270px,.8fr);

    gap:30px;

    align-items:start;
}


/* HEADING */

.category-heading{
    margin-bottom:22px;
}

.category-heading span{
    color:#075aa7;

    font-size:10px;
    font-weight:700;
}

.category-heading h2{
    margin:4px 0 0;

    color:#ed1c24;

    font-size:25px;
}


/* LIST */

.category-list{
    display:flex;

    flex-direction:column;

    gap:17px;
}

.category-item{
    display:grid;

    grid-template-columns:
        245px 1fr;

    overflow:hidden;

    background:#fff;

    border-radius:10px;

    box-shadow:
        0 5px 20px rgba(0,0,0,.045);

    transition:.2s;
}

.category-item:hover{
    transform:translateY(-2px);

    box-shadow:
        0 8px 24px rgba(0,0,0,.07);
}

.category-thumb{
    height:180px;

    background:#eef2f5;
}

.category-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.category-placeholder{
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#075aa7;

    color:#ffc425;

    font-size:24px;
    font-weight:800;
}

.category-item-content{
    padding:21px 23px;
}

.category-label{
    color:#ed1c24;

    font-size:10px;
    font-weight:700;

    text-transform:uppercase;
}

.category-item h3{
    margin:6px 0;

    font-size:18px;
    line-height:1.45;
}

.category-item h3 a{
    color:#193d57;

    text-decoration:none;
}

.category-item h3 a:hover{
    color:#ed1c24;
}

.category-date{
    margin-bottom:9px;

    color:#939ca4;

    font-size:10px;
}

.category-summary{
    color:#66737d;

    font-size:12px;
    line-height:1.65;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

.category-readmore{
    display:inline-block;

    margin-top:12px;

    color:#075aa7;

    font-size:11px;
    font-weight:650;

    text-decoration:none;
}


/* SIDEBAR */

.category-sidebar{
    display:flex;

    flex-direction:column;

    gap:20px;
}

.category-sidebar-title{
    padding:14px 17px;

    background:#ed1c24;

    color:#fff;

    border-radius:
        8px 8px 0 0;

    font-size:13px;
    font-weight:700;
}

.category-sidebar-menu{
    margin-top:-20px;

    padding:8px 18px;

    background:#fff;

    border-radius:
        0 0 8px 8px;

    box-shadow:
        0 5px 20px rgba(0,0,0,.04);
}

.category-sidebar-menu a{
    min-height:45px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:
        1px solid #edf0f2;

    color:#475864;

    font-size:12px;

    text-decoration:none;
}

.category-sidebar-menu a:last-child{
    border-bottom:0;
}

.category-sidebar-menu a:hover{
    color:#ed1c24;
}


/* CONTACT */

.category-side-contact{
    padding:27px 23px;

    text-align:center;

    border-radius:10px;

    background:
        linear-gradient(
            145deg,
            #075aa7,
            #06477f
        );

    color:#fff;
}

.category-side-contact img{
    width:70px;
    height:70px;

    margin:0 auto 12px;

    background:#fff;

    border-radius:50%;

    padding:3px;
}

.category-side-contact h3{
    margin:0;

    font-size:14px;
    line-height:1.45;
}

.category-side-contact p{
    margin:7px 0 14px;

    color:#ffc425;

    font-size:11px;
    font-weight:700;
}

.category-side-contact span{
    font-size:12px;
}

.category-empty{
    padding:40px;

    background:#fff;

    border-radius:9px;

    text-align:center;

    color:#7c8790;
}


/* RESPONSIVE */

@media(max-width:850px){

    .category-layout{
        grid-template-columns:1fr;
    }

}

@media(max-width:600px){

    .category-item{
        grid-template-columns:1fr;
    }

    .category-thumb{
        height:220px;
    }

    .category-hero h1{
        font-size:28px;
    }

}

/* ==================================================
   CẢI CÁCH HÀNH CHÍNH
================================================== */

.cchc-page{
    background:#f5f7f9;
}


/* HERO */

.cchc-hero{
    padding:48px 0 52px;

    background:
        linear-gradient(
            120deg,
            #075aa7,
            #06477f
        );

    color:#fff;
}

.cchc-hero-content{
    max-width:750px;
}

.cchc-eyebrow{
    display:block;

    margin-bottom:5px;

    color:#ffc425;

    font-size:11px;
    font-weight:700;

    letter-spacing:.7px;
}

.cchc-hero h1{
    margin:0 0 7px;

    font-size:35px;
    line-height:1.2;
}

.cchc-hero p{
    max-width:700px;

    margin:0;

    color:#dceaf6;

    font-size:13px;
    line-height:1.7;
}


/* BREADCRUMB */

.cchc-breadcrumb{
    background:#fff;

    border-bottom:
        1px solid #e5e9ed;
}

.cchc-breadcrumb .container{
    min-height:42px;

    display:flex;
    align-items:center;

    gap:8px;

    color:#89939c;

    font-size:11px;
}

.cchc-breadcrumb a{
    color:#075aa7;

    text-decoration:none;
}


/* CONTENT */

.cchc-content{
    padding:35px 0 70px;
}


/* CATEGORY BUTTONS */

.cchc-groups{
    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin-bottom:32px;
}

.cchc-group{
    display:flex;

    align-items:center;

    gap:7px;

    padding:10px 15px;

    border:1px solid #dfe5e9;

    border-radius:6px;

    background:#fff;

    color:#4d5d68;

    font-size:11px;
    font-weight:600;

    text-decoration:none;

    transition:.2s;
}

.cchc-group:hover,
.cchc-group.active{
    border-color:#075aa7;

    background:#075aa7;

    color:#fff;
}

.cchc-group-icon{
    width:19px;
    height:19px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#eef5fb;

    color:#075aa7;

    font-size:10px;
}

.cchc-group.active
.cchc-group-icon{
    background:#fff;

    color:#075aa7;
}


/* LAYOUT */

.cchc-layout{
    display:grid;

    grid-template-columns:
        minmax(0,2.25fr)
        minmax(260px,.75fr);

    gap:30px;

    align-items:start;
}


/* SECTION HEADING */

.cchc-section-heading{
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    margin-bottom:18px;
}

.cchc-section-heading span{
    color:#075aa7;

    font-size:10px;
    font-weight:700;
}

.cchc-section-heading h2{
    margin:4px 0 0;

    color:#ed1c24;

    font-size:24px;
}

.cchc-section-heading strong{
    color:#8b959d;

    font-size:10px;
}


/* LIST */

.cchc-list{
    display:flex;

    flex-direction:column;

    gap:16px;
}

.cchc-item{
    display:grid;

    grid-template-columns:
        235px 1fr;

    overflow:hidden;

    background:#fff;

    border-radius:9px;

    border-left:
        4px solid #075aa7;

    box-shadow:
        0 4px 18px
        rgba(0,0,0,.045);

    transition:.2s;
}

.cchc-item:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 7px 24px
        rgba(0,0,0,.07);
}


/* IMAGE */

.cchc-thumbnail{
    height:175px;

    display:block;

    background:#e9eef2;
}

.cchc-thumbnail img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.cchc-no-image{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #075aa7,
            #06477f
        );

    color:#ffc425;

    font-size:25px;
    font-weight:800;
}


/* ITEM CONTENT */

.cchc-item-content{
    padding:19px 22px;
}

.cchc-category-label{
    color:#075aa7;

    font-size:9px;
    font-weight:700;

    text-transform:uppercase;
}

.cchc-item-content h3{
    margin:5px 0 5px;

    font-size:17px;
    line-height:1.45;
}

.cchc-item-content h3 a{
    color:#193d57;

    text-decoration:none;
}

.cchc-item-content h3 a:hover{
    color:#ed1c24;
}

.cchc-date{
    margin-bottom:8px;

    color:#929ca4;

    font-size:10px;
}

.cchc-summary{
    color:#65737d;

    font-size:11px;
    line-height:1.65;

    display:-webkit-box;

    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

.cchc-readmore{
    display:inline-block;

    margin-top:10px;

    color:#075aa7;

    font-size:10px;
    font-weight:700;

    text-decoration:none;
}


/* SIDEBAR */

.cchc-sidebar{
    display:flex;

    flex-direction:column;

    gap:20px;
}

.cchc-sidebar-box{
    overflow:hidden;

    border-radius:8px;

    background:#fff;

    box-shadow:
        0 4px 18px
        rgba(0,0,0,.045);
}

.cchc-sidebar-heading{
    padding:14px 16px;

    background:#ed1c24;

    color:#fff;

    font-size:12px;
    font-weight:700;
}

.cchc-sidebar-menu{
    padding:7px 17px;
}

.cchc-sidebar-menu a{
    min-height:44px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    border-bottom:
        1px solid #edf0f2;

    color:#53616c;

    font-size:11px;

    text-decoration:none;
}

.cchc-sidebar-menu a:last-child{
    border-bottom:0;
}

.cchc-sidebar-menu a:hover{
    color:#ed1c24;
}

.cchc-sidebar-menu strong{
    color:#075aa7;
}


/* QUICK BOX */

.cchc-quick-box{
    padding:27px 22px;

    border-radius:9px;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            #075aa7,
            #06477f
        );

    color:#fff;
}

.cchc-quick-box > span{
    color:#ffc425;

    font-size:9px;
    font-weight:700;
}

.cchc-quick-box h3{
    margin:7px 0;

    font-size:15px;
    line-height:1.45;
}

.cchc-quick-box p{
    margin:0 0 16px;

    color:#ffc425;

    font-size:11px;
    font-weight:600;
}

.cchc-phone{
    display:inline-block;

    padding:8px 13px;

    border:
        1px solid
        rgba(255,255,255,.3);

    border-radius:5px;

    font-size:11px;
    font-weight:700;
}


/* EMPTY */

.cchc-empty{
    padding:55px 30px;

    background:#fff;

    border-radius:9px;

    text-align:center;

    box-shadow:
        0 4px 18px
        rgba(0,0,0,.04);
}

.cchc-empty-icon{
    width:44px;
    height:44px;

    display:flex;

    align-items:center;
    justify-content:center;

    margin:
        0 auto 12px;

    border-radius:50%;

    background:#eef5fb;

    color:#075aa7;

    font-size:20px;
    font-weight:700;
}

.cchc-empty h3{
    margin:0 0 6px;

    color:#304858;
}

.cchc-empty p{
    margin:0;

    color:#7b8790;

    font-size:12px;
}


/* RESPONSIVE */

@media(max-width:850px){

    .cchc-layout{
        grid-template-columns:1fr;
    }

}


@media(max-width:600px){

    .cchc-hero{
        padding:35px 0;
    }

    .cchc-hero h1{
        font-size:27px;
    }

    .cchc-item{
        grid-template-columns:1fr;
    }

    .cchc-thumbnail{
        height:220px;
    }

    .cchc-section-heading{
        align-items:flex-start;

        flex-direction:column;

        gap:5px;
    }

}
/* ==================================================
   NEWS - HOMEPAGE RESPONSIVE LAYOUT
================================================== */

.news-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    width:100%;
}


/* 1 bài duy nhất */
.news-grid > .news-card:only-child{
    grid-column:1 / -1;

    display:grid;
    grid-template-columns:minmax(320px, .95fr) minmax(0,1.35fr);

    min-height:315px;
}


/* 2 bài */
.news-grid:has(.news-card:nth-child(2):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr));
}


/* CARD */

.news-card{
    min-width:0;

    background:#fff;

    border:1px solid #e6ebef;
    border-radius:12px;

    overflow:hidden;

    box-shadow:
        0 6px 22px rgba(0,0,0,.055);

    transition:
        transform .25s,
        box-shadow .25s;
}

.news-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 12px 28px rgba(0,0,0,.09);
}


/* IMAGE */

.news-image{
    display:block;

    width:100%;
    height:210px;

    overflow:hidden;

    background:#edf2f5;
}

.news-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .35s;
}

.news-card:hover
.news-image img{
    transform:scale(1.035);
}


/* Ảnh của bài duy nhất */

.news-grid > .news-card:only-child
.news-image{
    height:100%;
    min-height:315px;
}


/* CONTENT */

.news-content{
    display:flex;
    flex-direction:column;

    padding:20px 21px 19px;
}

.news-category{
    display:block;

    margin-bottom:7px;

    color:#ed1c24;

    font-size:11px;
    font-weight:750;

    text-transform:uppercase;
}

.news-content h3{
    margin:0 0 10px;

    font-size:17px;
    line-height:1.45;
}

.news-content h3 a{
    color:#173b55;
    text-decoration:none;
}

.news-content h3 a:hover{
    color:#ed1c24;
}

.news-content p{
    margin:0 0 15px;

    color:#66737d;

    font-size:13px;
    line-height:1.7;
}


/* Bài duy nhất: chữ lớn hơn */

.news-grid > .news-card:only-child
.news-content{
    justify-content:center;

    padding:30px 32px;
}

.news-grid > .news-card:only-child
.news-content h3{
    font-size:23px;
    line-height:1.45;
}

.news-grid > .news-card:only-child
.news-content p{
    font-size:14px;
    line-height:1.8;
}


/* DATE */

.news-meta{
    margin-top:auto;

    padding-top:12px;

    border-top:1px solid #edf0f2;

    color:#939ca4;

    font-size:11px;
}


/* TABLET */

@media(max-width:900px){

    .news-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .news-grid > .news-card:only-child{
        grid-column:1 / -1;

        grid-template-columns:1fr 1fr;
    }

}


/* MOBILE */

@media(max-width:650px){

    .news-grid{
        grid-template-columns:1fr;
    }

    .news-grid > .news-card:only-child{
        display:block;
    }

    .news-grid > .news-card:only-child
    .news-image{
        min-height:0;
        height:230px;
    }

    .news-grid > .news-card:only-child
    .news-content{
        padding:20px;
    }

    .news-grid > .news-card:only-child
    .news-content h3{
        font-size:18px;
    }

}
/* =========================================================
   HOME V3
========================================================= */

.home-v3{
    background:#fff;
}


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

.home-v3-hero{
    position:relative;

    min-height:455px;

    overflow:hidden;

    background:#fff;
}

.home-v3-hero-image{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            #fff 0%,
            rgba(255,255,255,.95) 28%,
            rgba(255,255,255,.55) 52%,
            rgba(255,255,255,0) 70%
        ),
        url('../images/doi-tuong-bao-tro.png')
        center right / cover no-repeat;
}

.home-v3-hero .container{
    position:relative;
    z-index:2;
}

.home-v3-hero-content{
    max-width:560px;

    padding-top:85px;
}

.home-v3-eyebrow{
    color:#075aa7;

    font-size:18px;
    font-weight:700;
}

.home-v3-hero h1{
    margin:12px 0 16px;

    color:#ed1c24;

    font-size:50px;
    line-height:1.08;
}

.home-v3-hero p{
    max-width:500px;

    color:#43545f;

    font-size:16px;
    line-height:1.8;
}

.home-v3-hero-buttons{
    display:flex;

    gap:12px;

    margin-top:25px;
}

.home-v3-btn-red,
.home-v3-btn-yellow{
    padding:13px 20px;

    border-radius:22px;

    font-size:11px;
    font-weight:800;

    text-decoration:none;
}

.home-v3-btn-red{
    background:#ed1c24;
    color:#fff;
}

.home-v3-btn-yellow{
    background:#ffc425;
    color:#2a3136;
}


/* =========================================================
   STATS
========================================================= */

.home-v3-stats{
    position:relative;
    z-index:5;

    margin-top:-15px;
}

.home-v3-stats-grid{
    display:grid;

    grid-template-columns:
        repeat(6,1fr);

    background:#fff;

    border-radius:13px;

    box-shadow:
        0 8px 28px
        rgba(0,0,0,.12);

    overflow:hidden;
}

.home-v3-stat{
    min-height:150px;

    padding:19px 12px;

    text-align:center;

    border-right:
        1px solid #e9edf0;
}

.home-v3-stat:last-child{
    border-right:0;
}

.stat-icon{
    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:
        0 auto 10px;

    border-radius:50%;

    font-size:21px;
}

.stat-icon.red{
    background:#ed1c24;
    color:#fff;
}

.stat-icon.yellow{
    background:#ffc425;
}

.stat-icon.blue{
    background:#075aa7;
    color:#fff;
}

.home-v3-stat strong{
    display:block;

    color:#ed1c24;

    font-size:22px;
}

.home-v3-stat span{
    display:block;

    margin-top:5px;

    color:#344653;

    font-size:11px;
    line-height:1.45;
}


/* =========================================================
   COMMON SECTION
========================================================= */

.home-v3-section{
    padding:65px 0;
}

.home-v3-title{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:18px;

    margin-bottom:38px;
}

.home-v3-title > span{
    width:65px;
    height:1px;

    background:#ed1c24;
}

.home-v3-title h2{
    margin:0;

    color:#ed1c24;

    font-size:24px;
}


/* =========================================================
   TIMELINE
========================================================= */

.home-v3-timeline{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:25px;
}

.home-v3-timeline::before{
    content:"";

    position:absolute;

    top:48px;
    left:10%;
    right:10%;

    height:2px;

    background:#dbe6ef;
}

.home-v3-year{
    position:relative;
    z-index:2;

    text-align:center;
}

.year-circle{
    width:98px;
    height:98px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:
        0 auto 17px;

    border:2px solid;

    border-radius:50%;

    background:#fff;

    font-size:21px;
    font-weight:800;
}

.home-v3-year.red
.year-circle{
    border-color:#ed1c24;
    color:#ed1c24;
}

.home-v3-year.yellow
.year-circle{
    border-color:#ffc425;
    color:#e5a800;
}

.home-v3-year.blue
.year-circle{
    border-color:#075aa7;
    color:#075aa7;
}

.home-v3-year h3{
    margin:0 0 6px;

    color:#263b49;

    font-size:13px;
    line-height:1.45;
}

.home-v3-year p{
    margin:0;

    color:#78838c;

    font-size:10px;
    line-height:1.55;
}


/* =========================================================
   FUNCTIONS
========================================================= */

.home-v3-functions{
    padding-top:20px;
}

.home-v3-function-grid{
    display:grid;

    grid-template-columns:
        repeat(6,1fr);

    gap:13px;
}

.home-v3-function{
    min-height:220px;

    padding:25px 16px;

    background:#fff;

    border:1px solid #e4e8eb;
    border-radius:10px;

    text-align:center;

    box-shadow:
        0 5px 20px
        rgba(0,0,0,.04);
}

.function-v3-icon{
    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:
        0 auto 16px;

    border-radius:50%;

    font-size:25px;
}

.function-v3-icon.red{
    background:#ffe8ea;
}

.function-v3-icon.yellow{
    background:#fff5d4;
}

.function-v3-icon.blue{
    background:#e5f1fb;
}

.home-v3-function h3{
    margin:0 0 9px;

    color:#253d4e;

    font-size:14px;
}

.home-v3-function p{
    margin:0;

    color:#707d86;

    font-size:10px;
    line-height:1.55;
}


/* =========================================================
   HOME V3 - NEWS + NOTICE
   CLEAN VERSION
========================================================= */

.home-v3-info{
    padding:40px 0 65px;
    background:#f6f8fa;
}

.home-v3-info-grid{
    display:grid;
    grid-template-columns:minmax(0,2.1fr) minmax(320px,.9fr);
    gap:20px;
    align-items:stretch;
}


/* =========================================================
   KHUNG CHUNG
========================================================= */

.home-v3-news,
.home-v3-notice{
    overflow:hidden;
    background:#fff;
    border-radius:12px;

    box-shadow:
        0 6px 22px
        rgba(25,48,66,.06);
}


/* =========================================================
   HEADER TIN TỨC
========================================================= */

.home-v3-box-title{
    min-height:68px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:0 22px;

    border-bottom:1px solid #e6ebef;
}


/*
 * QUAN TRỌNG:
 * Ép đúng hệ font để loại lỗi serif.
 */

.home-v3-box-title h2,
.home-v3-news .home-v3-box-title h2{
    margin:0 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:29px !important;
    line-height:1.2 !important;

    font-style:normal !important;
    font-weight:800 !important;

    letter-spacing:0 !important;
    text-transform:uppercase !important;

    color:#ed1c24 !important;
}

.home-v3-box-title > a{
    flex:0 0 auto;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:13px;
    font-weight:700;

    color:#075aa7;

    text-decoration:none;
}

.home-v3-box-title > a:hover{
    color:#ed1c24;
}


/* =========================================================
   NEWS LAYOUT
========================================================= */

.home-v3-news-layout{
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);

    gap:20px;

    padding:20px;
}


/* =========================================================
   TIN NỔI BẬT
========================================================= */

.home-v3-news-main{
    min-width:0;
}

.home-v3-news-image{
    position:relative;

    display:block;

    width:100%;
    height:270px;

    overflow:hidden;

    border-radius:9px;

    background:#edf2f5;
}

.home-v3-news-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .35s ease;
}

.home-v3-news-main:hover
.home-v3-news-image img{
    transform:scale(1.035);
}


/* DATE */

.home-v3-date{
    position:absolute;

    left:13px;
    bottom:13px;

    width:55px;

    overflow:hidden;

    border-radius:6px;

    background:#fff;

    text-align:center;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.16);
}

.home-v3-date strong{
    display:block;

    padding:5px 0 2px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:20px !important;
    line-height:1.2;

    color:#ed1c24;
}

.home-v3-date span{
    display:block;

    padding:4px 2px;

    background:#f2f5f7;

    color:#64727c;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:11px !important;
}


/* CATEGORY LABEL */

.home-v3-news-label{
    position:absolute;

    left:79px;
    bottom:13px;

    max-width:calc(100% - 95px);

    padding:7px 11px;

    border-radius:4px;

    background:rgba(7,90,167,.92);

    color:#fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:12px !important;
    font-weight:700;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* MAIN CONTENT */

.home-v3-news-main-text{
    padding:17px 3px 0;
}

.home-v3-news-main-text h3{
    margin:0 0 10px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:20px !important;
    line-height:1.45;

    font-style:normal;
    font-weight:750;
}

.home-v3-news-main-text h3 a{
    color:#243c4c;
    text-decoration:none;
}

.home-v3-news-main-text h3 a:hover{
    color:#ed1c24;
}

.home-v3-news-main-text p{
    margin:0;

    color:#65737d;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:15px !important;
    line-height:1.7;
}


/* =========================================================
   TIN PHỤ
========================================================= */

.home-v3-news-small-list{
    min-width:0;

    display:flex;
    flex-direction:column;
}

.home-v3-news-small{
    display:grid;
    grid-template-columns:120px minmax(0,1fr);

    gap:13px;

    padding-bottom:14px;
    margin-bottom:14px;

    border-bottom:1px solid #e9edf0;
}

.home-v3-news-small:last-child{
    margin-bottom:0;
}

.home-v3-news-small > a{
    display:block;

    width:120px;
    height:82px;

    overflow:hidden;

    border-radius:6px;

    background:#edf2f5;
}

.home-v3-news-small img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.home-v3-news-small span{
    display:block;

    margin-bottom:5px;

    color:#849099;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:12px !important;
}

.home-v3-news-small h3{
    margin:0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:15px !important;
    line-height:1.45;

    font-style:normal;
    font-weight:700;
}

.home-v3-news-small h3 a{
    color:#304653;
    text-decoration:none;
}

.home-v3-news-small h3 a:hover{
    color:#ed1c24;
}


/* FALLBACK */

.home-v3-news-fallback{
    display:block;

    padding:13px 5px;

    border-bottom:1px solid #e9edf0;

    color:#075aa7;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:14px !important;
    font-weight:700;

    text-decoration:none;
}

.home-v3-news-fallback:hover{
    color:#ed1c24;
}


/* =========================================================
   THÔNG BÁO
========================================================= */

.home-v3-notice-title{
    min-height:68px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    padding:0 20px;

    background:
        linear-gradient(
            90deg,
            #075aa7,
            #086ab8
        );
}

.home-v3-notice-title h2{
    margin:0 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:25px !important;
    line-height:1.2 !important;

    font-style:normal !important;
    font-weight:800 !important;

    color:#fff !important;

    letter-spacing:0 !important;
    text-transform:uppercase;
}

.home-v3-notice-title a{
    flex:0 0 auto;

    color:#fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:12px !important;
    font-weight:700;

    text-decoration:none;

    opacity:.92;
}

.home-v3-notice-title a:hover{
    opacity:1;
}


/* LIST */

.home-v3-notice-list{
    padding:13px 20px 18px;
}

.home-v3-notice-item{
    display:grid;
    grid-template-columns:19px minmax(0,1fr);

    gap:9px;

    padding:15px 0;

    border-bottom:1px solid #e9edf0;
}

.home-v3-notice-item:last-child{
    border-bottom:0;
}


/* DOT */

.notice-v3-dot{
    position:relative;

    width:10px;
    height:10px;

    margin-top:6px;

    border:2px solid #3285ca;
    border-radius:50%;

    background:#fff;
}


/* DATE */

.home-v3-notice-item span{
    display:block;

    margin-bottom:4px;

    color:#828d95;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:12px !important;
}


/* TITLE */

.home-v3-notice-item h3{
    margin:0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:15px !important;
    line-height:1.5;

    font-style:normal;
    font-weight:650;
}

.home-v3-notice-item h3,
.home-v3-notice-item h3 a{
    color:#334954;
}

.home-v3-notice-item h3 a{
    text-decoration:none;
}

.home-v3-notice-item h3 a:hover{
    color:#ed1c24;
}


/* EMPTY */

.home-v3-empty{
    padding:36px 22px;

    color:#7f8b93;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:14px !important;

    text-align:center;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:950px){

    .home-v3-info-grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:700px){

    .home-v3-box-title h2,
    .home-v3-news .home-v3-box-title h2{
        font-size:25px !important;
    }

    .home-v3-notice-title h2{
        font-size:23px !important;
    }

    .home-v3-news-layout{
        grid-template-columns:1fr;
    }

    .home-v3-news-image{
        height:250px;
    }

}


@media(max-width:520px){

    .home-v3-box-title,
    .home-v3-notice-title{
        min-height:auto;

        padding-top:16px;
        padding-bottom:16px;
    }

    .home-v3-box-title{
        align-items:flex-start;
    }

    .home-v3-news-small{
        grid-template-columns:105px minmax(0,1fr);
    }

    .home-v3-news-small > a{
        width:105px;
        height:75px;
    }

}
/* =========================================================
   GALLERY
========================================================= */

.home-v3-gallery{
    padding:55px 0;
}

.home-v3-gallery-header{
    display:flex;

    align-items:center;
    justify-content:space-between;

    margin-bottom:20px;
}

.home-v3-gallery-header h2{
    margin:0;

    color:#ed1c24;

    font-size:20px;
}

.home-v3-gallery-header a{
    color:#075aa7;

    font-size:9px;
    font-weight:700;

    text-decoration:none;
}

.home-v3-gallery-grid{
    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:12px;
}

.home-v3-gallery-item{
    position:relative;

    display:block;

    overflow:hidden;

    border-radius:8px;

    text-decoration:none;
}

.home-v3-gallery-item img{
    width:100%;
    height:155px;

    display:block;

    object-fit:cover;
}

.home-v3-gallery-item::after{
    content:"";

    position:absolute;

    inset:50% 0 0;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.6)
        );
}

.home-v3-gallery-item span{
    position:absolute;

    z-index:2;

    left:12px;
    bottom:10px;

    color:#fff;

    font-size:10px;
    font-weight:700;
}


/* =========================================================
   COMMUNITY
========================================================= */

.home-v3-community{
    padding:20px 0 60px;
}

.home-v3-community-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:14px;
}

.community-card{
    min-height:115px;

    display:flex;
    flex-direction:column;

    justify-content:center;

    padding:20px;

    border-radius:10px;

    text-decoration:none;
}

.community-card strong{
    font-size:14px;
    line-height:1.4;
}

.community-card span{
    margin-top:10px;

    font-size:9px;
    font-weight:700;
}

.red-card{
    background:#ffe5e7;
    color:#ed1c24;
}

.yellow-card{
    background:#fff3c9;
    color:#c89600;
}

.blue-card{
    background:#deedfa;
    color:#075aa7;
}

.pink-card{
    background:#ffe2e6;
    color:#d92542;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

    .home-v3-stats-grid,
    .home-v3-function-grid{
        grid-template-columns:
            repeat(3,1fr);
    }

    .home-v3-timeline{
        grid-template-columns:
            repeat(3,1fr);
    }

    .home-v3-timeline::before{
        display:none;
    }

    .home-v3-gallery-grid{
        grid-template-columns:
            repeat(3,1fr);
    }

}


@media(max-width:850px){

    .home-v3-info-grid{
        grid-template-columns:1fr;
    }

    .home-v3-community-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:650px){

    .home-v3-hero{
        min-height:430px;
    }

    .home-v3-hero-content{
        padding-top:55px;
    }

    .home-v3-hero h1{
        font-size:37px;
    }

    .home-v3-stats-grid,
    .home-v3-function-grid,
    .home-v3-timeline,
    .home-v3-gallery-grid,
    .home-v3-community-grid{
        grid-template-columns:1fr;
    }

    .home-v3-news-layout{
        grid-template-columns:1fr;
    }

    .home-v3-gallery-item img{
        height:220px;
    }

}
/* =========================================================
   HEADER V3
========================================================= */

.header-v3{
    position:relative;
    z-index:100;

    background:#fff;

    box-shadow:
        0 1px 7px rgba(0,0,0,.05);
}


/* =========================================================
   TOP BAR
========================================================= */

.header-v3-top{
    height:35px;

    display:flex;
    align-items:center;

    background:#f5f7f9;

    border-bottom:
        1px solid #e8ecef;
}

.header-v3-top .container{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.header-v3-top-left span{
    color:#075aa7;

    font-size:10px;
    font-weight:650;

    letter-spacing:.2px;
}

.header-v3-top-right{
    display:flex;
    align-items:center;

    gap:20px;
}

.header-v3-top-right a{
    color:#075aa7;

    font-size:9px;
    font-weight:600;

    text-decoration:none;

    transition:.2s;
}

.header-v3-top-right a:hover{
    color:#ed1c24;
}


/* =========================================================
   MAIN HEADER
========================================================= */

.header-v3-main{
    background:#fff;
}

.header-v3-main-grid{
    min-height:120px;

    display:grid;

    grid-template-columns:
        minmax(380px,1fr)
        auto;

    gap:35px;

    align-items:center;
}


/* BRAND */

.header-v3-brand{
    display:flex;
    align-items:center;

    gap:16px;

    text-decoration:none;
}

.header-v3-brand img{
    width:90px;
    height:90px;

    object-fit:contain;
}

.header-v3-brand h1{
    margin:0;

    color:#ed1c24;

    font-size:22px;
    line-height:1.25;

    font-weight:800;
}

.header-v3-brand p{
    margin:6px 0 0;

    color:#075aa7;

    font-size:13px;
    font-weight:800;
}


/* TOOLS */

.header-v3-tools{
    display:flex;
    align-items:center;

    gap:28px;
}


/* =========================================================
   SEARCH
========================================================= */

.header-v3-search{
    width:250px;
    height:38px;

    display:flex;

    overflow:hidden;

    border:
        1px solid #dce2e7;

    border-radius:20px;

    background:#fff;

    transition:.2s;
}

.header-v3-search:focus-within{
    border-color:#075aa7;

    box-shadow:
        0 0 0 3px
        rgba(7,90,167,.06);
}

.header-v3-search input{
    flex:1;

    min-width:0;

    padding:
        0 8px 0 15px;

    border:0;

    outline:none;

    background:transparent;

    color:#344753;

    font-size:11px;
}

.header-v3-search input::placeholder{
    color:#a0a8ae;
}

.header-v3-search button{
    width:42px;

    border:0;

    background:transparent;

    color:#075aa7;

    cursor:pointer;

    font-size:13px;
}


/* =========================================================
   HOTLINE
========================================================= */

.header-v3-hotline{
    display:flex;
    align-items:center;

    gap:10px;
}

.header-v3-phone-icon{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        2px solid #ed1c24;

    border-radius:50%;

    color:#ed1c24;

    font-size:18px;
}

.header-v3-hotline span{
    display:block;

    margin-bottom:2px;

    color:#075aa7;

    font-size:9px;
    font-weight:600;
}

.header-v3-hotline strong{
    display:block;

    color:#ed1c24;

    font-size:15px;
    font-weight:800;

    white-space:nowrap;
}


/* =========================================================
   MAIN MENU
========================================================= */

.header-v3-menu{
    min-height:48px;

    background:#ed1c24;

    box-shadow:
        0 3px 8px
        rgba(0,0,0,.08);
}

.header-v3-menu .container{
    display:flex;
    align-items:stretch;

    min-height:48px;
}


/* MENU LINKS */

.header-v3-menu a{
    min-height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 16px;

    color:#fff;

    font-size:10px;
    font-weight:750;

    text-decoration:none;

    white-space:nowrap;

    border-left:
        1px solid
        rgba(255,255,255,.08);

    transition:
        background .2s,
        color .2s;
}

.header-v3-menu a:hover{
    background:#c91018;
}

.header-v3-menu a.active{
    background:#c91018;
}


/* HOME */

.header-v3-menu
.header-home{
    width:52px;

    padding:0;

    font-size:16px;

    background:
        rgba(255,255,255,.08);
}

.header-v3-menu
.header-home:hover,
.header-v3-menu
.header-home.active{
    background:#c91018;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media(min-width:1400px){

    .header-v3-menu a{
        padding:
            0 18px;

        font-size:10.5px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .header-v3-main-grid{
        grid-template-columns:1fr;

        gap:15px;

        padding:
            18px 0;
    }

    .header-v3-tools{
        justify-content:
            space-between;
    }

    .header-v3-search{
        width:
            min(400px,60%);
    }

    .header-v3-menu
    .container{
        overflow-x:auto;

        scrollbar-width:none;
    }

    .header-v3-menu
    .container::-webkit-scrollbar{
        display:none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    .header-v3-top{
        display:none;
    }

    .header-v3-main-grid{
        display:block;

        min-height:auto;

        padding:
            15px 0;
    }

    .header-v3-brand{
        justify-content:center;
    }

    .header-v3-brand img{
        width:68px;
        height:68px;
    }

    .header-v3-brand h1{
        font-size:16px;
    }

    .header-v3-brand p{
        font-size:10px;
    }

    .header-v3-tools{
        margin-top:15px;

        gap:10px;
    }

    .header-v3-search{
        width:100%;
    }

    .header-v3-hotline{
        display:none;
    }

    .header-v3-menu{
        min-height:44px;
    }

    .header-v3-menu
    .container{
        min-height:44px;
    }

    .header-v3-menu a{
        min-height:44px;

        padding:
            0 13px;

        font-size:9px;
    }

}
/* =========================================================
   FOOTER V3
========================================================= */

.footer-v3{
    background:#07518b;

    color:#fff;
}


/* MAIN */

.footer-v3 > .container{
    padding-top:42px;
    padding-bottom:38px;
}


.footer-v3-grid{
    display:grid;

    grid-template-columns:
        1.35fr .8fr 1fr;

    gap:55px;
}


/* COLUMN */

.footer-v3-column h3{
    margin:0 0 18px;

    color:#fff;

    font-size:15px;
    line-height:1.45;
}


/* ABOUT */

.footer-v3-about ul{
    margin:0;
    padding:0;

    list-style:none;
}


.footer-v3-about li{
    display:grid;

    grid-template-columns:
        20px 1fr;

    gap:7px;

    margin-bottom:9px;

    color:#e6f0f7;

    font-size:11px;
    line-height:1.55;
}


.footer-v3-about li > span{
    color:#ffc425;

    font-weight:700;
}


/* SOCIAL */

.footer-social{
    display:flex;

    gap:7px;

    margin-top:17px;
}


.footer-social a{
    width:30px;
    height:30px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        rgba(255,255,255,.12);

    color:#fff;

    font-size:11px;
    font-weight:800;

    text-decoration:none;

    transition:.2s;
}


.footer-social a:hover{
    background:#ed1c24;

    transform:
        translateY(-2px);
}


/* QUICK LINKS */

.footer-v3-links{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:9px 20px;
}


.footer-v3-links a{
    color:#e8f1f7;

    font-size:11px;

    text-decoration:none;
}


.footer-v3-links a:hover{
    color:#ffc425;
}


/* USEFUL LINKS */

.footer-useful-links{
    display:flex;

    flex-direction:column;

    gap:8px;
}


.footer-useful-links > a{
    min-height:48px;

    display:grid;

    grid-template-columns:
        47px 1fr;

    gap:10px;

    align-items:center;

    padding:6px 9px;

    background:#fff;

    border-radius:5px;

    text-decoration:none;

    box-shadow:
        0 3px 10px
        rgba(0,0,0,.08);
}


.useful-icon{
    width:37px;
    height:37px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#eef5fb;

    color:#075aa7;

    font-size:9px;
    font-weight:800;
}


.footer-useful-links strong{
    display:block;

    color:#263e50;

    font-size:9px;
    line-height:1.3;
}


.footer-useful-links small{
    display:block;

    margin-top:2px;

    color:#7b8790;

    font-size:7px;
}


/* BOTTOM */

.footer-v3-bottom{
    background:#063f70;

    border-top:
        1px solid
        rgba(255,255,255,.08);
}


.footer-v3-bottom .container{
    min-height:48px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:20px;

    color:#dce9f3;

    font-size:9px;
}


.footer-bottom-links{
    display:flex;

    gap:10px;

    align-items:center;
}


.footer-bottom-links a{
    color:#dce9f3;

    text-decoration:none;
}


.footer-bottom-links a:hover{
    color:#ffc425;
}


/* =========================================================
   FLOATING BUTTONS
========================================================= */

.floating-phone,
.back-to-top{
    position:fixed;

    right:24px;

    width:43px;
    height:43px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    z-index:999;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.18);
}


/* PHONE */

.floating-phone{
    bottom:76px;

    background:#ed1c24;

    color:#fff;

    font-size:18px;

    text-decoration:none;
}


.floating-phone:hover{
    background:#cb121a;
}


/* BACK TO TOP */

.back-to-top{
    bottom:25px;

    border:0;

    background:#075aa7;

    color:#fff;

    font-size:19px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:
        translateY(8px);

    transition:.25s;
}


.back-to-top.show{
    opacity:1;

    visibility:visible;

    transform:
        translateY(0);
}


.back-to-top:hover{
    background:#06477f;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

    .footer-v3-grid{
        grid-template-columns:
            1fr 1fr;
    }

    .footer-v3-column:last-child{
        grid-column:
            1 / -1;
    }

}


@media(max-width:600px){

    .footer-v3-grid{
        grid-template-columns:1fr;

        gap:32px;
    }


    .footer-v3-column:last-child{
        grid-column:auto;
    }


    .footer-v3-links{
        grid-template-columns:1fr;
    }


    .footer-v3-bottom
    .container{
        flex-direction:column;

        justify-content:center;

        padding:
            13px 0;

        text-align:center;
    }


    .floating-phone,
    .back-to-top{
        right:15px;

        width:40px;
        height:40px;
    }

}
/* =====================================================
   TIN TỪ SỞ Y TẾ
===================================================== */

.hcm-health-news{
    padding:42px 0 32px;
    background:#f4f8fc;
}

.portal-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin-bottom:20px;
}

.portal-section-head > div > span{
    display:block;

    margin-bottom:4px;

    color:#075aa7;

    font-size:10px;
    font-weight:800;

    letter-spacing:.8px;
}

.portal-section-head h2{
    margin:0;

    color:#075aa7;

    font-size:23px;
}

.portal-section-head > a{
    color:#075aa7;

    font-size:10px;
    font-weight:700;

    text-decoration:none;
}

.health-news-source{
    margin:5px 0 0;

    color:#87939b;

    font-size:8.5px;
}

.health-news-grid{
    display:grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    gap:14px;
}

.health-news-card{
    overflow:hidden;

    background:#fff;

    border:1px solid #e2e9ee;
    border-radius:10px;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.045);

    transition:.25s;
}

.health-news-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 10px 24px
        rgba(0,0,0,.08);
}

.health-news-image{
    display:block;

    height:135px;

    overflow:hidden;

    background:#eaf3fa;

    text-decoration:none;
}

.health-news-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.health-news-placeholder{
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #075aa7,
            #0b71c4
        );

    color:#fff;
}

.health-placeholder-icon{
    width:35px;
    height:35px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:7px;

    border:2px solid
        rgba(255,255,255,.7);

    border-radius:50%;

    font-size:21px;
    font-weight:300;
}

.health-news-placeholder strong{
    font-size:11px;
    letter-spacing:.5px;
}

.health-news-placeholder span{
    margin-top:2px;

    color:#d9eafa;

    font-size:8px;
}

.health-news-body{
    padding:12px 12px 14px;
}

.health-news-body time{
    display:block;

    margin-bottom:6px;

    color:#909aa2;

    font-size:8px;
}

.health-news-body h3{
    margin:0;

    font-size:11px;
    line-height:1.5;
}

.health-news-body h3 a{
    color:#263e4e;

    text-decoration:none;
}

.health-news-body h3 a:hover{
    color:#ed1c24;
}

.health-news-body p{
    margin:7px 0 0;

    color:#7a8790;

    font-size:8.5px;
    line-height:1.55;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

.rss-empty{
    padding:30px;

    background:#fff;

    border:1px dashed #d4e0e8;
    border-radius:9px;

    text-align:center;
}

.rss-empty strong{
    display:block;

    color:#075aa7;

    font-size:12px;
}

.rss-empty span{
    display:block;

    margin-top:5px;

    color:#87939b;

    font-size:9px;
}

@media(max-width:1000px){

    .health-news-grid{
        grid-template-columns:
            repeat(3,1fr);
    }

}

@media(max-width:650px){

    .portal-section-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .health-news-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}

@media(max-width:450px){

    .health-news-grid{
        grid-template-columns:1fr;
    }

}
/* =========================================================
   HOME V3 FIX
   THƯ VIỆN HÌNH ẢNH + CẢI CÁCH HÀNH CHÍNH
   DÁN CUỐI style.css
========================================================= */


/* =========================================================
   SECTION HEADER CHUNG
========================================================= */

.portal-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;

    margin-bottom:26px;
}

.portal-section-head > div{
    min-width:0;
}

.portal-section-head > div > span{
    display:block;

    margin-bottom:5px;

    color:#075aa7;

    font-size:11px;
    font-weight:800;
    letter-spacing:.9px;

    text-transform:uppercase;
}

.portal-section-head h2{
    position:relative;

    margin:0;

    padding-bottom:12px;

    color:#ed1c24;

    font-size:25px;
    line-height:1.25;
    font-weight:800;
}

.portal-section-head h2::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:48px;
    height:3px;

    border-radius:3px;

    background:#ffc425;
}

.portal-section-head > a{
    flex:0 0 auto;

    padding-bottom:5px;

    color:#075aa7;

    font-size:11px;
    font-weight:750;

    text-decoration:none;

    transition:.2s;
}

.portal-section-head > a:hover{
    color:#ed1c24;
}


/* =========================================================
   THƯ VIỆN HÌNH ẢNH
========================================================= */

.portal-gallery-section{
    position:relative;

    padding:65px 0 72px;

    overflow:hidden;

    background:#fff;
}


/* Nền rất nhẹ */

.portal-gallery-section::before{
    content:"";

    position:absolute;

    width:360px;
    height:360px;

    right:-170px;
    top:-140px;

    border-radius:50%;

    background:
        rgba(7,90,167,.035);

    pointer-events:none;
}


/* GRID DESKTOP
   Ảnh đầu lớn, 4 ảnh còn lại nhỏ
*/

.portal-gallery-grid{
    position:relative;
    z-index:2;

    min-height:455px;

    display:grid;

    grid-template-columns:
        1.35fr 1fr 1fr;

    grid-template-rows:
        1fr 1fr;

    gap:14px;
}


/* CARD */

.portal-gallery-card{
    position:relative;

    min-width:0;

    display:block;

    overflow:hidden;

    border-radius:12px;

    background:#e9eef2;

    box-shadow:
        0 7px 22px
        rgba(21,47,68,.08);

    text-decoration:none;

    isolation:isolate;
}


/* Ảnh đầu lớn */

.portal-gallery-card:first-child{
    grid-row:
        1 / 3;
}


/* IMAGE */

.portal-gallery-card img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .45s ease,
        filter .35s ease;
}


/* Overlay */

.portal-gallery-card::after{
    content:"";

    position:absolute;

    inset:35% 0 0;

    z-index:1;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(5,24,38,.72)
        );

    pointer-events:none;
}


/* LABEL */

.portal-gallery-card > span{
    position:absolute;

    z-index:3;

    left:17px;
    right:17px;
    bottom:15px;

    color:#fff;

    font-size:12px;
    line-height:1.4;
    font-weight:750;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,.35);
}


/* Ảnh lớn: label lớn hơn */

.portal-gallery-card:first-child > span{
    left:22px;
    bottom:20px;

    font-size:16px;
}


/* HOVER */

.portal-gallery-card:hover img{
    transform:scale(1.045);

    filter:
        saturate(1.05)
        contrast(1.02);
}


/* Viền highlight khi hover */

.portal-gallery-card::before{
    content:"";

    position:absolute;

    inset:0;

    z-index:4;

    border:
        2px solid transparent;

    border-radius:12px;

    pointer-events:none;

    transition:.25s;
}

.portal-gallery-card:hover::before{
    border-color:
        rgba(255,196,37,.85);
}


/* =========================================================
   CẢI CÁCH HÀNH CHÍNH
========================================================= */

.home-cchc-section{
    position:relative;

    padding:65px 0 75px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #f7fbf9 0%,
            #f2f8f5 55%,
            #f8fbfd 100%
        );

    border-top:
        1px solid #e3ece7;

    border-bottom:
        1px solid #e3ece7;
}


/* Accent nền */

.home-cchc-section::before{
    content:"";

    position:absolute;

    width:340px;
    height:340px;

    left:-170px;
    bottom:-170px;

    border-radius:50%;

    background:
        rgba(34,139,83,.05);

    pointer-events:none;
}


/* Header CCHC dùng xanh lá để tạo chủ đề riêng */

.home-cchc-section
.portal-section-head > div > span{
    color:#16874a;
}

.home-cchc-section
.portal-section-head h2{
    color:#16874a;
}

.home-cchc-section
.portal-section-head h2::after{
    background:#ffc425;
}

.home-cchc-section
.portal-section-head > a{
    color:#16874a;
}


/* GRID */

.home-cchc-grid{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    gap:14px;
}


/* CARD */

.home-cchc-card{
    position:relative;

    min-width:0;
    min-height:125px;

    display:flex;
    align-items:center;

    gap:13px;

    padding:18px;

    overflow:hidden;

    border:
        1px solid #d8e9df;

    border-radius:11px;

    background:#fff;

    box-shadow:
        0 5px 17px
        rgba(24,79,48,.05);

    text-decoration:none;

    transition:
        transform .25s,
        border-color .25s,
        box-shadow .25s;
}


/* Accent trên đầu card */

.home-cchc-card::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            #16874a,
            #4bbd79
        );

    opacity:0;

    transition:.25s;
}


/* ICON / NUMBER */

.home-cchc-icon{
    flex:
        0 0 47px;

    width:47px;
    height:47px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#eaf7ef;

    color:#16874a;

    font-size:11px;
    font-weight:850;

    transition:.25s;
}


/* CONTENT */

.home-cchc-card > div:last-child{
    min-width:0;
}

.home-cchc-card strong{
    display:block;

    color:#28533a;

    font-size:11px;
    line-height:1.45;
    font-weight:750;
}

.home-cchc-card span{
    display:block;

    margin-top:6px;

    color:#85938b;

    font-size:9px;
    font-weight:600;
}


/* HOVER */

.home-cchc-card:hover{
    transform:
        translateY(-4px);

    border-color:#9fd0b3;

    box-shadow:
        0 10px 25px
        rgba(24,111,62,.10);
}

.home-cchc-card:hover::before{
    opacity:1;
}

.home-cchc-card:hover
.home-cchc-icon{
    background:#16874a;

    color:#fff;
}


/* =========================================================
   CARD "TẤT CẢ NỘI DUNG CCHC"
========================================================= */

.home-cchc-card.home-cchc-all{
    border-color:#16874a;

    background:
        linear-gradient(
            145deg,
            #17894c,
            #0f713c
        );

    box-shadow:
        0 8px 24px
        rgba(16,112,60,.15);
}

.home-cchc-card.home-cchc-all::before{
    display:none;
}

.home-cchc-all
.home-cchc-icon{
    background:#ffc425;

    color:#28533a;

    font-size:18px;
}

.home-cchc-all strong{
    color:#fff;
}

.home-cchc-all span{
    color:
        rgba(255,255,255,.82);
}

.home-cchc-all:hover{
    transform:
        translateY(-4px);

    box-shadow:
        0 12px 30px
        rgba(16,112,60,.22);
}


/* =========================================================
   KẾT NỐI CỘNG ĐỒNG
   TINH CHỈNH LẠI ĐỂ ĐỒNG BỘ
========================================================= */

.home-v3-community{
    padding:
        58px 0 68px;

    background:#fff;
}

.home-v3-community
.home-v3-title{
    margin-bottom:30px;
}

.home-v3-community-grid{
    gap:16px;
}

.community-card{
    position:relative;

    min-height:130px;

    overflow:hidden;

    border:
        1px solid
        rgba(0,0,0,.035);

    box-shadow:
        0 5px 17px
        rgba(0,0,0,.045);

    transition:
        transform .25s,
        box-shadow .25s;
}

.community-card::after{
    content:"→";

    position:absolute;

    right:17px;
    bottom:15px;

    width:27px;
    height:27px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        rgba(255,255,255,.72);

    font-size:12px;
}

.community-card:hover{
    transform:
        translateY(-4px);

    box-shadow:
        0 10px 24px
        rgba(0,0,0,.08);
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media(max-width:1100px){

    .portal-gallery-grid{
        min-height:auto;

        grid-template-columns:
            repeat(2,1fr);

        grid-template-rows:auto;
    }

    .portal-gallery-card,
    .portal-gallery-card:first-child{
        grid-row:auto;

        height:245px;
    }

    .portal-gallery-card:first-child{
        grid-column:
            1 / -1;

        height:360px;
    }


    .home-cchc-grid{
        grid-template-columns:
            repeat(3,1fr);
    }

}


/* =========================================================
   RESPONSIVE - TABLET NHỎ
========================================================= */

@media(max-width:800px){

    .portal-gallery-section,
    .home-cchc-section{
        padding:
            50px 0;
    }


    .portal-gallery-card,
    .portal-gallery-card:first-child{
        height:230px;
    }


    .home-cchc-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media(max-width:600px){

    .portal-section-head{
        flex-direction:column;

        align-items:flex-start;

        gap:8px;
    }

    .portal-section-head h2{
        font-size:21px;
    }


    /* GALLERY */

    .portal-gallery-grid{
        display:grid;

        grid-template-columns:1fr;

        gap:12px;
    }

    .portal-gallery-card,
    .portal-gallery-card:first-child{
        grid-column:auto;
        grid-row:auto;

        height:230px;
    }

    .portal-gallery-card:first-child > span{
        font-size:13px;
    }


    /* CCHC */

    .home-cchc-grid{
        grid-template-columns:1fr;
    }

    .home-cchc-card{
        min-height:92px;
    }

}


/* =========================================================
   MOBILE RẤT NHỎ
========================================================= */

@media(max-width:420px){

    .portal-gallery-section,
    .home-cchc-section{
        padding:
            42px 0;
    }

    .portal-gallery-card,
    .portal-gallery-card:first-child{
        height:205px;
    }

}
/* =========================================================
   HOME V3 - TĂNG CỠ CHỮ / TỐI ƯU KHẢ NĂNG ĐỌC
   DÁN CUỐI style.css
========================================================= */


/* ===== TIÊU ĐỀ CÁC CHUYÊN ĐỀ ===== */

.portal-section-head > div > span{
    font-size:13px;
    line-height:1.4;
    letter-spacing:.7px;
}

.portal-section-head h2{
    font-size:29px;
    line-height:1.25;
}

.portal-section-head > a{
    font-size:13px;
}


/* =========================================================
   TIN TỪ SỞ Y TẾ
========================================================= */

.health-news-source{
    font-size:13px;
    line-height:1.5;
}

.health-news-content{
    padding:18px 17px 19px;
}

.health-news-date{
    font-size:12px;
    line-height:1.4;
}

.health-news-content h3{
    font-size:15px;
    line-height:1.5;
    font-weight:750;
}


/* =========================================================
   TIN TỨC - SỰ KIỆN
========================================================= */

.portal-feature-content .portal-cat{
    font-size:12px;
}

.portal-feature-content h3{
    font-size:20px;
    line-height:1.45;
}

.portal-feature-content p{
    font-size:14px;
    line-height:1.65;
}

.portal-feature-content time{
    font-size:12px;
}

.portal-small-content .portal-cat{
    font-size:11px;
}

.portal-small-content h4{
    font-size:14px;
    line-height:1.5;
}

.portal-small-content time{
    font-size:11px;
}


/* =========================================================
   THÔNG BÁO
========================================================= */

.portal-notice-head h2{
    font-size:22px;
}

.portal-notice-head a{
    font-size:12px;
}

.portal-notice-date strong{
    font-size:19px;
}

.portal-notice-date span{
    font-size:10px;
}

.portal-notice-content strong{
    font-size:14px;
    line-height:1.5;
}

.portal-notice-content span{
    font-size:11px;
}


/* =========================================================
   THƯ VIỆN HÌNH ẢNH
========================================================= */

.portal-gallery-card > span{
    font-size:14px;
    line-height:1.45;
}

.portal-gallery-card:first-child > span{
    font-size:18px;
    line-height:1.4;
}


/* =========================================================
   CẢI CÁCH HÀNH CHÍNH
========================================================= */

.home-cchc-icon{
    font-size:13px;
}

.home-cchc-card strong{
    font-size:14px;
    line-height:1.45;
}

.home-cchc-card span{
    margin-top:7px;

    font-size:12px;
    line-height:1.45;
}


/* =========================================================
   KẾT NỐI CỘNG ĐỒNG
========================================================= */

.community-card strong{
    font-size:15px;
    line-height:1.4;
}

.community-card span{
    font-size:12px;
    line-height:1.45;
}


/* =========================================================
   FOOTER - DỄ ĐỌC HƠN
========================================================= */

.site-footer{
    font-size:14px;
}

.footer-col h3{
    font-size:16px;
    line-height:1.4;
}

.footer-col p,
.footer-col a{
    font-size:13px;
    line-height:1.75;
}

.footer-bottom{
    font-size:12px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .portal-section-head h2{
        font-size:26px;
    }

    .health-news-content h3{
        font-size:15px;
    }

    .portal-feature-content h3{
        font-size:18px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .portal-section-head > div > span{
        font-size:11px;
    }

    .portal-section-head h2{
        font-size:23px;
    }

    .portal-section-head > a{
        font-size:12px;
    }

    .health-news-content h3{
        font-size:15px;
    }

    .portal-feature-content h3{
        font-size:18px;
    }

    .portal-feature-content p{
        font-size:13px;
    }

    .portal-small-content h4{
        font-size:13px;
    }

    .portal-notice-content strong{
        font-size:13px;
    }

    .portal-gallery-card > span{
        font-size:13px;
    }

    .portal-gallery-card:first-child > span{
        font-size:16px;
    }

    .home-cchc-card strong{
        font-size:14px;
    }

    .home-cchc-card span{
        font-size:12px;
    }

}
/* =========================================================
   GLOBAL TYPOGRAPHY V4
   TĂNG ĐỒNG ĐỀU TOÀN BỘ CỠ CHỮ WEBSITE
   DÁN CUỐI CÙNG style.css
========================================================= */


/* =========================================================
   TOÀN WEBSITE
========================================================= */

html{
    font-size:16px;
}

body{
    font-size:16px !important;
    line-height:1.65;
}


/* Nội dung thông thường */

p,
li,
label,
input,
select,
textarea,
button{
    font-size:15px;
}


/* =========================================================
   HEADER - TOP BAR
========================================================= */

.header-v3-top{
    height:40px;
}

.header-v3-top-left span{
    font-size:13px !important;
}

.header-v3-top-right a{
    font-size:12px !important;
}


/* =========================================================
   HEADER - LOGO / TÊN ĐƠN VỊ
========================================================= */

.header-v3-brand h1{
    font-size:25px !important;
    line-height:1.22;
}

.header-v3-brand p{
    font-size:16px !important;
}

.header-v3-hotline span{
    font-size:12px !important;
}

.header-v3-hotline strong{
    font-size:18px !important;
}


/* Tìm kiếm */

.header-v3-search{
    height:42px;
}

.header-v3-search input{
    font-size:14px !important;
}

.header-v3-search button{
    font-size:16px !important;
}


/* =========================================================
   MENU CHÍNH
========================================================= */

.header-v3-menu{
    min-height:54px;
}

.header-v3-menu .container{
    min-height:54px;
}

.header-v3-menu a{
    min-height:54px;

    padding-left:15px;
    padding-right:15px;

    font-size:13px !important;

    font-weight:750;
}

.header-v3-menu .header-home{
    font-size:18px !important;
}


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

.home-v3-eyebrow{
    font-size:21px !important;
}

.home-v3-hero h1{
    font-size:55px !important;
}

.home-v3-hero p{
    font-size:18px !important;
    line-height:1.75;
}


/* BUTTON */

.home-v3-btn-red,
.home-v3-btn-yellow{
    padding:14px 22px;

    font-size:14px !important;
}


/* =========================================================
   THỐNG KÊ
========================================================= */

.home-v3-stat strong{
    font-size:25px !important;
}

.home-v3-stat span{
    font-size:14px !important;
    line-height:1.45;
}


/* =========================================================
   TIÊU ĐỀ SECTION CHUNG
========================================================= */

.home-v3-title h2{
    font-size:29px !important;
}

.portal-section-head > div > span{
    font-size:13px !important;
}

.portal-section-head h2{
    font-size:29px !important;
}

.portal-section-head > a{
    font-size:13px !important;
}


/* =========================================================
   CHỨC NĂNG - NHIỆM VỤ
========================================================= */

.home-v3-function h3{
    font-size:17px !important;
    line-height:1.45;
}

.home-v3-function p{
    font-size:14px !important;
    line-height:1.6;
}

.function-v3-icon{
    font-size:27px !important;
}


/* =========================================================
   TIN TỪ SỞ Y TẾ
========================================================= */

.health-news-source{
    font-size:13px !important;
}

.health-news-body{
    padding:15px 14px 17px;
}

.health-news-body time{
    font-size:12px !important;
}

.health-news-body h3{
    font-size:15px !important;
    line-height:1.5;
}

.health-news-body p{
    font-size:13px !important;
    line-height:1.55;

    -webkit-line-clamp:3;
}

.health-news-placeholder strong{
    font-size:14px !important;
}

.health-news-placeholder span{
    font-size:11px !important;
}


/* =========================================================
   TIN TỨC - SỰ KIỆN
========================================================= */

.home-v3-box-title{
    min-height:62px;
}

.home-v3-box-title h2{
    font-size:22px !important;
}

.home-v3-box-title a{
    font-size:12px !important;
}


/* Tin chính */

.home-v3-news-main-text h3{
    font-size:18px !important;
    line-height:1.5;
}

.home-v3-news-main-text p{
    font-size:14px !important;
    line-height:1.65;
}


/* Nhãn tin */

.home-v3-news-label{
    font-size:11px !important;
}


/* Ngày */

.home-v3-date strong{
    font-size:19px !important;
}

.home-v3-date span{
    font-size:10px !important;
}


/* Tin phụ */

.home-v3-news-small span{
    font-size:11px !important;
}

.home-v3-news-small h3{
    font-size:14px !important;
    line-height:1.5;
}

.home-v3-news-fallback{
    font-size:13px !important;
}


/* =========================================================
   THÔNG BÁO
========================================================= */

.home-v3-notice-title{
    min-height:62px;
}

.home-v3-notice-title h2{
    font-size:21px !important;
}

.home-v3-notice-title a{
    font-size:12px !important;
}

.home-v3-notice-item{
    padding-top:14px;
    padding-bottom:14px;
}

.home-v3-notice-item span{
    font-size:11px !important;
}

.home-v3-notice-item h3{
    font-size:14px !important;
    line-height:1.55;
}


/* =========================================================
   EMPTY MESSAGE
========================================================= */

.home-v3-empty,
.rss-empty{
    font-size:14px !important;
}

.rss-empty strong{
    font-size:16px !important;
}

.rss-empty span{
    font-size:13px !important;
}


/* =========================================================
   THƯ VIỆN HÌNH ẢNH
========================================================= */

.portal-gallery-card > span{
    font-size:15px !important;
    line-height:1.45;
}

.portal-gallery-card:first-child > span{
    font-size:19px !important;
}


/* =========================================================
   CẢI CÁCH HÀNH CHÍNH
========================================================= */

.home-cchc-icon{
    font-size:14px !important;
}

.home-cchc-card strong{
    font-size:15px !important;
    line-height:1.45;
}

.home-cchc-card span{
    font-size:13px !important;
    line-height:1.45;
}


/* =========================================================
   KẾT NỐI CỘNG ĐỒNG
========================================================= */

.community-card strong{
    font-size:17px !important;
    line-height:1.4;
}

.community-card span{
    font-size:13px !important;
}


/* =========================================================
   FOOTER V3
========================================================= */

.footer-v3-column h3{
    font-size:17px !important;
}

.footer-v3-about li{
    font-size:14px !important;
    line-height:1.65;
}

.footer-v3-links a{
    font-size:14px !important;
}

.footer-social a{
    font-size:13px !important;
}


/* LIÊN KẾT HỮU ÍCH */

.footer-useful-links strong{
    font-size:12px !important;
}

.footer-useful-links small{
    font-size:10px !important;
}

.useful-icon{
    font-size:11px !important;
}


/* COPYRIGHT */

.footer-v3-bottom .container{
    font-size:12px !important;
}

.footer-bottom-links a{
    font-size:12px !important;
}


/* =========================================================
   TRANG CHI TIẾT BÀI VIẾT
========================================================= */

.detail-breadcrumb .container{
    font-size:13px !important;
}

.detail-category{
    font-size:13px !important;
}

.detail-title{
    font-size:34px !important;
}

.detail-meta{
    font-size:13px !important;
}

.detail-summary{
    font-size:17px !important;
}

.detail-content{
    font-size:17px !important;
    line-height:1.9;
}

.detail-content h2{
    font-size:26px !important;
}

.detail-content h3{
    font-size:22px !important;
}

.detail-image figcaption{
    font-size:13px !important;
}

.detail-source{
    font-size:13px !important;
}

.detail-actions button{
    font-size:12px !important;
}

.detail-back a{
    font-size:13px !important;
}


/* Sidebar */

.widget-title h2{
    font-size:17px !important;
}

.related-news h3{
    font-size:14px !important;
}

.related-news span{
    font-size:11px !important;
}

.detail-category-list a{
    font-size:14px !important;
}


/* =========================================================
   TRANG CHUYÊN MỤC
========================================================= */

.category-hero span{
    font-size:13px !important;
}

.category-hero h1{
    font-size:37px !important;
}

.category-breadcrumb .container{
    font-size:13px !important;
}

.category-heading span{
    font-size:12px !important;
}

.category-heading h2{
    font-size:28px !important;
}

.category-label{
    font-size:12px !important;
}

.category-item h3{
    font-size:20px !important;
}

.category-date{
    font-size:12px !important;
}

.category-summary{
    font-size:14px !important;
}

.category-readmore{
    font-size:13px !important;
}

.category-sidebar-title{
    font-size:15px !important;
}

.category-sidebar-menu a{
    font-size:14px !important;
}


/* =========================================================
   TRANG VĂN BẢN
========================================================= */

.document-hero > .container > span{
    font-size:13px !important;
}

.document-hero h1{
    font-size:40px !important;
}

.document-hero p{
    font-size:16px !important;
}

.document-breadcrumb .container{
    font-size:13px !important;
}

.search-field label{
    font-size:13px !important;
}

.search-field input,
.search-field select{
    font-size:14px !important;
}

.search-buttons button,
.search-buttons a{
    font-size:13px !important;
}

.document-list-heading span{
    font-size:12px !important;
}

.document-list-heading h2{
    font-size:27px !important;
}

.document-list-heading strong{
    font-size:13px !important;
}

.public-document-meta span,
.public-document-meta small{
    font-size:12px !important;
}

.public-document-info h3{
    font-size:17px !important;
}

.public-document-details{
    font-size:12px !important;
}

.public-document-actions a{
    font-size:12px !important;
}


/* =========================================================
   TRANG CẢI CÁCH HÀNH CHÍNH
========================================================= */

.cchc-eyebrow{
    font-size:13px !important;
}

.cchc-hero h1{
    font-size:38px !important;
}

.cchc-hero p{
    font-size:15px !important;
}

.cchc-breadcrumb .container{
    font-size:13px !important;
}

.cchc-group{
    font-size:13px !important;
}

.cchc-section-heading span{
    font-size:12px !important;
}

.cchc-section-heading h2{
    font-size:27px !important;
}

.cchc-section-heading strong{
    font-size:12px !important;
}

.cchc-category-label{
    font-size:11px !important;
}

.cchc-item-content h3{
    font-size:19px !important;
}

.cchc-date{
    font-size:12px !important;
}

.cchc-summary{
    font-size:14px !important;
}

.cchc-readmore{
    font-size:13px !important;
}

.cchc-sidebar-heading{
    font-size:14px !important;
}

.cchc-sidebar-menu a{
    font-size:13px !important;
}

.cchc-quick-box > span{
    font-size:11px !important;
}

.cchc-quick-box h3{
    font-size:17px !important;
}

.cchc-quick-box p{
    font-size:13px !important;
}

.cchc-phone{
    font-size:13px !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    body{
        font-size:15px !important;
    }

    .header-v3-brand h1{
        font-size:18px !important;
    }

    .header-v3-brand p{
        font-size:12px !important;
    }

    .header-v3-menu a{
        font-size:12px !important;
    }

    .home-v3-eyebrow{
        font-size:18px !important;
    }

    .home-v3-hero h1{
        font-size:41px !important;
    }

    .home-v3-hero p{
        font-size:16px !important;
    }

    .home-v3-stat span{
        font-size:14px !important;
    }

    .home-v3-function h3{
        font-size:17px !important;
    }

    .home-v3-function p{
        font-size:14px !important;
    }

    .portal-section-head h2{
        font-size:25px !important;
    }

    .health-news-body h3{
        font-size:16px !important;
    }

    .health-news-body p{
        font-size:14px !important;
    }

    .home-cchc-card strong{
        font-size:15px !important;
    }

    .community-card strong{
        font-size:16px !important;
    }

    .footer-v3-about li,
    .footer-v3-links a{
        font-size:13px !important;
    }

}
/* =========================================================
   ĐỒNG BỘ TIÊU ĐỀ CÁC CHUYÊN ĐỀ TRANG CHỦ
========================================================= */

.home-v3-box-title h2,
.home-v3-notice-title h2,
.portal-section-head h2,
.home-v3-title h2{
    margin:0;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:29px !important;

    line-height:1.25 !important;

    font-weight:800 !important;

    letter-spacing:0 !important;

    text-transform:uppercase;
}


/* Tin tức - Sự kiện */

.home-v3-box-title h2{
    color:#ed1c24 !important;
}


/* Thông báo */

.home-v3-notice-title h2{
    color:#ffffff !important;
}


/* Tin từ Sở Y tế */

.hcm-health-news
.portal-section-head h2{
    color:#075aa7 !important;
}


/* Thư viện */

.portal-gallery-section
.portal-section-head h2{
    color:#ed1c24 !important;
}


/* Cải cách hành chính */

.home-cchc-section
.portal-section-head h2{
    color:#16874a !important;
}


/* Chức năng - nhiệm vụ
   Kết nối cộng đồng */

.home-v3-title h2{
    color:#ed1c24 !important;
}


/* Mobile */

@media(max-width:700px){

    .home-v3-box-title h2,
    .home-v3-notice-title h2,
    .portal-section-head h2,
    .home-v3-title h2{
        font-size:25px !important;
    }

}
/* =========================================================
   FIX FONT TIÊU ĐỀ TIN TỨC - SỰ KIỆN
========================================================= */

.home-v3-box-title h2,
.home-v3-news .home-v3-box-title h2{
    font-family: Arial, Helvetica, sans-serif !important;
    font-size:29px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    letter-spacing:0 !important;
    font-style:normal !important;
    text-transform:uppercase !important;
    color:#ed1c24 !important;
}
.home-v3-box-title,
.home-v3-box-title *,
.home-v3-news .home-v3-box-title,
.home-v3-news .home-v3-box-title *{
    font-family: Arial, Helvetica, sans-serif !important;
}
/* =========================================================
   TYPOGRAPHY CHUẨN CHO TIÊU ĐỀ TRANG CHỦ
========================================================= */

.home-section-title{
    margin:0;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:29px !important;
    line-height:1.2 !important;

    font-weight:800 !important;
    font-style:normal !important;

    letter-spacing:0 !important;
    text-transform:uppercase;

    color:#ed1c24;
}


/* Tin từ Sở Y tế */

.hcm-health-news
.home-section-title{
    color:#075aa7;
}


/* Thông báo */

.home-v3-notice
.home-section-title{
    color:#fff;
}


/* Cải cách hành chính */

.home-cchc-section
.home-section-title{
    color:#16874a;
}


/* Mobile */

@media(max-width:700px){

    .home-section-title{
        font-size:25px !important;
    }

}
/* =========================================================
   TIÊU ĐỀ TIN TỨC - SỰ KIỆN
========================================================= */

section.home-v3-news
div.home-v3-box-title
h2{
    margin:0 !important;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:29px !important;
    line-height:1.2 !important;

    font-weight:700 !important;
    font-style:normal !important;

    letter-spacing:0 !important;
    text-transform:uppercase !important;

    color:#ed1c24 !important;
}
/* =========================================================
   ĐỒNG BỘ FONT TẤT CẢ TIÊU ĐỀ LỚN TRANG CHỦ
========================================================= */

.home-v3-title h2,
.portal-section-head h2,
.home-v3-box-title h2,
.home-v3-notice-title h2,
.hcm-health-news .portal-section-head h2,
.portal-gallery-section .portal-section-head h2,
.home-cchc-section .portal-section-head h2{
    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;

    font-style:normal !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    text-transform:uppercase !important;
    line-height:1.2 !important;
}/* Kích thước tiêu đề chính */

.home-v3-title h2,
.portal-section-head h2,
.home-v3-box-title h2{
    font-size:29px !important;
}

/* Thông báo nằm trong cột hẹp hơn */

.home-v3-notice-title h2{
    font-size:25px !important;
}

/* Màu tiêu đề */

.home-v3-title h2,
.home-v3-box-title h2,
.portal-gallery-section .portal-section-head h2{
    color:#ed1c24 !important;
}

.hcm-health-news .portal-section-head h2{
    color:#075aa7 !important;
}

.home-cchc-section .portal-section-head h2{
    color:#16874a !important;
}

.home-v3-notice-title h2{
    color:#fff !important;
}
/* =========================================================
   HOME HERO SLIDER
========================================================= */

.home-hero-slider{
    position:relative;

    height:430px;

    overflow:hidden;

    background:#f6f8fa;
}


/* SLIDES */

.home-hero-slides,
.home-hero-slide{
    position:absolute;
    inset:0;
}

.home-hero-slide{
    opacity:0;
    visibility:hidden;

    transition:
        opacity .8s ease,
        visibility .8s ease;
}

.home-hero-slide.active{
    opacity:1;
    visibility:visible;

    z-index:2;
}


/* BACKGROUND */

.home-hero-bg{
    position:absolute;
    inset:0;

    background-size:auto 100%;
    background-position:right center;
    background-repeat:no-repeat;

    background-color:#f5f7f9;

    transform:none;

    transition:
        transform 7s ease;
}

.home-hero-slide.active
.home-hero-bg{
    transform:none;
}


/* OVERLAY */

.home-hero-slide::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255,255,255,.98) 26%,
            rgba(255,255,255,.92) 38%,
            rgba(255,255,255,.65) 48%,
            rgba(255,255,255,.18) 60%,
            rgba(255,255,255,0) 72%
        );
}

/* CONTAINER */

.home-hero-slide .container{
    position:relative;
    z-index:3;

    height:100%;
}


/* CONTENT */

.home-hero-content{
    width:560px;
    max-width:56%;

    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-bottom:15px;
}

.home-hero-eyebrow{
    display:inline-block;

    margin-bottom:9px;

    color:#075aa7;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size:20px;
    font-weight:700;
}

.home-hero-content h1{
    margin:0 0 18px;

    color:#ed1c24;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size:55px;
    line-height:1.05;

    font-style:normal;
    font-weight:800;
}

.home-hero-content p{
    max-width:520px;

    margin:0;

    color:#3e505c;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size:18px;
    line-height:1.72;
}


/* BUTTONS */

.home-hero-actions{
    display:flex;
    flex-wrap:wrap;

    gap:12px;

    margin-top:27px;
}

.hero-action-primary,
.hero-action-secondary{
    min-height:46px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 21px;

    border-radius:24px;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size:13px;
    font-weight:750;

    text-decoration:none;

    transition:
        transform .2s,
        box-shadow .2s;
}

.hero-action-primary{
    background:#ed1c24;

    color:#fff;

    box-shadow:
        0 6px 17px
        rgba(237,28,36,.20);
}

.hero-action-secondary{
    background:#ffc425;

    color:#28333a;

    box-shadow:
        0 6px 17px
        rgba(255,196,37,.18);
}

.hero-action-primary:hover,
.hero-action-secondary:hover{
    transform:
        translateY(-2px);
}


/* =========================================================
   PREV / NEXT
========================================================= */

.home-hero-arrow{
    position:absolute;

    top:50%;

    z-index:10;

    width:45px;
    height:45px;

    display:flex;
    align-items:center;
    justify-content:center;

    transform:
        translateY(-50%);

    border:
        1px solid
        rgba(255,255,255,.8);

    border-radius:50%;

    background:
        rgba(255,255,255,.82);

    color:#075aa7;

    font-size:30px;
    line-height:1;

    cursor:pointer;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.11);

    transition:.2s;
}

.home-hero-arrow:hover{
    background:#075aa7;

    color:#fff;
}

.home-hero-prev{
    left:22px;
}

.home-hero-next{
    right:22px;
}


/* =========================================================
   DOTS
========================================================= */

.home-hero-dots{
    position:absolute;

    z-index:12;

    left:50%;
    bottom:24px;

    display:flex;

    gap:8px;

    transform:
        translateX(-50%);
}

.home-hero-dot{
    width:9px;
    height:9px;

    padding:0;

    border:0;

    border-radius:20px;

    background:
        rgba(7,90,167,.35);

    cursor:pointer;

    transition:.25s;
}

.home-hero-dot.active{
    width:29px;

    background:#ed1c24;
}


/* =========================================================
   BRAND LINE
========================================================= */

.home-hero-brand-line{
    position:absolute;

    z-index:15;

    left:0;
    right:0;
    bottom:0;

    height:7px;

    background:
        linear-gradient(
            90deg,
            #ed1c24 0%,
            #ed1c24 33.333%,
            #ffc425 33.333%,
            #ffc425 66.666%,
            #075aa7 66.666%,
            #075aa7 100%
        );
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:950px){

    .home-hero-slider{
        height:460px;
    }

    .home-hero-slide::before{
        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,.96) 0%,
                rgba(255,255,255,.88) 50%,
                rgba(255,255,255,.34) 100%
            );
    }

    .home-hero-content{
        max-width:70%;
    }

    .home-hero-content h1{
        font-size:47px;
    }

    .home-hero-arrow{
        width:40px;
        height:40px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:650px){

    .home-hero-slider{
        height:520px;
    }

    .home-hero-bg{
        background-position:center;
    }

    .home-hero-slide::before{
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.78) 0%,
                rgba(255,255,255,.92) 45%,
                rgba(255,255,255,.98) 100%
            );
    }

    .home-hero-content{
        width:100%;
        max-width:100%;

        justify-content:flex-end;

        padding:
            0 15px 70px;
    }

    .home-hero-eyebrow{
        font-size:17px;
    }

    .home-hero-content h1{
        font-size:38px;
    }

    .home-hero-content p{
        font-size:15px;
        line-height:1.6;
    }

    .home-hero-actions{
        margin-top:19px;
    }

    .hero-action-primary,
    .hero-action-secondary{
        min-height:42px;

        padding:
            0 16px;

        font-size:11px;
    }

    .home-hero-prev{
        left:10px;
    }

    .home-hero-next{
        right:10px;
    }

    .home-hero-arrow{
        top:42%;

        width:36px;
        height:36px;

        font-size:25px;
    }

}
/* =========================================================
   FIX KHOẢNG CÁCH HERO ↔ THỐNG KÊ
========================================================= */

/* Giữ đường nhận diện nằm gọn trong Hero */
.home-hero-brand-line{
    bottom:0 !important;
    height:6px !important;
}


/* Tách khối thống kê khỏi đường màu */
.home-v3-stats{
    position:relative;
    z-index:5;

    margin-top:18px !important;

    padding-top:0 !important;
}


/* Nếu khối thống kê đang bị kéo lên bằng margin âm,
   ép trả về khoảng cách an toàn */
.home-v3-stats .container{
    position:relative;
    top:0 !important;
    transform:none !important;
}


/* Khung số liệu */
.home-v3-stats-grid{
    margin-top:0 !important;

    border-radius:12px;

    overflow:hidden;

    background:#fff;

    box-shadow:
        0 7px 24px
        rgba(20,45,65,.09);
}


/* Mobile */
@media(max-width:700px){

    .home-v3-stats{
        margin-top:12px !important;
    }

}
/* =========================================================
   HERO MASKED CENTERED
========================================================= */

.hero-mask-wrap{
    padding:22px 0 30px;
    background:#f6f8fa;
}

.hero-mask-slider{
    position:relative;

    height:440px;

    overflow:hidden;

    border-radius:18px;

    background:#eef2f5;

    box-shadow:
        0 12px 34px
        rgba(24,49,68,.12);
}


/* =========================================================
   SLIDES
========================================================= */

.hero-mask-slide{
    position:absolute;
    inset:0;

    opacity:0;
    visibility:hidden;

    transition:
        opacity .45s ease,
        visibility .45s ease;
}

.hero-mask-slide.active{
    opacity:1;
    visibility:visible;

    z-index:2;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.hero-mask-bg{
    position:absolute;
    inset:0;

    background-size:cover;
    background-repeat:no-repeat;
    background-position:center right;

    transform:scale(1.01);

    transition:
        transform 7s ease;
}

.hero-mask-slide.active
.hero-mask-bg{
    transform:scale(1.035);
}


/* =========================================================
   MASK / OVERLAY
========================================================= */

.hero-mask-overlay{
    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.99) 25%,
            rgba(255,255,255,.94) 37%,
            rgba(255,255,255,.78) 48%,
            rgba(255,255,255,.42) 58%,
            rgba(255,255,255,.10) 70%,
            rgba(255,255,255,0) 82%
        );
}


/* =========================================================
   CONTENT
========================================================= */

.hero-mask-content{
    position:relative;
    z-index:3;

    width:540px;
    max-width:48%;

    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-left:58px;
    padding-bottom:8px;
}

.hero-mask-eyebrow{
    margin-bottom:10px;

    color:#075aa7;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size:18px;
    line-height:1.3;
    font-weight:700;
}

.hero-mask-content h1{
    margin:0 0 17px;

    color:#ed1c24;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size:50px;
    line-height:1.05;
    font-weight:800;
}

.hero-mask-content p{
    margin:0;

    max-width:500px;

    color:#3d515e;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size:17px;
    line-height:1.72;
}


/* =========================================================
   BUTTONS
========================================================= */

.hero-mask-actions{
    display:flex;
    flex-wrap:wrap;

    gap:12px;

    margin-top:25px;
}

.hero-mask-btn{
    min-height:44px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 20px;

    border-radius:24px;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size:13px;
    font-weight:750;

    text-decoration:none;

    transition:
        transform .2s,
        box-shadow .2s;
}

.hero-mask-btn.primary{
    background:#ed1c24;
    color:#fff;

    box-shadow:
        0 6px 18px
        rgba(237,28,36,.18);
}

.hero-mask-btn.secondary{
    background:#ffc425;
    color:#29343c;

    box-shadow:
        0 6px 18px
        rgba(255,196,37,.18);
}

.hero-mask-btn:hover{
    transform:translateY(-2px);
}


/* =========================================================
   ARROWS
========================================================= */

.hero-mask-arrow{
    position:absolute;

    top:50%;

    z-index:10;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    transform:translateY(-50%);

    border:1px solid rgba(255,255,255,.9);
    border-radius:50%;

    background:rgba(255,255,255,.86);

    color:#075aa7;

    font-size:28px;
    line-height:1;

    cursor:pointer;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.10);

    transition:.2s;
}

.hero-mask-arrow:hover{
    background:#075aa7;
    color:#fff;
}

.hero-mask-prev{
    left:16px;
}

.hero-mask-next{
    right:16px;
}


/* =========================================================
   DOTS
========================================================= */

.hero-mask-dots{
    position:absolute;

    z-index:12;

    left:50%;
    bottom:16px;

    display:flex;

    gap:7px;

    transform:translateX(-50%);
}

.hero-mask-dot{
    width:9px;
    height:9px;

    padding:0;

    border:0;
    border-radius:20px;

    background:rgba(7,90,167,.30);

    cursor:pointer;

    transition:.25s;
}

.hero-mask-dot.active{
    width:27px;

    background:#ed1c24;
}


/* =========================================================
   BRAND LINE
========================================================= */

.hero-mask-brand-line{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:15;

    height:6px;

    background:
        linear-gradient(
            90deg,
            #ed1c24 0%,
            #ed1c24 33.33%,
            #ffc425 33.33%,
            #ffc425 66.66%,
            #075aa7 66.66%,
            #075aa7 100%
        );
}


/* =========================================================
   KHOẢNG CÁCH VỚI KHỐI THỐNG KÊ
========================================================= */

.hero-mask-wrap + .home-v3-stats{
    margin-top:0 !important;
}

.home-v3-stats{
    padding-top:12px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .hero-mask-slider{
        height:420px;
    }

    .hero-mask-content{
        max-width:58%;

        padding-left:46px;
    }

    .hero-mask-content h1{
        font-size:44px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    .hero-mask-wrap{
        padding:12px 0 20px;
    }

    .hero-mask-slider{
        height:520px;

        border-radius:13px;
    }

    .hero-mask-bg{
        background-position:center;
    }

    .hero-mask-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.30) 0%,
                rgba(255,255,255,.78) 39%,
                rgba(255,255,255,.98) 66%,
                rgba(255,255,255,1) 100%
            );
    }

    .hero-mask-content{
        width:100%;
        max-width:100%;

        justify-content:flex-end;

        padding:
            0 25px 63px;
    }

    .hero-mask-eyebrow{
        font-size:16px;
    }

    .hero-mask-content h1{
        font-size:38px;
    }

    .hero-mask-content p{
        font-size:15px;
        line-height:1.6;
    }

    .hero-mask-btn{
        font-size:11px;
        min-height:41px;
    }

    .hero-mask-arrow{
        width:35px;
        height:35px;

        font-size:24px;
    }

}
/* =========================================================
   HOME - KẾT NỐI CỘNG ĐỒNG DYNAMIC
========================================================= */

.community-news-card{
    padding:0 !important;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.community-card-image{
    width:100%;
    height:155px;
    overflow:hidden;
}

.community-card-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .35s ease;
}

.community-news-card:hover
.community-card-image img{
    transform:scale(1.04);
}

.community-card-content{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:20px 22px;
}

.community-card-content small{
    display:block;
    margin-bottom:8px;

    font-size:12px;
    font-weight:800;
    letter-spacing:.7px;
}

.community-card-content strong{
    display:block;

    margin-bottom:12px;

    line-height:1.35;
}

.community-card-content span{
    margin-top:auto;
}

@media(max-width:768px){

    .community-card-image{
        height:190px;
    }

}
.portal-gallery-card span small{
    display:block;
    margin-top:4px;
    font-size:11px;
    font-weight:500;
    opacity:.8;
}

.gallery-home-placeholder{
    height:100%;
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef3f6;
    color:#738590;
    font-size:12px;
    font-weight:700;
}
/* =========================================================
   FOOTER CONTACT FIX
========================================================= */

.footer-v3-about .footer-contact-link{
    color:inherit !important;
    text-decoration:none;
    font-weight:500;
}

.footer-v3-about .footer-contact-link:hover{
    color:#ffffff !important;
    text-decoration:underline;
}
/* =========================================================
   FOOTER COLUMN LAYOUT FIX
========================================================= */

.footer-v3-grid{
    grid-template-columns:
        minmax(320px,1.35fr)
        minmax(230px,.95fr)
        minmax(300px,1.15fr);

    gap:42px;
}


/* LIÊN KẾT NHANH */

.footer-v3-links a{
    display:block;

    width:100%;

    white-space:nowrap;

    line-height:1.45;
}


/* LIÊN KẾT HỮU ÍCH */

.footer-useful-links a{
    min-width:0;
}

.footer-useful-links strong,
.footer-useful-links small{
    line-height:1.35;
}


/* Mobile / tablet */

@media(max-width:1000px){

    .footer-v3-grid{
        grid-template-columns:1fr 1fr;
        gap:30px;
    }

    .footer-v3-links a{
        white-space:normal;
    }

}

@media(max-width:700px){

    .footer-v3-grid{
        grid-template-columns:1fr;
    }

}
/* =========================================================
   TỐI ƯU KHOẢNG CÁCH CÁC KHỐI TRANG CHỦ
========================================================= */

/* Khoảng cách chung giữa các section */
.home-v3-section,
.hcm-health-news,
.home-v3-info,
.portal-gallery-section,
.home-cchc-section,
.home-v3-community{
    padding-top:25px;
    padding-bottom:25px;
}


/* Khối thống kê ngay dưới Slider */
.home-v3-stats{
    padding-top:24px;
    padding-bottom:24px;
}


/* Tiêu đề section */
.home-v3-title{
    margin-bottom:24px;
}


/* Các heading kiểu portal */
.portal-section-head{
    margin-bottom:22px;
}


/* Tin từ Sở Y tế */
.hcm-health-news{
    margin-top:0;
}


/* Tin tức + Thông báo */
.home-v3-info{
    margin-top:0;
}


/* Thư viện */
.portal-gallery-section{
    margin-top:0;
}


/* Cải cách hành chính */
.home-cchc-section{
    margin-top:0;
}


/* Kết nối cộng đồng */
.home-v3-community{
    margin-top:0;
}


/* Giảm khoảng trống bên trong các grid */
.home-v3-function-grid,
.health-news-grid,
.portal-gallery-grid,
.home-cchc-grid,
.home-v3-community-grid{
    row-gap:20px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .home-v3-section,
    .hcm-health-news,
    .home-v3-info,
    .portal-gallery-section,
    .home-cchc-section,
    .home-v3-community{
        padding-top:34px;
        padding-bottom:34px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    .home-v3-section,
    .hcm-health-news,
    .home-v3-info,
    .portal-gallery-section,
    .home-cchc-section,
    .home-v3-community{
        padding-top:28px;
        padding-bottom:28px;
    }

    .home-v3-stats{
        padding-top:18px;
        padding-bottom:18px;
    }

    .home-v3-title,
    .portal-section-head{
        margin-bottom:18px;
    }

}
/* =========================================================
   ABOUT PAGE - GIỚI THIỆU
========================================================= */

.about-v3{
    background:#f5f8fb;
    color:#243746;
}

/* =========================================================
   BANNER
========================================================= */

.about-v3-banner{
    position:relative;
    padding:68px 0 62px;
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(3,66,117,.96),
            rgba(8,92,155,.88)
        ),
        url('../images/doi-tuong-bao-tro.png')
        center 42% / cover no-repeat;
}

.about-v3-banner::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,50,92,.25),
            transparent 60%
        );

    pointer-events:none;
}

.about-v3-banner .container{
    position:relative;
    z-index:2;
}

.about-v3-banner-content{
    max-width:720px;
    color:#fff;
}

.about-v3-banner-content > span{
    display:inline-block;

    margin-bottom:12px;
    padding:6px 12px;

    border-radius:20px;

    background:rgba(255,255,255,.14);

    color:#ffd24a;

    font-size:12px;
    font-weight:700;
    letter-spacing:.7px;
}

.about-v3-banner-content h1{
    margin:0 0 14px;

    color:#fff;

    font-size:42px;
    line-height:1.15;
    font-weight:800;
}

.about-v3-banner-content p{
    max-width:630px;

    margin:0;

    color:rgba(255,255,255,.9);

    font-size:15px;
    line-height:1.7;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.about-v3-breadcrumb{
    background:#fff;

    border-bottom:1px solid #e5ebf0;
}

.about-v3-breadcrumb .container{
    display:flex;
    align-items:center;
    gap:10px;

    min-height:48px;

    font-size:12px;
}

.about-v3-breadcrumb a{
    color:#075aa7;
    text-decoration:none;
}

.about-v3-breadcrumb span{
    color:#9aa6af;
}

.about-v3-breadcrumb strong{
    color:#56636d;
}


/* =========================================================
   SECTION GENERAL
========================================================= */

.about-v3-section{
    padding:52px 0;
}

.about-v3-small-title{
    display:inline-block;

    margin-bottom:9px;

    color:#ed1c24;

    font-size:11px;
    font-weight:800;

    letter-spacing:1px;
}

.about-v3-title-line{
    width:70px;
    height:3px;

    margin:16px 0 20px;

    border-radius:2px;

    background:#ed1c24;
}


/* =========================================================
   OVERVIEW
========================================================= */

.about-v3-overview{
    display:grid;

    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,1.05fr);

    gap:46px;

    align-items:center;
}

.about-v3-overview-image{
    position:relative;

    min-width:0;
}

.about-v3-overview-image img{
    display:block;

    width:100%;
    height:440px;

    object-fit:cover;

    border-radius:18px;

    box-shadow:
        0 18px 45px rgba(11,67,105,.16);
}

.about-v3-image-badge{
    position:absolute;
    right:-20px;
    bottom:24px;

    min-width:150px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:16px 18px;

    border-radius:14px;

    background:#fff;

    box-shadow:
        0 12px 30px rgba(0,0,0,.14);
}

.about-v3-image-badge strong{
    color:#ed1c24;

    font-size:36px;
    line-height:1;
}

.about-v3-image-badge span{
    color:#06477f;

    font-size:10px;
    line-height:1.45;

    font-weight:800;
}

.about-v3-overview-content{
    min-width:0;
}

.about-v3-overview-content h2{
    margin:0;

    color:#06477f;

    font-size:31px;
    line-height:1.25;
}

.about-v3-overview-content p{
    margin:0 0 15px;

    color:#596872;

    font-size:14px;
    line-height:1.78;

    text-align:justify;
}

.about-v3-values{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:12px;

    margin-top:24px;
}

.about-v3-values > div{
    padding:15px 14px;

    border:1px solid #e0e8ee;
    border-radius:10px;

    background:#fff;
}

.about-v3-values strong{
    display:block;

    margin-bottom:5px;

    color:#06477f;

    font-size:12px;
}

.about-v3-values span{
    display:block;

    color:#7b8892;

    font-size:10px;
    line-height:1.45;
}


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

.about-v3-heading{
    max-width:760px;

    margin:0 auto 32px;

    text-align:center;
}

.about-v3-heading > span{
    display:block;

    margin-bottom:8px;

    color:#ed1c24;

    font-size:11px;
    font-weight:800;

    letter-spacing:1.1px;
}

.about-v3-heading h2{
    margin:0;

    color:#06477f;

    font-size:30px;
    line-height:1.25;
}

.about-v3-heading > div{
    width:70px;
    height:3px;

    margin:15px auto 0;

    border-radius:2px;

    background:#ed1c24;
}


/* =========================================================
   HISTORY
========================================================= */

.about-v3-history{
    padding:52px 0;

    background:#fff;
}

.about-v3-timeline{
    position:relative;

    max-width:980px;

    margin:0 auto;

    display:grid;
    gap:16px;
}

.about-v3-timeline::before{
    content:"";

    position:absolute;
    left:53px;
    top:20px;
    bottom:20px;

    width:2px;

    background:#dfe8ef;
}

.about-history-item{
    position:relative;

    display:grid;

    grid-template-columns:108px 1fr;

    gap:24px;

    align-items:start;

    padding:18px 22px;

    border:1px solid #e3e9ee;
    border-radius:12px;

    background:#fff;

    transition:.2s ease;
}

.about-history-item:hover{
    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.06);
}

.about-history-year{
    position:relative;
    z-index:2;

    width:66px;
    height:66px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#fff;

    font-size:17px;
    font-weight:800;
}

.about-history-year.red{
    background:#ed1c24;
}

.about-history-year.yellow{
    background:#f7b91e;
}

.about-history-year.blue{
    background:#075aa7;
}

.about-history-item h3{
    margin:4px 0 7px;

    color:#06477f;

    font-size:17px;
}

.about-history-item p{
    margin:0;

    color:#65737d;

    font-size:13px;
    line-height:1.65;
}


/* =========================================================
   FUNCTIONS
========================================================= */

.about-v3-function-grid{
    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:18px;
}

.about-function-card{
    position:relative;

    min-height:190px;

    padding:24px 22px;

    border:1px solid #dfe7ed;
    border-radius:14px;

    background:#fff;

    box-shadow:
        0 8px 25px rgba(0,0,0,.04);

    overflow:hidden;

    transition:.22s ease;
}

.about-function-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 14px 32px rgba(5,71,127,.09);
}

.about-function-number{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:16px;

    border-radius:12px;

    background:#eaf4fb;

    color:#075aa7;

    font-size:13px;
    font-weight:800;
}

.about-function-card h3{
    margin:0 0 10px;

    color:#06477f;

    font-size:17px;
    line-height:1.35;
}

.about-function-card p{
    margin:0;

    color:#687680;

    font-size:13px;
    line-height:1.65;
}


/* =========================================================
   ORGANIZATION
========================================================= */

.about-v3-organization{
    padding:52px 0;

    background:#eef5fa;
}

.organization-chart{
    max-width:1000px;

    margin:0 auto;

    text-align:center;
}

.organization-director{
    max-width:360px;

    margin:0 auto;

    padding:20px 24px;

    border-radius:14px;

    background:#06477f;

    color:#fff;

    box-shadow:
        0 10px 26px rgba(6,71,127,.18);
}

.organization-director span{
    display:block;

    margin-bottom:5px;

    color:#ffd24a;

    font-size:10px;
    font-weight:700;
}

.organization-director strong{
    display:block;

    font-size:20px;
}

.organization-line{
    width:2px;
    height:35px;

    margin:0 auto;

    background:#9ebbd0;
}

.organization-units{
    position:relative;

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:16px;
}

.organization-units::before{
    content:"";

    position:absolute;

    top:-18px;
    left:12.5%;
    right:12.5%;

    height:2px;

    background:#9ebbd0;
}

.organization-units > div{
    position:relative;

    min-height:115px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:18px;

    border:1px solid #d5e2eb;
    border-radius:12px;

    background:#fff;
}

.organization-units > div::before{
    content:"";

    position:absolute;

    top:-18px;

    width:2px;
    height:18px;

    background:#9ebbd0;
}

.organization-units span{
    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:9px;

    border-radius:50%;

    background:#edf5fb;

    color:#075aa7;

    font-size:11px;
    font-weight:800;
}

.organization-units strong{
    color:#06477f;

    font-size:13px;
    line-height:1.45;
}

.organization-note{
    max-width:900px;

    margin:22px auto 0;

    color:#89959e;

    font-size:10px;
    line-height:1.6;

    text-align:center;
}


/* =========================================================
   CONTACT CTA
========================================================= */

.about-v3-contact{
    padding:50px 0;

    background:#06477f;
}

.about-v3-contact-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(320px,.9fr);

    gap:40px;

    align-items:center;
}

.about-v3-contact .about-v3-small-title{
    color:#ffd24a;
}

.about-v3-contact h2{
    margin:0 0 14px;

    color:#fff;

    font-size:29px;
    line-height:1.3;
}

.about-v3-contact p{
    margin:0;

    color:rgba(255,255,255,.82);

    font-size:13px;
    line-height:1.7;
}

.about-contact-details{
    display:grid;
    gap:10px;
}

.about-contact-details > div{
    display:grid;

    grid-template-columns:40px 1fr;

    gap:11px;

    align-items:start;

    padding:13px 15px;

    border-radius:10px;

    background:rgba(255,255,255,.1);

    border:1px solid rgba(255,255,255,.12);
}

.about-contact-details > div > span{
    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#fff;

    color:#075aa7;
}

.about-contact-details p{
    display:flex;
    flex-direction:column;
}

.about-contact-details strong{
    margin-bottom:3px;

    color:#ffd24a;

    font-size:11px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .about-v3-overview{
        grid-template-columns:1fr;
    }

    .about-v3-overview-image img{
        height:380px;
    }

    .about-v3-image-badge{
        right:18px;
    }

    .about-v3-function-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .organization-units{
        grid-template-columns:repeat(2,1fr);
    }

    .organization-units::before{
        display:none;
    }

    .organization-units > div::before{
        display:none;
    }

    .about-v3-contact-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:700px){

    .about-v3-banner{
        padding:48px 0 44px;
    }

    .about-v3-banner-content h1{
        font-size:32px;
    }

    .about-v3-section,
    .about-v3-history,
    .about-v3-organization{
        padding:38px 0;
    }

    .about-v3-overview-image img{
        height:260px;
    }

    .about-v3-image-badge{
        position:static;

        width:max-content;

        margin:-18px 15px 0 auto;
    }

    .about-v3-overview-content h2,
    .about-v3-heading h2,
    .about-v3-contact h2{
        font-size:24px;
    }

    .about-v3-values{
        grid-template-columns:1fr;
    }

    .about-history-item{
        grid-template-columns:74px 1fr;
        gap:14px;
        padding:14px;
    }

    .about-history-year{
        width:54px;
        height:54px;
        font-size:14px;
    }

    .about-v3-timeline::before{
        left:41px;
    }

    .about-v3-function-grid{
        grid-template-columns:1fr;
    }

    .organization-units{
        grid-template-columns:1fr;
    }

    .about-v3-contact{
        padding:38px 0;
    }

}

/* =========================================================
   KẾT NỐI CỘNG ĐỒNG - HOÀN THIỆN CARD CHỨC NĂNG
   Bổ sung cuối file để ưu tiên hơn các khai báo cũ
========================================================= */
.home-v3-community-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:stretch;
    gap:16px;
}

.home-v3-community-grid > .community-card{
    width:100%;
    min-width:0;
    min-height:250px;
    border-radius:14px;
}

.community-action-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    padding:24px 22px 21px !important;
}

.community-action-icon{
    width:60px;
    height:60px;
    flex:0 0 60px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
    border-radius:18px;
    background:rgba(255,255,255,.78);
    box-shadow:0 5px 16px rgba(0,0,0,.055);
}

.community-action-icon svg{
    width:34px;
    height:34px;
    fill:none;
    stroke:currentColor;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.community-action-content{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.community-action-content strong{
    display:block;
    margin-bottom:10px;
}

.community-action-content span{
    display:block;
    margin-top:auto;
    padding-right:35px;
}

.yellow-card .community-action-icon{color:#9a6500;}
.blue-card .community-action-icon{color:#075aa7;}
.pink-card .community-action-icon{color:#bd385f;}

.community-news-card{
    min-height:250px;
}

.community-news-card .community-card-image{
    height:132px;
}

.community-news-card .community-card-content{
    padding:16px 20px 18px;
}

.community-news-card .community-card-content small{
    margin-bottom:5px;
}

.community-news-card .community-card-content strong{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    margin-bottom:8px;
}

@media(max-width:900px){
    .home-v3-community-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){
    .home-v3-community-grid{
        grid-template-columns:1fr;
    }

    .home-v3-community-grid > .community-card,
    .community-news-card{
        min-height:220px;
    }

    .community-action-card{
        min-height:190px !important;
    }

    .community-action-icon{
        width:54px;
        height:54px;
        flex-basis:54px;
        margin-bottom:16px;
    }

    .community-action-icon svg{
        width:31px;
        height:31px;
    }

    .community-news-card .community-card-image{
        height:180px;
    }
}

/* =========================================================
   HOẠT ĐỘNG CHUYÊN MÔN - KHÓA BỐ CỤC RIÊNG
   Phạm vi chỉ áp dụng cho .home-professional-section
   Không liên quan đến Kết nối cộng đồng
========================================================= */
.home-professional-section .health-news-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
    width:100%;
}

.home-professional-section .health-news-card{
    width:100%;
    min-width:0;
    height:100%;
}

.home-professional-section .health-news-image{
    display:block;
    width:100%;
    aspect-ratio:16 / 9;
    height:auto;
    overflow:hidden;
}

.home-professional-section .health-news-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.home-professional-section .health-news-placeholder{
    width:100%;
    height:100%;
}

.home-professional-section .health-news-body h3,
.home-professional-section .health-news-body p{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.home-professional-section .health-news-body h3{
    -webkit-line-clamp:3;
}

.home-professional-section .health-news-body p{
    -webkit-line-clamp:3;
}

@media(max-width:991px){
    .home-professional-section .health-news-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px;
    }
}

@media(max-width:600px){
    .home-professional-section .health-news-grid{
        grid-template-columns:1fr;
        gap:18px;
    }
}