/* ========================================================
   MODULE: Custom UI & Theme - True Fullscreen Split-Screen (50% - 50%)
   Áp dụng tuyệt đối cho cả Admin (/admin/authentication) & Client (/authentication)
   ======================================================== */

html, 
body.login_admin, 
body.customers_login, 
body.authentication,
body[class*="login"],
body[class*="authentication"] {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif !important;
    overflow-x: hidden !important;
}

/* Ẩn hoàn toàn header, sidebar, footer của core Perfex khi ở trang xác thực */
body.authentication .navbar-default,
body.authentication .navbar-collapse,
body.authentication .custom-mobile-menu-toggle,
body.authentication #header,
body.authentication footer,
body.customers_login .navbar-default,
body.customers_login .navbar-collapse,
body.customers_login .custom-mobile-menu-toggle,
body.customers_login #header,
body.customers_login footer,
body[class*="login"] .navbar-default,
body[class*="login"] .navbar-collapse,
body[class*="login"] .custom-mobile-menu-toggle,
body[class*="login"] #header,
body[class*="login"] footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Triệt tiêu margin/padding của wrapper core */
body.authentication > #wrapper,
body.customers_login > #wrapper,
body[class*="login"] > #wrapper {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    display: block !important;
}

.mtop40 {
    margin-top: 0 !important;
}

/* KHẮC PHỤC LỖI ADMIN BỊ ĐẨY VÀO GIỮA: Triệt tiêu hoàn toàn margin-left của Bootstrap offset */
body.login_admin .col-md-offset-4,
body.login_admin .col-sm-offset-2,
body.authentication .col-md-offset-4,
body.customers_login .col-md-offset-4,
body[class*="login"] .col-md-offset-4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
}

/* PHÁ BỎ GIỚI HẠN 1170px CỦA BOOTSTRAP CONTAINER (CHỈ CHỌN CONTAINER VÀ ROW NGOÀI CÙNG) */
body.login_admin > .container,
body.customers_login > .container,
body.authentication > .container,
body[class*="login"] > .container,
#wrapper > .container {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100vh !important;
}

body.login_admin > .container > .row,
body.customers_login > .container > .row,
body.authentication > .container > .row,
body[class*="login"] > .container > .row,
#wrapper > .container > .row {
    display: flex !important;
    flex-direction: row !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
}

