/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

:root {
    /* Color */
    --color-highlight-1: #DDA335;
    --color-highlight-2: #9A6E25;
    --color-highlight-3: #9D6F24;
    --color-text: #000000;

    /* Background */
    --bg-color-main: #fffbf0;

    /* Font */
    --font-accent: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading-1: 'MonteCarlo', cursive;
    --font-heading-2: 'Beautique Display', serif;
    --font-manrope: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    color: var(--color-text);
}

.section-content {
    z-index: unset !important;
}

.page-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.page-wrapper>.row {
    padding-top: 30px !important;
}

.slider-top-mobile .is-full-height {
    padding-top: 126.5% !important;
    min-height: unset !important;
    height: auto !important;
}

@media only screen and (max-width: 768px) {
    .container .section, .row .section {
        padding-left: 0;
        padding-right: 0;
    }
}
/* =========================================================
   EXPERT PROFILE KTV SHINHAN
   FINAL VERSION - FLATSOME UX BUILDER
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.expert-profile {
    padding: 50px 20px !important;
    background: var(--bg-color-main);
}


/* =========================================================
   02. PROFILE CARD
   ========================================================= */

.expert-profile__row {
    width: 100%;
    max-width: 1380px !important;

    margin: 0 auto !important;
    padding: 50px 55px !important;

    background: #fff !important;

    border: 1px solid var(--color-highlight-1) !important;
    border-radius: 24px !important;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(154, 110, 37, 0.10),
        0 3px 8px rgba(0, 0, 0, 0.04);
}


/* Reset khoảng cách mặc định Flatsome */

.expert-profile__row > .col {
    padding-top: 0;
    padding-bottom: 0;
}


/* =========================================================
   03. LEFT COLUMN
   ========================================================= */

.expert-profile__left {
    padding: 0 50px 0 10px !important;

    text-align: center;

    /* Không mặc định tạo line */
    border-right: 0 !important;
}


/* =========================================================
   04. AVATAR
   ========================================================= */

.expert-profile__avatar {
    width: 100%;
    max-width: 310px;

    margin: 0 auto 28px !important;
}


.expert-profile__avatar .img-inner {
    position: relative;

    width: 100% !important;

    aspect-ratio: 1 / 1;

    overflow: hidden !important;

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

    border: 6px solid var(--color-highlight-1) !important;
    border-radius: 50% !important;

    box-shadow:
        0 10px 25px rgba(154, 110, 37, 0.16);
}


.expert-profile__avatar .img-inner img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 50% !important;
}


/* =========================================================
   05. EXPERT NAME
   ========================================================= */

.expert-profile__name {
    position: relative;

    width: 100%;
    max-width: 430px;

    margin: 0 auto 10px !important;
    padding: 0 !important;

    border: 0 !important;

    text-align: center;
}


/* Xóa toàn bộ divider của Flatsome */

.expert-profile__name::before,
.expert-profile__name::after,
.expert-profile__name .section-title::before,
.expert-profile__name .section-title::after,
.expert-profile__name .section-title-main::before,
.expert-profile__name .section-title-main::after {
    display: none !important;
    content: none !important;
}


