/* Ẩn toàn bộ Absolute Footer trong Flatsome */
.absolute-footer {
    display: none !important;
}

/* ==========================================================================
   0. GLOBAL IMPORTS & RESET
   ========================================================================== */
/* Đã gộp toàn bộ các font weights cần thiết vào 1 link duy nhất */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700;1,800;1,900&display=swap');

/* Gộp Reset cho TẤT CẢ các container */
.header-container, .st-pccc-container, .ahp-snake-wrapper, .oc-chart, 
.wi-project-card, .gp-ui-container, .wi-alert-box, .ahp-info-wrapper,
.wi-project-card *, .gp-ui-container *, .wi-alert-box *, .ahp-info-wrapper * {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   1. KHUNG HEADER ICON
   ========================================================================== */
.header-container {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fire-icon {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
}

.header-title {
    font-weight: 800;
    font-size: 24px;
    color: #3158a7;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ==========================================================================
   2. STEP LIST PCCC
   ========================================================================== */
.st-pccc-container {
    background-color: #27a844;
    padding: 40px 20px;
}

.st-pccc-item {
    display: flex;
    align-items: flex-start;
    margin: 0 auto 30px;
    max-width: 500px;
    position: relative;
}

.st-pccc-item:last-child {
    margin-bottom: 0;
}

.st-pccc-number {
    font-size: 58px;
    font-weight: 900;
    font-style: italic;
    color: transparent;
    -webkit-text-stroke: 1.2px #ffffff;
    line-height: 1;
    margin-right: 25px;
    flex-shrink: 0;
    min-width: 80px;
    opacity: 0.9;
}

.st-pccc-content {
    flex-grow: 1;
    padding-bottom: 12px;
    position: relative;
}

.st-pccc-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.st-pccc-desc {
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
}

.st-pccc-content::after,
.st-pccc-content::before {
    content: "";
    position: absolute;
    background-color: #fff;
    left: 0;
}

.st-pccc-content::after {
    bottom: 0;
    width: 100%;
    height: 1.5px;
}

.st-pccc-content::before {
    bottom: -3.5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    z-index: 2;
}

@media (max-width: 767px) {
    .st-pccc-number {
        font-size: 45px;
        min-width: 65px;
    }
    .st-pccc-desc {
        font-size: 17px;
    }
    .st-pccc-title {
        font-size: 13px;
    }
}

/* ==========================================================================
   3. TIMELINE SNAKE PATH
   ========================================================================== */
.ahp-snake-wrapper {
    max-width: 900px;
    margin: 11px auto;
    padding: 11px;
}

.ahp-node {
    position: relative;
    width: 50%;
    min-height: 52.48px;
    border-style: solid;
    border-width: 0;
}

.ahp-node.node-right {
    margin-left: auto;
    border-left: 10.46px solid;
    border-bottom: 10.46px solid;
    border-radius: 0 0 0 47.5px;
    padding: 0 0 27.46px 41px;
}

.ahp-node.node-left {
    margin-right: auto;
    border-right: 10.46px solid;
    border-bottom: 10.46px solid;
    border-radius: 0 0 47.5px 0;
    padding: 0 41px 27.46px 0;
    text-align: right;
}

.ahp-node:last-child {
    border-bottom: none !important;
    border-radius: 0 !important;
    min-height: 41px;
}

/* Timeline Colors */
.node-1 { border-color: #427ebf !important; }
.node-2 { border-color: #8e44ad !important; }
.node-3 { border-color: #d81b60 !important; }
.node-4 { border-color: #f39c12 !important; }
.node-5 { border-color: #2ecc71 !important; }

.ahp-circle {
    position: absolute;
    width: 67.48px;
    height: 67.48px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18.16px;
    font-weight: 700;
    color: #208744;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    top: -33.74px;
    z-index: 10;
}

.node-right .ahp-circle { left: -39px; }
.node-left .ahp-circle { right: -39px; }

.ahp-box {
    background: #fff;
    padding: 6.51px 13.51px;
    border-radius: 5px;
    font-size: 12.06px;
    font-weight: 700;
    color: #208744;
    display: inline-block;
    max-width: 231.6px;
    position: relative;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    line-height: 1.31;
    top: -18.31px;
}

.ahp-box::after {
    content: ".......";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: 2.16px;
    color: #fff;
    font-size: 12.46px;
}

.node-right .ahp-box::after {
    right: 100%;
    margin-right: 8.46px;
}

.node-left .ahp-box::after {
    left: 100%;
    margin-left: 8.46px;
}

@media (max-width: 767px) {
    .ahp-node {
        width: 100% !important;
        border-left: 9.46px solid !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        text-align: left !important;
        padding-left: 41px !important;
        min-height: 71.6px;
    }
    .ahp-circle {
        left: -33.5px !important;
        width: 56.7px;
        height: 56.7px;
        font-size: 15px;
        top: -28.4px;
    }
    .ahp-box::after {
        display: none;
    }
}

/* ==========================================================================
   4. ORG CHART
   ========================================================================== */
.oc-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100%;
    overflow-x: auto;
    padding: 15px 0;
}

.oc-chart {
    width: 100%;
    max-width: 633px;
    max-height: 684px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.oc-box {
    color: #fff;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    border-radius: 6px;
    z-index: 2;
    position: relative;
    line-height: 1.2;
}

.oc-bg-red {
    background-color: #da291c;
    padding: 13px 25px;
    font-size: 16px;
}

.oc-bg-green {
    background-color: #22a354;
    padding: 10px 16px;
    font-size: 13px;
}

.oc-square {
    width: 100px;
    min-height: 80px;
    padding: 6px;
    font-size: 11.5px;
}

.oc-tail::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 15px 0;
    border-style: solid;
    border-color: #da291c transparent transparent transparent;
    z-index: 3;
}

.oc-top-section {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    z-index: 1;
}

.oc-main-axis {
    position: absolute;
    top: 42px;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 1.5px dashed #888;
    z-index: 0;
}

.oc-assist-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 2;
}

.oc-assist-bridge {
    width: 110px;
    position: relative;
    display: flex;
    justify-content: center;
    height: 36px;
}

.oc-bridge-line {
    position: absolute;
    top: 50%;
    inset: 0 0;
    transform: translateY(-50%);
    z-index: 1;
}

.oc-dot {
    width: 6px;
    height: 6px;
    background-color: #22a354;
    border-radius: 50%;
    position: absolute;
    z-index: 4;
}

.oc-line-v {
    width: 0;
    border-left: 1.5px dashed #888;
}

.oc-line-h {
    height: 0;
    border-top: 1.5px dashed #888;
}

.oc-depts-container {
    width: 100%;
    position: relative;
}

.oc-depts-bridge {
    position: absolute;
    top: 0;
    left: 12.5%;
    right: 12.5%;
}

.oc-depts-grid {
    display: flex;
    width: 100%;
    position: relative;
}

.oc-dept {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: 28px;
}

.oc-drop {
    position: absolute;
    top: 0;
    height: 28px;
}

.oc-drop-dot {
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 500px) {
    .oc-chart { min-width: 360px; }
    .oc-square { width: 80px; min-height: 70px; font-size: 10px; }
    .oc-bg-red { padding: 11px 18px; font-size: 14px; }
    .oc-assist-bridge { width: 70px; }
}

/* ==========================================================================
   5. PROJECT CARDS
   ========================================================================== */
.wi-project-card {
    max-width: 800px;
    width: 100%;
    margin: 20px auto;
    background-color: transparent;
}

.wi-header-component {
    display: inline-flex;
    align-items: center;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.15));
    margin-bottom: 25px;
}

.wi-badge {
    position: relative;
    width: 52px;
    height: 52px;
    background-color: #3158a7;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: -3px 0 0 0 #E32322;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.wi-badge-number {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.wi-banner {
    position: relative;
    height: 42px;
    margin-left: -20px;
    display: flex;
    align-items: center;
    z-index: 5;
    padding-left: 32px;
    padding-right: 15px;
}

.wi-banner-bg {
    position: absolute;
    inset: 0;
    background-color: #fff;
    border-top: 3px solid #3158a7;
    z-index: -1;
}

.wi-banner-slant {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    border-top: 3px solid #1CA54B;
    border-right: 3px solid #1CA54B;
    transform-origin: bottom right;
    transform: skewX(25deg);
    z-index: -2;
    border-top-right-radius: 2px;
}

.wi-banner-text {
    color: #3158a7;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.wi-project-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 10px;
}

.wi-detail-item {
    display: flex;
    align-items: flex-start;
}

.wi-detail-icon {
    width: 25px;
    color: #E32322;
    font-size: 18px;
    margin-right: 8px;
    margin-top: 2px;
    display: flex;
    justify-content: center;
}

.wi-detail-content {
    flex: 1;
    font-size: 15px;
    line-height: 1.6;
    color: #111;
    text-align: left;
}

.wi-detail-label {
    color: #E32322;
    font-weight: 700;
    margin-right: 4px;
}

.wi-image-section {
    margin-top: 30px;
    width: 100%;
    text-align: center;
}

.wi-project-image {
    max-width: 100%;
    height: auto;
    display: inline-block;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 500px) {
    .wi-banner-text { font-size: 14px; white-space: normal; }
    .wi-banner { height: auto; min-height: 42px; }
}

/* ==========================================================================
   6. GP-UI & ALERT BOX
   ========================================================================== */
.gp-ui-container {
    max-width: 1000px;
    width: 100%;
    margin: 40px auto;
}

.gp-ui-grid {
    display: flex;
    align-items: center;
    padding-bottom: 25px;
}

.gp-ui-content {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 30px;
}

.gp-ui-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.gp-ui-num {
    font-size: 65px;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 2.5px #3158a7;
    line-height: 0.8;
    letter-spacing: -1px;
}

.gp-ui-circle {
    display: block;
    width: 12px;
    height: 12px;
    border: 2px solid #3158a7;
    border-radius: 50%;
    margin-top: 2px;
    margin-left: 6px;
}

.gp-ui-title {
    color: #3158a7;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
    white-space: nowrap;
}

.gp-ui-desc {
    color: #333;
    font-size: 15.5px;
    line-height: 1.6;
    font-weight: 400;
}

.gp-ui-visual {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    display: flex;
    align-items: center;
}

.gp-ui-chevron {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 80px;
    background-color: #3158a7;
    z-index: 5;
    clip-path: polygon(32px 0, 2px 40px, 32px 80px, 47px 80px, 17px 40px, 47px 0);
}

.gp-ui-photo {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    clip-path: polygon(55px 0, 100% 0, 100% 100%, 55px 100%, 55px calc(50% + 40px), 25px 50%, 55px calc(50% - 40px));
}

.gp-ui-dashed-line {
    width: 100%;
    height: 1px;
    border-bottom: 2px dashed #f2b6b6;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .gp-ui-grid { flex-direction: column; }
    .gp-ui-content, .gp-ui-visual { flex: 0 0 100%; max-width: 100%; padding-right: 0; }
    .gp-ui-heading { gap: 10px; }
    .gp-ui-num { font-size: 50px; }
    .gp-ui-title { font-size: 15px; white-space: normal; }
    .gp-ui-visual { margin-top: 25px; }
    
    .gp-ui-chevron {
        width: 80px;
        height: 50px;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        clip-path: polygon(0 32px, 40px 2px, 80px 32px, 80px 47px, 40px 17px, 0 47px);
    }
    
    .gp-ui-photo {
        clip-path: polygon(0 55px, calc(50% - 40px) 55px, 50% 25px, calc(50% + 40px) 55px, 100% 55px, 100% 100%, 0 100%);
    }
}

/* --- Alert Box --- */
.wi-alert-box {
    display: flex;
    align-items: center;
    max-width: 800px;
    width: 100%;
    margin: 20px auto;
    background-color: transparent;
}

.wi-alert-left {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 18px;
    flex-shrink: 0;
}

.wi-alert-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    border: 4px solid #3158a7;
    border-radius: 50%;
    color: #3158a7;
    font-size: 26px;
    font-weight: 900;
}

.wi-alert-line {
    width: 3.5px;
    height: 50px;
    background-color: #3158a7;
    border-radius: 2px;
}

.wi-alert-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wi-alert-title {
    color: #3158a7;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 6px;
    line-height: 1.3;
}

.wi-alert-desc {
    color: #333;
    font-size: 15.5px;
    line-height: 1.5;
    font-weight: 400;
}

@media (max-width: 500px) {
    .wi-alert-left { gap: 10px; margin-right: 12px; }
    .wi-alert-circle { width: 48px; height: 48px; font-size: 22px; border-width: 3px; }
    .wi-alert-line { height: 42px; width: 3px; }
    .wi-alert-title { font-size: 16px; }
    .wi-alert-desc { font-size: 14px; }
}

/* ==========================================================================
   V4: CSS CUSTOM PROFILE AN HÒA PHÁT (FLATSOME OPTIMIZED)
   ========================================================================== */
.ahp-custom-profile {
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.ahp-custom-profile * {
    box-sizing: border-box;
}

/* --- HEADER DESKTOP --- */
.ahp-custom-profile .ahp-header-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.ahp-custom-profile .ahp-header-left {
    width: 35%;
    background-color: #1e9e53;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
}

.ahp-custom-profile .ahp-header-left h2 {
    margin: 0 0 15px 0 !important;
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3 !important;
}

.ahp-custom-profile .ahp-header-divider {
    width: 80%;
    max-width: 180px;
    height: 1px;
    background-color: #ffffff;
}

.ahp-custom-profile .ahp-header-right {
    width: 65%;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ahp-custom-profile .ahp-header-right h3 {
    margin: 0 !important;
    font-size: 20px !important;
    color: #000000 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    line-height: 1.4 !important;
}

.ahp-custom-profile .ahp-header-right h1 {
    margin: 5px 0 0 0 !important;
    font-size: 36px !important;
    color: #1e9e53 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    line-height: 1.4 !important;
}

/* ĐƯỜNG LINE ĐỎ HEADER */
.ahp-custom-profile .ahp-title-line-container {
    display: flex;
    align-items: flex-end;
    margin-top: 15px;
    width: 100%;
}

.ahp-custom-profile .ahp-thin-line {
    flex-grow: 1; 
    height: 2px;
    background-color: #d8232a;
    opacity: 0.8;
}

.ahp-custom-profile .ahp-thick-bar {
    width: 90px;
    height: 7px;
    background-color: #d8232a;
    margin-left: 0; 
}

/* --- NỘI DUNG (BODY) --- */
.ahp-custom-profile .ahp-content-row {
    display: flex;
    align-items: stretch;
}

.ahp-custom-profile .ahp-col-label {
    width: 35%;
    background-color: #1e9e53;
    color: #ffffff;
    padding: 18px 20px 18px 50px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.ahp-custom-profile .ahp-col-label i {
    width: 30px;
    font-size: 20px;
    margin-right: 15px;
    text-align: center;
}

.ahp-custom-profile .ahp-col-value {
    width: 65%;
    padding: 18px 50px;
    font-size: 16px;
    color: #333333;
    background-color: #f7f7f7;
    font-weight: 500;
}

.ahp-custom-profile .ahp-content-row:nth-child(even) .ahp-col-value {
    background-color: #ffffff;
}

/* GIAO DIỆN MOBILE (DƯỚI 768PX) */
@media (max-width: 768px) {
    /* 1. Trả lại Header xếp dọc (Trái trên, Phải dưới) */
    .ahp-custom-profile .ahp-header-row {
        flex-direction: column; 
    }
    
    .ahp-custom-profile .ahp-header-left,
    .ahp-custom-profile .ahp-header-right {
        width: 100%;
        padding: 30px 20px;
    }

    /* 2. Ép chữ nằm trên 1 hàng ngang tuyệt đối */
    .ahp-desktop-br {
        display: none;
    }

    .ahp-custom-profile .ahp-header-left h2 {
        white-space: nowrap;
        font-size: clamp(18px, 6vw, 28px) !important;
    }

    .ahp-custom-profile .ahp-header-right {
        text-align: center;
    }

    .ahp-custom-profile .ahp-header-right h3 {
        white-space: nowrap;
        font-size: clamp(10px, 3.5vw, 16px) !important;
    }
    
    .ahp-custom-profile .ahp-header-right h1 {
        white-space: nowrap;
        font-size: clamp(16px, 5.5vw, 24px) !important;
        margin-top: 5px !important;
    }

    /* Góp phần gạch đỏ ra giữa theo chữ */
    .ahp-custom-profile .ahp-title-line-container {
        justify-content: center;
    }
    
    .ahp-custom-profile .ahp-thick-bar {
        width: 60px;
        height: 5px;
    }

    /* 3. Gộp thông tin nội dung sang nền xanh (Khung trái) */
    .ahp-custom-profile .ahp-content-row {
        flex-direction: column;
        background-color: #1e9e53;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .ahp-custom-profile .ahp-col-label {
        width: 100%;
        padding: 15px 20px 5px 20px;
        border-bottom: none;
        font-size: 14px;
    }

    .ahp-custom-profile .ahp-col-value {
        width: 100%;
        padding: 0 20px 15px 50px;
        background-color: transparent !important;
        color: #ffffff;
        font-size: 14px;
    }
}

/* ==========================================================================
   THANK YOU CARD
   ========================================================================== */
/* Sử dụng class bao ngoài để cô lập hoàn toàn, tránh ảnh hưởng site gốc */
.ahp-container-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px 0;
}

.ahp-thank-you-card {
    --ahp-bg: #178342;
    --ahp-white: #ffffff;
    
    background-color: var(--ahp-bg);
    color: var(--ahp-white);
    font-family: 'Be Vietnam Pro', sans-serif;
    width: 100%;
    max-width: 950px;
    padding: 25px 45px;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Đảm bảo reset cục bộ không gây ảnh hưởng bên ngoài */
.ahp-thank-you-card *, 
.ahp-thank-you-card *::before, 
.ahp-thank-you-card *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Tiêu đề */
.ahp-thank-you-card .ahp-header {
    text-align: center;
    margin-bottom: 15px;
}

.ahp-thank-you-card .ahp-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--ahp-white);
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Khối nội dung */
.ahp-thank-you-card .ahp-content {
    font-size: 14px;
    line-height: 1.45; 
}

.ahp-thank-you-card .ahp-content p {
    margin-bottom: 10px;
    text-align: justify;
}

.ahp-thank-you-card .ahp-content strong {
    font-weight: 700;
}

/* Dòng cảm ơn cuối cùng */
.ahp-thank-you-card .ahp-final-line {
    text-align: center !important;
    font-size: 16px;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

/* Responsive cho Màn hình nhỏ (Mobile/Tablet) */
@media (max-width: 768px) {
    .ahp-container-wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        padding: 0 !important;
    }
    
    .ahp-thank-you-card {
        width: 100% !important;
        max-width: 100% !important; 
        border-radius: 0 !important;
        padding: 20px 15px !important;
        box-shadow: none !important;
    }
    
    .ahp-thank-you-card .ahp-title {
        font-size: 22px !important;
    }
    
    .ahp-thank-you-card .ahp-content {
        font-size: 13.5px !important;
    }
}