/*================================================*/
/*   DONG BO FONT VOI TRANG CHU LHU (LHUVNB4)     */
/*================================================*/

body {
    font-family: "Roboto", Arial, sans-serif;
}

a {
    font-weight: 400;
}

/* StyleDefault21.css ep h1/h2/h3.CName ve "Source Sans Pro".
   Trang chu dung Roboto cho ca tieu de -> cho ke thua font cua body. */
h1, h2, h3, h4, h5, h6,
h3.CName, h3.CName a,
h4.CName, h4.CName a,
h5.CName, h5.CName a,
.CatShow2 .CName {
    font-family: inherit;
}


.card {
    width: 100%;
}
h3.CName {
    margin: 0 0 4px 0;
    font-size: 1.35em;
    font-weight: 800;
    line-height: 1.3em;
    color: #284F9E;
    border-bottom: none;
}

h3.CName a {
    color: #284F9E;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
    border-bottom: none;
}

/* MLIS boc ten bai trong div.NTitle (CSS chung: margin 10px/30px) ->
   margin cua no tran ra ngoai h3, day NIntro xuong 30px thay vi 4px */
h3.CName .NTitle {
    margin: 0;
}

h3.CName a:hover {
    color: #1c3a75;
    text-decoration: none;
}

.CatName {
    background-color: #284F9E;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 30px;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.padding {
    padding: 3rem;
}


.more-news{
	margin-left:15px;
}

.more-news li .NTitle:before {
	display: inline-block;
	font-family: 'FontAwesome';
	content: '\F105';
	margin: 0px 10px 0 -15px;
	font-size: 13px;
}

.view-more{
	text-align:right;
	font-style:italic;
    font-size: 0.9em;
	margin-bottom:20px;
}

.CatShow2 .CName{
	font-family: SourceSansPro, Arial, sans-serif;
	font-weight: 300;
	font-size: 26px;
	line-height: 1.4em;
	border-bottom: 1px solid #d5d0c0;
}
.NImg{
	margin-bottom:15px;
}

/*================================================*/
/*                    More News                   */
/*================================================*/
.more-news
{
    margin-left: 17px;
}

.view-more
{
    font-style:italic;
    font-size: 0.9em;
    text-align:right;
    margin-top: 10px;
    margin-bottom: 10px;
}

.more-news li .NTitle:before 
{
    display:inline-block;
    font-family: 'FontAwesome';
    content: '\F105';
    margin: 0 10px 0 -15px;
    font-size: 13px;
}




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

/*Extra small devices (phones, less than 768px) */

/* Small devices (tablets) */

@media (max-width:767px) {
     .padding {
        padding: 1.5rem;
    }

}


/* Small devices (tablets, 768px and up) */


@media (min-width:992px) and (max-width:1199px) {
    .padding {
        padding: 3rem;
    }

}

@media (min-width:1200px) {
    .padding {
        padding: 3rem;
    }

}

/*================================================*/
/*          SUSTAINABLE DEVELOPMENT SECTIONS      */
/*================================================*/

.SectionBlock {
    padding: 30px;
    margin-bottom: 60px;
}

