/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor,
created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo,
editor-style, featured-images, rtl-language-support, threaded-comments,
translation-ready
*/
/* =========================================================
GLOBAL
========================================================= */
@font-face {
font-family: 'UTM Amerika Sans';
src: url('assets/fonts/UTMAmerikaSans.woff2') format('woff2'),
url('assets/fonts/UTMAmerikaSans.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-size: 16px;
}
.fa,
.fas {
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
a {
color: #000;
text-decoration: none;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.button-fullwidth a{width: 100%;}


/* =========================================================
   HISTORY TIMELINE
========================================================= */

@media (min-width: 768px) {

    /* Section */
    .history-group {
        position: relative;
    }

    /* Container */
    .history-group > .elementor-container {
        position: relative;
    }

    /* 2 cột Elementor */
    .history-group > .elementor-container > .elementor-column {
        position: relative;
        box-sizing: border-box;
    }


    /* =====================================================
       TIMELINE GIỮA
    ===================================================== */

    .history-group > .elementor-container::before {
        content: "";
        position: absolute;

        top: 0;
        bottom: 0;
        left: 50%;

        width: 1px;
        background: #333;

        transform: translateX(-50%);
        z-index: 1;
    }


    /* =====================================================
       YEAR BÊN TRÁI
       TEXT | YEAR | DOT
    ===================================================== */

    .history-group .history_year.left {
        position: absolute;

        top: 0;
        right: 0;

        width: auto;
        margin: 0;
        padding: 0 28px 0 0;

        box-sizing: border-box;
        text-align: right;

        z-index: 3;
    }


    /* =====================================================
       YEAR BÊN PHẢI
       DOT | YEAR | TEXT
    ===================================================== */

    .history-group .history_year.right {
        position: absolute;

        top: 0;
        left: 0;

        width: auto;
        margin: 0;
        padding: 0 0 0 28px;

        box-sizing: border-box;
        text-align: left;

        z-index: 3;
    }


    /* =====================================================
       VÒNG TRÒN NHẠT
    ===================================================== */

    .history-group .history_year.left::before,
    .history-group .history_year.right::before {
        content: "";

        position: absolute;
        top: 50%;

        width: 36px;
        height: 36px;

        border: 1px solid #eeeeee;
        border-radius: 50%;

        background: #fff;

        box-sizing: border-box;
        transform: translateY(-50%);
    }


    /* Vòng ngoài - bên trái */
    .history-group .history_year.left::before {
        right: -18px;
    }


    /* Vòng ngoài - bên phải */
    .history-group .history_year.right::before {
        left: -18px;
    }


    /* =====================================================
       CHẤM XANH
    ===================================================== */

    .history-group .history_year.left::after,
    .history-group .history_year.right::after {
        content: "";

        position: absolute;
        top: 50%;

        width: 20px;
        height: 20px;

        border-radius: 50%;
        background: #3e59bb;

        transform: translateY(-50%);

        z-index: 4;
    }


    /* Dot bên trái */
    .history-group .history_year.left::after {
        right: -10px;
    }


    /* Dot bên phải */
    .history-group .history_year.right::after {
        left: -10px;
    }


    /* =====================================================
       LEFT TEXT
       Tạo khoảng cách lớn hơn với YEAR
    ===================================================== */

    .history-group .history_text.left {
        padding-right: 110px;
        box-sizing: border-box;
    }


    /* =====================================================
       RIGHT TEXT
       Tạo khoảng cách lớn hơn với YEAR
    ===================================================== */

    .history-group .history_text.right {
        padding-left: 110px;
        box-sizing: border-box;
    }

}


/* =========================================================
   MOBILE
   Timeline thẳng bên trái
========================================================= */

@media (max-width: 767px) {

    .history-group {
        position: relative;
    }

    .history-group > .elementor-container {
        position: relative;
    }


    /* =====================================================
       TIMELINE DỌC BÊN TRÁI
    ===================================================== */

    .history-group > .elementor-container::before {
        content: "";

        position: absolute;

        top: 0;
        bottom: 0;
        left: 20px;

        width: 1px;
        background: #333;

        z-index: 1;
    }


    /* =====================================================
       CỘT XẾP DỌC
    ===================================================== */

    .history-group > .elementor-container > .elementor-column {
        width: 100%;
    }


    /* =====================================================
       YEAR MOBILE
    ===================================================== */

    .history-group .history_year.left,
    .history-group .history_year.right {
        position: relative;

        top: auto;
        left: auto;
        right: auto;

        width: auto;

        padding: 0 0 0 45px;
        margin: 0;

        text-align: left;

        box-sizing: border-box;
    }


    /* =====================================================
       VÒNG TRÒN MOBILE
    ===================================================== */

    .history-group .history_year.left::before,
    .history-group .history_year.right::before {
        left: 2px;
        right: auto;
    }


    /* =====================================================
       DOT MOBILE
    ===================================================== */

    .history-group .history_year.left::after,
    .history-group .history_year.right::after {
        left: 10px;
        right: auto;
    }


    /* =====================================================
       TEXT MOBILE
    ===================================================== */

    .history-group .history_text.left,
    .history-group .history_text.right {
        padding-left: 45px;
        padding-right: 15px;

        box-sizing: border-box;
    }

}

/* =========================================================
   MOBILE
   DOT + YEAR + TEXT CÙNG HÀNG
========================================================= */

@media (max-width: 767px) {

    .history-group {
        position: relative;
    }

    .history-group > .elementor-container {
        position: relative;
    }


    /* =====================================================
       TIMELINE DỌC
    ===================================================== */

    .history-group > .elementor-container::before {
        content: "";

        position: absolute;

        top: 0;
        bottom: 0;
        left: 20px;

        width: 1px;
        background: #333;

        z-index: 1;
    }


    /* =====================================================
       CỘT
    ===================================================== */

    .history-group > .elementor-container > .elementor-column {
        width: 100%;
        position: relative;
    }


    /* =====================================================
       YEAR
       DOT | YEAR
    ===================================================== */

    .history-group .history_year.left,
    .history-group .history_year.right {
        position: relative;

        top: auto;
        left: auto;
        right: auto;

        width: 100%;

        margin: 0;
        padding: 0 0 0 50px;

        box-sizing: border-box;

        text-align: left;

        z-index: 3;
    }


    /* =====================================================
       VÒNG TRÒN NHẠT
    ===================================================== */

    .history-group .history_year.left::before,
    .history-group .history_year.right::before {
        content: "";

        position: absolute;

        top: 50%;
        left: 2px;
        right: auto;

        width: 36px;
        height: 36px;

        border: 1px solid #eeeeee;
        border-radius: 50%;

        background: #fff;

        box-sizing: border-box;

        transform: translateY(-50%);

        z-index: 2;
    }


    /* =====================================================
       DOT XANH
    ===================================================== */

    .history-group .history_year.left::after,
    .history-group .history_year.right::after {
        content: "";

        position: absolute;

        top: 50%;
        left: 10px;
        right: auto;

        width: 20px;
        height: 20px;

        border-radius: 50%;

        background: #3e59bb;

        transform: translateY(-50%);

        z-index: 4;
    }


    /* =====================================================
       TEXT
       NẰM CÙNG CỘT, KHÔNG ĐÈ YEAR
    ===================================================== */

    .history-group .history_text.left,
    .history-group .history_text.right {
        position: relative;

        width: 100%;

        margin: 0;

        padding: 10px 15px 0 50px;

        box-sizing: border-box;

        text-align: left;

        z-index: 2;
    }


    /* =====================================================
       ĐẢM BẢO NỘI DUNG KHÔNG BỊ ẢNH HƯỞNG
    ===================================================== */

    .history-group .history_text.left p,
    .history-group .history_text.right p {
        margin-top: 0;
    }

}





/* =========================================================
   QUICK MENU
========================================================= */

.quickMenu {
    position: relative !important;
    overflow: hidden !important;
    background: transparent;
    transition: background-color 0.4s ease;
}


/* =========================================================
   QUICK MENU TOP
========================================================= */

.quickMenu .quickMenu_top {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    transition:
        opacity 0.35s ease,
        transform 0.4s ease,
        visibility 0.35s ease;
}


/* =========================================================
   QUICK MENU BOT
========================================================= */

.quickMenu .quickMenu_bot {
    position: absolute !important;

    left: 50% !important;

    width: 100% !important;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.35s ease,
        transform 0.45s ease,
        visibility 0.35s ease;
}


/* =========================================================
   BOT - TEXT
========================================================= */

.quickMenu .quickMenu_bot.elementor-widget-text-editor {
    top: 50% !important;

    width: 100% !important;

    text-align: center !important;

    transform: translate(-50%, -44px) !important;
}


/* =========================================================
   BOT - BUTTON
========================================================= */

.quickMenu .quickMenu_bot.elementor-widget-button {
    top: 50% !important;

    width: 100% !important;

    transform: translate(-50%, 2px) !important;

    display: flex !important;

    justify-content: center !important;
}


/* =========================================================
   QUICK MENU HOVER
========================================================= */

.quickMenu:hover {
    background-color: #263b83 !important;
}


/* =========================================================
   HOVER - ẨN TOP
========================================================= */

.quickMenu:hover .quickMenu_top {
    opacity: 0;
    visibility: hidden;

    transform: translateY(-25px);
}


/* =========================================================
   HOVER - HIỆN BOT
========================================================= */

.quickMenu:hover .quickMenu_bot {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   HOVER - BOT TEXT
========================================================= */

.quickMenu:hover .quickMenu_bot.elementor-widget-text-editor {
    transform: translate(-50%, -44px) !important;
}


/* =========================================================
   HOVER - BOT BUTTON
========================================================= */

.quickMenu:hover .quickMenu_bot.elementor-widget-button {
    transform: translate(-50%, 2px) !important;
}



/* =========================================================
   CONTACT FORM 7
   LABEL TRÁI / INPUT PHẢI
========================================================= */


/* =========================================================
   FORM CONTROL
========================================================= */

.wpcf7 form .form-control {
    width: 100% !important;

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

    box-sizing: border-box !important;
}


.wpcf7 form .form-item {
    width: 100% !important;

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

    box-sizing: border-box !important;
}



/* =========================================================
   FORM ROW
========================================================= */

.wpcf7 form .form-item > p {
    display: grid !important;

    grid-template-columns: 20% 80% !important;

    width: 100% !important;

    min-height: 49px !important;

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

    border-bottom: 1px solid #ddd !important;

    box-sizing: border-box !important;
}



/* =========================================================
   CF7 AUTO <BR>
========================================================= */

.wpcf7 form .form-item > p > br {
    display: none !important;
}



/* =========================================================
   LABEL - LEFT
========================================================= */

.wpcf7 form .form-item > p > label {

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-height: 49px !important;

    margin: 0 !important;

    padding: 8px 10px !important;

    background: #f7f7f7 !important;

    color: #333 !important;

    font-family: Arial, sans-serif !important;

    font-size: 13px !important;

    font-weight: 400 !important;

    line-height: 1.3 !important;

    box-sizing: border-box !important;
}



/* =========================================================
   INPUT COLUMN - RIGHT
========================================================= */

.wpcf7 form .form-item > p > span {

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 8px 15px !important;

    background: #fff !important;

    box-sizing: border-box !important;
}



/* =========================================================
   INPUT
========================================================= */

.wpcf7 form .form-item input[type="text"],
.wpcf7 form .form-item input[type="email"],
.wpcf7 form .form-item input[type="tel"] {

    display: block !important;

    width: 160px !important;

    max-width: 100% !important;

    height: 29px !important;

    margin: 0 !important;

    padding: 4px 8px !important;

    border: 1px solid #ddd !important;

    border-radius: 5px !important;

    background: #fafafa !important;

    color: #333 !important;

    font-family: Arial, sans-serif !important;

    font-size: 13px !important;

    box-sizing: border-box !important;
}



/* =========================================================
   MESSAGE ROW
========================================================= */

.wpcf7 form .form-control:has(textarea) .form-item > p {

    display: grid !important;

    grid-template-columns: 20% 80% !important;

    width: 100% !important;

    min-height: 200px !important;

    margin: 0 !important;

    padding: 0 !important;

    border-bottom: 1px solid #ddd !important;

    box-sizing: border-box !important;
}



/* =========================================================
   MESSAGE LABEL
========================================================= */

.wpcf7 form .form-control:has(textarea) .form-item > p > label {

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-height: 200px !important;

    margin: 0 !important;

    padding: 8px 10px !important;

    background: #f7f7f7 !important;

    color: #333 !important;

    box-sizing: border-box !important;
}



/* =========================================================
   MESSAGE INPUT COLUMN
========================================================= */

.wpcf7 form .form-control:has(textarea) .form-item > p > span {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 10px 15px !important;

    background: #fff !important;

    box-sizing: border-box !important;
}



/* =========================================================
   TEXTAREA
========================================================= */

.wpcf7 form .form-control:has(textarea) textarea {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    height: 180px !important;

    min-height: 180px !important;

    margin: 0 !important;

    padding: 8px !important;

    border: 1px solid #ddd !important;

    border-radius: 5px !important;

    background: #fafafa !important;

    color: #333 !important;

    font-family: Arial, sans-serif !important;

    font-size: 13px !important;

    box-sizing: border-box !important;

    resize: vertical !important;
}



/* =========================================================
   SEND + CANCEL
   DESKTOP + MOBILE
========================================================= */


.wpcf7 form .form-bottom {

    display: flex !important;

    flex-direction: row !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 4px !important;

    width: 100% !important;

    margin: 0px 0 0 0 !important;

    padding: 20px 0 !important;

    text-align: center !important;

    box-sizing: border-box !important;
    
}



/* =========================================================
   SEND CONTAINER
========================================================= */

.wpcf7 form .form-bottom > .form-submit {

    display: block !important;

    flex: 0 0 auto !important;

    width: auto !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;

    text-align: center !important;

    box-sizing: border-box !important;
}



/* =========================================================
   SEND <P>
========================================================= */

.wpcf7 form .form-bottom > .form-submit > p {

    display: block !important;

    width: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    line-height: 1 !important;

    box-sizing: border-box !important;
}



/* =========================================================
   SEND BUTTON
========================================================= */

.wpcf7 form .form-bottom input.wpcf7-submit {

    display: inline-block !important;

    width: auto !important;

    min-width: 60px !important;

    max-width: none !important;

    height: auto !important;

    margin: 0 !important;

    padding: 6px 15px !important;

    border: 1px solid #777 !important;

    border-radius: 4px !important;

    background: #777 !important;

    color: #fff !important;

    font-family: Arial, sans-serif !important;

    font-size: 13px !important;

    font-weight: 400 !important;

    line-height: 1.4 !important;

    text-align: center !important;

    cursor: pointer !important;

    box-sizing: border-box !important;
}



/* =========================================================
   SEND HOVER
========================================================= */

.wpcf7 form .form-bottom input.wpcf7-submit:hover {

    background: #666 !important;

    color: #fff !important;
}



/* =========================================================
   CF7 SPINNER
========================================================= */

.wpcf7 form .form-bottom .wpcf7-spinner {

    display: none !important;
}



/* =========================================================
   CANCEL <P>
========================================================= */

.wpcf7 form .form-bottom > p {

    display: block !important;

    flex: 0 0 auto !important;

    width: auto !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;

    line-height: 1 !important;

    text-align: center !important;

    box-sizing: border-box !important;
}



/* =========================================================
   CANCEL LINK
========================================================= */

.wpcf7 form .form-bottom > p > a.form-cancel {

    display: inline-block !important;

    width: auto !important;

    min-width: 0 !important;

    max-width: none !important;

    height: auto !important;

    margin: 0 !important;

    padding: 6px 5px !important;

    border: 1px solid #ccc !important;

    border-radius: 0 !important;

    background: #fff !important;

    color: #777 !important;

    font-family: Arial, sans-serif !important;

    font-size: 13px !important;

    font-weight: 400 !important;

    line-height: 1.4 !important;

    text-align: center !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    vertical-align: middle !important;

    box-sizing: border-box !important;
}



/* =========================================================
   CANCEL HOVER
========================================================= */

.wpcf7 form .form-bottom > p > a.form-cancel:hover {

    background: #f5f5f5 !important;

    color: #555 !important;
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {


    /* -----------------------------------------
       LABEL / INPUT
    ----------------------------------------- */

    .wpcf7 form .form-item > p {

        grid-template-columns: 35% 65% !important;

    }


    /* -----------------------------------------
       LABEL
    ----------------------------------------- */

    .wpcf7 form .form-item > p > label {

        padding: 8px !important;

        font-size: 13px !important;

    }


    /* -----------------------------------------
       INPUT COLUMN
    ----------------------------------------- */

    .wpcf7 form .form-item > p > span {

        padding: 8px !important;

    }


    /* -----------------------------------------
       INPUT
    ----------------------------------------- */

    .wpcf7 form .form-item input[type="text"],
    .wpcf7 form .form-item input[type="email"],
    .wpcf7 form .form-item input[type="tel"] {

        width: 100% !important;

    }


    /* -----------------------------------------
       MESSAGE
    ----------------------------------------- */

    .wpcf7 form .form-control:has(textarea) .form-item > p {

        grid-template-columns: 35% 65% !important;

        min-height: 160px !important;

    }


    /* -----------------------------------------
       MESSAGE LABEL
    ----------------------------------------- */

    .wpcf7 form .form-control:has(textarea) .form-item > p > label {

        min-height: 160px !important;

    }


    /* -----------------------------------------
       MESSAGE COLUMN
    ----------------------------------------- */

    .wpcf7 form .form-control:has(textarea) .form-item > p > span {

        padding: 8px !important;

    }


    /* -----------------------------------------
       TEXTAREA
    ----------------------------------------- */

    .wpcf7 form .form-control:has(textarea) textarea {

        width: 100% !important;

        height: 140px !important;

        min-height: 140px !important;

    }


    /* -----------------------------------------
       SEND + CANCEL
    ----------------------------------------- */

    .wpcf7 form .form-bottom {

        display: flex !important;

        flex-direction: row !important;

        justify-content: center !important;

        align-items: center !important;

        gap: 4px !important;

        width: 100% !important;

        padding: 20px 0 !important;

    }


    .wpcf7 .form-bottom > .form-submit,
    .wpcf7 .form-bottom > p {

        flex: 0 0 auto !important;

        width: auto !important;

        margin: 0 !important;

        padding: 0 !important;

    }

}


/* =========================================================
   LEFT MENU - MENU BAR
   Kiểu giống Hansoul gốc:
   Contact Us = tiêu đề xanh
   Các button bên dưới = có đường kẻ phía dưới
========================================================= */


/* =========================================================
   MENU BAR
========================================================= */


/* =========================================================
   TẤT CẢ BUTTON TRONG MENU
========================================================= */

.menu_bar .elementor-widget-button {
    width: 100% !important;

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

    box-sizing: border-box !important;
}


/* =========================================================
   BUTTON LINK
========================================================= */

.menu_bar .elementor-widget-button .elementor-button {
    display: flex ;
    border-radius: 0;
    align-items: center;
    padding: 15px !important;
    border-bottom: 1px solid #ddd;
    transition:
        background-color 0.2s ease,
        color 0.2s ease !important;
    text-align: left;
}


/* =========================================================
   TEXT BÊN TRONG BUTTON
========================================================= */

.menu_bar .elementor-button-content-wrapper {
    width: 100% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    box-sizing: border-box !important;
}



/* =========================================================
   HOVER
========================================================= */

.menu_bar .elementor-widget-button .elementor-button:hover {

    background: #a18669 ;
    color: #fff;
    border-bottom-color: #ccc ;
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .menu_bar .elementor-widget-button .elementor-button {

        min-height: 48px !important;

        padding: 0 12px !important;

        font-size: 14px !important;

    }

}

/* =========================================================
   BREADCRUMB - ELEMENTOR
========================================================= */

.breadcrumb > .elementor-widget-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 0;
}


/* =========================================================
   CÁC WIDGET TRỰC TIẾP TRONG BREADCRUMB
========================================================= */

.breadcrumb > .elementor-widget-wrap > .elementor-element {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}


/* =========================================================
   HOME ICON
========================================================= */

.breadcrumb .home-icon {
    display: flex;
    align-items: center;
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}


/* Container của icon */

.breadcrumb .home-icon .elementor-widget-container {
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 0;
}


/* Icon */

.breadcrumb .home-icon .fas.fa-home {
    display: block;
    font-size: 14px;
    line-height: 1;
    color: #777;
}


/* =========================================================
   DẤU >
   Đặt ngay trong container icon
========================================================= */

.breadcrumb .home-icon .elementor-widget-container::after {
    content: "›";
    display: block;

    margin-left: 7px;
    margin-right: 6px;

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

    color: #aaa;
}


/* =========================================================
   BREADCRUMB INFO
========================================================= */

.breadcrumb .breadcrumb-info {
    display: block;
    width: auto;
    flex: 0 0 auto;

    margin: 0;
    padding: 0;
}


/* Container text */

.breadcrumb .breadcrumb-info .elementor-widget-container {
    width: auto;
    margin: 0;
    padding: 0;
}


/* Text */

.breadcrumb .breadcrumb-info p {
    margin: 0;
    color: #666;
}


/* =========================================================
   LINK
========================================================= */

.breadcrumb .breadcrumb-info a {
    color: #666;
    text-decoration: none;
}

.breadcrumb .breadcrumb-info a:hover {
    color: #263b83;
}
/* =========================================================
   MENU ACTIVE TEST
========================================================= */

.menu_bar .menu-item.active a.elementor-button {
    background: #a18669;
    color: #fff;
}

.menu_bar .menu-item.active .elementor-button-text {
    color: #fff;
}
/* =========================================================
   MENU CONTENT
========================================================= */

.menu-content {
    display: none;
}

/* Content đang active */
.menu-content.active {
    display: block;
}
}







/* =========================================================
   BUSINESS - WHAT WE DO
   GROUP ICON / 3 COLUMNS
========================================================= */


/* =========================================================
   1. MAIN SECTION
========================================================= */

.group_icon {
    width: 100%;
}

.group_icon > .elementor-container {
    display: flex;
    align-items: stretch;
}


/* =========================================================
   2. 3 COLUMNS - EQUAL WIDTH
========================================================= */


/* =========================================================
   3. IMAGE + TITLE AREA
   Background giống Hansoul
========================================================= */

.group_icon .group_img_col .info_img,
.group_icon .group_img_col .title {
    background: #eeeeee;
}




/* =========================================================
   5. TITLE
========================================================= */

.group_icon .group_img_col .title {
    min-height: 65px;
}
.group_icon .group_img_col .title.title_x{min-height: 90px;}

/* Elementor heading */


/* =========================================================
   7. DESCRIPTION
   Nền trắng
========================================================= */

.group_icon .group_img_col .description {
    flex: 1;

    background: #ffffff;

    margin: 0 !important;
    padding: 20px 12px 0 !important;

    box-sizing: border-box;
}


/* Elementor text editor */

.group_icon .group_img_col .description .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   8. DESCRIPTION LIST
========================================================= */

.group_icon .group_img_col .description ul {
    margin: 0 !important;
    padding: 0 0 0 20px !important;

    list-style-type: square;
}


/* =========================================================
   9. BLUE BULLETS
========================================================= */

.group_icon .group_img_col .description li::marker {
    color: #3399ff;
    font-size: 0.8em;
}


/* =========================================================
   10. DESCRIPTION TEXT
========================================================= */

.group_icon .group_img_col .description li {
    margin: 0 !important;
    padding: 8px 0 !important;

    color: #222222;

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

    border-bottom: 1px solid #cccccc;
}


/* Không cần line ở item cuối */

.group_icon .group_img_col .description li:last-child {
    border-bottom: none;
}


/* =========================================================
   11. REMOVE DEFAULT ELEMENTOR SPACING
========================================================= */

.group_icon .group_img_col .elementor-widget {
    margin-bottom: 0 !important;
}


/* =========================================================
   12. DESKTOP
========================================================= */

@media (min-width: 768px) {

    .group_icon .group_img_col .description {
        min-height: 220px;
    }

}
.eael-advance-tabs .eael-tabs-nav > ul li:hover, .eael-advance-tabs .eael-tabs-nav > ul li.active {
    background-color: #b98e59 !important;
}
/* =========================================================
   HANSOUL ORGANIZATIONAL CHART
   DESKTOP + MOBILE
========================================================= */


/* =========================================================
   ORGANIZATIONAL CHART
========================================================= */

.organizational-chart {
    position: relative;
    overflow: visible !important;
    padding-bottom: 32px !important;
}

.organizational-chart .chart_col .description .elementor-widget-container{min-height: 150px;}
/* =========================================================
   CEO / R&D / COO
========================================================= */

.organizational-chart .chart_col {
    position: relative;
    overflow: visible !important;
}


/* ---------------------------------------------------------
   DÒNG DỌC TỪ TỪNG BOX XUỐNG
--------------------------------------------------------- */

.organizational-chart .chart_col::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -22px;

    width: 2px;
    height: 22px;

    background: #b9a3a3;

    transform: translateX(-50%);

    z-index: 10;
}


/* =========================================================
   ĐƯỜNG NGANG NỐI 3 CỘT
========================================================= */

.organizational-chart::after {
    content: "";

    position: absolute;

    left: 16.66%;
    right: 16.66%;
    bottom: 10px;

    height: 2px;

    background: #b9a3a3;

    z-index: 10;
}


/* =========================================================
   ĐƯỜNG DỌC GIỮA
   ĐƯỜNG NGANG → MBD
========================================================= */

.organizational-chart::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 12px;

    width: 2px;
    height: 14px;

    background: #b9a3a3;

    transform: translateX(-50%);

    z-index: 10;
}


/* =========================================================
   BUSINESS / MBD
========================================================= */

.chart_business {
    position: relative;
    overflow: visible !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* =========================================================
   MBD → ROW 3
========================================================= */

.chart_business::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -14px;

    width: 2px;
    height: 14px;

    background: #b9a3a3;

    transform: translateX(-50%);

    z-index: 20;
}


/* =========================================================
   CHART ROW 3
========================================================= */

.chart_row3 {
    position: relative;
    overflow: visible !important;

    margin-top: 28px !important;
}


/* =========================================================
   ĐƯỜNG NGANG TRÊN 4 BOX
========================================================= */

.chart_row3::before {
    content: "";

    position: absolute;

    top: -14px;

    left: 16.5%;
    right: 12%;

    height: 2px;

    background: #b9a3a3;

    z-index: 20;
}


/* =========================================================
   4 CỘT ROW 3
========================================================= */

.chart_row3 .col {
    position: relative;
    overflow: visible !important;
}


/* ---------------------------------------------------------
   ĐƯỜNG DỌC TỪ ĐƯỜNG NGANG XUỐNG BOX
--------------------------------------------------------- */

.chart_row3 .col::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -14px;

    width: 2px;
    height: 14px;

    background: #b9a3a3;

    transform: translateX(-50%);

    z-index: 20;
}