/* QUAN TRỌNG: KHẮC PHỤC LỖI ROW CẢNH BÁO BÊN TRONG BỊ DÃN 100VH ĐẨY FORM XUỐNG ĐÁY */
.authentication-form .row,
.kaola-auth-form-column .row,
.login-form .row,
.authentication-form-wrapper .row {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

/* ========================================================
   1. CỘT TRÁI: FORM ĐĂNG NHẬP (50% VIEWPORT BÊN TRÁI)
   ======================================================== */
@media (min-width: 992px) {
    .kaola-auth-form-column,
    .authentication-form-wrapper,
    body.login_admin .col-md-4,
    body.customers_login .col-md-4,
    body.authentication .col-md-4,
    body[class*="login"] .col-md-4 {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 50vw !important;
        height: 100vh !important;
        max-width: 50vw !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 40px 60px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 1000 !important;
        margin: 0 !important;
        order: 1 !important;
    }

    .kaola-auth-split-banner {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 50vw !important;
        height: 100vh !important;
        max-width: 50vw !important;
        background: #090d16 radial-gradient(circle at 20% 20%, #1e293b 0%, #030712 100%) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 60px 80px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        z-index: 1000 !important;
        margin: 0 !important;
        order: 2 !important;
    }
}

/* KHẮC PHỤC LỖI THANH KẺ NGANG TRÊN CỘT TRÁI */
hr,
.hr-divider,
.separator,
.divider,
.kaola-auth-form-column hr,
.authentication-form-wrapper hr,
body.customers_login hr,
body.authentication hr {
    display: none !important;
    border: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Khử hộp viền trắng .panel_s của Client */
.panel_s,
body.customers_login .panel_s,
body.authentication .panel_s {
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.panel-body,
body.customers_login .panel-body,
body.authentication .panel-body {
    padding: 0 !important;
    border: none !important;
}

/* Độ rộng form căn giữa bên trong cột 50% */
.kaola-auth-form-column > *,
.authentication-form,
.authentication-form-wrapper > *,
body.customers_login .login-form,
body.authentication .login-form,
body[class*="login"] .login-form {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.company-logo {
    display: none !important;
}

/* Tiêu đề & Subtitle */
h1.login-heading,
body.login_admin h1,
body.customers_login h1,
body.authentication h1,
body[class*="login"] h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: -0.5px !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 420px !important;
}

.auth-form-subheading {
    font-size: 14px !important;
    color: #64748b !important;
    margin-bottom: 24px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 420px !important;
}

/* Input Fields */
.form-group {
    margin-bottom: 16px !important;
    width: 100% !important;
}

.control-label, label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
    display: block !important;
    text-align: left !important;
}

.form-control, select.form-control {
    height: 46px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    font-size: 13.5px !important;
    padding: 8px 14px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.form-control:focus, select.form-control:focus {
    background: #ffffff !important;
    border-color: #046ECD !important;
    box-shadow: 0 0 0 3px rgba(4, 110, 205, 0.12) !important;
}

/* Checkbox & Quên mật khẩu */
.checkbox {
    margin: 12px 0 20px 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
    text-align: left !important;
}

a {
    color: #046ECD !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

a:hover {
    color: #035aa8 !important;
    text-decoration: underline !important;
}

/* Nút bấm Đăng nhập Pill button */
.btn-primary,
button[type="submit"].btn-info,
button[type="submit"].btn-primary {
    background-color: #0f172a !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
    height: 46px !important;
    border-radius: 23px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    width: 100% !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    cursor: pointer !important;
}

.btn-primary:hover,
button[type="submit"].btn-info:hover,
button[type="submit"].btn-primary:hover {
    background-color: #046ECD !important;
    border-color: #046ECD !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(4, 110, 205, 0.28) !important;
}

/* ========================================================
   2. CỘT PHẢI: BANNER HÌNH ẢNH & THẺ TRỢ LÝ
   ======================================================== */
.auth-brand-logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.3px !important;
    z-index: 2 !important;
}

.auth-brand-logo i {
    color: #0284c7 !important;
    font-size: 24px !important;
}

/* Thẻ Mockup Glassmorphism nổi ở giữa */
.auth-mockup-card {
    background: rgba(30, 41, 59, 0.75) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    padding: 24px 26px !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5) !important;
    max-width: 480px !important;
    width: 100% !important;
    margin: auto !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

.mockup-user-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
}

.mockup-user-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #0284c7, #2563eb) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 17px !important;
    flex-shrink: 0 !important;
}

.mockup-user-info strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.mockup-user-info span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #22c55e !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    margin-top: 3px !important;
}

.mockup-user-info span::before {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    background: #22c55e !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.chat-bubble-received {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
}

.chat-bubble-sent {
    background: linear-gradient(135deg, #0284c7, #2563eb) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    padding: 11px 16px !important;
    border-radius: 12px !important;
    margin-left: auto !important;
    margin-bottom: 12px !important;
    max-width: 82% !important;
    text-align: right !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
}

.auth-banner-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    z-index: 2 !important;
}

.auth-banner-footer span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.auth-banner-footer i {
    color: #0284c7 !important;
    font-size: 12px !important;
}

/* ========================================================
   3. RESPONSIVE CHO MÀN HÌNH DI ĐỘNG (< 992px)
   ======================================================== */
@media (max-width: 991px) {
    .kaola-auth-split-banner {
        display: none !important;
    }
    .kaola-auth-form-column,
    .authentication-form-wrapper {
        position: relative !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100vh !important;
        height: auto !important;
        padding: 40px 24px !important;
    }
}