/* Khung xanh nhat thoang hon: tren/duoi 40px (trai/phai giu 30px de thang hang voi cac section khac) */
.SectionAlt {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Bu tru gutter cua .row de moi noi dung thang hang voi tieu de section */
.SectionBlock .row {
    margin-left: -15px;
    margin-right: -15px;
}

.SectionAlt {
    background-color: #f2f6fb;
}

.SectionTitle {
    color: #284F9E;
    font-weight: 800;
    font-size: 1.5em;
    text-align: left;
    margin-bottom: 24px;
}

.CommitmentItem img,
.MetricItem img,
.PolicyItem img {
    max-width: 100%;
    height: auto;
}

/* Anh Commitment/Metrics/Policy la icon vuong, khung .NImg ty le 60% -> dung contain
   de hien du ca icon, khong bi cat tren/duoi nhu background-size: cover */
.CommitmentItem .NImg > a,
.MetricItem .NImg > a,
.PolicyItem .NImg > a {
    background-size: contain;
    background-position: center center;
    /* Anh co nen trang (vd Our Policy) -> hoa nen trang vao mau khung xanh nhat */
    mix-blend-mode: multiply;
}

/* Cot anh cung gian theo hang: neu noi dung cao hon ty le 60% thi khung anh
   cao theo, anh (contain) van can giua -> hai ben luon bang nhau */
.MetricItem .NImg,
.PolicyItem .NImg {
    margin-bottom: 0;
    height: 100%;
}

/* Khung chua NIntro + Read More: cot chu duoc keo gian bang cot anh (flex stretch),
   TextBox lap day cot -> chieu cao bang anh NImg. Nut Read More nam sat ngay duoi noi dung.
   (Div TextBox mo trong NewsFormat va dong trong ListFormat sau {3} cua Read More) */
.MetricItem .TextBox,
.PolicyItem .TextBox {
    flex: 1 1 auto;
    /* chu ngan hon anh -> can giua theo chieu doc giong Our Commitment,
       tranh khoang trong lon duoi nut Read More */
    align-self: center;
}

/* Anh Commitment: bo margin 15px cua .NImg (mobile da co mb-3 tren cot)
   -> khoang cach tu anh den day khung dung 30px nhu phia tren */
.CommitmentItem .NImg {
    margin-bottom: 0;
}

.TextBox .ReadMoreBtn {
    margin-top: 12px;
    margin-bottom: 0;
}

.NIntro,
.NContent {
    font-family: inherit;
    font-size: 1.05em;
    color: #2f2424;
    font-weight: 400;
    text-align: left;
    line-height: 1.6em;
}

.ReadMoreBtn {
    margin-top: 15px;
    margin-bottom: 5px;
}

.ReadMoreBtn a {
    display: inline-block;
    margin: 0;
    padding: 8px 20px;
    background-color: #284F9E;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.4em;
    transition: background-color .2s ease-in-out;
}

.ReadMoreBtn a:after {
    display: inline-block;
    font-family: 'FontAwesome';
    content: '\f105';
    margin-left: 8px;
}

.ReadMoreBtn a:hover {
    background-color: #1c3a75;
    color: #fff;
    border: none;
}
/* Keo luoi SDG ra sat mep section: bu padding 30px cua .SectionBlock
   cong them 15px padding cua cac cot -> mep icon trung mep khung xanh. */
.SectionBlock .row.SDGGrid {
    /* padding 30px cua section + 15px padding cot SDG */
    margin-left: -45px;
    margin-right: -45px;
    /* chua chan tren de hieu ung hover nhac 4px khong bi overflow cat */
    margin-top: -6px;
    padding-top: 6px;
}

/* bu margin-bottom 30px cua hang icon cuoi (them .SDGBlock de thang
   rule ".SectionBlock .row:last-child { margin-bottom: 0 }" ben duoi) */
.SDGBlock.SectionBlock .row.SDGGrid {
    margin-bottom: -30px;
}

/* Khoang cach deu 30px: tieu de -> thanh -> icon, giua cac icon ngang va doc */
.SDGGrid > .SDGItem {
    padding-left: 15px;
    padding-right: 15px;
}

.SDGBlock .SectionTitle {
    margin-bottom: 30px;
}

/* Hang icon thò ra ngoai container 15px -> cat phan thua, tranh tran ngang */
.SDGBlock {
    overflow: hidden;
}

.SDGItem {
    margin-bottom: 30px;
}

/* Anh SDG duoc MLIS xuat ra dang background-image tren the <a>,
   khung ty le do .NImg:before (mac dinh padding-top 60%) quyet dinh.
   Icon SDG la hinh vuong -> doi ty le khung ve 100%. */
.SDGItem .NImg {
    margin-bottom: 0;
}

.SDGItem .NImg:before {
    padding-top: 100%;
}

.SDGItem .NImg > a {
    background-size: contain;
    background-position: center center;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

/* O thu 18: logo "Sustainable Development Goals" (anh nen trong suot, khong co link) */
/* Khong co lien ket -> bo nen, vien, bo goc, do bong va hieu ung hover */
.SDGItem.SDGLogo .NImg > a,
.SDGItem.SDGLogo .NImg > a:hover {
    background-color: transparent;
    background-size: 85% auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    transition: none;
    cursor: default;
}

.SDGItem .NImg > a:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Thanh xanh ngang phia tren luoi SDG, keo sat mep giong luoi icon.
   Cao bang thanh .ReportHeader (Sustainability Reports): cung padding + co chu */
.SDGNote {
    display: block;
    margin: 0 -30px 30px -30px;
    padding: 14px 20px;
    background-color: #284F9E;
    color: #fff;
    text-align: center;
    font-weight: 800;
    font-size: 1.1em;
    line-height: 1.4em;
}

.ReportBox {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.ReportHeader {
    background-color: #284F9E;
    color: #fff;
    font-weight: 800;
    font-size: 1.1em;
    text-transform: uppercase;
    line-height: 1.4em;
    /* Da do tren trinh duyet (Roboto 800, line-height 1.4em): padding 14/14 thi khoang trong
       tren ~19px, duoi ~20.7px -> bu 1px len tren de chu IN HOA nam giua khung */
    padding: 15px 20px 13px 20px;
}

/* Tieu de do NewsList sinh ra co the boc trong the co margin/padding rieng -> reset */
.ReportHeader * {
    margin: 0;
    padding: 0;
    line-height: inherit;
}

.ReportList {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

.ReportList li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e5e5e5;
}

.ReportList li:last-child {
    border-bottom: none;
}

.ReportList .NTitle {
    margin: 0;
    padding: 0;
    line-height: 1.4em;
}

.ReportList li a {
    display: block;
    margin: 0;
    padding: 14px 20px;
    color: #2f2424;
    font-size: 1.05em;
    line-height: 1.4em;
    text-decoration: none;
    position: relative;
    border-bottom: none;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

.ReportList li a:after {
    display: inline-block;
    font-family: 'FontAwesome';
    content: '\f105';
    position: absolute;
    top: 50%;
    right: 20px;
    color: #284F9E;
    transform: translateY(-50%);
}

.ReportList li a:hover {
    background-color: #f2f6fb;
    color: #284F9E;
    border-bottom: none;
}

@media (max-width: 767px) {
    .SectionTitle {
        font-size: 1.25em;
    }
}

/*================================================*/
/*                 BANNER FULL WIDTH              */
/*================================================*/

#TimeLineImage.BannerFull {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
}

#TimeLineImage.BannerFull .Carousel,
#TimeLineImage.BannerFull .owl-wrapper-outer,
#TimeLineImage.BannerFull .owl-item {
    width: 100%;
}

#TimeLineImage.BannerFull img {
    display: block;
    width: 100%;
    height: auto;
}

.CommitmentItem .NIntro {
    margin-bottom: 12px;
    font-weight: 700;
}

/* Tom tat Our Commitment in dam ca khi CMS chen the con co font-weight rieng */
.CommitmentItem .NIntro * {
    font-weight: inherit !important;
}


/*================================================*/
/*        KHOANG CACH / CAN LE CAC SECTION        */
/*================================================*/

/* Section dau tien cach banner mot khoang trang */
#TimeLineImage.BannerFull {
    margin-bottom: 45px;
}