/* =========================================================
   DISTRIBUTION
========================================================= */

.chart_row3 .col1 {
    position: relative;
    overflow: visible !important;
}


/* ---------------------------------------------------------
   DISTRIBUTION → 3 TEAM
--------------------------------------------------------- */

.chart_row3 .col1::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -8px;

    width: 2px;
    height: 18px;

    background: #b9a3a3;

    transform: translateX(-50%);

    z-index: 20;
}


/* =========================================================
   CHART ROW 4
========================================================= */

.chart_row4 {
    position: relative;
    overflow: visible !important;

    margin-top: 0 !important;
}


/* =========================================================
   COLUMN ĐẦU TIÊN ROW 4
========================================================= */

.chart_row4 > .elementor-container >
.elementor-column:first-child {

    position: relative;

    overflow: visible !important;
}


/* =========================================================
   TRỤC DỌC 3 TEAM
========================================================= */

.chart_row4 > .elementor-container >
.elementor-column:first-child::before {

    content: "";

    position: absolute;

    left: 0;

    top: -14px;
    bottom: 15px;

    width: 2px;

    background: #b9a3a3;

    z-index: 20;
}


/* =========================================================
   ĐƯỜNG NGANG DISTRIBUTION → TRỤC TEAM
========================================================= */

.chart_row4 > .elementor-container >
.elementor-column:first-child::after {

    content: "";

    position: absolute;

    left: 0;
    top: -14px;

    width: 50%;
    height: 2px;

    background: #b9a3a3;

    z-index: 20;
}


