@import '_content/IotAndBits.Core/IotAndBits.Core.nwwjfcrsyb.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* --- GIAO DIỆN MẶC ĐỊNH (DESKTOP) --- */
.main-header[b-23hjk6nu7e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative; /* Để menu mobile neo theo */
}

.hamburger-btn[b-23hjk6nu7e] {
    display: none; /* Ẩn nút 3 gạch trên máy tính */
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.header-collapse[b-23hjk6nu7e] {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
}

.main-nav[b-23hjk6nu7e] {
    display: flex;
    gap: 15px;
}

.header-right[b-23hjk6nu7e] {
    display: flex;
    gap: 15px; /* Tạo khoảng cách đều, thoáng giữa 2 nút */
    align-items: center;
}

/* --- MÀN HÌNH MỜ KHI MỞ MENU ĐIỆN THOẠI --- */
.overlay[b-23hjk6nu7e] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

/* --- XỬ LÝ DROPDOWN MENU (CẤP 2) --- */
.nav-group[b-23hjk6nu7e] {
    position: relative; /* Neo menu con vào menu cha */
}

/* Ẩn menu con mặc định */
.sub-menu[b-23hjk6nu7e] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1001;
    border-radius: 4px;
    padding: 10px 0;
}

    /* Định dạng các link trong menu con */
    .sub-menu a[b-23hjk6nu7e],
    .sub-menu button.nav-link[b-23hjk6nu7e] {
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px 20px;
        color: #333;
        text-decoration: none;
        border: none;
        background: transparent;
        cursor: pointer;
    }

        .sub-menu a:hover[b-23hjk6nu7e],
        .sub-menu button.nav-link:hover[b-23hjk6nu7e] {
            background-color: #f5f5f5;
        }

/* HIỂN THỊ menu con khi C# thêm class "is-open" */
.nav-group.is-open .sub-menu[b-23hjk6nu7e] {
    display: block;
}

/* Căn phải cho menu tài khoản (để không bị tràn ra ngoài màn hình) */
.sub-menu.sub-menu-right[b-23hjk6nu7e] {
    left: auto;
    right: 0;
}

/* --- GIAO DIỆN NÚT BẤM HEADER --- */
/* Nút Đăng ký (Nền trong, viền xanh) */
.btn-outline-primary[b-23hjk6nu7e] {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #004d99; /* Xanh PVOIL */
    background-color: transparent;
    border: 1.5px solid #004d99;
    border-radius: 8px; /* Bo góc hiện đại */
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-outline-primary:hover[b-23hjk6nu7e] {
        background-color: rgba(0, 77, 153, 0.05);
        transform: translateY(-1px);
    }

/* Nút Đăng nhập (Nền xanh, chữ trắng) */
.btn-solid-primary[b-23hjk6nu7e] {
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background-color: #004d99;
    border: 1.5px solid #004d99;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 77, 153, 0.15); /* Bóng đổ nhẹ */
}

    .btn-solid-primary:hover[b-23hjk6nu7e] {
        background-color: #003366;
        border-color: #003366;
        box-shadow: 0 6px 12px rgba(0, 77, 153, 0.25);
        transform: translateY(-1px);
    }

/* --- GIAO DIỆN KHI ĐÃ ĐĂNG NHẬP --- */
.user-profile-menu[b-23hjk6nu7e] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.welcome-text[b-23hjk6nu7e] {
    font-size: 14px;
    color: #333;
}

/* Nút icon tài khoản */
.btn-icon-nav[b-23hjk6nu7e] {
    background: none;
    border: none;
    font-size: 24px;
    color: #004d99;
    cursor: pointer;
    padding: 0;
    transition: color 0.3s;
}

    .btn-icon-nav:hover[b-23hjk6nu7e] {
        color: #d32f2f; /* Hover sang màu đỏ PVOIL */
    }

    /* ========================================================
   THÊM ĐOẠN NÀY ĐỂ FIX LỖI CLICK VÀO ICON KHÔNG ĂN SỰ KIỆN 
=========================================================== */
    .btn-icon-nav i[b-23hjk6nu7e] {
        pointer-events: none;
    }

/* Menu Dropdown Tài khoản */
.sub-menu-right .nav-link[b-23hjk6nu7e] {
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 12px 20px;
}

    .sub-menu-right .nav-link:hover[b-23hjk6nu7e] {
        background-color: #f8f9fa;
    }

.text-danger[b-23hjk6nu7e] {
    color: #dc3545 !important; /* Nhấn mạnh nút đăng xuất */
}

/* --- GIAO DIỆN FOOTER --- */
.main-footer[b-23hjk6nu7e] {
    text-align: center;
    padding: 12px 20px; /* Thu gọn khoảng cách trên dưới cho thanh mảnh */
    background-color: #f8f9fa; /* Màu nền xám cực nhạt để phân biệt với nội dung chính */
    border-top: 1px solid #e9ecef; /* Đường viền mờ bên trên */
    margin-top: auto; /* Tự động đẩy footer xuống đáy màn hình */
}

    .main-footer p[b-23hjk6nu7e] {
        margin: 0;
        color: #868e96; /* Đổi sang màu xám nhạt tinh tế */
        font-size: 12px; /* Thu nhỏ cỡ chữ xuống 12px */
        font-weight: 400;
        letter-spacing: 0.5px; /* Giãn cách chữ một chút để text nhỏ nhưng vẫn sang và dễ đọc */
    }


/* ========================================================
   GIAO DIỆN ĐIỆN THOẠI (Dưới 768px) - GỘP CHUNG VÀO 1 KHỐI 
=========================================================== */
@media (max-width: 768px) {
    .hamburger-btn[b-23hjk6nu7e] {
        display: block; /* Hiện nút 3 gạch */
    }

    /* Đưa menu thành dạng xổ xuống 1 cấp */
    .header-collapse[b-23hjk6nu7e] {
        display: none; /* Mặc định ẩn */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Đẩy xuống ngay dưới header */
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 1000;
        padding: 10px 0;
    }

        /* Lớp CSS này được Blazor thêm vào khi isMobileMenuOpen = true */
        .header-collapse.show-mobile-menu[b-23hjk6nu7e] {
            display: flex;
        }

    .main-nav[b-23hjk6nu7e] {
        flex-direction: column;
        width: 100%;
    }

    .nav-btn[b-23hjk6nu7e], .nav-link[b-23hjk6nu7e] {
        width: 100%;
        text-align: left;
        padding: 12px 20px; /* Thu gọn khoảng cách trên dưới một chút */
        border: none;
        background: transparent;
        border-bottom: 1px solid #eee;
        font-size: 14px; /* Ép cỡ chữ nhỏ lại */
        font-weight: 500;
    }

    .header-right[b-23hjk6nu7e] {
        flex-direction: column;
        width: 100%;
        padding: 10px 20px;
    }

    .btn-login[b-23hjk6nu7e] {
        width: 100%;
        margin-bottom: 10px;
        padding: 10px;
        font-size: 14px;
    }

    /* Tối ưu Sub-menu cho màn hình điện thoại (Đẩy nội dung xuống thay vì đè lên trên) */
    .nav-group.is-open .sub-menu[b-23hjk6nu7e] {
        position: static;
        box-shadow: none;
        border-radius: 0;
        border-left: 2px solid #004d99; /* Dấu hiệu nhận biết menu cấp con */
        margin-left: 20px;
        padding: 5px 0;
        background-color: transparent;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-gcp7645c5u],
.components-reconnect-repeated-attempt-visible[b-gcp7645c5u],
.components-reconnect-failed-visible[b-gcp7645c5u],
.components-pause-visible[b-gcp7645c5u],
.components-resume-failed-visible[b-gcp7645c5u],
.components-rejoining-animation[b-gcp7645c5u] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-gcp7645c5u],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-gcp7645c5u],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-gcp7645c5u],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-gcp7645c5u],
#components-reconnect-modal.components-reconnect-retrying[b-gcp7645c5u],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-gcp7645c5u],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-gcp7645c5u],
#components-reconnect-modal.components-reconnect-failed[b-gcp7645c5u],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-gcp7645c5u] {
    display: block;
}


#components-reconnect-modal[b-gcp7645c5u] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-gcp7645c5u 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-gcp7645c5u 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-gcp7645c5u 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-gcp7645c5u]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-gcp7645c5u 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-gcp7645c5u {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-gcp7645c5u {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-gcp7645c5u {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-gcp7645c5u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-gcp7645c5u] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-gcp7645c5u] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-gcp7645c5u] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-gcp7645c5u] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-gcp7645c5u] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-gcp7645c5u] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-gcp7645c5u 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-gcp7645c5u] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-gcp7645c5u {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/CargoAllocation.razor.rz.scp.css */
/* --- HIỆU ỨNG XUẤT HIỆN MƯỢT MÀ --- */
.animate-fade-in[b-ja5cpj3zw8] {
    animation: fadeInUp-b-ja5cpj3zw8 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes fadeInUp-b-ja5cpj3zw8 {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- VÙNG TỔNG QUAN (GHIM LÊN ĐỈNH MÀN HÌNH MÁY) --- */
.sticky-summary[b-ja5cpj3zw8] {
    position: sticky;
    top: 10px; /* Cách viền trên một chút */
    z-index: 1020;
    /* Hiệu ứng kính mờ (Glassmorphism) cực đẹp trên iOS/Android */
    background: rgba(13, 110, 253, 0.92) !important; /* Dùng màu primary của Bootstrap */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.25);
    transition: all 0.3s ease;
}

/* --- TÙY CHỈNH THẺ HẦM HÀNG (CARD) --- */
.tank-card[b-ja5cpj3zw8] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

    /* Hiệu ứng khi tài xế chạm vào hầm */
    .tank-card:active[b-ja5cpj3zw8] {
        transform: scale(0.98);
    }

/* Hầm đã được phân bổ hàng (có viền xanh) */
.tank-filled[b-ja5cpj3zw8] {
    background-color: #ffffff;
    border-left: 5px solid #0d6efd !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

/* Hầm trống (làm mờ để giảm sự chú ý) */
.tank-empty[b-ja5cpj3zw8] {
    background-color: #f8f9fa;
    opacity: 0.85;
    border-left: 5px solid transparent !important;
}

/* --- TỐI ƯU CÁC Ô NHẬP LIỆU CHO NGÓN TAY (TOUCH TARGET) --- */
.form-floating > .form-control[b-ja5cpj3zw8],
.form-floating > .form-select[b-ja5cpj3zw8] {
    height: calc(4rem + 2px); /* Tăng chiều cao để dễ chạm */
    line-height: 1.25;
    font-size: 1.1rem; /* Chữ to rõ ràng ở ngoài trời */
}

/* Tùy chỉnh input khi có lỗi (vượt dung tích) */
.form-control.is-invalid[b-ja5cpj3zw8] {
    background-color: rgba(220, 53, 69, 0.05);
    border-color: #dc3545;
    background-image: none; /* Bỏ icon x mặc định của Bootstrap cho đỡ rối */
}

/* Nút điền ĐẦY hầm */
.btn-fill-max[b-ja5cpj3zw8] {
    min-width: 80px;
    font-size: 1rem;
    letter-spacing: 0.5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Padding dưới cùng để khi cuộn đến hầm cuối không bị vướng thanh điều hướng của iOS/Android */
.cargo-allocation-mobile[b-ja5cpj3zw8] {
    padding-bottom: 60px;
}
/* /Components/Pages/CccdVerificationModal.razor.rz.scp.css */
/* ================== OVERLAY CHÍNH ================== */
.modal-overlay[b-x4igiqa2vp] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(5px);
    /* THAY ĐỔI: Chuyển sang block để trình duyệt cho phép cuộn tự nhiên */
    display: block;
    overflow-y: auto;
    z-index: 9999;
    padding: 20px 0; /* Padding trên/dưới để card không bị dính sát mép */
    box-sizing: border-box;
}

/* ================== CARD eKYC ================== */
.ekyc-card[b-x4igiqa2vp] {
    background: #FFFFFF;
    width: 90%; /* Dùng % để linh hoạt */
    max-width: 900px;
    border-radius: 16px;
    padding: 30px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    margin: 0 auto; /* Căn giữa bằng margin tự động */
    animation: scaleUp-b-x4igiqa2vp 0.2s ease-out;
}




@keyframes scaleUp-b-x4igiqa2vp {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Tiêu đề */
.ekyc-header[b-x4igiqa2vp] {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    gap: 15px;
}

.header-icon[b-x4igiqa2vp] {
    width: 48px;
    height: 48px;
    background: #EEF2FF;
    color: #4F46E5;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}

.ekyc-title[b-x4igiqa2vp] {
    font-size: 22px;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
}

.ekyc-subtitle[b-x4igiqa2vp] {
    font-size: 14px;
    color: #64748B;
    margin: 4px 0 0 0;
}

.btn-close-corner[b-x4igiqa2vp] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 20px;
    color: #94A3B8;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-close-corner:hover[b-x4igiqa2vp] {
        color: #EF4444;
    }

/* Bố cục chia đôi */
.ekyc-body[b-x4igiqa2vp] {
    display: flex;
    gap: 30px;
}

.panel[b-x4igiqa2vp] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.step-title[b-x4igiqa2vp] {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

/* ================== SỬA LỖI ĐẨY ẢNH Ở ĐÂY ================== */
.dropzone[b-x4igiqa2vp] {
    position: relative;
    width: 100%;
    height: 260px;
    border: 2px dashed #CBD5E1;
    border-radius: 12px;
    background: #F8FAFC;
    transition: 0.3s;
    /* KHÔNG dùng display: flex ở đây để tránh thẻ input đẩy thẻ ảnh */
}

    .dropzone:hover[b-x4igiqa2vp] {
        border-color: #6366F1;
        background: #EEF2FF;
    }

    .dropzone.has-image[b-x4igiqa2vp] {
        border: 2px solid #E2E8F0;
        background: #F1F5F9;
    }

.file-input[b-x4igiqa2vp] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.dropzone-empty[b-x4igiqa2vp] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.icon-circle[b-x4igiqa2vp] {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #6366F1;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-bottom: 15px;
}

.text-main[b-x4igiqa2vp] {
    font-size: 15px;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 5px;
}

.text-sub[b-x4igiqa2vp] {
    font-size: 13px;
    color: #94A3B8;
}

.dropzone-image[b-x4igiqa2vp] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    pointer-events: none;
}

    .dropzone-image img[b-x4igiqa2vp] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 8px;
    }

.dropzone-overlay[b-x4igiqa2vp] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(15,23,42,0.7);
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: 0.3s;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    pointer-events: none;
}

.dropzone:hover .dropzone-overlay[b-x4igiqa2vp] {
    opacity: 1;
}

/* ================== KHU VỰC KẾT QUẢ ================== */
.result-panel[b-x4igiqa2vp] {
    background: #F8FAFC;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #E2E8F0;
}

.empty-result[b-x4igiqa2vp] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #94A3B8;
}