@media (max-width: 767px) {
    .SectionBlock {
        padding: 20px 15px;
        margin-bottom: 25px;
    }
    #TimeLineImage.BannerFull {
        margin-bottom: 25px;
    }
}

/*================================================*/
/*   BANNER OUR ACHIEVEMENTS - BANG MEP SECTION   */
/*================================================*/

/* Keo banner ra sat mep ngoai cua section (bu lai padding 30px) */
.AchievementBlock .Carousel {
    margin-left: -30px;
    margin-right: -30px;
}

.AchievementBlock .Carousel img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .AchievementBlock .Carousel {
        margin-left: -15px;
        margin-right: -15px;
    }
}

/*================================================*/
/*      DONG BO PADDING TREN / DUOI CAC SECTION   */
/*================================================*/

/* Bo margin thua cua phan tu dau & cuoi de padding 30px la thuc te */
.SectionBlock > *:first-child,
.SectionBlock .SectionTitle {
    margin-top: 0;
    line-height: 1.2em;
}

/* Khung xanh nhat: phan tren chu hoa van con ~0.15em khoang trong cua font
   -> keo tieu de len de mep chu cach mep khung dung 30px nhu phia duoi */
.SectionBlock.SectionAlt > .SectionTitle:first-child {
    margin-top: -0.15em;
}