/* =========================================================
   3 TEAM
========================================================= */

.chart_row4 .distribution {
    position: relative;
    overflow: visible !important;
}


/* ---------------------------------------------------------
   NHÁNH NGANG VÀO TỪNG TEAM
--------------------------------------------------------- */

.chart_row4 .distribution::before {

    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 10px;
    height: 2px;

    background: #b9a3a3;

    transform: translateY(-50%);

    z-index: 20;
}

/* =========================================================
   MOBILE
   <= 767px
========================================================= */

@media (max-width: 767px) {


    /* =====================================================
       GENERAL
    ===================================================== */

    .organizational-chart,
    .chart_business,
    .chart_row3,
    .chart_row4 {

        overflow: visible !important;
    }


    /* =====================================================
       1. ORGANIZATIONAL CHART
       CEO / R&D / COO XẾP DỌC
    ===================================================== */

    .organizational-chart {

        position: relative;

        padding-bottom: 30px !important;
    }


    /* -----------------------------------------------------
       3 BOX → 100%
    ----------------------------------------------------- */

    .organizational-chart .chart_col {

        position: relative;

        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 100% !important;

        overflow: visible !important;
    }


    /* =====================================================
       TRỤC DỌC BÊN PHẢI

       CEO
        │
       R&D
        │
       COO
        │
    ===================================================== */

    .organizational-chart::after {

        content: "";

        position: absolute;

        right: 5px;

        top: 29%;
        bottom: 12px;

        left: auto;

        width: 3px;
        height: auto;

        background: #b9a3a3;

        z-index: 20;

        pointer-events: none;
    }


    /* =====================================================
       LINE NGANG ĐÁY ORGANIZATIONAL

       ───────────────────────┐
                              │

       GIỮ NGUYÊN LINE GỐC
    ===================================================== */

    .organizational-chart::before {

        content: "";

        position: absolute;

        left: auto;

        right: -47%;

        bottom: 10px;

        width: 98%;

        height: 3px;

        background: #b9a3a3;

        z-index: 25;

        pointer-events: none;
    }


    /* =====================================================
       CEO / R&D / COO
       NỐI SANG TRỤC PHẢI
    ===================================================== */

    .organizational-chart .chart_col::after {

        content: "";

        position: absolute;

        right: 6px;

        left: auto;

        bottom: 31px;

        width: 10px;

        height: 3px;

        background: #b9a3a3;

        transform: none;

        z-index: 30;

        pointer-events: none;
    }


    /* =====================================================
       2. CHART BUSINESS / MBD
    ===================================================== */

    .chart_business {

        position: relative;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 14px !important;

        overflow: visible !important;

        z-index: 30;
    }


    /* =====================================================
       CONNECTOR ORGANIZATIONAL → MBD

       MẪU:

             │
             │
             ├──────── MBD / CMO

       BEFORE CHỈ LÀ ĐƯỜNG DỌC
       KHÔNG DÙNG BACKGROUND GRADIENT
       KHÔNG TẠO KHỐI 24px × 52px
    ===================================================== */

    .chart_business::before {

        content: "";

        position: absolute;

        left: 0;

        top: -13px;

        width: 3px;

        height: 43px;

        background: #b9a3a3;

        z-index: 40;

        pointer-events: none;
    }


    /* =====================================================
       LINE NGANG → MBD

             │
             │
             ├──────── MBD

       AFTER CHỈ LÀ LINE NGANG
    ===================================================== */

    .chart_business::after {

        content: "";

        position: absolute;

        left: 6px;

        top: 30px;

        width: 12px;

        height: 3px;

        background: #b9a3a3;

        z-index: 45;

        pointer-events: none;
    }


    /* =====================================================
       MBD CONTAINER
    ===================================================== */

    .chart_business > .elementor-container {

        position: relative;

        overflow: visible !important;
    }


    /* =====================================================
       3. CHART ROW 3
       4 BOX XẾP DỌC
    ===================================================== */

    .chart_row3 {

        position: relative;

        margin-top: 14px !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        overflow: visible !important;
    }


    /* =====================================================
       4 CỘT → 100%
    ===================================================== */

    .chart_row3 .col {

        position: relative;

        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 100% !important;

        overflow: visible !important;
    }


    /* =====================================================
       TRỤC DỌC CHÍNH ROW 3

              │
              ├── Distribution
              ├── IPTV
              ├── Accountings
              └── A/S
    ===================================================== */

    .chart_row3::after {

        content: "";

        position: absolute;

        left: 0;

        top: -14px;

        bottom: 40px;

        width: 3px;

        background: #b9a3a3;

        z-index: 30;

        pointer-events: none;
    }


    /* =====================================================
       LINE NGANG ROW 3

       GIỮ NGUYÊN LINE NGANG

       ─────────────────────────
       │
       └── trục Row 3
    ===================================================== */

    .chart_row3::before {

        content: "";

        position: absolute;

        left: 0;

        top: -14px;

        width: 100%;

        height: 3px;

        background: #b9a3a3;

        z-index: 40;

        pointer-events: none;
    }

.chart_row3 .col.col1::after {

    content: "";

    position: absolute;

    /* bắt đầu từ mép phải của col1 */
    left: auto;
    right: -14px;

    /* nằm giữa box Distribution */
    top: 50%;

    width: 14px;
    height: 3px;

    background: #b9a3a3;

    transform: translateY(-50%);

    z-index: 50;

    pointer-events: none;
}
    /* =====================================================
       LINE DỌC KẾT NỐI

       MBD
        │
        │
        │
        ─────────────────────────
        │
        ├── Distribution

       DÙNG CONTAINER CỦA ROW 3
       ĐỂ KHÔNG ĐỤNG ::BEFORE CỦA ROW 3
    ===================================================== */

    .chart_row3 > .elementor-container::before {

         content: "";

    position: absolute;

    /* ĐƯA LINE RA CUỐI BÊN PHẢI */
    left: auto;
    right: 0;

    top: -28px;

    width: 3px;
    height: 14px;

    background: #b9a3a3;

    z-index: 45;

    pointer-events: none;
    }


    /* =====================================================
       ỔN ĐỊNH CONTAINER ROW 3
    ===================================================== */

    .chart_row3 > .elementor-container {

        position: relative;

        overflow: visible !important;
    }


    /* =====================================================
       MỖI BOX ROW 3 → TRỤC
    ===================================================== */

    .chart_row3 .col::before {

        content: "";

        position: absolute;

        left: 0;

        top: 50%;

        width: 12px;

        height: 3px;

        background: #b9a3a3;

        transform: translateY(-50%);

        z-index: 40;

        pointer-events: none;
    }
.chart_row3 .col.col2::after {

    content: "";

    position: absolute;

    /* bắt đầu từ mép phải của col1 */
    left: auto;
    right: 1px;

    /* nằm giữa box Distribution */
    top: -14%;

    width: 9px;
    height: 3px;

    background: #b9a3a3;

    transform: translateY(-50%);

    z-index: 50;

    pointer-events: none;
}

    /* =====================================================
       DISTRIBUTION
       KHÔNG TẠO ĐƯỜNG DỌC RIÊNG

       TEAM nằm ở ROW 4
    ===================================================== */

    .chart_row3 .col1::after {

        content: none !important;
    }


    /* =====================================================
       4. CHART ROW 4
    ===================================================== */

    .chart_row4 {

        position: relative;

        margin-top: 0 !important;

        padding-left: 0 !important;

        overflow: visible !important;
    }


    /* =====================================================
       COLUMN ĐẦU TIÊN
       CHỨA 3 TEAM
    ===================================================== */

    .chart_row4 > .elementor-container >
    .elementor-column:first-child {

        position: relative;

        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 100% !important;

        padding-left: 10px !important;

        overflow: visible !important;
    }


    /* =====================================================
       TRỤC DỌC TEAM
    ===================================================== */

    .chart_row4 > .elementor-container >
    .elementor-column:first-child::before {

        content: "";

        position: absolute;

        left: auto;
right: 0;
        top: -160%;

        bottom: 20px;

        width: 3px;

        background: #b9a3a3;

        z-index: 40;

        pointer-events: none;
    }


    /* =====================================================
       KHÔNG DÙNG LINE NGANG DESKTOP
    ===================================================== */

    .chart_row4 > .elementor-container >
    .elementor-column:first-child::after {

        content: none !important;
    }


    /* =====================================================
       TEAM BOX
    ===================================================== */

    .chart_row4 .distribution {

        position: relative;

        margin-left: 10px !important;

        overflow: visible !important;
    }


    /* =====================================================
       NHÁNH NGANG → TEAM
    ===================================================== */

    .chart_row4 .distribution::before {

        content: "";

        position: absolute;
left: auto;
        right: -13px;

        top: 50%;

        width: 14px;

        height: 3px;

        background: #b9a3a3;

        transform: translateY(-50%);

        z-index: 45;

        pointer-events: none;
    }


    /* =====================================================
       ẨN 2 COLUMN TRỐNG ROW 4
    ===================================================== */

    .chart_row4 > .elementor-container >
    .elementor-column:not(:first-child) {

        display: none !important;
    }

}
/* =========================================================
HEADER - NEW / CLEAN VERSION
Old duplicated header/menu CSS has been removed.
========================================================= */
.site-header {
height: fit-content;
position: fixed;
z-index: 999;
width: 100%;
top: 0;
padding: 8px 30px;
min-height: 55px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.28);
transition: all 0.32s ease;
}
.site-header .header-inner {
width: 100%;
max-width: 1160px;
min-height: 40px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Logo */
.site-header .site-branding {
flex: 0 0 auto;
margin-right: 30px;
}
.site-header .site-branding .site-logo {
margin: 0;
line-height: 0;
}
.site-header .site-branding .site-logo img {
width: 82px;
max-width: 82px;
height: auto;
max-height: 48px;
object-fit: contain;
background: transparent;
border-radius: 0;
padding: 0;
}
/* Desktop main menu */
.menu_main {
flex: 1 1 auto;
display: flex;
justify-content: center;
}
.menu_main > ul,
.menu_main ul.menu {
display: flex;
align-items: center;
justify-content: center;
gap: 27px;
margin: 0;
padding: 0;
list-style: none;
}
.menu_main ul li {
margin: 0;
padding: 0 !important;
list-style: none;
}
.menu_main ul li a {
color: #fff !important;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1;
padding: 5px 0 !important;
text-transform: none !important;
white-space: nowrap;
text-decoration: none !important;
transition: all .25s ease;
}
.menu_main ul li a:hover {
color: #e8d9ba !important;
}
.menu_main ul li a::before {
display: none !important;
}
/* Right area: language + booking */
.header-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 22px;
flex: 0 0 auto;
margin-left: 25px;
}
/* Language */
.header-language {
position: relative;
}
.language-toggle {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent !important;
color: #fff !important;
padding: 5px 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1;
cursor: pointer;
}
.language-arrow {
display: inline-block;
margin-left: 4px;
font-size: 13px;
transform: translateY(-1px);
}
/* Language dropdown */
.language-dropdown {
position: absolute;
top: calc(100% + 12px);
right: 0;
min-width: 80px;
padding: 7px 0;
background: rgba(0, 0, 0, .92);
border: 1px solid rgba(255, 255, 255, .25);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: all .2s ease;
z-index: 10000;
}
.header-language:hover .language-dropdown,
.header-language:focus-within .language-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.language-dropdown ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.language-dropdown li {
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.language-dropdown li a {
display: block;
padding: 7px 14px !important;
color: #fff !important;
font-size: 14px !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap;
}
.language-dropdown li a:hover {
background: rgba(255, 255, 255, .12);
color: #fff !important;
}
.rb-info-stag > .rb-info-card:nth-child(2) {
display: none !important;
}
/* Booking */
.booking_table {
margin: 0;
padding: 0;
color: #fff;
}
.booking_table a {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 142px;
height: 30px;
padding: 0 13px !important;
box-sizing: border-box;
border: 1px solid #fff;
color: #fff !important;
text-decoration: none !important;
transition: all .25s ease;
}
.booking_table a span {
display: block;
padding: 0 !important;
position: relative;
color: #fff !important;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1;
white-space: nowrap;
}
.booking_table a span::after {
display: none !important;
}
.booking_table a:hover {
background: #fff;
color: #000 !important;
}
.booking_table a:hover span {
color: #000 !important;
}
/* Old booking SVG is intentionally removed from the visual header */
.booking_table svg {
display: none !important;
}
/* Scrolled header */
header#site-header.is_scroll {
min-height: 55px !important;
height: auto !important;
padding-top: 7px;
padding-bottom: 7px;
background: rgba(10, 10, 10, .88);
}
header#site-header.is_scroll .site-branding .site-logo img {
width: 76px;
max-width: 76px;
}
#wpadminbar + .skip-link + .site-header {
top: 32px;
}
/* Mobile menu icon */
.menuIcon {
position: relative;
display: none;
vertical-align: middle;
height: 20px;
width: 35px;
cursor: pointer;
z-index: 21;
margin-left: 10px;
}
.menuIcon .toggle-icon {
height: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-direction: column;
}
.menuIcon .toggle-icon > span {
height: 1px;
background: #fff;
width: 100%;
display: block;
}
/* =========================================================
HEADER MODAL / MOBILE MENU
========================================================= */
button.close_menu_modal {
background: transparent;
border: none;
padding: 0;
margin-bottom: 2rem;
}
button.close_menu_modal svg polygon {
fill: #fff;
}
.menu-modal {
background: rgb(81 44 13 / 50%);
position: fixed;
left: 0;
height: 100%;
width: 100%;
top: 0;
z-index: 9999;
overflow: hidden;
box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1);
opacity: 0;
transform: translateX(-100%);
transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}
.menu-modal .inner-modal {
background: var(--e-global-color-secondary);
padding: 3rem;
width: 30%;
height: 100%;
}
.menu-modal.active {
opacity: 1;
transform: translateX(0);
transition-timing-function: ease-out;
}
ul#menu-en-main-restaurant {
display: flex;
list-style: none;
column-gap: 3rem;
padding-left: 0;
}
ul#menu-en-main-restaurant li a {
color: #fff;
transition: all 0.3s ease-in-out;
text-transform: uppercase;
font-weight: 600;
}
ul#menu-en-main-restaurant li a:hover {
color: #fff;
text-decoration: underline;
text-decoration-color: #eee5da;
text-underline-offset: 4px;
}
.mobile_menu {
display: none;
}

