/*
|--------------------------------------------------------------------------
| PROJECT DETAILS - MODERN COMPACT SPLIT
|--------------------------------------------------------------------------
*/
.project-gallery-main:not(.slick-initialized) {display:none}
.project-gallery-thumbs:not(.slick-initialized) {display:none}

.page-project-details {
    --project-text: #1c2940;
    --project-muted: #687386;
    --project-border: #e3e8ef;
    --project-surface: #f7f9fc;
    margin: 0;
    color: var(--project-text);
    background: #ffffff;
}


/*
|--------------------------------------------------------------------------
| COMMON
|--------------------------------------------------------------------------
*/

.page-project-details *,
.page-project-details *::before,
.page-project-details *::after {
    box-sizing: border-box;
}


.page-project-details img {
    display: block;

    max-width: 100%;
}


.page-project-details a {
    text-decoration: none;
}


.page-project-details a:hover {
    text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| PROJECT DETAIL
|--------------------------------------------------------------------------
*/

.project-detail {
    padding:20px 0px;
}


.project-page-heading {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 26px;
}


.project-page-eyebrow {
    flex: 0 0 auto;

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

    letter-spacing: 1.6px;

    color: var(--main-color);
}


.project-page-line {
    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            to right,
            var(--project-border),
            transparent
        );
}


/*
|--------------------------------------------------------------------------
| QUAN TRỌNG:
| Không stretch 2 card bằng chiều cao nhau.
|
| Đây chính là nguyên nhân tạo khoảng trắng lớn ở gallery bên trái.
|--------------------------------------------------------------------------
*/

.project-detail-row {
    align-items: flex-start;
}


/*
|--------------------------------------------------------------------------
| MEDIA CARD
|--------------------------------------------------------------------------
*/

.project-media {
    overflow: hidden;

    /*
     * KHÔNG dùng height: 100%.
     * Card sẽ tự kết thúc ngay sau thumbnail.
     */
    height: auto;

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

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0
        16px
        44px
        rgba(
            13,
            34,
            64,
            0.07
        );
}


/*
|--------------------------------------------------------------------------
| MAIN GALLERY
|--------------------------------------------------------------------------
*/

.project-gallery-main {
    margin: 0;

    background:
        #eef2f6;
}


.project-gallery-slide {
    display: block;

    width: 100%;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: zoom-in;
}


/*
|--------------------------------------------------------------------------
| MAIN IMAGE FRAME
|--------------------------------------------------------------------------
|
| Dùng tỷ lệ cố định vừa phải.
|
| Không để gallery cao quá.
|--------------------------------------------------------------------------
*/

.project-gallery-frame {
    position: relative;

    display: flex;

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

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background:
        #fff;
}


.project-gallery-frame img {
    width: auto;
    height: 100%;
    object-fit: cover;
    transition:
        transform
        0.6s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.project-gallery-slide:hover
.project-gallery-frame img {
    transform:
        scale(1.025);
}


/*
|--------------------------------------------------------------------------
| MAIN SLICK ARROWS
|--------------------------------------------------------------------------
*/

.project-gallery-main .slick-prev,
.project-gallery-main .slick-next {
    z-index: 15;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background:var(--main-color);
}


.project-gallery-main .slick-prev {
    left: 16px;
}

.project-gallery-main .slick-prev:before {
    content: "\f104";
    font-family: "FontAwesome";
    font-size: 18px;
    color: #fff;
    opacity: 1;
}

.project-gallery-main .slick-next:before {
    content: "\f105";
    font-family: "FontAwesome";
    font-size: 18px;
    color: #fff;
    opacity: 1;
}

.project-gallery-main .slick-next {
    right: 16px;
}


.project-gallery-main .slick-prev::before,
.project-gallery-main .slick-next::before {
    font-size: 18px;
    opacity: 1;
}


/*
|--------------------------------------------------------------------------
| VIDEO
|--------------------------------------------------------------------------
*/

.project-gallery-video-frame::after {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;
}


.project-main-play {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        8px
        15px
        8px
        8px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.24
        );

    border-radius: 999px;

    color: #ffffff;

    background:
        rgba(
            13,
            34,
            64,
            0.84
        );

    backdrop-filter:
        blur(8px);

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events: none;
}