.empty-result-circle[b-x4igiqa2vp] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #E2E8F0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    margin-bottom: 15px;
}

.empty-result p[b-x4igiqa2vp] {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.result-card[b-x4igiqa2vp] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.profile-header[b-x4igiqa2vp] {
    display: flex;
    gap: 20px;
    align-items: center;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    margin-bottom: 15px;
    border: 1px solid #F1F5F9;
}

.profile-avatar[b-x4igiqa2vp] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: #F1F5F9;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 2px solid #E2E8F0;
    font-size: 30px;
    color: #CBD5E1;
    flex-shrink: 0;
}

    .profile-avatar img[b-x4igiqa2vp] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.label[b-x4igiqa2vp] {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.value-name[b-x4igiqa2vp] {
    font-size: 18px;
    font-weight: 800;
    color: #4F46E5;
}

.value-id[b-x4igiqa2vp] {
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
    font-family: monospace;
    letter-spacing: 1px;
}

.value[b-x4igiqa2vp] {
    font-size: 15px;
    font-weight: 600;
    color: #1E293B;
}

.info-grid[b-x4igiqa2vp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.info-item[b-x4igiqa2vp] {
    background: white;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #F1F5F9;
}

.address-item[b-x4igiqa2vp] {
    background: white;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #F1F5F9;
    margin-bottom: 15px;
}

/* Nút bấm và Alert */
.btn[b-x4igiqa2vp] {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 15px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

    .btn:disabled[b-x4igiqa2vp] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-scan[b-x4igiqa2vp] {
    background: #4F46E5;
    color: white;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

    .btn-scan:hover:not(:disabled)[b-x4igiqa2vp] {
        background: #4338CA;
    }

.btn-confirm[b-x4igiqa2vp] {
    background: #10B981;
    color: white;
    margin-top: auto;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

    .btn-confirm:hover:not(:disabled)[b-x4igiqa2vp] {
        background: #059669;
    }

.alert[b-x4igiqa2vp] {
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    gap: 8px;
}

    .alert.error[b-x4igiqa2vp] {
        background: #FEF2F2;
        color: #DC2626;
        border-left: 4px solid #EF4444;
    }

    .alert.success[b-x4igiqa2vp] {
        background: #ECFDF5;
        color: #059669;
        border-left: 4px solid #10B981;
    }

.mt-10[b-x4igiqa2vp] {
    margin-top: 10px;
}

.mt-20[b-x4igiqa2vp] {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .ekyc-body[b-x4igiqa2vp] {
        flex-direction: column;
    }

    .dropzone[b-x4igiqa2vp] {
        height: 220px;
    }
}
/* ================== RESPONSIVE (MOBILE) ================== */
@media (max-width: 768px) {
    /* Đảm bảo overlay vẫn cuộn được */
    .modal-overlay[b-x4igiqa2vp] {
        display: block;
        padding: 10px;
    }

    .ekyc-card[b-x4igiqa2vp] {
        width: 100% !important; /* Full width trên đt */
        margin: 0 !important;
        padding: 15px !important;
        border-radius: 12px;
    }

    .ekyc-body[b-x4igiqa2vp] {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .panel[b-x4igiqa2vp] {
        width: 100% !important;
    }

    .ekyc-header[b-x4igiqa2vp] {
        margin-bottom: 15px !important;
    }

    /* Thu gọn font trên điện thoại để đỡ chiếm diện tích */
    .ekyc-title[b-x4igiqa2vp] {
        font-size: 18px !important;
    }

    .ekyc-subtitle[b-x4igiqa2vp] {
        font-size: 13px !important;
    }
}
/* /Components/Pages/ChangePasswordModal.razor.rz.scp.css */
/* ================== OVERLAY CHÍNH ================== */
.login-overlay[b-dbgc0e4t0w] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box; /* Quan trọng: Ngăn padding đẩy tràn màn hình */
}

/* ================== CARD ĐĂNG NHẬP ================== */
.login-card[b-dbgc0e4t0w] {
    display: flex;
    width: 100%;
    max-width: 800px;
    min-height: 500px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(100, 116, 139, 0.25);
    overflow: hidden;
    margin: auto;
}



/* ================== CỘT TRÁI (BRANDING) ================== */
.brand-panel[b-dbgc0e4t0w] {
    width: 320px;
    background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    position: relative;
}

    .brand-panel .logo[b-dbgc0e4t0w] {
        width: 90px;
        margin-bottom: 20px;
    }

.brand-title[b-dbgc0e4t0w] {
    font-size: 30px;
    font-weight: 800;
    color: #93C5FD;
    margin: 0 0 5px 0;
}

.brand-subtitle[b-dbgc0e4t0w] {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin: 0 0 25px 0;
}

.brand-line[b-dbgc0e4t0w] {
    height: 2px;
    width: 50px;
    background-color: #3B82F6;
    margin-bottom: 20px;
}

.brand-text[b-dbgc0e4t0w] {
    font-size: 14px;
    color: #BFDBFE;
    line-height: 1.6;
}

.bottom-accent-red[b-dbgc0e4t0w] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background-color: #EF4444;
}

/* ================== CỘT PHẢI (FORM) ================== */
.form-panel[b-dbgc0e4t0w] {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-title[b-dbgc0e4t0w] {
    font-size: 26px;
    font-weight: bold;
    color: #0F172A;
    margin: 0 0 5px 0;
}

.form-subtitle[b-dbgc0e4t0w] {
    font-size: 14px;
    color: #64748B;
    margin-bottom: 10px;
}

.form-group[b-dbgc0e4t0w] {
    margin-bottom: 15px;
}

    .form-group label[b-dbgc0e4t0w] {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #475569;
        margin-bottom: 5px;
    }

.form-control[b-dbgc0e4t0w] {
    width: 100%;
    height: 45px;
    padding: 0 12px;
    font-size: 14px;
    color: #1E293B;
    background-color: #F8FAFC;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.2s;
}

    .form-control[b-dbgc0e4t0w]::placeholder {
        color: #94A3B8;
    }

    .form-control:focus[b-dbgc0e4t0w] {
        outline: none;
        border-color: #3B82F6;
        background-color: white;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .form-control:disabled[b-dbgc0e4t0w] {
        background-color: #E2E8F0;
        cursor: not-allowed;
    }

/* ================== THÔNG BÁO LỖI ================== */
.alert-box[b-dbgc0e4t0w] {
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 15px;
    font-weight: 500;
}

    .alert-box.error[b-dbgc0e4t0w] {
        background-color: #FEF2F2;
        color: #EF4444;
        border: 1px solid #FCA5A5;
    }

/* Các tiện ích */
.mt-10[b-dbgc0e4t0w] {
    margin-top: 10px;
}

.mt-20[b-dbgc0e4t0w] {
    margin-top: 20px;
}

.text-center[b-dbgc0e4t0w] {
    text-align: center;
    font-size: 18px;
    letter-spacing: 2px;
}

/* ================== NÚT BẤM ================== */
.btn[b-dbgc0e4t0w] {
    width: 100%;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

    .btn:active:not(:disabled)[b-dbgc0e4t0w] {
        transform: scale(0.98);
    }

    .btn:disabled[b-dbgc0e4t0w] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-primary[b-dbgc0e4t0w] {
    height: 48px;
    background-color: #2563EB;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-dbgc0e4t0w] {
        background-color: #1D4ED8;
    }

.btn-secondary[b-dbgc0e4t0w] {
    height: 45px;
    background-color: #F1F5F9;
    color: #475569;
}

    .btn-secondary:hover:not(:disabled)[b-dbgc0e4t0w] {
        background-color: #E2E8F0;
        color: #0F172A;
    }

/* ---- Nút Đăng nhập bằng Face ID ---- */
.btn-biometric[b-dbgc0e4t0w] {
    height: 48px;
    background-color: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-biometric:hover:not(:disabled)[b-dbgc0e4t0w] {
        background-color: #DBEAFE;
        border-color: #93C5FD;
    }

/* ================== FOOTER ================== */
.form-footer[b-dbgc0e4t0w] {
    margin-top: auto;
    text-align: center;
    color: #64748B;
    font-size: 14px;
    padding-top: 20px;
}

.btn-link[b-dbgc0e4t0w] {
    background: transparent;
    color: #2563EB;
    font-weight: bold;
    text-decoration: underline;
    border: none;
    padding: 0;
    cursor: pointer;
}

.login-footer[b-dbgc0e4t0w] {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-size: 0.8rem;
    z-index: 10000;
}

/* ================== RESPONSIVE (ĐIỆN THOẠI) ================== */
@media (max-width: 768px) {
    .login-overlay[b-dbgc0e4t0w] {
        display: block; /* QUAN TRỌNG NHẤT: Tắt flexbox để hệ điều hành sinh thanh cuộn dọc */
        padding: 15px;
    }

    .login-card[b-dbgc0e4t0w] {
        flex-direction: column;
        min-height: auto;
        margin: 0 auto; /* Chỉ căn giữa ngang, nhả căn dọc ra để cuộn từ trên xuống */
    }

    .brand-panel[b-dbgc0e4t0w] {
        width: 100%;
        padding: 30px;
        text-align: center;
    }

    .brand-line[b-dbgc0e4t0w] {
        margin: 10px auto;
    }

    .form-panel[b-dbgc0e4t0w] {
        padding: 30px 20px;
    }
}
/* Container bao bọc Input và Icon */
.password-wrapper[b-dbgc0e4t0w] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

    /* Đảm bảo Input chiếm hết chiều rộng và dành khoảng trống cho con mắt */
    .password-wrapper .form-control[b-dbgc0e4t0w] {
        width: 100%;
        padding-right: 45px;
        box-sizing: border-box;
    }

/* Nút bấm con mắt */
.eye-button[b-dbgc0e4t0w] {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 45px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    outline: none;
    z-index: 5;
}

    .eye-button:hover[b-dbgc0e4t0w] {
        color: #2563EB;
    }
/* /Components/Pages/DangKyNhanHang.razor.rz.scp.css */
/* ==========================================
   1. CẤU TRÚC CHUNG & BỐ CỤC
   ========================================== */
:root[b-lk5m7i4c69] {
    --primary-color: #0d6efd;
    --danger-color: #dc3545;
    --bg-light: #f8f9fa;
}

/* Ép font chữ đồng nhất nhưng KHÔNG ÉP CỨNG KÍCH THƯỚC CHỮ */
*[b-lk5m7i4c69] {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body[b-lk5m7i4c69] {
    background-color: var(--bg-light);
}

/* ==========================================
   TỐI ƯU KHUNG GIAO DIỆN (CHÌA KHÓA CHO PC & MOBILE)
   ========================================== */
.max-w-md[b-lk5m7i4c69] {
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
}

/* Trên điện thoại: Giữ nguyên khung hẹp tối đa 500px */
@media (max-width: 767px) {
    .max-w-md[b-lk5m7i4c69] {
        max-width: 500px;
    }
}

/* Trên máy tính: Mở rộng khung ra 850px và thu nhỏ chữ lại cho thanh lịch */
@media (min-width: 768px) {
    .max-w-md[b-lk5m7i4c69] {
        max-width: 850px; /* Khung rộng rãi hơn rất nhiều */
        padding: 2rem 0;
    }

    /* Thu nhỏ chữ trên PC để trông chuyên nghiệp, không bị "khổng lồ" */
    body[b-lk5m7i4c69], input[b-lk5m7i4c69], select[b-lk5m7i4c69], textarea[b-lk5m7i4c69], button[b-lk5m7i4c69], .btn[b-lk5m7i4c69], .menu-step-item[b-lk5m7i4c69] {
        font-size: 14px !important;
    }

    /* Mở rộng không gian padding bên trong card trên PC */
    .card-body[b-lk5m7i4c69] {
        padding: 2.5rem !important;
    }
}

/* Đảm bảo Card luôn đứng vững, tránh co giật khung khi chuyển bước */
.card[b-lk5m7i4c69] {
    min-height: 550px;
    display: flex;
    flex-direction: column;
    border-radius: 1rem !important;
}

.card-body[b-lk5m7i4c69] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ==========================================
   2. TỐI ƯU CÁC THÀNH PHẦN
   ========================================== */
.logo-container[b-lk5m7i4c69] {
    transition: transform 0.3s ease;
}

    .logo-container:hover[b-lk5m7i4c69] {
        transform: scale(1.05);
    }

.letter-spacing[b-lk5m7i4c69] {
    letter-spacing: 0.25em;
}

.form-floating > .form-control[b-lk5m7i4c69] {
    border-width: 2px;
}

/* Nút bấm tổng thể */
.btn-primary[b-lk5m7i4c69] {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2) !important;
}

.btn-secondary[b-lk5m7i4c69] {
    background-color: #6c757d !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
}

.btn-outline-secondary[b-lk5m7i4c69] {
    border: 2px solid #6c757d !important;
    color: #333 !important;
    font-weight: 600 !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
}

    .btn-outline-secondary:hover[b-lk5m7i4c69] {
        background-color: #6c757d !important;
        color: white !important;
    }

.btn:hover[b-lk5m7i4c69] {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important;
}

.btn-outline-danger[b-lk5m7i4c69] {
    border-width: 2px !important;
}

/* Ô nhập liệu */
.form-control[b-lk5m7i4c69], .form-select[b-lk5m7i4c69] {
    border: 2px solid #dee2e6 !important;
    transition: border-color 0.3s;
}

    .form-control:focus[b-lk5m7i4c69], .form-select:focus[b-lk5m7i4c69] {
        border-color: var(--primary-color) !important;
        box-shadow: none;
    }

/* Container menu */
.list-group[b-lk5m7i4c69] {
    padding: 0 10px;
}

/* Hiệu ứng các mục Menu */
.menu-step-item[b-lk5m7i4c69] {
    transition: all 0.3s ease;
    border: 2px solid transparent !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
    box-sizing: border-box;
    cursor: pointer;
}

    .menu-step-item:hover[b-lk5m7i4c69] {
        background-color: var(--primary-color) !important;
        color: white !important;
        border: 2px solid var(--danger-color) !important;
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }

        .menu-step-item:hover .fw-medium[b-lk5m7i4c69],
        .menu-step-item:hover .badge[b-lk5m7i4c69] {
            color: white !important;
        }

        .menu-step-item:hover .badge[b-lk5m7i4c69] {
            background-color: white !important;
            color: var(--primary-color) !important;
        }

        .menu-step-item:hover .btn-outline-primary[b-lk5m7i4c69] {
            background-color: var(--danger-color) !important;
            color: white !important;
            border-color: var(--danger-color) !important;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

/* ==========================================
   3. CHIẾC VÉ (TICKET CARD)
   ========================================== */
.ticket-card[b-lk5m7i4c69] {
    display: flex;
    flex-direction: row;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.ticket-stub[b-lk5m7i4c69] {
    border-left: 2px dashed #dee2e6;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 200px !important;
    width: 200px !important;
    min-width: 200px;
    background-color: var(--bg-light) !important;
}

    .ticket-stub img[b-lk5m7i4c69] {
        width: 120px !important;
        height: 120px !important;
        min-width: 120px !important;
        min-height: 120px !important;
        object-fit: contain;
    }

    .ticket-stub .bg-white.p-2[b-lk5m7i4c69] {
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

@media (min-width: 768px) {
    .ticket-card[b-lk5m7i4c69] {
        min-height: 350px !important;
    }

    .ticket-info[b-lk5m7i4c69] {
        flex: 1 1 auto !important;
        overflow-y: auto;
    }
}

/* ==========================================
   4. RESPONSIVE (MOBILE)
   ========================================== */
@media (max-width: 576px) {
    .row > [class*="col-"][b-lk5m7i4c69] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 0.5rem;
    }

    .ticket-card[b-lk5m7i4c69] {
        flex-direction: column;
    }

    .ticket-stub[b-lk5m7i4c69] {
        flex: 0 0 auto !important;
        width: 100% !important;
        border-left: none !important;
        border-top: 2px dashed #dee2e6 !important;
    }
}

/* ==========================================
   5. CẤU HÌNH IN ẤN & PHỤ TRỢ
   ========================================== */
@media print {
    body *[b-lk5m7i4c69] {
        visibility: hidden !important;
    }

    .hide-on-print[b-lk5m7i4c69] {
        display: none !important;
    }

    #ticket-container[b-lk5m7i4c69], #ticket-container *[b-lk5m7i4c69] {
        visibility: visible !important;
    }

    #ticket-container[b-lk5m7i4c69] {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    *[b-lk5m7i4c69] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

.text-muted[b-lk5m7i4c69] {
    font-size: 0.85rem;
    opacity: 0.7;
    transition: opacity 0.3s;
}

    .text-muted:hover[b-lk5m7i4c69] {
        opacity: 1;
    }

.mt-5[b-lk5m7i4c69] {
    margin-top: 3rem !important;
}

.loading-overlay[b-lk5m7i4c69] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-weight: bold;
    color: #333;
}
/* --- TỐI ƯU HỆ THỐNG NÚT BẤM (BUTTONS) --- */

/* Nút chính (Tiếp tục, Lưu, Xác nhận) */
.btn-primary[b-lk5m7i4c69] {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 25px !important;
    font-weight: 700 !important;
    border-radius: 30px !important; /* Bo tròn trịa cho hiện đại */
    transition: all 0.3s ease !important;
}

    .btn-primary:hover[b-lk5m7i4c69] {
        background-color: #0a58ca !important;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(13, 110, 253, 0.4) !important;
    }

/* Nút phụ (Trước, Hủy, Tạo mới) */
.btn-secondary[b-lk5m7i4c69] {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 25px !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
}

/* Nút outline (Thêm phiếu, Thêm lệnh) */
.btn-outline-primary[b-lk5m7i4c69], .btn-outline-success[b-lk5m7i4c69] {
    border: 2px solid #0d6efd !important;
    color: #0d6efd !important;
    background: transparent !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 30px !important;
}

.btn-outline-success[b-lk5m7i4c69] {
    border-color: #198754 !important;
    color: #198754 !important;
}

    .btn-outline-success:hover[b-lk5m7i4c69] {
        background-color: #198754 !important;
        color: white !important;
    }

/* --- XỬ LÝ LỖI "TÀNG HÌNH" CHỮ TRONG MENU --- */
.menu-step-item .btn[b-lk5m7i4c69] {
    border: 1px solid #0d6efd !important;
    color: #0d6efd !important;
    background: white !important;
}

.menu-step-item:hover .btn[b-lk5m7i4c69] {
    background: #dc3545 !important; /* Khi hover menu, nút đổi màu đỏ */
    color: white !important;
    border-color: #dc3545 !important;
}
/* /Components/Pages/DanhMucDoanhNghiep.razor.rz.scp.css */
.erp-desktop-container[b-c4m4be84vp] {
    height: 100vh;
}

.erp-toolbar[b-c4m4be84vp] {
    z-index: 1000;
}

.form-active[b-c4m4be84vp] {
    border: 1px solid #007bff !important;
}

.form-inactive[b-c4m4be84vp] {
    opacity: 0.8;
}

.v-separator[b-c4m4be84vp] {
    border-left: 1px solid #ccc;
    height: 24px;
    margin: 0 10px;
}
/* Toolbar chung */
.erp-toolbar[b-c4m4be84vp] {
    background: #ffffff;
    border-bottom: 1px solid #dee2e6;
    padding: 8px 16px;
    height: 50px;
}

/* Nút bấm toolbar chuyên nghiệp */
.toolbar-btn[b-c4m4be84vp] {
    border: none;
    background: transparent;
    color: #495057;
    padding: 6px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

    .toolbar-btn:hover:not(:disabled)[b-c4m4be84vp] {
        background: #f8f9fa;
        color: #0d6efd;
    }

    .toolbar-btn:disabled[b-c4m4be84vp] {
        color: #adb5bd;
        cursor: not-allowed;
    }

.v-separator[b-c4m4be84vp] {
    width: 1px;
    height: 24px;
    background: #dee2e6;
    margin: 0 8px;
}
.toolbar-btn img[b-c4m4be84vp] {
    width: 18px;
    height: 18px;
    object-fit: contain; /* Đảm bảo ảnh không bị méo */
}
/* Trạng thái nút được bật */
.toolbar-btn.active[b-c4m4be84vp] {
    background: #e7f1ff;
    border: 1px solid #0d6efd;
    color: #0d6efd;
}

/* Đảm bảo căn chỉnh icon và chữ */
.toolbar-btn img[b-c4m4be84vp] {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
/* /Components/Pages/DataGridComponent.razor.rz.scp.css */
.datagrid-wrapper[b-xi7sqsitbp] {
    margin-top: 1.5rem;
    max-height: none !important;
    height: calc(100vh - 150px) !important;
    /* 🔴 THÊM 2 DÒNG NÀY ĐỂ ÉP THANH CUỘN NGANG HOẠT ĐỘNG */
    max-width: 100vw; /* Đảm bảo wrapper không phình to quá màn hình */
    overflow-x: auto !important;
    overflow-y: auto !important;
    border: 1px solid #1e293b;
    background: #f0ffff;
}

.wpf-grid[b-xi7sqsitbp] {
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0;
    /* 🔴 THỦ THUẬT ÉP BẢNG GIÃN THEO CỘT */
    min-width: 100%;
    width: 0 !important; /* Ép trình duyệt tính chiều rộng bảng bằng tổng các cột th */

    background-color: #f0ffff !important;
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* --- TIÊU ĐỀ CỘT (HEADER) --- */
.wpf-header[b-xi7sqsitbp] {
    background: linear-gradient(180deg, #fafafa 0%, #ededed 50%, #e0e0e0 100%) !important;
    color: #333333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 10px !important;
    text-align: center;
    white-space: nowrap;
    border-right: 1px solid #c8c8c8 !important;
    border-bottom: 1px solid #999999 !important;
    border-top: 1px solid #e5e5e5 !important;
    position: sticky !important;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    user-select: none;
}

    .wpf-header:hover[b-xi7sqsitbp] {
        background: linear-gradient(180deg, #f0f8ff 0%, #e0f0ff 100%) !important;
        color: #005a9e !important;
    }

.header-content[b-xi7sqsitbp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.sort-icon[b-xi7sqsitbp] {
    color: #0078d7;
    font-size: 10px;
}

/* --- DÒNG VÀ Ô DỮ LIỆU --- */
.wpf-row[b-xi7sqsitbp] {
    background-color: #f0ffff !important; /* Nền dòng màu azure */
    color: #000000 !important;
}

.wpf-cell[b-xi7sqsitbp] {
    padding: 8px 10px !important;
    font-size: 13px;
    color: #000000 !important; /* Ép chữ màu đen tuyền */
    border-right: 1px solid #b0c4de !important;
    border-bottom: 1px solid #b0c4de !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hiệu ứng hover dòng */
.wpf-row:hover[b-xi7sqsitbp] {
    background-color: #e0ffff !important; /* Xanh ngọc đậm hơn khi di chuột */
}

/* Làm đẹp thanh Resizer */
.resizer[b-xi7sqsitbp] {
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    z-index: 99999 !important;
    cursor: col-resize !important;
}

    .resizer:hover[b-xi7sqsitbp] {
        border-right: 2px solid #38bdf8 !important;
    }

.expert-commentary[b-xi7sqsitbp] {
    background: rgba(15, 15, 20, 0.85);
    border: 1px solid #2962ff;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.row-selected[b-xi7sqsitbp] {
    background-color: rgba(41, 98, 255, 0.15) !important;
    border-left: 4px solid #2962ff;
}

.comment-text[b-xi7sqsitbp] {
    line-height: 1.6;
    font-size: 1.1rem;
    color: #e0e0e0;
}

    .comment-text strong[b-xi7sqsitbp] {
        color: #ffc107; /* Màu vàng cho các điểm nhấn quan trọng */
    }

/* --- TÍNH NĂNG KÉO CHIỀU CAO HÀNG (ROW RESIZING) --- */
.row-handle[b-xi7sqsitbp] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px; /* Độ dày vùng kéo */
    cursor: row-resize !important;
    z-index: 100;
    background: transparent;
    transition: background 0.2s;
}

    /* Hiệu ứng khi rê chuột vào mép dưới hàng */
    .row-handle:hover[b-xi7sqsitbp] {
        background: #0284c7 !important; /* Màu xanh tone sur tone với thanh cuộn */
        opacity: 0.5;
    }

/* Class giúp cell dãn ra khi cần thiết */
.row-wrapped .wpf-cell[b-xi7sqsitbp] {
    white-space: normal !important;
    word-break: break-word !important;
    vertical-align: middle !important;
}

/* Đảm bảo ô STT chứa handle luôn có vị trí tương đối */
.wpf-cell:first-child[b-xi7sqsitbp] {
    position: relative !important;
}

.que-link[b-xi7sqsitbp] {
    text-decoration: underline;
    color: #0078d7; /* Màu xanh dương đặc trưng */
    cursor: pointer;
    font-weight: bold;
    transition: color 0.2s;
}

    .que-link:hover[b-xi7sqsitbp] {
        color: #005a9e; /* Màu đậm hơn khi hover */
    }

.que-header-compact[b-xi7sqsitbp] {
    display: flex;
    align-items: center; /* Căn giữa icon và chữ theo chiều dọc */
    gap: 15px; /* Khoảng cách giữa icon và chữ */
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-bottom: 20px;
}

.que-icon-small[b-xi7sqsitbp] {
    transform: scale(0.6); /* Thu nhỏ icon lại nếu cần */
    transform-origin: left center;
}
/* /Components/Pages/DispatchOrderForm.razor.rz.scp.css */
body[b-wgv3649sqb] {
}
/* /Components/Pages/DispatchOrderFormBase.razor.rz.scp.css */
body[b-f4xk0yukf8] {
}
/* /Components/Pages/DuyetHoSoDangKy.razor.rz.scp.css */
body[b-jvwi0r4se5] {
}
/* /Components/Pages/DynamicInputFormComponent.razor.rz.scp.css */
/* Ép container cha thành grid cố định */
.my-strict-grid[b-zsoss9mvjv] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

    /* Ép mọi div con bên trong grid phải tuân thủ tuyệt đối */
    .my-strict-grid > div[b-zsoss9mvjv] {
        width: 100% !important;
        min-width: 0 !important; /* Quan trọng: Ngăn không cho input to hơn cột */
        box-sizing: border-box !important;
    }

    /* Ép các control bên trong không được có margin thừa */
    .my-strict-grid .form-control[b-zsoss9mvjv],
    .my-strict-grid .form-select[b-zsoss9mvjv],
    .my-strict-grid .input-group[b-zsoss9mvjv] {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
.action-toolbar[b-zsoss9mvjv] {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #f1f3f5;
    border-bottom: 2px solid #dee2e6;
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
}

.toolbar-btn[b-zsoss9mvjv] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid #ced4da;
    background: white;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.2s;
    font-size: 13px;
}

    .toolbar-btn:hover[b-zsoss9mvjv] {
        background: #e9ecef;
    }
/* Ghi đè giao diện trên điện thoại */
@media (max-width: 767px) {
    .my-strict-grid[b-zsoss9mvjv] {
        /* Chuyển từ 3 cột thành 1 cột */
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 10px !important; /* Giảm gap một chút cho đỡ tốn diện tích */
    }

        /* Đảm bảo các cell trong grid không bị overflow */
        .my-strict-grid > div[b-zsoss9mvjv] {
            width: 100% !important;
            overflow: hidden !important;
        }
}
/* /Components/Pages/ErpBasePageComponent.razor.rz.scp.css */
.erp-desktop-container[b-37dzhutodf] {
    height: 100vh;
}

.erp-toolbar[b-37dzhutodf] {
    z-index: 1000;
}

.form-active[b-37dzhutodf] {
    border: 1px solid #007bff !important;
}

.form-inactive[b-37dzhutodf] {
    opacity: 0.8;
}

.v-separator[b-37dzhutodf] {
    border-left: 1px solid #ccc;
    height: 24px;
    margin: 0 10px;
}
/* Toolbar chung */
.erp-toolbar[b-37dzhutodf] {
    background: #ffffff;
    border-bottom: 1px solid #dee2e6;
    padding: 8px 16px;
    height: 50px;
}

/* Nút bấm toolbar chuyên nghiệp */
.toolbar-btn[b-37dzhutodf] {
    border: none;
    background: transparent;
    color: #495057;
    padding: 6px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

    .toolbar-btn:hover:not(:disabled)[b-37dzhutodf] {
        background: #f8f9fa;
        color: #0d6efd;
    }

    .toolbar-btn:disabled[b-37dzhutodf] {
        color: #adb5bd;
        cursor: not-allowed;
    }

.v-separator[b-37dzhutodf] {
    width: 1px;
    height: 24px;
    background: #dee2e6;
    margin: 0 8px;
}

.toolbar-btn img[b-37dzhutodf] {
    width: 18px;
    height: 18px;
    object-fit: contain; /* Đảm bảo ảnh không bị méo */
}
/* Trạng thái nút được bật */
.toolbar-btn.active[b-37dzhutodf] {
    background: #e7f1ff;
    border: 1px solid #0d6efd;
    color: #0d6efd;
}

/* Đảm bảo căn chỉnh icon và chữ */
.toolbar-btn img[b-37dzhutodf] {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
/* /Components/Pages/ErpMasterDetailComponent.razor.rz.scp.css */
.erp-desktop-container[b-d7jh47jv7o] {
    height: 100vh;
}

.erp-toolbar[b-d7jh47jv7o] {
    z-index: 1000;
}

.form-active[b-d7jh47jv7o] {
    border: 1px solid #007bff !important;
}

.form-inactive[b-d7jh47jv7o] {
    opacity: 0.8;
}

.v-separator[b-d7jh47jv7o] {
    border-left: 1px solid #ccc;
    height: 24px;
    margin: 0 10px;
}
/* Toolbar chung */
.erp-toolbar[b-d7jh47jv7o] {
    background: #ffffff;
    border-bottom: 1px solid #dee2e6;
    padding: 8px 16px;
    height: 50px;
}

/* Nút bấm toolbar chuyên nghiệp */
.toolbar-btn[b-d7jh47jv7o] {
    border: none;
    background: transparent;
    color: #495057;
    padding: 6px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

    .toolbar-btn:hover:not(:disabled)[b-d7jh47jv7o] {
        background: #f8f9fa;
        color: #0d6efd;
    }

    .toolbar-btn:disabled[b-d7jh47jv7o] {
        color: #adb5bd;
        cursor: not-allowed;
    }

.v-separator[b-d7jh47jv7o] {
    width: 1px;
    height: 24px;
    background: #dee2e6;
    margin: 0 8px;
}

.toolbar-btn img[b-d7jh47jv7o] {
    width: 18px;
    height: 18px;
    object-fit: contain; /* Đảm bảo ảnh không bị méo */
}
/* Trạng thái nút được bật */
.toolbar-btn.active[b-d7jh47jv7o] {
    background: #e7f1ff;
    border: 1px solid #0d6efd;
    color: #0d6efd;
}

/* Đảm bảo căn chỉnh icon và chữ */
.toolbar-btn img[b-d7jh47jv7o] {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
/* /Components/Pages/ForgotPasswordModal.razor.rz.scp.css */
/* ================== OVERLAY CHÍNH ================== */
.login-overlay[b-pbuk14eymy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box; /* Quan trọng: Ngăn padding đẩy tràn màn hình */
}

/* ================== CARD ĐĂNG NHẬP / QUÊN MẬT KHẨU ================== */
.login-card[b-pbuk14eymy] {
    display: flex;
    width: 100%;
    max-width: 800px;
    min-height: 500px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(100, 116, 139, 0.25);
    overflow: hidden;
    margin: auto;
}

/* ================== CỘT TRÁI (BRANDING) ================== */
.brand-panel[b-pbuk14eymy] {
    width: 320px;
    background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    position: relative;
}

    .brand-panel .logo[b-pbuk14eymy] {
        width: 90px;
        margin-bottom: 20px;
    }

.brand-title[b-pbuk14eymy] {
    font-size: 26px;
    font-weight: 800;
    color: #93C5FD;
    margin: 0 0 5px 0;
}

.brand-subtitle[b-pbuk14eymy] {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin: 0 0 25px 0;
}

.brand-line[b-pbuk14eymy] {
    height: 2px;
    width: 50px;
    background-color: #3B82F6;
    margin-bottom: 20px;
}

.brand-text[b-pbuk14eymy] {
    font-size: 14px;
    color: #BFDBFE;
    line-height: 1.6;
}

.bottom-accent-red[b-pbuk14eymy] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background-color: #EF4444;
}

/* ================== CỘT PHẢI (FORM) ================== */
.form-panel[b-pbuk14eymy] {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-title[b-pbuk14eymy] {
    font-size: 26px;
    font-weight: bold;
    color: #0F172A;
    margin: 0 0 5px 0;
}

.form-subtitle[b-pbuk14eymy] {
    font-size: 14px;
    color: #64748B;
    margin-bottom: 10px;
}

.form-group[b-pbuk14eymy] {
    margin-bottom: 15px;
}

    .form-group label[b-pbuk14eymy] {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #475569;
        margin-bottom: 5px;
    }

.form-control[b-pbuk14eymy] {
    width: 100%;
    height: 45px;
    padding: 0 12px;
    font-size: 14px;
    color: #1E293B;
    background-color: #F8FAFC;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.2s;
}

    .form-control[b-pbuk14eymy]::placeholder {
        color: #94A3B8;
    }

    .form-control:focus[b-pbuk14eymy] {
        outline: none;
        border-color: #3B82F6;
        background-color: white;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .form-control:disabled[b-pbuk14eymy] {
        background-color: #E2E8F0;
        cursor: not-allowed;
    }

/* ================== THÔNG BÁO (ALERT BOXES) ================== */
.alert-box[b-pbuk14eymy] {
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 15px;
    font-weight: 500;
}

    /* Lỗi (Đỏ) */
    .alert-box.error[b-pbuk14eymy] {
        background-color: #FEF2F2;
        color: #EF4444;
        border: 1px solid #FCA5A5;
    }

    /* Cảnh báo / Hướng dẫn (Vàng) - MỚI THÊM */
    .alert-box.warning[b-pbuk14eymy] {
        background-color: #FFFBEB;
        color: #B45309;
        border: 1px solid #FDE68A;
        line-height: 1.5;
        text-align: justify;
    }

    /* Thành công (Xanh lá) - MỚI THÊM */
    .alert-box.success[b-pbuk14eymy] {
        background-color: #F0FDF4;
        color: #15803D;
        border: 1px solid #BBF7D0;
        line-height: 1.5;
    }

/* Các tiện ích */
.mt-10[b-pbuk14eymy] {
    margin-top: 10px;
}

.mt-20[b-pbuk14eymy] {
    margin-top: 20px;
}

.text-center[b-pbuk14eymy] {
    text-align: center;
    font-size: 18px;
    letter-spacing: 2px;
}

/* ================== NÚT BẤM ================== */
.btn[b-pbuk14eymy] {
    width: 100%;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

    .btn:active:not(:disabled)[b-pbuk14eymy] {
        transform: scale(0.98);
    }

    .btn:disabled[b-pbuk14eymy] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-primary[b-pbuk14eymy] {
    height: 48px;
    background-color: #2563EB;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-pbuk14eymy] {
        background-color: #1D4ED8;
    }

.btn-secondary[b-pbuk14eymy] {
    height: 45px;
    background-color: #F1F5F9;
    color: #475569;
}

    .btn-secondary:hover:not(:disabled)[b-pbuk14eymy] {
        background-color: #E2E8F0;
        color: #0F172A;
    }

/* ================== RESPONSIVE (ĐIỆN THOẠI) ================== */
@media (max-width: 768px) {
    .login-overlay[b-pbuk14eymy] {
        display: block;
        padding: 15px;
    }

    .login-card[b-pbuk14eymy] {
        flex-direction: column;
        min-height: auto;
        margin: 0 auto;
    }

    .brand-panel[b-pbuk14eymy] {
        width: 100%;
        padding: 30px;
        text-align: center;
    }

    .brand-line[b-pbuk14eymy] {
        margin: 10px auto;
    }

    .form-panel[b-pbuk14eymy] {
        padding: 30px 20px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* KHỐI BANNER CHÍNH */
.pvoil-hero-banner[b-7l3vxjgnyn] {
    position: relative;
    background: linear-gradient(to bottom, rgba(0, 45, 100, 0.3), rgba(0, 30, 80, 0.6)), url('/images/banner.jpg') no-repeat center center;
    background-size: cover;
    color: #ffffff;
    padding: 100px 20px;
    text-align: center;
    border-bottom: 4px solid #d32f2f;
    margin-bottom: 40px;
}

    .pvoil-hero-banner h1.main-title[b-7l3vxjgnyn] {
        font-size: 36px !important;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        margin-bottom: 15px;
    }

    .pvoil-hero-banner p.main-desc[b-7l3vxjgnyn] {
        font-size: 18px !important;
        font-weight: 500;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
        opacity: 1;
        margin-bottom: 30px;
    }

/* HIỆU ỨNG KÍNH MỜ CHO THÔNG BÁO */
.info-badge[b-7l3vxjgnyn] {
    background: rgba(255, 255, 255, 0.15); /* Nền trắng cực trong suốt (15%) */
    border-radius: 50px;
    padding: 10px 30px;
    font-size: 15px !important;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.4); /* Viền trắng mảnh làm nổi bật khối */
    backdrop-filter: blur(4px); /* Làm nhòe nhẹ ảnh nền phía sau chữ */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Đổ bóng nhẹ giúp khối có chiều sâu */
}

/* KHỐI THẺ TÍNH NĂNG */
.feature-container[b-7l3vxjgnyn] {
    padding-bottom: 50px;
}

.feature-card[b-7l3vxjgnyn] {
    background: #ffffff;
    border-radius: 12px;
    padding: 35px 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid #eaeaea;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

    .feature-card:hover[b-7l3vxjgnyn] {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        border-bottom: 4px solid #004d99;
    }

.icon-wrapper[b-7l3vxjgnyn] {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    background-color: #f4f8fc;
}

.feature-card h4.card-title[b-7l3vxjgnyn] {
    font-size: 18px !important;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
}

.feature-card p.card-desc[b-7l3vxjgnyn] {
    font-size: 15px !important;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .pvoil-hero-banner[b-7l3vxjgnyn] {
        padding: 60px 15px;
        margin-bottom: 30px;
    }

        .pvoil-hero-banner h1.main-title[b-7l3vxjgnyn] {
            font-size: 26px !important;
        }
}
/* /Components/Pages/HoSoCaNhan.razor.rz.scp.css */
/* CSS Trang trí */
.id-card-badge[b-cmgxcz8utx] {
    background-color: #e0f7fa;
    color: #00838f;
    font-size: 1.3rem;
    font-weight: 800;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    border: 1px dashed #00838f;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: inline-block;
}

.modern-card[b-cmgxcz8utx] {
    border-radius: 12px;
    overflow: hidden;
}

.icon-circle-bg[b-cmgxcz8utx] {
    background-color: rgba(255, 255, 255, 0.2);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.icon-box[b-cmgxcz8utx] {
    width: 40px;
    height: 40px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bảng Responsive cho Mobile */
@media (max-width: 767.98px) {
    .responsive-table thead[b-cmgxcz8utx] {
        display: none;
    }

    .responsive-table tbody tr[b-cmgxcz8utx] {
        display: block;
        margin-bottom: 1rem;
        background-color: #fff;
        border: 1px solid #dee2e6;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.04);
        padding: 0.5rem;
    }

    .responsive-table tbody td[b-cmgxcz8utx] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dashed #e9ecef;
        padding: 0.75rem;
        text-align: right;
    }

        .responsive-table tbody td:last-child[b-cmgxcz8utx] {
            border-bottom: none;
        }

        .responsive-table tbody td[b-cmgxcz8utx]::before {
            content: attr(data-label);
            font-weight: 600;
            color: #6c757d;
            text-transform: uppercase;
            font-size: 0.8rem;
            text-align: left;
            flex-basis: 45%;
        }
}
/* Màu nền Gradient cao cấp cho phần Profile */
.profile-banner-pro[b-cmgxcz8utx] {
    background: linear-gradient(135deg, #004d40 0%, #00838f 100%); /* Xanh rêu đậm sang xanh ngọc đậm */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 131, 143, 0.2);
}

/* Hiệu ứng kính (Glassmorphism) cho Icon */
.icon-circle-glass[b-cmgxcz8utx] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Badge CCCD làm giống thẻ cứng */
.id-card-badge-pro[b-cmgxcz8utx] {
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    color: #004d40;
    font-size: 1.3rem;
    font-weight: 900;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    border: 2px solid #b2dfdb;
    letter-spacing: 2px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: inline-block;
    font-family: 'Courier New', Courier, monospace; /* Font chữ phong cách số thẻ */
}
/* Màu nền đậm tuyệt đối, đảm bảo không bao giờ bị chìm chữ */
.profile-banner-pro[b-cmgxcz8utx] {
    background-color: #005662 !important; /* Màu dự phòng an toàn */
    background-image: linear-gradient(135deg, #004d40 0%, #00838f 100%) !important;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Xóa bỏ backdrop-filter: blur để chống lỗi mờ toàn khung */
.icon-circle-glass[b-cmgxcz8utx] {
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.6);
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Badge CCCD nền trắng, chữ đen đậm, viền nổi bật */
.id-card-badge-pro[b-cmgxcz8utx] {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 1.3rem;
    font-weight: 900;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    border: 2px solid #ffc107 !important; /* Viền màu vàng rực để tách biệt hoàn toàn */
    display: inline-block;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* Màu nền đậm tuyệt đối, đảm bảo không bao giờ bị chìm chữ */
.profile-banner-pro[b-cmgxcz8utx] {
    background-color: #005662 !important;
    background-image: linear-gradient(135deg, #004d40 0%, #00838f 100%) !important;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    /* 👇 Thêm đường viền đỏ dày 5px ở cạnh dưới 👇 */
    border-bottom: 5px solid #e53935 !important;
}
/* Màu nền Xanh dương công nghệ với viền đỏ */
.profile-banner-pro[b-cmgxcz8utx] {
    background-color: #1E88E5 !important; /* Màu xanh bạn chọn */
    background-image: linear-gradient(135deg, #1565C0 0%, #1E88E5 100%) !important; /* Gradient 3D nhẹ nhàng */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    /* Viền đỏ ở cạnh dưới */
    border-bottom: 5px solid #e53935 !important;
}
/* /Components/Pages/HoSoPhuongTien.razor.rz.scp.css */
/* CSS trang trí cho Biển số xe và Card */
.license-plate-badge[b-vizvnour3s] {
    background-color: #FFD700; /* Nền vàng cho xe kinh doanh vận tải */
    color: #000;
    font-size: 1.5rem;
    font-weight: 900;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    border: 2px solid #333;
    letter-spacing: 2px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: inline-block;
}

.modern-card[b-vizvnour3s] {
    border-radius: 12px;
    overflow: hidden;
}

.icon-circle-bg[b-vizvnour3s] {
    background-color: rgba(255, 255, 255, 0.2);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
/* Trang trí icon cho Loại giấy tờ */
.icon-box[b-vizvnour3s] {
    width: 40px;
    height: 40px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CSS Tự động biến Bảng thành dạng Card trên Điện thoại (Mobile) */
@media (max-width: 767.98px) {
    .responsive-table thead[b-vizvnour3s] {
        display: none; /* Ẩn thẻ head trên mobile */
    }

    .responsive-table tbody tr[b-vizvnour3s] {
        display: block;
        margin-bottom: 1rem;
        background-color: #fff;
        border: 1px solid #dee2e6;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.04);
        padding: 0.5rem;
    }

    .responsive-table tbody td[b-vizvnour3s] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dashed #e9ecef;
        padding: 0.75rem;
        text-align: right;
    }

        .responsive-table tbody td:last-child[b-vizvnour3s] {
            border-bottom: none;
        }

        /* Tự động sinh tiêu đề cột dựa vào thuộc tính data-label */
        .responsive-table tbody td[b-vizvnour3s]::before {
            content: attr(data-label);
            font-weight: 600;
            color: #6c757d;
            text-transform: uppercase;
            font-size: 0.8rem;
            text-align: left;
            flex-basis: 40%;
        }
}
/* /Components/Pages/IBsMonthCalendarViewer.razor.rz.scp.css */
/* 1. Định nghĩa class grid-7 để ép hàng ngang */
.grid-7[b-syzludp0y6] {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100% !important;
    gap: 0 !important;
}

/* 2. Định nghĩa lưới lịch */
.calendar-grid[b-syzludp0y6] {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100% !important;
}

/* 3. Định nghĩa ô lịch */
.calendar-cell[b-syzludp0y6] {
    display: flex !important;
    flex-direction: column !important;
    border: 0.5px solid #ccc;
    min-height: 60px;
    padding: 5px;
    box-sizing: border-box;
}

/* 4. Định nghĩa Header thứ (CN, T2...) */
.days-header[b-syzludp0y6] {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100% !important;
    background-color: #f8f9fa;
}

.day-label[b-syzludp0y6] {
    text-align: center;
    padding: 8px 0;
    font-weight: bold;
}
.calendar-header[b-syzludp0y6] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important; /* Lệnh quan trọng: Cấm rớt dòng */
    gap: 15px !important; /* Khoảng cách đều giữa các nút và chữ */
    width: fit-content;
    margin: 0 auto 10px auto;
    padding: 5px 15px;
    background: white;
    border-radius: 25px;
    border: 1px solid #E0E0E0;
}

/* 2. Cố định chữ Tháng không bị co ép */
.month-title[b-syzludp0y6] {
    font-size: 18px;
    font-weight: bold;
    color: #1A237E;
    white-space: nowrap !important; /* Chữ "THÁNG" luôn liền mạch */
    margin: 0 !important; /* Bỏ margin cũ gây lệch */
}

/* 3. Cố định ô chọn Năm */
.year-select[b-syzludp0y6] {
    width: 80px;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
    color: #1A237E;
    border: none;
    border-bottom: 2px solid #BDBDBD;
    outline: none;
    text-align: center;
    cursor: pointer;
    background: transparent;
    margin: 0 !important; /* Bỏ margin cũ gây lệch */
}

/* 4. Nút bấm giữ nguyên hình dạng */
.nav-btn[b-syzludp0y6] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #616161;
    flex-shrink: 0; /* Không bị bóp méo khi màn hình nhỏ */
}

    .nav-btn:hover[b-syzludp0y6] {
        background: #E3F2FD;
        color: #1976D2;
    }
/* 1. Đảm bảo ô lịch hỗ trợ dàn lề chuẩn xác */
.calendar-cell[b-syzludp0y6] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Căn giữa theo chiều dọc */
    padding: 6px !important; /* Tạo một chút khoảng cách để chữ không dính sát viền */
    position: relative;
}

/* 2. CHỮ DƯƠNG LỊCH: Căn giữa, to, xanh đen đậm */
.solar-day[b-syzludp0y6] {
    width: 100% !important; /* Chiếm toàn bộ chiều rộng ô để căn giữa chuẩn */
    text-align: center !important; /* Căn giữa */
    font-size: 18px !important; /* Kích thước to */
    font-weight: bold !important; /* In đậm */
    color: #0B192C !important; /* Màu xanh đen đậm (Dark Navy) */
    margin-bottom: 4px !important; /* Đẩy chữ âm lịch xuống một chút */
}

/* 3. CHỮ ÂM LỊCH: Căn lề trái, nhỏ, màu đen */
.lunar-day[b-syzludp0y6] {
    width: 100% !important; /* Chiếm toàn bộ chiều rộng để ép sang trái */
    text-align: left !important; /* Căn lề trái */
    font-size: 13px !important; /* Kích thước nhỏ */
    color: #000000 !important; /* Màu đen tuyền */
    font-weight: 500 !important;
}
/* Cột Chủ nhật (cột đầu tiên bên trái): Đổi màu ngày Dương lịch thành đỏ */
.calendar-cell:nth-child(7n + 1) .solar-day[b-syzludp0y6] {
    color: #D32F2F !important; /* Màu đỏ đậm */
}

/* Nếu bạn muốn ngày Âm lịch của ngày Chủ nhật cũng có màu đỏ nhạt hơn một chút (Tuỳ chọn) */
.calendar-cell:nth-child(7n + 1) .lunar-day[b-syzludp0y6] {
    color: #E57373 !important; /* Tùy chọn: Đỏ nhạt cho ngày âm */
}

/* Đổi luôn màu chữ "CN" trên thanh tiêu đề thành đỏ cho đồng bộ */
.day-label.sun[b-syzludp0y6] {
    color: #D32F2F !important;
}

/* 1. Thanh Status Bar (Khung Âm lịch dưới cùng): Nền xanh dương đậm, viền dưới đỏ */
.details-header[b-syzludp0y6] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #1976D2 !important; /* Xanh dương đậm chuẩn, không bị đen */
  
    padding: 10px 15px !important;
}

/* 2. Đổi chữ dòng Âm Lịch thành màu trắng cho nổi bật trên nền xanh */
.am-lich-title .icon[b-syzludp0y6],
.am-lich-title .value[b-syzludp0y6] {
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: bold;
}

/* 3. Nút "Xem chi tiết / Thu gọn" */
.details-header .toggle-btn[b-syzludp0y6] {
    background-color: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
}

    .details-header .toggle-btn:hover[b-syzludp0y6] {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }

.text-collapse[b-syzludp0y6], .text-expand[b-syzludp0y6], .arrow-up[b-syzludp0y6], .arrow-down[b-syzludp0y6] {
    color: #FFFFFF !important;
}
/* Container của hàng tiêu đề */
.days-header[b-syzludp0y6] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 5px;
    gap: 0;
}

/* Style chung cho mỗi ô (giống Border trong WPF) */
.day-label[b-syzludp0y6] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    margin: 0 4px; /* Margin="4,0" */
    border-radius: 5px; /* CornerRadius="5" */
    font-size: 14px;
    font-weight: bold;
}

    /* Style riêng cho Chủ nhật */
    .day-label.sun[b-syzludp0y6] {
        background-color: #FFF0F2; /* Background="#FFF0F2" */
        border-bottom: 3px solid #EF5350; /* BorderBrush="#EF5350" */
        color: #D32F2F; /* Foreground="#D32F2F" */
        font-weight: 800; /* ExtraBold */
    }

    /* Style riêng cho ngày thường */
    .day-label.normal[b-syzludp0y6] {
        background-color: #F3F8FF; /* Background="#F3F8FF" */
        border-bottom: 3px solid #64B5F6; /* BorderBrush="#64B5F6" */
        color: #1976D2; /* Foreground="#1976D2" */
    }
.footer-copyright[b-syzludp0y6] {
    text-align: center;
    font-size: 13px;
    padding: 20px 0 10px 0;
    margin-top: 20px;
    border-top: 2px solid #E2E8F0; /* Đường kẻ phân cách sắc nét */
    color: #475569; /* Màu xám xanh đậm, rất dễ đọc trên nền trắng */
    font-weight: 600;
}

    .footer-copyright a[b-syzludp0y6] {
        color: #1976D2; /* Màu xanh dương (cùng tông với Header), cực kỳ nổi và chuyên nghiệp */
        text-decoration: none;
        font-weight: 800; /* Chữ rất đậm */
    }

        .footer-copyright a:hover[b-syzludp0y6] {
            text-decoration: underline;
            color: #0D47A1; /* Xanh đậm hơn khi di chuột */
        }

.footer-main[b-syzludp0y6] {
    font-weight: 600;
    margin-bottom: 4px;
}

.footer-sub[b-syzludp0y6] {
    color: #94A3B8;
}

    .footer-sub a[b-syzludp0y6] {
        color: #1976D2;
        font-weight: bold;
        text-decoration: none;
    }

.footer-copyright[b-syzludp0y6] {
    text-align: center;
    font-size: 11px;
    color: #64748B; /* Màu xám xanh cho chữ thường */
    margin-top: 15px;
    padding: 10px 0;
}

    .footer-copyright a[b-syzludp0y6] {
        color: #1976D2; /* Màu xanh thương hiệu */
        font-weight: 600;
        /* GẠCH CHÂN Ở ĐÂY */
        text-decoration: underline;
        /* Tùy chỉnh để gạch chân trông đẹp hơn */
        text-underline-offset: 3px; /* Tạo khoảng cách giữa chữ và gạch chân */
        text-decoration-thickness: 1.5px; /* Độ dày gạch chân */
        transition: 0.2s;
    }

        .footer-copyright a:hover[b-syzludp0y6] {
            color: #0d47a1; /* Đậm hơn một chút khi di chuột vào */
            text-decoration-thickness: 2px; /* Gạch chân đậm lên khi di chuột */
        }
/* --- COMPACT VIEW STYLES --- */
.compact-view[b-syzludp0y6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 5px;
}

/* 1. Header (Xếp hạng & Vị trí) */
.summary-header[b-syzludp0y6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 6px 8px;
    gap: 10px;
}

.rating-badge[b-syzludp0y6] {
    background: #FEF3C7;
    color: #B45309;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.location-tide[b-syzludp0y6] {
    font-size: 12px;
    color: #475569;
    flex: 1;
    text-align: right;
}

    .location-tide .separator[b-syzludp0y6] {
        margin: 0 4px;
        color: #CBD5E1;
    }

.tide-text[b-syzludp0y6] {
    color: #0284C7;
    font-weight: 500;
}

/* 2. Lưới Thiên Văn */
.astro-grid[b-syzludp0y6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.astro-box[b-syzludp0y6] {
    border: 1px solid #E0F2FE;
    background: #F0F9FF;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
}

.astro-title[b-syzludp0y6] {
    font-weight: 700;
    color: #0369A1;
    margin-bottom: 2px;
}

.astro-val[b-syzludp0y6] {
    color: #334155;
    line-height: 1.4;
}

    .astro-val .phase[b-syzludp0y6] {
        color: #0EA5E9;
        font-weight: 600;
    }

/* 3. Thẻ Phong Thủy (Chips) */
.fengshui-chips[b-syzludp0y6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.fs-chip[b-syzludp0y6] {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 4px 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.fs-lbl[b-syzludp0y6] {
    color: #64748B;
    font-weight: 600;
    margin-right: 4px;
}

.fs-val[b-syzludp0y6] {
    color: #0F172A;
    font-weight: 700;
}

.fs-rate[b-syzludp0y6] {
    color: #DC2626;
    font-weight: 700;
    margin-left: 3px;
}

.fs-truncate[b-syzludp0y6] {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}

/* Tiện ích */
.text-truncate[b-syzludp0y6] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-copyright[b-syzludp0y6] {
    text-align: center;
    font-size: 11px;
    margin-top: 8px;
    color: #94A3B8;
}
/* Đảm bảo ô lịch có hiệu ứng chuyển màu mượt mà */
.calendar-cell[b-syzludp0y6] {
    transition: background-color 0.2s ease, transform 0.1s ease;
}

    /* 1. KHI DI CHUỘT VÀO Ô LỊCH (HOVER) */
    .calendar-cell:hover[b-syzludp0y6] {
        cursor: pointer; /* Biến con trỏ thành hình bàn tay */
        background-color: #E0F2FE; /* Đổi màu nền thành xanh nhạt (hoặc màu bạn thích) */
        border-color: #7DD3FC; /* (Tùy chọn) Đổi màu viền cho nổi bật */
    }

    /* 2. CHẶN HIỆU ỨNG Ở CÁC Ô TRỐNG */
    /* Nếu ô đó là ô ẩn (không có ngày), thì không hiện bàn tay và không đổi màu */
    .calendar-cell.hidden:hover[b-syzludp0y6] {
        cursor: default;
        background-color: transparent;
        border-color: transparent;
    }

    /* 3. KHI CLICK CHUỘT XUỐNG (ACTIVE) */
    .calendar-cell:active[b-syzludp0y6] {
        background-color: #BAE6FD; /* Đậm hơn một chút khi bấm nút chuột */
        transform: scale(0.97); /* (Tùy chọn) Hơi lún xuống tạo cảm giác bấm */
    }
/* /Components/Pages/IBsWebDateTimePicker.razor.rz.scp.css */
.ibs-datepicker-container[b-uftxmzcsxv] {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.ibs-input-wrapper[b-uftxmzcsxv] {
    display: flex;
    align-items: center;
    background: white;
    border: 1.5px solid #CBD5E1;
    border-radius: 6px;
    padding: 2px 4px;
    height: 40px;
    box-sizing: border-box;
}

    .ibs-input-wrapper:focus-within[b-uftxmzcsxv] {
        border-color: #1976D2;
        box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
    }

.ibs-date-input[b-uftxmzcsxv] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
    padding: 0 8px;
}

.ibs-toggle-btn[b-uftxmzcsxv] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ibs-toggle-btn:hover[b-uftxmzcsxv] {
        background: #F1F5F9;
    }

.ibs-overlay[b-uftxmzcsxv] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99;
}

.ibs-calendar-popup[b-uftxmzcsxv] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    background: white;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    padding: 10px;
    min-width: 300px;
    animation: fadeIn 0.2s ease-in-out;
}

@@keyframes fadeIn {
    from[b-uftxmzcsxv] {
        opacity: 0;
        transform: translateY(-5px);
    }

    to[b-uftxmzcsxv] {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Pages/LoginModal.razor.rz.scp.css */
/* ================== OVERLAY CHÍNH ================== */
.login-overlay[b-1votjd5gh0] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box; /* Quan trọng: Ngăn padding đẩy tràn màn hình */
}

/* ================== CARD ĐĂNG NHẬP ================== */
.login-card[b-1votjd5gh0] {
    display: flex;
    width: 100%;
    max-width: 800px;
    min-height: 500px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(100, 116, 139, 0.25);
    overflow: hidden;
    margin: auto;
}



/* ================== CỘT TRÁI (BRANDING) ================== */
.brand-panel[b-1votjd5gh0] {
    width: 320px;
    background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    position: relative;
}

    .brand-panel .logo[b-1votjd5gh0] {
        width: 90px;
        margin-bottom: 20px;
    }

.brand-title[b-1votjd5gh0] {
    font-size: 26px;
    font-weight: 800;
    color: #93C5FD;
    margin: 0 0 5px 0;
}

.brand-subtitle[b-1votjd5gh0] {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin: 0 0 25px 0;
}

.brand-line[b-1votjd5gh0] {
    height: 2px;
    width: 50px;
    background-color: #3B82F6;
    margin-bottom: 20px;
}

.brand-text[b-1votjd5gh0] {
    font-size: 14px;
    color: #BFDBFE;
    line-height: 1.6;
}

.bottom-accent-red[b-1votjd5gh0] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background-color: #EF4444;
}

/* ================== CỘT PHẢI (FORM) ================== */
.form-panel[b-1votjd5gh0] {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-title[b-1votjd5gh0] {
    font-size: 26px;
    font-weight: bold;
    color: #0F172A;
    margin: 0 0 5px 0;
}

.form-subtitle[b-1votjd5gh0] {
    font-size: 14px;
    color: #64748B;
    margin-bottom: 10px;
}

.form-group[b-1votjd5gh0] {
    margin-bottom: 15px;
}

    .form-group label[b-1votjd5gh0] {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #475569;
        margin-bottom: 5px;
    }

.form-control[b-1votjd5gh0] {
    width: 100%;
    height: 45px;
    padding: 0 12px;
    font-size: 14px;
    color: #1E293B;
    background-color: #F8FAFC;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.2s;
}

    .form-control[b-1votjd5gh0]::placeholder {
        color: #94A3B8;
    }

    .form-control:focus[b-1votjd5gh0] {
        outline: none;
        border-color: #3B82F6;
        background-color: white;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .form-control:disabled[b-1votjd5gh0] {
        background-color: #E2E8F0;
        cursor: not-allowed;
    }

/* ================== THÔNG BÁO LỖI ================== */
.alert-box[b-1votjd5gh0] {
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 15px;
    font-weight: 500;
}

    .alert-box.error[b-1votjd5gh0] {
        background-color: #FEF2F2;
        color: #EF4444;
        border: 1px solid #FCA5A5;
    }

/* Các tiện ích */
.mt-10[b-1votjd5gh0] {
    margin-top: 10px;
}

.mt-20[b-1votjd5gh0] {
    margin-top: 20px;
}

.text-center[b-1votjd5gh0] {
    text-align: center;
    font-size: 18px;
    letter-spacing: 2px;
}

/* ================== NÚT BẤM ================== */
.btn[b-1votjd5gh0] {
    width: 100%;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

    .btn:active:not(:disabled)[b-1votjd5gh0] {
        transform: scale(0.98);
    }

    .btn:disabled[b-1votjd5gh0] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-primary[b-1votjd5gh0] {
    height: 48px;
    background-color: #2563EB;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-1votjd5gh0] {
        background-color: #1D4ED8;
    }

.btn-secondary[b-1votjd5gh0] {
    height: 45px;
    background-color: #F1F5F9;
    color: #475569;
}

    .btn-secondary:hover:not(:disabled)[b-1votjd5gh0] {
        background-color: #E2E8F0;
        color: #0F172A;
    }

/* ---- Nút Đăng nhập bằng Face ID ---- */
.btn-biometric[b-1votjd5gh0] {
    height: 48px;
    background-color: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-biometric:hover:not(:disabled)[b-1votjd5gh0] {
        background-color: #DBEAFE;
        border-color: #93C5FD;
    }

/* ================== FOOTER ================== */
.form-footer[b-1votjd5gh0] {
    margin-top: auto;
    text-align: center;
    color: #64748B;
    font-size: 14px;
    padding-top: 20px;
}

.btn-link[b-1votjd5gh0] {
    background: transparent;
    color: #2563EB;
    font-weight: bold;
    text-decoration: underline;
    border: none;
    padding: 0;
    cursor: pointer;
}

.login-footer[b-1votjd5gh0] {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-size: 0.8rem;
    z-index: 10000;
}

/* ================== RESPONSIVE (ĐIỆN THOẠI) ================== */
@media (max-width: 768px) {
    .login-overlay[b-1votjd5gh0] {
        display: block; /* QUAN TRỌNG NHẤT: Tắt flexbox để hệ điều hành sinh thanh cuộn dọc */
        padding: 15px;
    }

    .login-card[b-1votjd5gh0] {
        flex-direction: column;
        min-height: auto;
        margin: 0 auto; /* Chỉ căn giữa ngang, nhả căn dọc ra để cuộn từ trên xuống */
    }

    .brand-panel[b-1votjd5gh0] {
        width: 100%;
        padding: 30px;
        text-align: center;
    }

    .brand-line[b-1votjd5gh0] {
        margin: 10px auto;
    }

    .form-panel[b-1votjd5gh0] {
        padding: 30px 20px;
    }
}
/* Container bao bọc Input và Icon */
.password-wrapper[b-1votjd5gh0] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

    /* Đảm bảo Input chiếm hết chiều rộng và dành khoảng trống cho con mắt */
    .password-wrapper .form-control[b-1votjd5gh0] {
        width: 100%;
        padding-right: 45px;
        box-sizing: border-box;
    }

/* Nút bấm con mắt */
.eye-button[b-1votjd5gh0] {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 45px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    outline: none;
    z-index: 5;
}

    .eye-button:hover[b-1votjd5gh0] {
        color: #2563EB;
    }
/* /Components/Pages/OrderTracking.razor.rz.scp.css */
/* Nền xanh PVOIL */
.tracking-container[b-mzr8d4oicm] {
    background-color: #f4f7f6;
    min-height: 100vh;
}

/* Khối hiển thị số đang gọi */
.processing-card[b-mzr8d4oicm] {
    background: linear-gradient(135deg, #004d99 0%, #002d5e 100%);
    border-radius: 16px;
}

/* CHỮ SỐ THÔNG MINH:
   Tối thiểu 4rem (trên điện thoại rất nhỏ)
   Tự co giãn theo chiều ngang màn hình (12vw)
   Tối đa 7rem (trên màn hình máy tính) */
.processing-number[b-mzr8d4oicm] {
    font-size: clamp(4rem, 12vw, 7rem);
    line-height: 1;
    text-shadow: 0px 4px 15px rgba(0,0,0,0.4);
    letter-spacing: -2px;
}

/* Nút bấm và Input to, dễ chạm trên điện thoại */
.form-control-lg[b-mzr8d4oicm] {
    border-radius: 10px;
    border: 2px solid #e0e0e0;
    font-size: 1.25rem;
    letter-spacing: 2px;
}

    .form-control-lg:focus[b-mzr8d4oicm] {
        border-color: #004d99;
        box-shadow: none;
    }

.btn-lg[b-mzr8d4oicm] {
    border-radius: 10px;
}

/* Tùy chỉnh font size nhỏ cho nhãn trên mobile */
.fs-7[b-mzr8d4oicm] {
    font-size: 0.85rem;
}

/* Định dạng danh sách kết quả */
.list-group-item[b-mzr8d4oicm] {
    border-color: #f0f0f0;
}
/* /Components/Pages/QuanLyDongHo.razor.rz.scp.css */
body[b-wog10bnmae] {
}
/* /Components/Pages/QuanLyDuLieuXuatHang.razor.rz.scp.css */
.erp-desktop-container[b-8baavm1zkt] {
    height: 100vh;
}

.data-grid-container[b-8baavm1zkt] {
    max-height: 500px;
    overflow-y: auto;
}

.erp-toolbar[b-8baavm1zkt] {
    z-index: 1000;
}
/* /Components/Pages/SignupModal.razor.rz.scp.css */
/* ================== OVERLAY CHÍNH ================== */
.register-overlay[b-rju066bvqy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box; /* Bắt buộc để padding không đẩy tràn màn hình */
}

/* ================== CARD ĐĂNG KÝ ================== */
.register-card[b-rju066bvqy] {
    display: flex;
    width: 100%;
    max-width: 800px;
    min-height: 500px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative;
    margin: auto;
    animation: slideUp-b-rju066bvqy 0.3s ease-out;
}


@keyframes slideUp-b-rju066bvqy {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================== CỘT TRÁI (BRANDING) ================== */
.brand-panel[b-rju066bvqy] {
    width: 320px;
    background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

.logo[b-rju066bvqy] {
    width: 100px;
    margin-bottom: 20px;
}

.brand-title[b-rju066bvqy] {
    font-size: 28px;
    font-weight: bold;
    color: #93C5FD;
    margin: 0;
    letter-spacing: 2px;
}

.brand-subtitle[b-rju066bvqy] {
    font-size: 24px;
    font-weight: 300;
    color: white;
    margin: 0 0 20px 0;
}

.divider[b-rju066bvqy] {
    border: none;
    border-top: 2px solid #3B82F6;
    width: 50px;
    margin: 20px auto;
}

.brand-text[b-rju066bvqy] {
    font-size: 14px;
    color: #BFDBFE;
    line-height: 1.6;
}

/* ================== CỘT PHẢI (FORM) ================== */
.form-panel[b-rju066bvqy] {
    flex: 1;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background-color: #F8FAFC;
}

.form-title[b-rju066bvqy] {
    font-size: 26px;
    font-weight: bold;
    color: #0F172A;
    margin: 0 0 5px 0;
}

.form-subtitle[b-rju066bvqy] {
    font-size: 14px;
    color: #64748B;
    margin-bottom: 20px;
}

/* ================== THÔNG BÁO (ALERTS) ================== */
.alert-box[b-rju066bvqy] {
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

    .alert-box.error[b-rju066bvqy] {
        background-color: #FEF2F2;
        color: #DC2626;
        border: 1px solid #FCA5A5;
    }

    .alert-box.success[b-rju066bvqy] {
        background-color: #ECFDF5;
        color: #059669;
        border: 1px solid #6EE7B7;
    }

/* ================== INPUT FIELDS ================== */
.form-group[b-rju066bvqy] {
    margin-bottom: 15px;
}

    .form-group label[b-rju066bvqy] {
        display: block;
        color: #475569;
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 600;
    }

.form-control[b-rju066bvqy] {
    width: 100%;
    height: 45px;
    padding: 0 12px;
    font-size: 14px;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.2s;
    background-color: #FFFFFF;
}

    .form-control:focus[b-rju066bvqy] {
        outline: none;
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .form-control:disabled[b-rju066bvqy] {
        background-color: #E2E8F0;
        color: #64748B;
        cursor: not-allowed;
    }

/* ================== NÚT BẤM ================== */
.btn[b-rju066bvqy] {
    width: 100%;
    height: 45px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn:active:not(:disabled)[b-rju066bvqy] {
        transform: scale(0.98);
    }

    .btn:disabled[b-rju066bvqy] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Nút Xanh lá (Tạo tài khoản) */
.btn-primary[b-rju066bvqy] {
    background-color: #10B981;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-rju066bvqy] {
        background-color: #059669;
    }

/* Nút Xanh dương (Quét CCCD) */
.btn-secondary[b-rju066bvqy] {
    background-color: #4F46E5;
    color: white;
}

    .btn-secondary:hover:not(:disabled)[b-rju066bvqy] {
        background-color: #4338CA;
    }

/* Nút Hủy / Xám */
.btn-cancel[b-rju066bvqy] {
    background-color: #F1F5F9;
    color: #475569;
}

    .btn-cancel:hover:not(:disabled)[b-rju066bvqy] {
        background-color: #E2E8F0;
        color: #0F172A;
    }

/* Link */
.btn-link[b-rju066bvqy] {
    background: transparent;
    border: none;
    color: #2563EB;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
}

    .btn-link:hover[b-rju066bvqy] {
        text-decoration: underline;
    }

/* ================== MÀN HÌNH SETUP BIOMETRIC ================== */
.biometric-setup-container[b-rju066bvqy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    animation: slideUp-b-rju066bvqy 0.4s ease-out;
}

.icon-circle[b-rju066bvqy] {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #BFDBFE;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2);
    margin: 0 auto 15px auto;
}

.icon-faceid[b-rju066bvqy] {
    font-size: 45px;
}

/* Các tiện ích (Utilities) */
.mt-10[b-rju066bvqy] {
    margin-top: 10px;
}

.mt-20[b-rju066bvqy] {
    margin-top: 20px;
}

.text-center[b-rju066bvqy] {
    text-align: center;
}

/* ================== FOOTER ================== */
.form-footer[b-rju066bvqy] {
    margin-top: auto;
    padding-top: 20px;
    text-align: center;
    color: #64748B;
    font-size: 14px;
}

.bottom-accent[b-rju066bvqy] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background-color: #10B981; /* Nét đứt màu xanh lá */
}

/* ================== RESPONSIVE (MOBILE) ================== */
@media (max-width: 768px) {
    .register-overlay[b-rju066bvqy] {
        display: block; /* Tắt flexbox để hệ điều hành sinh thanh cuộn dọc */
        padding: 15px;
    }

    .register-card[b-rju066bvqy] {
        flex-direction: column;
        min-height: auto;
        border-radius: 12px;
        margin: 0 auto; /* Chỉ căn giữa ngang, thả tự do chiều dọc để cuộn */
    }

    .brand-panel[b-rju066bvqy] {
        width: 100%;
        padding: 30px 20px;
    }

    .divider[b-rju066bvqy] {
        margin: 15px auto;
    }

    .form-panel[b-rju066bvqy] {
        padding: 30px 20px;
    }
}
/* Container bao bọc Input và Icon */
.password-wrapper[b-rju066bvqy] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

    /* Đảm bảo Input chiếm hết chiều rộng và dành khoảng trống cho con mắt */
    .password-wrapper .form-control[b-rju066bvqy] {
        width: 100%;
        padding-right: 45px; /* Dành khoảng trống bên phải */
        box-sizing: border-box; /* Cực kỳ quan trọng để không bị vỡ khung */
    }

/* Nút con mắt định vị tuyệt đối bên trong */
.eye-button[b-rju066bvqy] {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 45px; /* Chiều rộng bằng đúng khoảng padding-right của input */
    background: transparent;
    border: none;
    cursor: pointer;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    outline: none;
}

    .eye-button:hover[b-rju066bvqy] {
        color: #2563EB;
    }
/* /Components/Pages/TankTruckForm.razor.rz.scp.css */
/* Tạo khoảng cách trên dưới thay vì dùng inline style */
.tank-form-container[b-m6c9j2fliv] {
    margin-top: 5vh;
    margin-bottom: 5vh;
}

/* Hiệu ứng khi focus vào ô nhập liệu để UI hiện đại hơn */
.form-control:focus[b-m6c9j2fliv] {
    border-color: #0b5ed7;
    box-shadow: 0 0 0 0.25rem rgba(11, 94, 215, 0.15);
}

/* Đổi màu background nhẹ cho các ô chỉ định chiều cao H và t để dễ phân biệt */
.h-input[b-m6c9j2fliv] {
    background-color: #f8fbff;
}

    .h-input:focus[b-m6c9j2fliv] {
        background-color: #ffffff;
    }

.t-input[b-m6c9j2fliv] {
    background-color: #fffaf8;
}

    .t-input:focus[b-m6c9j2fliv] {
        background-color: #ffffff;
    }

/* Custom cho thẻ select */
.form-select:focus[b-m6c9j2fliv] {
    border-color: #0b5ed7;
    box-shadow: 0 0 0 0.25rem rgba(11, 94, 215, 0.15);
}
/* /Components/Pages/TheoDoiVanDon.razor.rz.scp.css */
/* Thêm vào thẻ style của bạn */
.flash-update[b-zt71xnmr22] {
    animation: flash-b-zt71xnmr22 1s;
}

@keyframes flash-b-zt71xnmr22 {
    0% {
        color: #fff;
    }

    50% {
        color: #ffeb3b;
    }
    /* Chuyển sang màu vàng nhạt khi cập nhật */
    100% {
        color: #fff;
    }
}
/* /Components/Pages/ThongTinCaNhan.razor.rz.scp.css */
/* ÉP FORM ĐỘNG CỦA BẠN TRỞ NÊN THÂN THIỆN VỚI ĐIỆN THOẠI (MOBILE RESPONSIVE) */
@media (max-width: 768px) {
    .dynamic-mobile-wrapper table[b-b8ehqa6lta],
    .dynamic-mobile-wrapper tbody[b-b8ehqa6lta],
    .dynamic-mobile-wrapper tr[b-b8ehqa6lta],
    .dynamic-mobile-wrapper td[b-b8ehqa6lta] {
        display: block !important;
        width: 100% !important;
    }

    .dynamic-mobile-wrapper td[b-b8ehqa6lta] {
        border: none !important;
        padding: 0 0 15px 0 !important; /* Tạo khoảng cách giữa các ô khi xếp dọc */
    }
    /* Phóng to nút bấm trên mobile */
    .btn-mobile-full[b-b8ehqa6lta] {
        width: 100%;
        padding: 14px 0;
        font-size: 16px;
    }
}
/* /Components/Pages/TransportUnitDashboard.razor.rz.scp.css */
/* Khung bọc toàn màn hình Desktop */
.erp-desktop-container[b-c0cnycnxgx] {
    height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Thanh công cụ thông minh */
.erp-toolbar[b-c0cnycnxgx] {
    height: 50px;
    z-index: 1020;
    background: #fdfdfd !important;
}

.v-separator[b-c0cnycnxgx] {
    width: 1px;
    height: 20px;
    background-color: #dee2e6;
    margin: 0 4px;
}

/* Định dạng trạng thái Đóng/Mở của ô nhập liệu Form */
.form-inactive[b-c0cnycnxgx] {
    opacity: 0.85;
    border-left: 4px solid #6c757d !important;
    pointer-events: none; /* Khóa không cho gõ khi ở chế độ chỉ Xem */
    background-color: #f8f9fa;
}

.form-inactive[b-c0cnycnxgx] {
    opacity: 0.85;
    border-left: 4px solid #6c757d !important;
    /* pointer-events: none;  <-- XÓA DÒNG NÀY ĐI */
    background-color: #f8f9fa;
}

/* Khu vực lưới hiển thị dữ liệu */
.data-grid-container[b-c0cnycnxgx] {
    max-height: 450px;
    overflow-y: auto;
}

/* Thanh trạng thái dưới cùng */
.erp-statusbar[b-c0cnycnxgx] {
    height: 28px;
    letter-spacing: 0.2px;
}

/* Tinh chỉnh nút bấm cho mượt */
.btn-sm[b-c0cnycnxgx] {
    padding: 0.25rem 0.6rem;
    font-weight: 500;
}
/* /Components/Pages/TwoFactorSetupModal.razor.rz.scp.css */
/* Lớp phủ màn hình */
.tfa-overlay[b-8xnueotrjp] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    padding: 15px !important;
}

/* Khung nội dung */
.tfa-card[b-8xnueotrjp] {
    background-color: white !important;
    border-radius: 8px !important;
    position: relative !important;
    width: 100% !important;
    max-width: 450px !important; /* Thu hẹp form lại một chút */
    padding: 20px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* KHÓA CỠ CHỮ CƠ BẢN BẰNG PIXEL */
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important; /* Chữ thường mặc định là 13px */
    color: #333 !important;
}

/* Nút đóng */
.btn-close-corner[b-8xnueotrjp] {
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    background: none !important;
    border: none !important;
    font-size: 18px !important; /* Khóa 18px */
    cursor: pointer !important;
    color: #666 !important;
}

/* Tiêu đề */
.tfa-title[b-8xnueotrjp] {
    font-size: 18px !important; /* Khóa 18px */
    font-weight: bold !important;
    margin: 10px 0 5px 0 !important;
    color: #0d6efd !important;
}

.tfa-subtitle[b-8xnueotrjp] {
    font-size: 13px !important; /* Khóa 13px */
    color: #6c757d !important;
    margin-bottom: 15px !important;
}

/* Khối QR */
.qr-container[b-8xnueotrjp] {
    text-align: center !important;
    margin: 10px 0 !important;
}

.qr-image[b-8xnueotrjp] {
    max-width: 160px !important; /* Ép mã QR nhỏ lại */
    height: auto !important;
}

/* Hướng dẫn */
.instruction-box[b-8xnueotrjp] {
    background-color: #f8f9fa !important;
    padding: 10px 15px !important;
    border-radius: 6px !important;
    margin-bottom: 15px !important;
}

    .instruction-box h4[b-8xnueotrjp] {
        font-size: 14px !important; /* Khóa 14px */
        font-weight: bold !important;
        margin-bottom: 8px !important;
    }

    .instruction-box ol[b-8xnueotrjp] {
        font-size: 13px !important; /* Khóa 13px */
        padding-left: 20px !important;
        margin: 0 !important;
        line-height: 1.5 !important;
    }

    .instruction-box li[b-8xnueotrjp] {
        margin-bottom: 4px !important;
    }

/* Ô nhập mã */
.totp-input[b-8xnueotrjp] {
    text-align: center !important;
    font-size: 20px !important; /* Chữ số to vừa đủ nhìn: 20px */
    letter-spacing: 8px !important;
    padding: 8px !important;
    width: 100% !important;
    max-width: 200px !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    display: block !important;
    margin: 0 auto !important;
    font-weight: bold !important;
}

/* Nút bấm */
.action-buttons[b-8xnueotrjp] {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-top: 15px !important;
}

    .action-buttons .btn[b-8xnueotrjp] {
        font-size: 13px !important; /* Khóa 13px */
        padding: 8px 16px !important;
        font-weight: bold !important;
    }

.action-buttons[b-8xnueotrjp] {
    display: flex !important;
    gap: 15px !important; /* Tăng khoảng cách 2 nút */
    justify-content: center !important;
    margin-top: 25px !important;
}

/* Thiết kế form dáng chung cho cả 2 nút */
.action-buttons .btn[b-8xnueotrjp] {
    font-size: 13px !important;
    padding: 10px 24px !important; /* Nút dài và thanh thoát hơn */
    font-weight: 600 !important; /* Chữ in đậm vừa phải */
    border-radius: 8px !important; /* Bo góc tròn hiện đại */
    border: none !important; /* Bỏ viền đen xấu xí mặc định */
    cursor: pointer !important;
    transition: all 0.3s ease !important; /* Hiệu ứng mượt mà khi di chuột */
    text-transform: uppercase !important; /* Ép chữ in hoa cho sang */
    letter-spacing: 0.5px !important;
}

/* 1. Trang điểm cho nút HỦY (Màu xám nhạt, chữ tối) */
.action-buttons .btn-cancel[b-8xnueotrjp] {
    background-color: #f1f3f5 !important;
    color: #495057 !important;
}

    /* Hiệu ứng khi lia chuột vào nút HỦY */
    .action-buttons .btn-cancel:hover:not(:disabled)[b-8xnueotrjp] {
        background-color: #e2e6ea !important;
        color: #212529 !important;
    }

/* 2. Trang điểm cho nút XÁC NHẬN (Màu xanh dương nổi bật) */
.action-buttons .btn-confirm[b-8xnueotrjp] {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3) !important; /* Đổ bóng xanh nhẹ nhàng */
}

    /* Hiệu ứng nảy lên và sáng hơn khi lia chuột vào nút XÁC NHẬN */
    .action-buttons .btn-confirm:hover:not(:disabled)[b-8xnueotrjp] {
        background-color: #0b5ed7 !important;
        box-shadow: 0 6px 15px rgba(13, 110, 253, 0.4) !important;
        transform: translateY(-2px) !important; /* Nảy nhẹ lên trên */
    }

/* 3. Trạng thái Đang loading... (Mờ đi và cấm click) */
.action-buttons .btn:disabled[b-8xnueotrjp] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}
/* ==========================================
   STYLE CHO HEADER (NỀN XANH, VIỀN ĐỎ, CĂN GIỮA)
   ========================================== */

.header-container[b-8xnueotrjp] {
    /* Dùng margin âm để kéo header tràn ra sát mép card, bù lại cái padding 20px của .tfa-card */
    margin: -20px -20px 20px -20px !important;
}

.tfa-header[b-8xnueotrjp] {
    background-color: #0d6efd !important; /* Xanh đậm */
    border-bottom: 4px solid #dc3545 !important; /* Viền đỏ dưới */
    padding: 30px 20px !important;
    text-align: center !important; /* Ép toàn bộ căn giữa */
    border-top-left-radius: 8px !important; /* Khớp với góc bo của card */
    border-top-right-radius: 8px !important;
}

    /* Ép màu và kích thước cho icon */
    .tfa-header .header-icon[b-8xnueotrjp],
    .tfa-header .header-icon i[b-8xnueotrjp] {
        font-size: 3rem !important;
        margin-bottom: 10px !important;
        color: #ffffff !important;
        display: block !important;
    }

    /* Ép màu trắng cho tiêu đề, ghi đè lại màu xanh ở tuốt phía trên */
    .tfa-header .tfa-title[b-8xnueotrjp] {
        color: #ffffff !important;
        margin: 0 !important;
        font-size: 1.5rem !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        text-align: center !important;
    }

    /* Chỉnh phụ đề */
    .tfa-header .tfa-subtitle[b-8xnueotrjp] {
        color: #ffffff !important;
        margin: 8px 0 0 0 !important;
        font-size: 0.9rem !important;
        text-align: center !important;
    }
/* /Components/Pages/UploadGPLX.razor.rz.scp.css */
body[b-xjmidc3lgd] {
}
/* /Components/Pages/VehiclePermitForm.razor.rz.scp.css */
body[b-mn87p1y5xr] {
}
/* /Components/Pages/WarehouseRegistrationForm.razor.rz.scp.css */
/* Container giới hạn độ rộng form cho dễ nhìn trên màn hình lớn */
.registration-container[b-cbw30r7g29] {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.form-title[b-cbw30r7g29] {
    color: #2c3e50;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    text-align: center;
}

.form-card[b-cbw30r7g29] {
    margin-bottom: 20px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.section-header[b-cbw30r7g29] {
    background-color: #e9ecef;
    font-weight: bold;
    color: #495057;
    font-size: 1.1rem;
}

.form-label[b-cbw30r7g29] {
    font-weight: 600;
    color: #343a40;
}

.btn-scan[b-cbw30r7g29] {
    background-color: #17a2b8;
    color: white;
    font-weight: bold;
    transition: all 0.3s ease;
}

    .btn-scan:hover[b-cbw30r7g29] {
        background-color: #138496;
        color: white;
        transform: translateY(-1px);
    }