/* =========================================================
   PHONGVT - PAGE GIỚI THIỆU JCI
========================================================= */

:root{
    --phongvt-about-dark:#07112d;
    --phongvt-about-text:#344054;
    --phongvt-about-border:#e5e7eb;
    --phongvt-about-bg:#f5f5f5;
}

.page-template-page-gioi-thieu-jci #main{
    padding:0 !important;
}

.phongvt-about-page,
.phongvt-about-page *{
    box-sizing:border-box;
}

.phongvt-about-page{
    background:var(--phongvt-about-bg);
    color:var(--phongvt-about-text);
}

.phongvt-about-container{
    width:min(1450px,calc(100% - 40px));
    margin:0 auto;
}

/* Banner lấy từ ảnh đại diện */
.phongvt-about-hero{
    position:relative;
    width:100%;
    min-height:430px;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

.phongvt-about-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.02),
        rgba(0,0,0,.10)
    );
}

/* Khung nội dung đè lên banner */
.phongvt-about-card{
    position:relative;
    z-index:3;
    margin-top:-118px;
    overflow:hidden;
    background:#fff;
    border-radius:18px 18px 0 0;
    box-shadow:0 14px 40px rgba(15,23,42,.10);
}

.phongvt-about-card-header{
    padding:42px 58px 30px;
    border-bottom:1px solid var(--phongvt-about-border);
}

.phongvt-about-card-header h1{
    margin:0;
    color:var(--phongvt-about-dark);
    font-size:38px;
    line-height:1.3;
    font-weight:800;
    text-transform:none;
}

.phongvt-about-card-content{
    padding:34px 28px 65px;
    color:var(--phongvt-about-text);
}

.phongvt-about-card-content h2,
.phongvt-about-card-content h3,
.phongvt-about-card-content h4{
    color:var(--phongvt-about-dark);
    text-transform:none;
}

.phongvt-about-card-content h2{
    margin:34px 0 16px;
    font-size:30px;
    line-height:1.35;
}

.phongvt-about-card-content h3{
    margin:28px 0 14px;
    font-size:23px;
    line-height:1.4;
}

.phongvt-about-card-content p,
.phongvt-about-card-content li{
    font-size:17px;
    line-height:1.75;
}

.phongvt-about-card-content p{
    margin:0 0 18px;
}

.phongvt-about-card-content ul,
.phongvt-about-card-content ol{
    margin:0 0 22px 24px;
}

.phongvt-about-card-content li{
    margin-bottom:8px;
}

.phongvt-about-card-content strong{
    color:var(--phongvt-about-dark);
}

.phongvt-about-card-content img{
    display:block;
    width:100%;
    height:auto;
    margin:28px 0;
    border-radius:12px;
}

.phongvt-about-card-content blockquote{
    margin:26px 0;
    padding:22px 26px;
    border-left:4px solid #0798d4;
    background:#eef8fc;
    border-radius:0 10px 10px 0;
}

@media(max-width:849px){

    .phongvt-about-container{
        width:calc(100% - 30px);
    }

    .phongvt-about-hero{
        min-height:340px;
    }

    .phongvt-about-card{
        margin-top:-78px;
    }

    .phongvt-about-card-header{
        padding:34px 34px 25px;
    }

    .phongvt-about-card-content{
        padding:30px 34px 50px;
    }
}

@media(max-width:549px){

    .phongvt-about-container{
        width:calc(100% - 24px);
    }

    .phongvt-about-hero{
        min-height:230px;
    }

    .phongvt-about-card{
        margin-top:-38px;
        border-radius:14px 14px 0 0;
    }

    .phongvt-about-card-header{
        padding:25px 20px 20px;
    }

    .phongvt-about-card-header h1{
        font-size:27px;
    }

    .phongvt-about-card-content{
        padding:24px 20px 38px;
    }

    .phongvt-about-card-content h2{
        font-size:25px;
    }

    .phongvt-about-card-content h3{
        font-size:21px;
    }

    .phongvt-about-card-content p,
    .phongvt-about-card-content li{
        font-size:16px;
        line-height:1.7;
    }
}


/* =========================================================
   2 UX BLOCK XẾP DỌC THÀNH 2 SECTION RIÊNG
========================================================= */

.phongvt-about-extra-section{
    width:100%;
    margin-top:30px;
    overflow:hidden;
    background:#fff;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(15,23,42,.07);
}

.phongvt-about-extra-section:last-child{
    margin-bottom:70px;
}

/* Giữ UX Block thẳng hàng với khung chính */
.phongvt-about-extra-section .section{
    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

.phongvt-about-extra-section .row{
    width:100%;
    max-width:none;
    margin-left:0 !important;
    margin-right:0 !important;
}

.phongvt-about-extra-section .col{
    padding-left:0;
    padding-right:0;
}

.phongvt-about-extra-section > *:first-child{
    margin-top:0;
}

.phongvt-about-extra-section > *:last-child{
    margin-bottom:0;
}

@media(max-width:849px){
    .phongvt-about-extra-section{
        margin-top:22px;
    }

    .phongvt-about-extra-section:last-child{
        margin-bottom:50px;
    }
}

@media(max-width:549px){
    .phongvt-about-extra-section{
        margin-top:16px;
        border-radius:14px;
    }

    .phongvt-about-extra-section:last-child{
        margin-bottom:38px;
    }
}

/* =========================================================
   CANH NỘI DUNG 2 UX BLOCK GIỐNG SECTION TRÊN
========================================================= */

.phongvt-about-extra-section{
    padding:0 !important;
}

/* Ép section trong UX Block không full tràn */
.phongvt-about-extra-section .section{
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
}

/* Canh đúng lề 58px giống phần nội dung chính */
.phongvt-about-extra-section .section-content,
.phongvt-about-extra-section .row,
.phongvt-about-extra-section .row-main{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
}

/* Cột trong UX Block */
.phongvt-about-extra-section .col{
    padding:0 !important;
}

/* Nội dung thực tế */
.phongvt-about-extra-section .col-inner{
    padding:34px 28px 34px !important;
}

/* Tiêu đề UX */
.phongvt-about-extra-section h2,
.phongvt-about-extra-section h3{
    margin-top:0;
    color:#07112d;
    text-transform:none;
}

.phongvt-about-extra-section h2{
    font-size:30px;
    line-height:1.35;
}

.phongvt-about-extra-section h3{
    font-size:23px;
    line-height:1.4;
}

/* Đoạn văn */
.phongvt-about-extra-section p,
.phongvt-about-extra-section li{
    color:#344054;
    font-size:17px;
    line-height:1.75;
}

/* Xóa khoảng trắng thừa đầu/cuối */
.phongvt-about-extra-section .col-inner > :first-child{
    margin-top:0 !important;
}

.phongvt-about-extra-section .col-inner > :last-child{
    margin-bottom:0 !important;
}

/* Tablet */
@media(max-width:849px){

    .phongvt-about-extra-section .col-inner{
        padding:30px 34px 46px !important;
    }
}

/* Mobile */
@media(max-width:549px){

    .phongvt-about-extra-section .col-inner{
        padding:24px 20px 34px !important;
    }

    .phongvt-about-extra-section h2{
        font-size:25px;
    }

    .phongvt-about-extra-section h3{
        font-size:21px;
    }

    .phongvt-about-extra-section p,
    .phongvt-about-extra-section li{
        font-size:16px;
        line-height:1.7;
    }
}