.project-main-play-icon {
    display: inline-flex;

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

    width: 34px;
    height: 34px;

    padding-left: 2px;

    border-radius: 50%;

    font-size: 13px;

    color: #ffffff;

    background:
        var(--main-color);
}


.project-main-play-label {
    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| THUMBNAIL NAV
|--------------------------------------------------------------------------
|
| Thu gọn chiều cao khu vực thumbnail.
|--------------------------------------------------------------------------
*/

.project-gallery-nav-row {
    display: grid;

    grid-template-columns:
        42px
        minmax(
            0,
            1fr
        )
        42px;

    align-items: center;

    gap: 10px;

    padding:10px;

    border-top:
        1px solid
        var(--project-border);

    background:
        #ffffff;
}


.project-gallery-arrow {
    display: flex;

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

    width: 42px;
    height: 42px;

    padding: 0;

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

    border-radius: 8px;

    font-size: 17px;

    color:
        var(--second-color);

    background: #ffffff;

    cursor: pointer;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}


.project-gallery-arrow:hover {
    color: #ffffff;

    border-color:
        var(--main-color);

    background:
        var(--main-color);

    transform:
        translateY(-1px);
}


/*
|--------------------------------------------------------------------------
| THUMBS
|--------------------------------------------------------------------------
*/

.project-gallery-thumbs {
    min-width: 0;

    margin:
        0
        -4px;
}


.project-gallery-thumbs
.slick-slide {
    padding:
        0
        4px;
}


.project-gallery-thumb {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    border:
        2px solid
        transparent;

    border-radius: 8px;

    opacity: 0.62;

    cursor: pointer;

    background:
        #edf1f5;

    transition:
        opacity 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.project-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.project-gallery-thumbs
.slick-slide.is-current
.project-gallery-thumb {
    opacity: 1;

    border-color:
        var(--main-color);
}


.project-gallery-thumb:hover {
    opacity: 1;

    transform:
        translateY(-1px);
}


/*
|--------------------------------------------------------------------------
| VIDEO THUMB
|--------------------------------------------------------------------------
*/

.project-gallery-video-thumb::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(
            13,
            34,
            64,
            0.18
        );

    pointer-events: none;
}


.project-thumb-play {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 4;

    display: flex;

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

    width: 30px;
    height: 30px;

    padding-left: 2px;

    border-radius: 50%;

    font-size: 11px;

    color: #ffffff;

    background:
        var(--main-color);

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| PROJECT SUMMARY
|--------------------------------------------------------------------------
|
| Card phải tự cao theo nội dung.
|--------------------------------------------------------------------------
*/

.project-summary {
    height: auto;

    padding:
        30px
        30px
        28px;

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

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfcfe 100%
        );

    box-shadow:
        0
        16px
        44px
        rgba(
            13,
            34,
            64,
            0.06
        );
}


.project-summary-label {
    display: inline-flex;

    align-items: center;

    min-height: 27px;

    margin-bottom: 16px;

    padding:
        0
        10px;

    border-radius: 999px;

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

    letter-spacing: 1.2px;

    color:
        var(--main-color);

    background:
        rgba(
            200,
            16,
            46,
            0.08
        );
}


.project-title {
    margin:
        0
        0
        15px;

    font-size:
        clamp(
            29px,
            3vw,
            40px
        );

    line-height: 1.12;
    font-weight: 700;

    color:
        var(--second-color);
}


.project-summary-description {
    margin:
        0
        0
        23px;

    font-size: 14px;
    line-height: 1.72;

    color:
        var(--project-muted);
}


/*
|--------------------------------------------------------------------------
| META
|--------------------------------------------------------------------------
*/

.project-meta {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    margin-bottom: 22px;

    border-top:
        1px solid
        var(--project-border);

    border-left:
        1px solid
        var(--project-border);
}


.project-meta-item {
    min-width: 0;

    padding:
        16px
        15px;

    border-right:
        1px solid
        var(--project-border);

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


.project-meta-label {
    display: block;

    margin-bottom: 6px;

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

    letter-spacing: 0.6px;

    text-transform: uppercase;

    color:
        var(--project-muted);
}


.project-meta-item strong {
    display: block;

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

    color:
        var(--second-color);
}


/*
|--------------------------------------------------------------------------
| SCOPE
|--------------------------------------------------------------------------
*/

.project-scope {
    position: relative;

    margin-bottom: 22px;

    padding:
        18px
        19px
        18px
        22px;

    border-radius: 8px;

    background:
        var(--project-surface);
}


.project-scope::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    border-radius:
        8px
        0
        0
        8px;

    background:
        var(--main-color);
}


.project-scope-label {
    display: block;

    margin-bottom: 7px;

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

    letter-spacing: 0.8px;

    color:
        var(--main-color);
}


.project-scope p {
    margin: 0;

    font-size: 14px;
    line-height: 1.62;

    color:
        var(--project-text);
}


/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.project-summary-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;
}