.expert-profile__name h1,
.expert-profile__name h2,
.expert-profile__name h3,
.expert-profile__name .section-title {
    display: block !important;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    font-family: var(--font-heading-2);

    font-size: clamp(30px, 2.5vw, 42px);
    font-weight: 600;

    line-height: 1.18 !important;
    letter-spacing: -0.3px;

    text-align: center;

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


.expert-profile__name .section-title-main {
    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
}


/* =========================================================
   06. POSITION
   ========================================================= */

.expert-profile__position {
    max-width: 390px;

    margin: 0 auto 18px !important;

    font-family: var(--font-accent);

    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;

    text-align: center;

    color: var(--color-highlight-2);
}


.expert-profile__position p {
    margin: 0 !important;
}


/* =========================================================
   07. SOCIAL ICONS
   ========================================================= */

.expert-profile__left .social-icons {
    margin-top: 16px;
}


/* =========================================================
   08. RIGHT COLUMN
   ========================================================= */

.expert-profile__right {
    padding: 0 0 0 55px !important;
}


/* =========================================================
   09. QUOTE
   ========================================================= */

.expert-profile__quote {
    position: relative;

    margin: 0 0 32px !important;
    padding: 28px 34px;

    overflow: hidden;

    /* Ivory Shinhan nhẹ */
    background: var(--bg-color-main);

    border: 1px solid rgba(221, 163, 53, 0.30);
    border-radius: 18px;
}


/* Reset blockquote mặc định Flatsome */

.expert-profile__quote blockquote {
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-left: 0 !important;
}


.expert-profile__quote p {
    position: relative;
    z-index: 2;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-left: 0 !important;

    font-family: var(--font-accent);

    font-size: 18px;
    font-weight: 400;
    font-style: italic;

    line-height: 1.7;

    color: #282828;
}


/* Quote mark */

.expert-profile__quote::after {
    content: "”";

    position: absolute;

    top: 4px;
    right: 18px;

    z-index: 1;

    font-family: Georgia, serif;

    font-size: 68px;
    font-weight: 700;
    line-height: 1;

    color: rgba(154, 110, 37, 0.15);
}


/* =========================================================
   10. EXPERT INFORMATION
   ========================================================= */

.expert-info {
    width: 100%;

    font-family: var(--font-accent);
}


.expert-info__item {
    display: grid;

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

    column-gap: 25px;

    align-items: start;

    padding: 8px 0;
}


.expert-info__label {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;

    color: var(--color-highlight-2);
}


.expert-info__value {
    min-width: 0;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;

    color: #242424;
}


.expert-info__value strong {
    font-weight: 700;

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


/* =========================================================
   11. DESKTOP ONLY
   LINE GIỮA 2 CỘT
   ========================================================= */

@media (min-width: 1025px) {

    .expert-profile__left {
        border-right:
            1px solid rgba(154, 110, 37, 0.25) !important;
    }

}


/* =========================================================
   12. LARGE DESKTOP
   >= 1440px
   ========================================================= */

@media (min-width: 1440px) {

    .expert-profile__row {
        max-width: 1400px !important;

        padding: 55px 65px !important;
    }


    .expert-profile__avatar {
        max-width: 320px;
    }


    .expert-profile__right {
        padding-left: 60px !important;
    }

}


/* =========================================================
   13. LAPTOP
   1025px - 1200px
   ========================================================= */

@media (min-width: 1025px) and (max-width: 1200px) {

    .expert-profile__row {
        padding: 40px !important;
    }


    .expert-profile__left {
        padding: 0 35px 0 5px !important;
    }


    .expert-profile__right {
        padding: 0 0 0 35px !important;
    }


    .expert-profile__avatar {
        max-width: 260px;
    }


    .expert-profile__name h1,
    .expert-profile__name h2,
    .expert-profile__name h3,
    .expert-profile__name .section-title {
        font-size: 34px;
    }


    .expert-info__item {
        grid-template-columns:
            175px
            minmax(0, 1fr);

        column-gap: 20px;
    }

}


/* =========================================================
   14. TABLET
   769px - 1024px
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

    .expert-profile {
        padding: 35px 20px !important;
    }


    .expert-profile__row {
        padding: 35px 30px !important;
    }


    /* Không line trên Tablet */

    .expert-profile__left {
        padding: 0 28px 0 0 !important;

        border-right: 0 !important;
        border-bottom: 0 !important;
    }


    .expert-profile__right {
        padding: 0 0 0 28px !important;
    }


    .expert-profile__avatar {
        max-width: 220px;
    }


    .expert-profile__name h1,
    .expert-profile__name h2,
    .expert-profile__name h3,
    .expert-profile__name .section-title {
        font-size: 30px;
    }


    .expert-profile__position {
        font-size: 15px;
    }


    .expert-profile__quote {
        margin-bottom: 24px !important;

        padding: 23px 24px;
    }


    .expert-profile__quote p {
        font-size: 16px;
        line-height: 1.65;
    }


    .expert-info__item {
        grid-template-columns:
            145px
            minmax(0, 1fr);

        column-gap: 15px;

        padding: 6px 0;
    }


    .expert-info__label {
        font-size: 13px;
    }


    .expert-info__value {
        font-size: 14px;
    }

}


/* =========================================================
   15. MOBILE
   <= 768px
   ========================================================= */

@media only screen and (max-width: 768px) {

    /* =========================
       SECTION
       ========================= */

    .expert-profile {
        padding: 20px 12px !important;
    }


    /* =========================
       CARD
       ========================= */

    .expert-profile__row {
        width: 100% !important;

        margin: 0 auto !important;

        padding:
            22px 16px 18px !important;

        background: #fff !important;

        border:
            1px solid rgba(221, 163, 53, 0.45) !important;

        border-radius:
            16px !important;

        overflow: hidden;

        box-shadow:
            0 6px 20px rgba(154, 110, 37, 0.07);
    }


    /* Force Flatsome thành 1 cột */

    .expert-profile__row > .col {
        width: 100% !important;
        max-width: 100% !important;

        flex-basis: 100% !important;

        padding: 0 !important;
    }


    /* =========================
       LEFT
       ========================= */

    .expert-profile__left {
        width: 100% !important;

        padding:
            0 0 18px !important;

        /* Mobile hoàn toàn không có line */

        border: 0 !important;

        text-align: center;
    }


    /* =========================
       AVATAR
       ========================= */

    .expert-profile__avatar {
        width: 170px !important;
        max-width: 170px !important;

        margin:
            0 auto 16px !important;
    }


    .expert-profile__avatar .img-inner {
        width: 170px !important;
        height: 170px !important;

        border:
            4px solid var(--color-highlight-1) !important;

        border-radius:
            50% !important;

        overflow:
            hidden !important;

        box-shadow:
            0 7px 18px rgba(154, 110, 37, 0.16);
    }


    .expert-profile__avatar .img-inner img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;

        border-radius:
            50% !important;
    }


    /* =========================
       NAME
       ========================= */

    .expert-profile__name {
        width: 100%;
        max-width: 100%;

        margin:
            0 auto 7px !important;

        padding: 0 !important;

        border: 0 !important;
    }


    .expert-profile__name h1,
    .expert-profile__name h2,
    .expert-profile__name h3,
    .expert-profile__name .section-title {
        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        font-size:
            25px !important;

        line-height:
            1.2 !important;

        letter-spacing:
            -0.2px;

        text-align:
            center;
    }


    /* =========================
       POSITION
       ========================= */

    .expert-profile__position {
        max-width: 300px;

        margin:
            0 auto 10px !important;

        font-size:
            12.5px !important;

        line-height:
            1.45;
    }


    /* =========================
       SOCIAL
       ========================= */

    .expert-profile__left .social-icons {
        margin-top:
            10px !important;
    }


    .expert-profile__left .social-icons a {
        margin:
            0 3px !important;
    }


    /* =========================
       RIGHT
       ========================= */

    .expert-profile__right {
        width: 100% !important;

        padding:
            16px 0 0 !important;

        border: 0 !important;
    }


    /* =========================
       QUOTE
       ========================= */

    .expert-profile__quote {
        margin:
            0 0 16px !important;

        padding:
            16px !important;

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

        border:
            1px solid rgba(221, 163, 53, 0.25);

        border-radius:
            12px;
    }


    .expert-profile__quote blockquote {
        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
    }


    .expert-profile__quote p {
        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        font-size:
            13px !important;

        line-height:
            1.65 !important;

        text-align:
            left;
    }


    .expert-profile__quote::after {
        top: 5px;
        right: 10px;

        font-size:
            42px;

        color:
            rgba(154, 110, 37, 0.13);
    }


    /* =========================
       INFORMATION
       ========================= */

    .expert-info {
        width: 100%;
    }


    .expert-info__item {
        display: block;

        padding:
            7px 0;

        border-bottom:
            1px solid rgba(154, 110, 37, 0.10);
    }


    .expert-info__item:last-child {
        padding-bottom: 0;

        border-bottom: 0;
    }


    .expert-info__label {
        margin:
            0 0 2px;

        font-size:
            11px !important;

        font-weight:
            700;

        line-height:
            1.4;

        letter-spacing:
            0.15px;
    }


    .expert-info__value {
        margin: 0;

        font-size:
            12.5px !important;

        line-height:
            1.45;
    }

}


