/* --- MOBILE HEADER 1 DÒNG --- */

body.mobile #header .header-container {
    flex-direction: row !important; /* 1 dòng */
    align-items: center !important;
    justify-content: space-between !important;
    height: 60px !important;
    padding: 0 2% !important; /* menu right 2% */
}

body.mobile #header .header-menu {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

    body.mobile #header .header-menu a.menu-item {
        display: none !important; /* ẩn các menu items khác */
    }

body.mobile #header .hamburger {
    display: block !important;
    cursor: pointer;
}

body.mobile #main {
    padding-top: 70px; /* tránh header cố định */
}

/* Footer mobile */
body.mobile #footer .footer-container {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

body.mobile #footer .footer-info {
    flex-direction: column !important;
    gap: 12px !important;
}

body.mobile #footer .footer-copy-left {
    margin-top: 8px !important;
    text-align: center !important;
    font-size: 12px !important;
}
/* --- MOBILE CSS HEADER 1 DÒNG --- */
body.mobile #header .header-container {
    flex-direction: row !important; /* 1 dòng duy nhất */
    justify-content: space-between !important; /* logo trái, hamburger phải */
    align-items: center !important;
    padding: 10px 2% !important; /* lề 2% */
    height: auto !important;
}

/* Ẩn menu items trên mobi */
body.mobile #header .header-menu a.menu-item {
    display: none !important;
}

/* Hamburger hiển thị */
body.mobile #header .header-menu .menu-icon {
    display: flex !important;
    align-items: center;
    gap: 6px;
}


@media (max-width: 768px) {
    body.mobile #header .header-container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 60px !important;
        padding: 0 2% !important;
    }

    body.mobile #header .logo-left {
        flex: 0 0 auto !important;
        max-width: none !important;
    }

    body.mobile .menu-right {
        flex: 0 0 auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        align-items: center !important;
        position: relative;
        right: 2%;
    }

        body.mobile .menu-right a.menu-item {
            display: none !important;
        }

        body.mobile .menu-right .hamburger {
            display: flex !important;
            cursor: pointer;
        }

        body.mobile .menu-right .lang-mini {
            margin-left: 6px !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            color: #0c4a6e !important;
        }
}


/* ================== MOBI HEADER ================== */
body.mobile .menu-right .menu-item {
    display: none !important; /* Ẩn Product/Contact/Download trên mobi */
}

body.mobile .menu-right .menu-icon {
    display: flex !important;
    justify-content: flex-end;
    margin-right: 2%; /* right 2% */
    cursor: pointer;
}

body.mobile .menu-right .hamburger {
    width: 25px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    body.mobile .menu-right .hamburger div {
        width: 100%;
        height: 3px;
        background-color: #0c4a6e;
        border-radius: 2px;
    }

/* =============================== TĂNG KÍCH THƯỚC HAMBURGER TRÊN MOBILE =============================== */
@media (max-width: 768px) {
    .menu-right .hamburger {
        width: 36px !important;
        height: 28px !important;
    }

        .menu-right .hamburger div {
            height: 4px !important;
            border-radius: 2px !important;
        }

    .menu-right .menu-icon {
        padding: 6px !important;
    }
}
.sunnet-header, .header-container {
    transition: all 0.2s ease-in-out;
}

/* ==================== TĂNG FONT CHO MOBILE ==================== */
@media (max-width: 768px) {

    /* Logo ERP to hơn */
    .erp-logo {
        font-size: 36px !important;
    }

    /* Menu items dễ đọc hơn */
    .menu-right .menu-item {
        font-size: 18px !important;
        padding: 6px 10px !important;
    }

    /* Text chatbot intro */
    .chatbot-intro {
        font-size: 18px !important;
    }

    /* Nội dung khung chat / sản phẩm */
    .chatgpt-left,
    .chatgpt-right,
    .chatgpt-box,
    .product-container,
    .items_quydinhs,
    .content_shorts .titles,
    .content_shorts .content-html,
    .news-full,
    .news_sumary,
    .news_content {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    /* Header container */
    .header-container {
        height: auto !important;
        padding: 12px 2% !important;
    }
}

/* ==================== FONT MOBILE GỌN NHẸ ==================== */
@media (max-width: 768px) {

    /* Logo ERP */
    .erp-logo {
        font-size: 36px !important;
    }

    /* Menu chính */
    .menu-right .menu-item {
        font-size: 18px !important;
        padding: 6px 10px !important;
    }

    /* Nội dung trang và sản phẩm */
    body, .product-container, .items_quydinhs,
    .content_shorts .titles, .content_shorts .content-html,
    .news-full, .news_sumary, .news_content {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }
}

/* ======= Font hiển thị chuẩn cho mobile ======= */
@media (max-width: 768px) {
    body {
        font-size: 18px !important;
        line-height: 1.5em;
    }

    #chatContainer,
    #chatMessages,
    .chat-message,
    .chat-input,
    .chat-response,
    #lblTitle {
        font-size: 16px !important;
    }

    input, textarea, button {
        font-size: 18px !important;
    }

    /* Tiêu đề và mô tả trên đầu */
    .chat-header, .page-title {
        font-size: 20px !important;
        font-weight: 600;
    }
}