/* =========================================
   POLYLANG LANGUAGE SWITCHER
========================================= */

.header-language-dropdown {
    position: relative;
}

.nav-dropdown-has-arrow li.current-dropdown.has-dropdown:after,
.nav-dropdown-has-arrow li.current-dropdown.has-dropdown:before {
    content: unset !important;
}

/* Main button */

.header-language-dropdown>a.header-language-dropdown__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;

    width: 68px;
    height: 38px;

    padding: 8px 14px;

    border: 1px solid #e5d9cd;
    border-radius: 999px;

    background: #fff;

    color: #201e1d;

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

    line-height: 1;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        background-color .2s ease,
        border-color .2s ease;
}


/* Hide current language text */


/* Flag */

.header-language-dropdown>a .image-icon {
    display: none;
}


/* Arrow */

.header-language-dropdown>a .icon-angle-down {
    margin-left: 7px;

    font-size: 11px;

    transition: transform .2s ease;
}


/* Show EN / JP / KR using current language */

.header-language-dropdown>a::before {
    font-size: 13px;
    font-weight: 700;
}


/* English */

.header-language-dropdown>a[href*="/"]:not([href*="/ja/"]):not([href*="/ko/"])::before {
    content: "EN";
}


/* Open state */

.header-language-dropdown>a[aria-expanded="true"] {
    border-color: #c00000;
    background: #fff;
}


/* Rotate arrow */

.header-language-dropdown>a[aria-expanded="true"] .icon-angle-down {
    transform: rotate(180deg);
}


/* =========================================
   DROPDOWN
========================================= */

.header-language-dropdown .nav-dropdown {
    min-width: 110px;

    margin-top: 8px;
    padding: 6px;

    border: 1px solid #e5d9cd !important;
    border-radius: 14px;

    background: #fff;

    box-shadow: 0 10px 30px rgba(32, 30, 29, .12) !important;
}


/* Dropdown items */

.header-language-dropdown .nav-dropdown>li {
    margin: 0;
}


/* Dropdown links */

.header-language-dropdown .nav-dropdown>li>a {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 10px !important;

    border-radius: 9px;

    color: #201e1d;

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

    line-height: 1;

    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease;
}


/* Hover */

.header-language-dropdown .nav-dropdown>li>a:hover {
    background: #fdf3f5;
    color: #c00000;
}


/* Active */

.header-language-dropdown .nav-dropdown>li.active>a {
    background: #fdf3f5;
    color: #c00000;
}


/* Flags trong dropdown */
.stuck .header-main .nav > li > a{
    line-height: 16px !important;
}
.header-language-dropdown .nav-dropdown .icon-image {
    display: inline-flex;

    width: 18px;
    height: 18px;

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

.header-language-dropdown .nav-dropdown .icon-image img {
    display: block;

    width: 18px;
    height: auto;
}

strong {
    font-weight: 700;
}

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    font-size: 1em;
}

.header-button a {
    font-size: 16px !important;
    padding: 11px 22px;
    line-height: 1;
}

.nav-spacing-xlarge>li {
    margin: 0 14px !important;
}

.text.mb-0 * {
    margin-bottom: 0 !important;
}

.row:after {
    content: unset !important;
}

/* =========================================================
   S1 - MOBILE LANGUAGE SWITCHER
   ========================================================= */

@media (max-width: 849px) {

    .nav-sidebar>li.has-child {
        position: relative;
        padding: 0;
        border: 1px solid #e5d9cd;
        border-radius: 999px;
        background: unset !important;
        overflow: hidden;
        width: fit-content !important;
        border-radius: unset;
    }

    .off-canvas-center .nav-sidebar.nav-vertical>li .toggle{
        top: 8px !important;
    }
    /* =========================================================
     S2 - CURRENT LANGUAGE
     ========================================================= */

    .nav-sidebar>li.has-child>a {
        display: flex;
        align-items: center;

        width: 100%;
        min-height: 42px;

        padding: 8px 42px 8px 14px;

        color: #201e1d;

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

        text-transform: uppercase;

        background: transparent;
    }

    .nav-sidebar>li.has-child>a:hover {
        color: #201e1d;
        background: transparent;
    }


    /* Current flag */

    .nav-sidebar>li.has-child>a .image-icon {
        display: none;
        align-items: center;

        margin-left: 7px;
    }

    .nav-sidebar>li.has-child>a .image-icon img {
        display: block;

        width: 18px;
        height: auto;

        margin: 0;
    }


    /* =========================================================
     S3 - ARROW
     ========================================================= */

    .nav-sidebar>li.has-child>.toggle {
        position: absolute;

        top: 5px;
        right: 6px;

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

        width: 32px;
        height: 32px;

        margin: 0;
        padding: 0;

        border: 0;

        color: #201e1d;
        background: transparent;

        z-index: 5;
    }

    .nav-sidebar>li.has-child>.toggle i {
        font-size: 18px;

        transition: transform .2s ease;
    }

    .nav-sidebar>li.has-child.active>.toggle i {
        transform: rotate(180deg);
    }


    /* =========================================================
     S4 - DROPDOWN
     ========================================================= */

    .nav-sidebar>li.has-child>ul.children {
        display: none;

        margin: 0;
        padding: 6px 8px 8px;

        border-top: 1px solid #eee5dc;

        background: unset;
    }

    .nav-sidebar>li.has-child.active>ul.children {
        display: block;
        padding: 0;
    }


    /* =========================================================
     S5 - LANGUAGE ITEMS
     ========================================================= */

    .nav-sidebar>li.has-child>ul.children>li {
        margin: 0;
        padding: 0;

        border: 0;
    }

    .nav-sidebar>li.has-child>ul.children>li>a {
        display: flex;
        align-items: center;

        min-height: 38px;

        padding: 8px 12px;

        border-radius: 999px;

        color: #201e1d;

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

        text-transform: uppercase;

        background: transparent;

        transition:
            background-color .2s ease,
            color .2s ease;
    }

    .nav-sidebar>li.has-child>ul.children>li>a:hover {
        color: #fc035f;

        background: #fdf3f5;
    }


    /* Flags */

    .nav-sidebar>li.has-child>ul.children .icon-image {
        display: flex;
        align-items: center;

        margin-right: 7px;
    }

    .nav-sidebar>li.has-child>ul.children .icon-image img {
        display: block;

        width: 18px;
        height: auto;

        margin: 0;
    }


    /* =========================================================
     S6 - TRY RAKORI BUTTON
     ========================================================= */

    .nav-sidebar>li.html.header-button-1 {
        margin-top: 10px;
        padding: 0 15px;
    }

    .nav-sidebar>li.html.header-button-1 .header-button {
        width: 100%;
    }

    .nav-sidebar>li.html.header-button-1 .button {
        width: max-content;
        margin: 0;

        text-align: center;
    }

}