.SectionBlock > *:last-child,
.SectionBlock > *:last-child > *:last-child,
.SectionBlock .row:last-child,
.SectionBlock p:last-child {
    margin-bottom: 0;
}

/* Nut Read More khong tao khoang du o day section */
.ReadMoreBtn {
    margin-top: 15px;
    margin-bottom: 0;
}

/* Luoi SDG: bu lai margin-bottom cua hang cuoi */
.SDGGrid {
    margin-bottom: -30px;
}

/* Dieu huong owl khong day chieu cao section */
.AchievementBlock .owl-controls {
    margin-top: 0;
}

/*================================================*/
/*   KHOANG CACH 45px DEU GIUA MOI SECTION        */
/*================================================*/

/* Section nen trang khong co khung mau nen padding tren/duoi cua no
   se cong them vao khoang trang -> bo di de moi ranh gioi deu 45px */
.SectionBlock:not(.SectionAlt) {
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 767px) {
    .SectionBlock:not(.SectionAlt) {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/*================================================*/
/*   DONG BO TYPOGRAPHY CHO NOI DUNG SOAN TU CMS  */
/*================================================*/

/* Noi dung tu trinh soan thao thuong mang style inline (font-size,
   font-family, mau chu, canh giua...) nen khong nhan style cua trang.
   Ep moi the con ke thua tu .NIntro / .NContent.
   Dung "inherit" thay vi 1.05em de cac the long nhau khong bi cong don co chu. */
.NIntro *,
.NContent * {
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    text-align: inherit !important;
    background: none !important;
}

/* Giu lai chu in dam / in nghieng do nguoi soan dat */
.NIntro strong, .NIntro b,
.NContent strong, .NContent b {
    font-weight: 700;
}

.NIntro em, .NIntro i,
.NContent em, .NContent i {
    font-style: italic;
}

/* Doan van trong noi dung: khoang cach deu, khong du o cuoi */
.NIntro p,
.NContent p {
    margin: 0 0 12px 0;
}

.NIntro p:last-child,
.NContent p:last-child {
    margin-bottom: 0;
}

/* Link trong noi dung van giu mau xanh cua trang */
.NIntro a,
.NContent a {
    color: #284F9E !important;
}

.NIntro img,
.NContent img {
    max-width: 100%;
    height: auto;
}

/* Mobile: icon cach mep 15px (padding section) va cach nhau 15px
   ca ngang lan doc -> cot padding 7.5px, luoi bu -7.5px */
@media (max-width: 767px) {
    .SectionBlock .row.SDGGrid {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }

    .SDGGrid > .SDGItem {
        padding-left: 7.5px;
        padding-right: 7.5px;
        margin-bottom: 15px;
    }

    .SDGBlock.SectionBlock .row.SDGGrid {
        margin-bottom: -15px;
    }

    .SDGBlock .SectionTitle,
    .SDGNote {
        margin-bottom: 15px;
    }

    .SDGNote {
        margin-left: -15px;
        margin-right: -15px;
    }
}