.project-btn {
    display: inline-flex;

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

    gap: 8px;

    min-height: 44px;

    padding:
        0
        19px;

    border-radius: 7px;

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

    transition:
        transform 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease;
}


.project-btn-primary {
    color: #ffffff;

    background:
        var(--main-color);

    border:
        1px solid
        var(--main-color);
}


.project-btn-primary:hover {
    color: #ffffff;

    transform:
        translateY(-2px);
}


.project-btn-outline {
    color:
        var(--second-color);

    background: #ffffff;

    border:
        1px solid
        #cfd6df;
}


.project-btn-outline:hover {
    color:
        var(--main-color);

    border-color:
        var(--main-color);
}


/*
|--------------------------------------------------------------------------
| PROJECT CONTENT
|--------------------------------------------------------------------------
*/

.project-content {
    padding:15px 0;
    border-top:1px solid var(--project-border);
    background: #ffffff;
}


.project-content-heading {
    max-width: 100%;
}


.project-content-eyebrow {
    display: block;
    font-size: 30px;
    font-weight: 700;
    text-align:center;
    letter-spacing: 1.4px;

    color:
        var(--main-color);
}


.project-content-heading h2 {
    margin: 0;

    font-size:
        clamp(
            30px,
            3.2vw,
            42px
        );

    line-height: 1.18;
    font-weight: 700;

    color:
        var(--second-color);
}


.project-content-heading h2 span {
    color:
        var(--main-color);
}


.project-content-body {
    padding-top: 2px;
}


.project-content-body p {
    margin-bottom: 20px;

    font-size: 16px;
    line-height: 1.85;

    color:#000;
}


.project-content-body
.project-content-lead {
    font-size: 19px;
    line-height: 1.7;
    font-weight: 500;

    color:
        var(--second-color);
}


.project-content-note {
    display: flex;

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

    gap: 18px;

    margin-top: 30px;

    padding:
        17px
        19px;

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

    border-radius: 8px;

    background:
        var(--project-surface);
}


.project-content-note span {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.6px;

    text-transform: uppercase;

    color:
        var(--project-muted);
}


.project-content-note strong {
    font-size: 14px;

    color:
        var(--second-color);

    text-align: right;
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.project-cta {
    padding:
        64px
        0;

    background:
        var(--second-color);
}


.project-cta-inner {
    display: flex;

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

    gap: 40px;
}


.project-cta-eyebrow {
    display: block;

    margin-bottom: 10px;

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

    letter-spacing: 1.4px;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );
}


.project-cta h2 {
    max-width: 720px;

    margin: 0;

    font-size:
        clamp(
            28px,
            3vw,
            38px
        );

    line-height: 1.2;

    color: #ffffff;
}