/* =========================================================
GENERAL ELEMENTS
========================================================= */
.text-center {
text-align: center;
}
.banner_logo img {
display: inline !important;
}
.site-main {
margin-top: 100px;
}
.site-header-n > .container {
max-width: 94%;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin: auto;
}
.error404 {
margin-top: 100px;
}
.error404 #content {
padding: 3rem 0;
}
.right_function {
}
.menu_1 a {
width: 200px;
}
.justify_left .elementor-button-content-wrapper {
justify-content: left;
}
/* =========================================================
LEGACY COMPONENTS - NOT DESKTOP HEADER
========================================================= */
.login {
justify-content: flex-end;
border-left: 1px solid #ececec;
height: 100%;
align-items: center;
display: flex;
padding-left: 45px;
}
a.bt_top {
padding: 9px 20px;
border: 1px solid #CBCBCB;
border-radius: 100px;
color: #000;
width: 198px;
display: block;
margin-right: 45px;
}
a.bt_top span {
float: right;
}
.login span {
width: 44px;
height: 44px;
background: #FFF8B9;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 100%;
margin-left: 15px;
}
.login span img {
width: 17px;
height: 17px;
}
.login a {
display: flex;
align-items: center;
}
.login img {
width: 17px;
}
/* Existing menu content helpers */
.menu_icon > a {
width: 35px;
height: 35px;
text-align: center;
}
.menu_icon:hover > a {
background-color: #D9A139 !important;
color: #1e2e27 !important;
padding: 7px !important;
border-radius: 50%;
display: inline-block;
line-height: 1;
transition: all .3s;
}
li.menu_icon > a::before,
li.menu_icon:hover > a::before {
height: unset !important;
transition: unset !important;
}
.menu_icon i {
font-size: 20px;
}
.menu_content {
display: none;
width: 100% !important;
}
.menu_content.active {
display: block;
}
.itemmenu a {
cursor: pointer;
}
ul.lang {
list-style: none;
}
li.lang-item.current-lang {
display: none;
}
/* =========================================================
SUBMENUS - MOBILE MODAL / OTHER NAVIGATION
========================================================= */
.site-navigation ul.menu {
display: flex;
flex-direction: column;
}
.site-navigation ul.menu li {
padding: 10px 0;
}
.site-navigation ul.menu > li a {
display: block;
position: relative;
transition: all 0.3s ease-in-out;
}
.site-navigation ul.menu li.menu-item-has-children::after {
width: 7px;
height: 7px;
content: "";
border-left: 2px solid #000;
border-bottom: 2px solid #000;
transform: rotate(315deg) !important;
margin-top: 15px;
top: unset;
right: 15px;
}
.site-navigation ul.menu li ul.sub-menu {
left: -15px;
background: #fff;
box-sizing: border-box;
box-shadow: 0 4px 25px rgb(0 0 0 / 10%);
border-radius: 10px;
top: 50px !important;
padding: 12px 30px;
width: 255px;
display: block;
visibility: hidden;
opacity: 0;
transform: translateY(50px);
}
.site-navigation ul.menu li:last-child ul.sub-menu {
right: -6px !important;
left: auto;
}
.site-navigation ul.menu li:last-child ul.sub-menu li ul.sub-menu {
right: auto !important;
left: -253px;
}
.site-navigation ul.menu li ul.sub-menu li {
border-bottom: 1px solid #E6E6E6;
padding-left: 15px;
}
.site-navigation ul.menu li ul.sub-menu li:last-child {
border: none;
}
.site-navigation ul.menu li ul.sub-menu li a {
padding: 10px 0;
}
.site-navigation ul.menu li:hover > ul {
opacity: 1;
transform: translateY(0);
visibility: visible;
transition: .3s all ease !important;
}
.site-navigation ul.menu li:last-child ul.sub-menu li:hover > ul {
transform: translateY(-52px) !important;
}
.site-navigation ul.menu li:nth-last-child(2) ul.sub-menu {
right: -6px !important;
left: auto;
}
.site-navigation ul.menu li:nth-last-child(2) ul.sub-menu li ul.sub-menu
{
right: auto !important;
left: -253px;
}
.site-navigation ul.menu li:nth-last-child(2) ul.sub-menu li:hover > ul
{
transform: translateY(-52px) !important;
}
.site-navigation .lang {
display: none;
}
/* =========================================================
TESTIMONIAL / SLIDER / CONTENT
========================================================= */
.testimonial_sina_1 .sina-review-item {
text-align: left;
}
.testimonial_sina_1 .sina-review-name {
border-bottom: 1px solid #1b2c26;
padding-bottom: 10px;
}
.testimonial_sina_1 .sina-review-comment,
.testimonial_sina_1 .sina-review-name {
padding-left: 10px;
padding-right: 10px;
}
.custom_slide_01 .owl-dots {
position: absolute;
top: auto;
bottom: -5px;
width: 100%;
}
.custom_slide_01 .sina-content-slider .owl-next,
.custom_slide_01 .sina-content-slider .owl-prev {
opacity: 1;
transform: translate(0);
background-color: transparent !important;
font-size: 50px;
}
.custom_slide_01 .sina-content-slider .owl-next {
right: -30px;
}
.custom_slide_01 .sina-content-slider .owl-prev {
left: -30px;
}
/* Slider animations */
.zoom_banner .sina-slider-content,
.owl-item.active .zoom_banner {
animation: shrink 8s infinite alternate;
}
.owl-item.active .zoom_banner .elementor-background-overlay {
animation: zoom-in-zoom-out 8s ease infinite;
}
@keyframes shrink {
0% {
background-size: 100% 100%;
}
100% {
background-size: 110% 110%;
}
}
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1);
}
100% {
transform: scale(1.15, 1.15);
}
}
/* Scroll-down */
.scroll-down {
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
bottom: -110px;
left: 50%;
transform: translateX(-50%);
color: #fff;
text-align: center;
line-height: 60px;
font-size: 30px;
transition: line-height 0.2s ease 0.1s;
}
.scroll-down span {
position: absolute;
top: 0;
left: 50%;
width: 30px;
height: 50px;
margin-left: -15px;
border: 2px solid #fff;
border-radius: 50px;
box-sizing: border-box;
z-index: 10;
box-shadow: 0 1px 5px #444;
}
.scroll-down span::before {
position: absolute;
top: 0;
left: 50%;
content: '';
width: 10px;
height: 50px;
margin-left: -5px;
animation: sdb10 2s infinite;
box-sizing: border-box;
background:
url(https://hanumi.ch/wp-content/uploads/2025/04/down-vector.svg)
no-repeat center;
}
@keyframes sdb10 {
0% {
transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
transform: translate(0, 20px);
opacity: 0;
}
100% {
opacity: 0;
}
}
/* =========================================================
MOBILE / TABLET NAV ICONS
========================================================= */
.mob-nav-icon {
display: none;
float: right;
cursor: pointer;
margin: -11px 0 0 13px;
transition: all 500ms ease-in-out;
}
.mob-nav-icon .cmn-toggle-switch__htx span {
transition: background 0s 0.3s;
}
.mob-nav-icon .cmn-toggle-switch__htx span::after,
.mob-nav-icon .cmn-toggle-switch__htx span::before {
transition-duration: .3s, .3s;
transition-delay: .3s, 0s;
}
.mob-nav-icon .cmn-toggle-switch__htx span::before {
transition-property: top, transform;
}
.mob-nav-icon .cmn-toggle-switch__htx span::after {
transition-property: bottom, transform;
}
.mob-nav-icon .cmn-toggle-switch__htx.active span {
background: none;
}
.mob-nav-icon .cmn-toggle-switch__htx.active span::after {
transition-delay: 0s, .3s;
bottom: 0;
transform: rotate(-45deg);
background: #000;
}
.mob-nav-icon .cmn-toggle-switch__htx.active span::before {
transition-delay: 0s, .3s;
top: 0;
transform: rotate(45deg);
background: #000;
}
.mob-nav-icon .cmn-toggle-switch {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 30px;
height: 30px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border: none;
cursor: pointer;
transition: background .3s;
border-radius: 100%;
}
.mob-nav-icon .cmn-toggle-switch:focus {
outline: none;
}
.mob-nav-icon .cmn-toggle-switch span {
display: block;
position: absolute;
top: 18px;
left: 10px;
height: 3px;
background: #000;
width: 20px;
}
.mob-nav-icon .cmn-toggle-switch span::after {
position: absolute;
display: block;
left: -10px;
width: 100%;
height: 3px;
background-color: #000;
content: "";
}
.mob-nav-icon .cmn-toggle-switch span::before {
position: absolute;
display: block;
left: -10px;
width: 30px;
height: 3px;
background-color: #000;
content: "";
top: -9px;
}
.mob-nav-icon .cmn-toggle-switch span::after {
bottom: -9px;
width: 30px;
}
/* =========================================================
ELEMENTOR HEADER / OTHER COMPONENTS
========================================================= */
.tablet {
display: none;
}
.mobile {
display: none;
}
.elementor-location-header {
position: fixed;
width: 100%;
height: 90px;
top: 0;
z-index: 999;
}
#wpadminbar + .elementor-location-header {
top: 32px;
}
.site-logo a img {
width: 151px;
transition: all .35s ease-in-out;
}
.anwp-pg-wrap .anwp-pg-post-teaser--layout-d
.anwp-pg-post-teaser__top-meta {
position: static;
}
.anwp-pg-classic-slider .anwp-pg-category__wrapper-filled {
background-color: transparent !important;
color: #000 !important;
border-bottom: 2px solid #006738;
margin: 15px 0 0;
padding: 5px 0 !important;
}
.anwp-pg-wrap .anwp-pg-post-teaser__thumbnail {
overflow: hidden;
display: flex;
flex-direction: column-reverse;
}
.elementor-260 .elementor-element.elementor-element-43c6b8c
.elementor-tab-desktop-title.elementor-active {
background-color: #287e3e;
}
.elementor-widget-tabs.elementor-tabs-view-horizontal
.elementor-tab-desktop-title.elementor-active::after {
left: 25px !important;
position: absolute;
height: 1px !important;
background: #fff;
width: calc(100% - 50px) !important;
margin-right: 22px;
bottom: 12px !important;
}
.elementor-260 .elementor-element.elementor-element-43c6b8c
.elementor-tab-content.elementor-active {
max-width: 1140px;
margin: auto;
}
form#search_hoivien {
display: flex;
}
span.page-numbers.current {
background: #277E3E;
width: 30px;
height: 30px;
display: inline-flex;
border-radius: 100%;
justify-content: center;
align-items: center;
color: #fff;
}
.green {
color: #277E3E;
}
.card-menu .elementor-image-box-content {
padding: 15px;
}
/* =========================================================
GALLERY
========================================================= */
.images_about .gallery {
grid-template-rows: repeat(2, 1fr);
display: grid;
gap: 8px;
}
.images_about .gallery .gallery-item:first-child {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
.images_about .gallery .gallery-item {
max-width: unset !important;
}
.gallery-icon {
height: 100%;
}
.images_about .gallery .gallery-item img {
margin: 0 auto;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.images_about .gallery .gallery-item:nth-child(4) {
grid-column: 5 / span 2;
grid-row: 1 / span 2;
}
/* =========================================================
FORMS
========================================================= */
.form_booking .form_group,
.form_reservieren .form_group {
display: inline-grid;
width: 100%;
grid-template-columns: 48% 48%;
gap: 4%;
max-width: 100%;
}
.form_booking .form_group.full-width,
.form_reservieren .form_group.full-width {
grid-template-columns: 100%;
}
.form_booking .form_group > div,
.form_reservieren .form_group > div {
width: 100%;
}
.form_booking .form_group > div label,
.form_reservieren .form_group > div label {
width: 100%;
}
.form_booking .form_group > div label input,
.form_booking .form_group > div label select,
.form_booking .form_group label textarea,
.form_reservieren .form_group > div label input,
.form_reservieren .form_group > div label select,
.form_reservieren .form_group label textarea {
margin-top: 10px;
border-radius: 0;
}
.form_reservieren input.wpcf7-form-control.has-spinner.wpcf7-submit {
background: var(--e-global-color-primary);
border: none;
color: #fff;
text-transform: uppercase;
border-radius: 34px;
font-size: 18px;
font-family: "Noto Serif", Sans-serif;
padding: 12px 24px;
font-weight: 600;
margin-top: 10px;
}
.wpcf7-spinner {
position: absolute;
}
.form_reservieren input {
border-radius: 10px;
height: 50px;
font-family: "Noto Sans", sans-serif;
}
.form_reservieren textarea {
border: none;
border-radius: 10px;
}
.form_reservieren select,
select.wpcf7-form-control.wpcf7-select {
height: 50px;
border-radius: 10px;
}
#wpcf7-f248-p240-o1 .wpcf7-response-output {
font-size: 25px;
margin: 0;
}
.wpcf7 form.sent .wpcf7-response-output {
color: #fff;
border-color: #1C3079 !important;
background: #1C3079;
}
/* =========================================================
POSTS / PAGES / FOOTER
========================================================= */
.post-template-default.single.single-post {
padding-top: 100px;
}
.post-template-default.single.single-post header#site-header,
.error404 header#site-header {
background: rgb(14 13 10 / 80%);
}
.post-template-default.single.single-post header#site-header .site-logo
a img {
width: 110px;
}
.post-template-default.single.single-post #content {
max-width: 1000px;
margin: 50px auto;
}
.post-template-default.single.single-post #comments {
display: none;
}
#gallery-1 .gallery-item img {
aspect-ratio: 6 / 10;
object-fit: cover;
}
.site-header.is_scroll .header-inner .custom-logo-link {
display: block;
height: 60px;
overflow: hidden;
}
#site-footer a {
color: #fff;
}
.menu_list_ajax .sfm-thumb img {
aspect-ratio: 16 / 9;
}
/* Decorative background */
.mash_bg_hanumi > .elementor-background-overlay::before {
width: 202px;
height: 100%;
position: absolute;
left: 0;
top: 0;
content: "";
background:
url(https://hanumi.ch/wp-content/uploads/2025/09/PATTERN-24.png);
}
.mash_bg_hanumi > .elementor-background-overlay::after {
width: 202px;
height: 100%;
position: absolute;
right: 0;
top: 0;
content: "";
background:
url(https://hanumi.ch/wp-content/uploads/2025/09/PATTERN-24.png);
background-position: 1px 0;
}
a#callnowbutton {
width: 55px;
height: 55px;
display: none;
position: fixed;
bottom: 30px;
left: 15px;
border-radius: 100%;
text-indent: -9999px;
background-color: var(--e-global-color-primary) !important;
background-size: 80%;
background-position: center;
z-index: 999;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.menu-main-container {
width: 100%;
max-width: 400px;
margin: 0 35px;
}
.menu_main > ul,
.menu_main ul.menu {
gap: 18px;
}
.site-header {
padding-left: 22px;
padding-right: 22px;
}
}
@media (max-width: 1024px) {
#wpadminbar + .elementor-location-header {
top: 45px;
}
.elementor-location-header {
position: fixed;
width: 100%;
height: 72px;
top: 0;
z-index: 999;
}
#fusion_scroll {
bottom: 25px;
}
}
@media (max-width: 950px) {
.menu-main-container {
width: 100%;
max-width: 100%;
margin: 0 15px;
}
.login {
padding-left: 15px;
}
a.bt_top span {
float: right;
margin-top: 2px;
}
a.bt_top {
width: 125px;
margin-right: 15px;
}
.login span {
width: 40px;
height: 40px;
margin-left: 0;
}
.login span img {
width: 17px;
}
.menu-modal .inner-modal {
width: 38%;
}
.mash_bg_hanumi > .elementor-background-overlay::before,
.mash_bg_hanumi > .elementor-background-overlay::after {
width: 64px;
background-size: 100%;
}
/* Desktop menu hidden; mobile icon shown */
.menu_main {
display: none;
}
.menuIcon {
display: block;
}
.mobile_menu {
display: block;
}
.header-right {
margin-left: auto;
}
}
@media (max-width: 768px) {
.breadcrumb > .elementor-widget-wrap{
  justify-content: flex-start;
  min-height: unset;
      margin-top: 10px;
}
.column-reverse,
.column-reverse .elementor-container > div {
flex-direction: column-reverse;
}
.mobile-height {
min-height: 400px;
}
.tablet {
display: block;
}
.desktop {
display: none;
}
.site-header-n {
height: 72px;
}
#wpadminbar + .site-header-n {
height: 72px;
top: 46px;
}
.site-header-n > .container {
justify-content: space-between;
}
.site-navigation.display_block_menu {
display: block;
position: fixed;
top: 72px;
background: #fff;
width: 100%;
left: 0;
height: calc(100% - 72px);
z-index: 9;
border-top: 1px solid #ddd;
}
.logged-in.admin-bar .site-navigation.display_block_menu {
display: block;
position: fixed;
top: 118px;
background: #fff;
width: 100%;
left: 0;
height: calc(100% - 118px);
border-top: 1px solid #ddd;
z-index: 9;
}
.site-navigation.display_block_menu ul li {
width: 100%;
justify-content: center;
text-align: center;
}
.site-navigation.display_block_menu ul li a {
font-size: 36px;
}
.menu-main-container {
margin: 0;
}
.site-navigation ul.menu li.menu-item-has-children {
padding-right: 0;
}
.right_function.tablet {
text-align: center;
justify-content: center;
display: flex;
margin-top: 25px;
}
.site-navigation ul.menu {
justify-content: space-between;
padding-top: 50px;
max-height: 100vh;
overflow: auto;
}
.right_function.tablet a.bt_top {
width: 199px;
margin-right: 0;
text-align: left;
}
.site-navigation ul.menu li.menu-item-has-children::after {
margin-top: 35px;
}
.login.desktop.login_mobile {
display: block;
position: absolute;
z-index: 999;
top: 90vh;
width: 100%;
padding-left: 0;
left: 0;
text-align: center;
}
.login.desktop.login_mobile a {
display: flex;
flex-direction: row-reverse;
}
.login.desktop.login_mobile a span {
display: block;
}
.login.login_mobile.tablet.active {
position: absolute;
height: auto;
bottom: 35px;
width: 100%;
text-align: center;
}
.login.login_mobile.tablet.active a {
display: flex;
align-items: center;
flex-direction: column;
font-size: 36px;
}
.site-navigation ul.menu li.menu-item-has-children {
padding-right: 0;
flex-direction: column;
}
.site-navigation.display_block_menu ul li a {
text-align: center;
}
.site-navigation ul.menu li.menu-item-has-children::after {
margin-top: 0;
position: absolute;
right: 17px;
top: 24px;
cursor: pointer;
width: 12px;
height: 12px;
}
.site-navigation ul.menu li ul.sub-menu {
position: static;
width: 100%;
border-radius: 0;
background: #dadada;
display: block;
height: 0;
visibility: hidden;
transform: translateY(0) !important;
padding: 0;
opacity: 0;
}
.site-navigation ul.menu li ul.sub-menu li {
padding: 7px;
padding-left: 0;
}
.site-navigation ul.menu li ul.sub-menu.active {
height: auto;
visibility: visible;
transform: translateY(0) !important;
padding: 0 30px;
opacity: 1;
}
ul.sub-menu li a {
font-size: 15px !important;
padding: 8px 0 !important;
}
.site-navigation ul.menu li:hover > ul {
display: block;
}
.site-header-n > .container {
max-width: 100%;
padding: 0 30px;
}
.site-navigation ul.menu li.menu-item-has-children.trans90::after {
transform: rotate(135deg);
}
.site-navigation ul.menu li:last-child ul.sub-menu li ul.sub-menu {
right: auto !important;
left: -253px;
margin-top: 18px;
background: #cacaca;
border-radius: 20px;
}
.site-navigation-dropdown ul.menu li.current-menu-item a {
color: #fff;
background: #9c774b;
}
ul.lang_mobile {
display: none;
}
#fusion_scroll {
bottom: 20px;
}
#fusion_scroll .elementor-button {
width: 65px;
height: 110px;
}
#fusion_scroll .elementor-button::before {
height: 68px;
}
#fusion_scroll .elementor-button-text {
font-size: 10px;
letter-spacing: 6px;
}
.header-right {
gap: 14px;
}
.booking_table a {
min-width: 125px;
}
}
@media (max-width: 767px) {
.zoom_banner {
background-size: cover !important;
}
a#callnowbutton {
display: block;
}
.site-navigation-dropdown ul.menu li.current-menu-item a {
color: #fff;
background: #9c774b;
}
.menu-modal .inner-modal {
width: 100%;
}
.banner_img{min-height: 350px;}
}
@media (max-width: 480px) {
.mobile {
display: block;
}
.site-navigation.display_block_menu ul li a {
font-size: 28px;
}
.site-navigation ul.menu li.menu-item-has-children::after {
margin-top: 15px;
}
.login.login_mobile.tablet.active a {
font-size: 28px;
}
.site-navigation ul.menu {
justify-content: space-between;
padding-top: 5px;
padding-bottom: 70px;
}
.login.login_mobile.tablet.active {
bottom: 10px;
}
.site-header .header-inner {
align-items: center;
flex-direction: row;
}
.booking_table {
display: block;
}
.site-navigation ul.menu li.menu-item-has-children::after {
top: 12px;
}
.site-navigation ul.menu li ul.sub-menu li a {
padding: 0 !important;
}
.site-header .site-branding .site-logo img {
width: 65px;
max-width: 65px;
float: left;
}
.site-header-n > .container {
max-width: 100%;
padding: 0 15px;
}
#site-header.is_scroll .site-logo a img {
width: 76px;
}
.site-header {
padding: 8px 15px;
}
.post-template-default.single.single-post .entry-title {
font-size: 24px;
padding: 0;
}
.post-template-default.single.single-post #content {
max-width: 1000px;
margin: 25px auto;
margin-top: 15px;
}
.eicon-menu-bar::before {
color: #9c774b;
}
.menu-modal .inner-modal {
width: 100%;
}
.booking_table a span {
display: block;
}
.booking_table a {
min-width: auto;
height: 30px;
padding: 0 10px !important;
}
.booking_table a span {
font-size: 11px;
}
.language-toggle {
font-size: 12px;
}
.header-right {
gap: 10px;
}
div#hotline_restaurant {
display: none;
}
}