/* =========================================================
   16. SMALL MOBILE
   <= 480px
   ========================================================= */

@media only screen and (max-width: 480px) {

    .expert-profile {
        padding:
            16px 10px !important;
    }


    .expert-profile__row {
        padding:
            20px 14px 16px !important;

        border-radius:
            14px !important;
    }


    /* Avatar */

    .expert-profile__avatar {
        width:
            150px !important;

        max-width:
            150px !important;

        margin-bottom:
            14px !important;
    }


    .expert-profile__avatar .img-inner {
        width:
            150px !important;

        height:
            150px !important;

        border-width:
            4px !important;
    }


    /* Name */

    .expert-profile__name h1,
    .expert-profile__name h2,
    .expert-profile__name h3,
    .expert-profile__name .section-title {
        font-size:
            23px !important;

        line-height:
            1.18 !important;
    }


    /* Position */

    .expert-profile__position {
        max-width:
            270px;

        font-size:
            12px !important;
    }


    /* Right */

    .expert-profile__right {
        padding-top:
            14px !important;
    }


    /* Quote */

    .expert-profile__quote {
        margin-bottom:
            14px !important;

        padding:
            15px 14px !important;

        border-radius:
            11px;
    }


    .expert-profile__quote p {
        font-size:
            12.5px !important;

        line-height:
            1.62 !important;
    }


    .expert-profile__quote::after {
        font-size:
            38px;
    }


    /* Information */

    .expert-info__item {
        padding:
            6px 0;
    }


    .expert-info__label {
        font-size:
            10.5px !important;
    }


    .expert-info__value {
        font-size:
            12px !important;

        line-height:
            1.4;
    }

}