/* Module: Oc Dao Xanh */

.hdev-oc-dao-xanh-wrapper {
    width: 100%;
    padding: 60px 0;
    position: relative;
    /* Background handled by inline style on parent */
}

.hdev-oc-dao-xanh-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header Section */
.hdev-odx-header {
    margin-bottom: 60px;
}

.hdev-odx-subtitle {
    font-family: var(--hdev-font-subheading);
    font-size: var(--hdev-fs-subheading-opt);
    background: var(--hdev-gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    font-weight: 300;
    font-style: italic;
    margin-bottom: 0px;
    text-align: center;
}

/* If subtitle needs to be positioned absolutely or specifically */
/* .hdev-odx-subtitle {
     position: absolute;
     top: X;
     left: Y;
} */

.hdev-odx-title-desc {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.hdev-odx-title {
    width: 45%;
    text-align: center;
}

.hdev-odx-title h2 {
    font-family: var(--hdev-font-heading);
    font-size: var(--hdev-fs-heading-opt);
    background: var(--hdev-color-heading-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
    text-align: center;
    font-weight: 400;
}

.hdev-odx-desc {
    width: 50%;
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    text-align: justify;
    margin-top: 10px;
}

.hdev-odx-desc p {
    margin-bottom: 0;
}

/* Items Section */
.hdev-odx-items {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* Items might have different effective heights */
    position: relative;
}

.hdev-odx-item {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.hdev-odx-item-desc {
    text-align: center;
    color: #333;
    font-size: 15px;
    line-height: 1.5;
    margin: 8px 0;
}

.hdev-odx-item-image {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.image-bubble {
    width: 220px;
    height: 220px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-bubble::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 15%;
    width: 20%;
    height: 10%;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    filter: blur(2px);
    transform: rotate(-45deg);
    pointer-events: none;
}

.image-bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Specific layout adjustments for Item 2 */
.hdev-odx-item-2 {
    margin-top: 50px;
    /* Push item 2 down slightly or up depending on exact curve */
}

/* Re-ordering is handled by flex-direction in HTML logic or valid order here if needed, 
   but HTML structure handles top/bottom placement content-wise. */


/* Responsive */
@media (min-width: 1025px) and (max-width: 1536px) {
    .image-bubble {
        width: 210px;
        height: 210px;
    }
}

@media (max-width: 768px) {
    .hdev-oc-dao-xanh-wrapper {
        padding: 5px 0;
    }

    .hdev-odx-title-desc {
        flex-direction: column;
    }

    .hdev-odx-title,
    .hdev-odx-desc {
        width: 100%;
        margin-bottom: 20px;
    }

    .hdev-odx-items {
        flex-direction: column;
        align-items: center;
    }

    .hdev-odx-item {
        width: 100%;
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        /* Row layout */
        align-items: center;
        /* Center vertically */
    }

    /* Reset margins/paddings */
    .hdev-odx-item-desc,
    .hdev-odx-item-image {
        margin: 0 !important;
    }

    /* Reset Item 2 Specifics */
    .hdev-odx-item-2 {
        margin-top: 0;
    }

    /* Image Column - 1/3 */
    .hdev-odx-item-image {
        width: 33.33%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Content Column - 2/3 */
    .hdev-odx-item-desc {
        width: 66.66%;
    }

    /* Default (Items 1 & 3): Image Left, Text Right */
    /* They are naturally in this order in HTML: Image then Desc */
    .hdev-odx-item-desc {
        padding-left: 15px;
        text-align: left;
    }

    /* Item 2: Text Left, Image Right */
    /* It is naturally in this order in HTML: Desc then Image */
    .hdev-odx-item-2 .hdev-odx-item-desc {
        padding-left: 0;
        padding-right: 15px;
        text-align: right;
        /* Optional: Align text towards image? or keep left? User didn't specify. Left is better for readability typically. */
    }

    /* Responsive Circular Image */
    .image-bubble {
        width: 100%;
        max-width: 120px;
        /* Cap size on tablets */
        height: auto;
        aspect-ratio: 1 / 1;
        /* Keep circle */
        border-radius: 50%;
    }

    .image-bubble img {
        border-radius: 50%;
    }

    /* Adjust background position for mobile to avoid text overlap */
    .hdev-fullpage:has(.hdev-oc-dao-xanh-wrapper),
    body:has(.hdev-oc-dao-xanh-wrapper) {
        background-position: 80% center !important;
    }
}