.project-cta h2 span {
    display: block;

    color:
        #ff758d;
}


.project-cta-actions {
    display: flex;

    gap: 10px;
}


.project-btn-white {
    color:
        var(--main-color);

    background: #ffffff;

    border:
        1px solid
        #ffffff;
}


.project-btn-outline-white {
    color: #ffffff;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.42
        );
}


.project-btn-outline-white:hover {
    color: #ffffff;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );
}


/*
|--------------------------------------------------------------------------
| FANCYBOX
|--------------------------------------------------------------------------
*/

.page-project-details {
    --fancybox-bg:
        rgba(
            7,
            12,
            20,
            0.96
        );
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 991.98px) {

    .project-detail {
        padding:
            44px
            0
            66px;
    }


    .project-summary {
        margin-top: 22px;
    }


    .project-title {
        font-size: 34px;
    }

    .project-content-body p {
        margin-bottom: 0px;
    }
    .project-content-heading {
        max-width: 100%;

        margin-bottom: 5px;
    }
    .page-project-details .showcase-grid{
        grid-template-columns: repeat(1, 1fr);
    }

    .project-cta-inner {
        display: block;
    }


    .project-cta-actions {
        margin-top: 28px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 575.98px) {

    .project-detail {
        padding:
            30px
            0
            50px;
    }


    .project-page-heading {
        margin-bottom: 20px;
    }


    .project-page-eyebrow {
        font-size: 10px;
    }


    .project-media {
        border-radius: 10px;
    }


    .project-gallery-frame {
        /*aspect-ratio: 4 / 3;*/
        aspect-ratio: initial;
    }


    .project-gallery-main .slick-prev,
    .project-gallery-main .slick-next {
        width: 38px;
        height: 38px;
    }


    .project-gallery-main .slick-prev {
        left: 10px;
    }


    .project-gallery-main .slick-next {
        right: 10px;
    }


    .project-gallery-nav-row {
        grid-template-columns:
            34px
            minmax(
                0,
                1fr
            )
            34px;

        gap: 7px;

        padding:
            9px
            9px;
    }


    .project-gallery-arrow {
        width: 34px;
        height: 34px;

        border-radius: 7px;

        font-size: 15px;
    }


    .project-gallery-thumb {
        height: auto;

        border-radius: 6px;
    }


    .project-main-play {
        padding:
            7px
            12px
            7px
            7px;
    }


    .project-main-play-icon {
        width: 31px;
        height: 31px;
    }


    .project-main-play-label {
        font-size: 12px;
    }


    .project-summary {
        margin-top: 18px;

        padding:
            24px
            20px;

        border-radius: 10px;
    }


    .project-title {
        font-size: 30px;
    }


    .project-summary-description {
        font-size: 14px;
    }


    .project-meta {
        grid-template-columns: 1fr;
    }


    .project-meta-item {
        padding:
            14px
            14px;
    }


    .project-summary-actions {
        display: grid;

        grid-template-columns: 1fr;
    }


    .project-content {
        padding:20px 0;
    }


    .project-content-heading h2 {
        font-size: 30px;
    }


    .project-content-body
    .project-content-lead {
        font-size: 18px;
    }


    .project-content-note {
        display: block;
    }


    .project-content-note strong {
        display: block;

        margin-top: 7px;

        text-align: left;
    }


    .project-cta {
        padding:
            50px
            0;
    }


    .project-cta-actions {
        display: grid;

        grid-template-columns: 1fr;
    }

}
/*
|--------------------------------------------------------------------------
| FIX SLICK THUMB TRACK
|--------------------------------------------------------------------------
*/

.project-gallery-thumbs .slick-list {
    overflow: hidden;
}


.project-gallery-thumbs .slick-track {
    display: flex;

    align-items: center;
}


.project-gallery-thumbs .slick-slide {
    height: auto;
}


.project-gallery-thumbs .slick-slide > div {
    width: 100%;
}