/* =========================================================
   HANSOUL STYLE HEADER - FINAL OVERRIDE
   ---------------------------------------------------------
   This block intentionally comes LAST so older/legacy header
   rules in this stylesheet cannot override the new header.
   ========================================================= */

:root {
    --header-blue: #20377d;
    --header-orange: #ff7f18;
}

/* ---------- Main header ---------- */
.site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    z-index: 9999 !important;
    transition: none !important;
}

.site-header .header-top {
    display: block !important;
    width: 100% !important;
    height: 35px !important;
    background: #fff !important;
    border-bottom: 1px solid #ddd !important;
    box-sizing: border-box !important;
}

.site-header .header-top-inner {
    width: 100% !important;
    max-width: 980px !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
}

.site-header .header-top-links {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

.site-header .header-top-links a {
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-header .header-top-links a:hover {
    color: var(--header-orange) !important;
}

.site-header .header-top-dot {
    color: #555 !important;
    line-height: 1 !important;
}

/* ---------- Blue main bar ---------- */
.site-header .header-main {
    width: 100% !important;
    height: 88px !important;
    background: var(--header-blue) !important;
    box-sizing: border-box !important;
}

.site-header .header-inner {
    width: 100% !important;
    max-width: 980px !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

/* ---------- Logo ---------- */
.site-header .site-branding {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 55px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.site-header .site-logo,
.site-header .site-logo a {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.site-header .site-logo img,
.site-header .site-logo a img,
.site-header .custom-logo {
    display: block !important;
    width: auto !important;
    max-width: 225px !important;
    height: auto !important;
    max-height: 70px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    float: none !important;
}

.site-header .site-title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.site-header .site-title a {
    color: #fff !important;
    text-decoration: none !important;
}

/* ---------- Desktop navigation ---------- */
.site-header .menu_main {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-header .menu_main > ul,
.site-header .menu_main ul.menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 34px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: right;
}

.site-header .menu_main ul li {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.site-header .menu_main ul li a {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: 0 !important;
}

.site-header .menu_main ul li a:hover,
.site-header .menu_main ul li.current-menu-item > a,
.site-header .menu_main ul li.current_page_item > a {
    color: #fff !important;
}

.site-header .menu_main ul li a::before,
.site-header .menu_main ul li a::after {
    display: none !important;
    content: none !important;
}

/* Hide old right-side header systems if they still exist elsewhere. */
.site-header .header-right,
.site-header .header-language,
.site-header .booking_table {
    display: none !important;
}

/* ---------- Mobile menu button ---------- */
.site-header .menuIcon {
    display: none !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    height: 30px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    z-index: 10001 !important;
}

.site-header .menuIcon span {
    display: block !important;
    width: 32px !important;
    height: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
    transform: none !important;
}

/* ---------- Mobile modal ---------- */
body.menu-modal-open {
    overflow: hidden !important;
}

.menu-modal {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, .45) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(100%) !important;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease !important;
    z-index: 10000 !important;
    overflow: hidden !important;
}

.menu-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}

.menu-modal .inner-modal {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 58% !important;
    max-width: 330px !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--header-orange) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ---------- Mobile close button ---------- */
.menu-modal button.close_menu_modal {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 51px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.menu-modal button.close_menu_modal span {
    display: block !important;
    color: #fff !important;
    line-height: 1 !important;
}

.menu-modal button.close_menu_modal svg {
    display: none !important;
}

/* ---------- Mobile navigation ---------- */
.menu-modal .site-navigation,
.menu-modal .site-navigation ul,
.menu-modal .site-navigation ul.menu {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

.menu-modal .site-navigation li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

.menu-modal .site-navigation li a {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 11px 15px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;
}

.menu-modal .site-navigation li a:hover,
.menu-modal .site-navigation li.current-menu-item > a,
.menu-modal .site-navigation li.current_page_item > a {
    color: #fff !important;
    background: rgba(0, 0, 0, .08) !important;
}

.menu-modal .site-navigation li a::before,
.menu-modal .site-navigation li a::after {
    display: none !important;
    content: none !important;
}

/* Hide legacy mobile submenu mechanics in this simple menu. */
.menu-modal .site-navigation ul.sub-menu {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 0 0 12px !important;
    background: rgba(0, 0, 0, .08) !important;
}

.menu-modal .site-navigation ul.sub-menu li a {
    font-size: 16px !important;
    padding: 9px 15px !important;
}

/* ---------- Content position ---------- */
.site-main {
    margin-top: 0 !important;
}

/* Keep single posts / 404 pages below the new header. */
.post-template-default.single.single-post {
    padding-top: 0 !important;
}

/* ---------- Hotline ---------- */
div#hotline_restaurant {
    position: fixed !important;
    z-index: 9998 !important;
    right: 25px !important;
    bottom: 25px !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--header-orange) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .25) !important;
}

div#hotline_restaurant a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {

    .site-header .header-top-inner,
    .site-header .header-inner {
        max-width: none !important;
    }

    .site-header .header-inner {
        padding: 0 25px !important;
    }

    .site-header .menu_main {
        display: none !important;
    }

    .site-header .menuIcon {
        display: flex !important;
    }

    .site-header .site-branding {
        margin-right: 0 !important;
    }

    .site-header .site-logo img,
    .site-header .site-logo a img,
    .site-header .custom-logo {
        max-width: 220px !important;
        max-height: 68px !important;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {

    .site-header .header-top {
        height: 30px !important;
    }

    .site-header .header-top-inner {
        padding: 0 15px !important;
    }

    .site-header .header-top-links {
        font-size: 11px !important;
        gap: 8px !important;
    }

    .site-header .header-top-links a {
        font-size: 11px !important;
    }

    .site-header .header-main {
        height: 98px !important;
    }

    .site-header .header-inner {
        padding: 0 20px !important;
    }

    .site-header .site-logo img,
    .site-header .site-logo a img,
    .site-header .custom-logo {
        max-width: 220px !important;
        max-height: 75px !important;
    }

    .site-header .menuIcon {
        width: 32px !important;
        height: 29px !important;
    }

    .site-header .menuIcon span {
        width: 32px !important;
        height: 3px !important;
    }

    .menu-modal .inner-modal {
        width: 58% !important;
        max-width: 300px !important;
    }

    .menu-modal .site-navigation li a {
        font-size: 18px !important;
        padding: 10px 15px !important;
    }

    .menu-modal button.close_menu_modal {
        height: 51px !important;
        font-size: 30px !important;
    }

    div#hotline_restaurant {
        width: 54px !important;
        height: 54px !important;
        right: 15px !important;
        bottom: 15px !important;
    }
}

/* ---------- Small mobile ---------- */
@media (max-width: 480px) {

    .site-header .header-main {
        height: 95px !important;
    }

    .site-header .header-inner {
        padding: 0 18px !important;
    }

    .site-header .site-logo img,
    .site-header .site-logo a img,
    .site-header .custom-logo {
        max-width: 205px !important;
        max-height: 70px !important;
    }

    .menu-modal .inner-modal {
        width: 62% !important;
    }
}

/* =========================================================
   FINAL FIX - MOBILE CLOSE BUTTON
========================================================= */

.menu-modal button.close_menu_modal {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

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

    padding: 0 15px !important;
    margin: 0 !important;

    background: #000 !important;
    color: #fff !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-size: 0 !important;
    line-height: 1 !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}

.menu-modal button.close_menu_modal::before {
    content: "×" !important;

    display: block !important;

    width: 30px !important;
    height: 30px !important;

    color: #fff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;

    line-height: 27px !important;
    text-align: center !important;
}

.menu-modal button.close_menu_modal span {
    display: none !important;
}

.menu-modal button.close_menu_modal svg {
    display: none !important;
}