body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    font-size: 13px;
    overflow: hidden;
}

.cham {
    list-style-type: disc
}

.fontsmall {
    font-size: smaller;
}

.form-group {
    margin-top: -10px;
    margin-bottom: 10px;
}

.input-group-text, .btn {
    padding: 5px 5px !important;
}

.form-control {
    font-size: 13px;
    height: auto
}

.input-group-text {
    font-size: 13px;
}

.form-actions {
    position: absolute;
    width: 100%;
}

* {
    box-sizing: border-box;
}

h1 {
    font-size: 20px;
    margin-bottom: 5px;
    text-align: center; /* Căn giữa tiêu đề */
}


.logo-container {
    text-align: center;
    margin-bottom: 15px;
}

.mtop {
    margin-top: -15px;
}

.logo {
    max-width: 100px;
    height: auto;
}
/* CSS cho chế độ desktop */
.container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Giúp căn giữa nội dung theo chiều cao màn hình */
}

.form-container, .invoice-container {
    flex: 1 1 100%;
    max-width: 600px;
    margin: 10px;
}

#divInfo {
    overflow-y: auto; /* Thêm cuộn dọc nếu nội dung quá dài */
}

.invoice-container img {
    max-width: 100%;
    height: auto;
}

/* CSS cho phần hiển thị hóa đơn */
.invoice-container {
    flex: 1;
    text-align: center;
}
/*phần thông tin hóa đơn*/
.form-container, .invoice-container {
    flex: 1;
    background-color: white;
    padding: 10px 20px 40px 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /*min-width:100px;*/
}

.easy-autocomplete {
    margin-top: -5px
}

.ui-datepicker {
    z-index: 1000 !important;
    font-family: Arial, sans-serif;
    font-size: 13px;
    border-radius: 8px;
    box-shadow: rgb(0 0 0 / 35%) 0px 1px 4px;
}

.form-container {
    flex: 1;
    margin-right: 20px;
    margin-top: 10px;
}

.invoice-container {
    flex: 1;
    text-align: center;
}


label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

input, button {
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

button {
    background-color: #E1173E;
    color: white;
    cursor: pointer;
}

    button:hover {
        background-color: rgb(158, 40, 48);
    }

#frmInfo {
    position: relative;
    margin-bottom: 14px;
    width: 100%;
}

    #frmInfo input:not([type="checkbox"]):not([type="radio"]) {
        border: 1px solid #aaa3a3; /* Viền mặc định */
        padding: 5px;
        border-radius: 4px;
        margin-bottom: 5px;
        width: 100%;
    }

/*phần thông tin hóa đơn*/

.Infor {
    background: #f0efef6b;
    display: block;
    width: 100%;
    height: auto;
    padding: 0px 10px 0px 10px;
    border: 1px solid #E1173E;
    border-radius: 8px;
    margin-bottom: 15px;
    z-index: -1;
    margin-top: 10px
}
/*phần thông tin Công ty*/
.labelInfor {
    position: relative;
    background: #ffffff;
    top: 0px;
    left: 10px;
    transform: translateY(-58%);
    display: inline-block;
    height: auto;
    border-bottom: none;
    padding-right: 10px;
    padding-left: 10px;
    padding: 0px 4px;
    color: #E1173E;
    font-family: helvetica, arial, sans-serif;
    font-size: 17px;
}
/*nút check công ty nước ngoài*/
.CheckUnit {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

#divPC {
    background-color: white !important
}

/*Tổng tiền thanh toán*/
#TotalAmount {
    margin-bottom: 5px;
    display: block;
    width: 100%;
    border: 0px solid #ccc;
    height: 32px;
    border-radius: 4px;
}

#VND {
    position: relative;
    top: -42px;
    right: -98%;
    font-weight: bold;
}

/*Style radio*/

.radio-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Mặc định 3 cột */
    gap: 10px; /* Khoảng cách giữa các radio buttons */
    justify-items: left; /* Căn giữa mỗi cột */
    align-items: center;
}

/* Media Queries cho responsive */
@media (max-width: 768px) {
    .radio-group {
        grid-template-columns: repeat(2, 1fr); /* Ở màn hình nhỏ hơn, chia thành 2 cột */
    }
}

/* Style ẩn cho radio button */
input[type="radio"].form-check-input {
    display: none;
}

/* Tạo style cho radio button */
input[type="radio"] + .form-check-label {
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    text-align: center;
}

    input[type="radio"] + .form-check-label::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 2px solid #000;
        background-color: white;
    }

/* Style khi radio được chọn */
input[type="radio"]:checked + .form-check-label::before {
    background-color: white;
    border: 2px solid red;
}

input[type="radio"]:checked + .form-check-label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #E1173E;
}


/* Style ẩn cho radio button */
input[type="radio"].form-check-input {
    display: none;
}

/* Tạo style cho radio button */
input[type="radio"] + .form-check-label {
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    text-align: center;
}

    input[type="radio"] + .form-check-label::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 2px solid #000;
        background-color: white;
    }

/* Style khi radio được chọn */
/* Ẩn radio mặc định */
input[type="radio"] {
    display: none;
}

    /* Thiết kế cho label khi radio được chọn */
    input[type="radio"]:checked + .form-check-label::before {
        background-color: white;
        border: 2px solid red;
    }

    input[type="radio"]:checked + .form-check-label::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #E1173E;
    }

/* Thiết kế thẻ label (vòng tròn radio tùy chỉnh) */
.form-check-label::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    background-color: #fff;
}

/* Đảm bảo nhãn không xuống dòng */
.form-check-label {
    font-weight: normal;
}

#radio-pc .form-check {
    display: flex;
    align-items: center;
    padding-left: 0px;
}

.form-check-input {
    margin-top: 3px;
}
/*Phần taxcode*/
.taxCode-container {
    margin-bottom: 5px; /* Khoảng cách giữa các input */
    display: block;
    width: 100%;
    border: 0px solid #ccc;
    height: 36px;
    border-radius: 4px;
}

    .taxCode-container:focus-within {
        outline: none;
    }

/*Nút kiểm track màu đỏ*/
#btnGetUnitInfo {
    background-color: #E1173E;
    color: white;
    font-size: 13px;
}

#buttonTaxCode:hover {
    background-color: rgb(158, 40, 48);
}

#btnGetUnitInfo:focus {
    border: 0;
    outline: none;
}
/*nút submit*/
#btnSend {
    background-color: #E1173E; /* Màu nền của nút */
    color: white; /* Màu chữ */
    padding: 10px 20px; /* Kích thước padding */
    border: none; /* Không viền */
    border-radius: 5px; /* Bo góc */
    cursor: pointer; /* Con trỏ dạng pointer */
    font-size: 16px; /* Kích thước chữ */
    width: 100%;
    margin-top: -5px;
}

#submit:hover {
    background-color: rgb(158, 40, 48); /* Màu nền khi hover */
}

.NoteForUser {
    display: block;
    width: 100%;
    align-items: center;
    font-size: 12px;
    text-align: center;
    margin-bottom: 10px;
}

.popover-body {
    padding: 0.1rem 0.5rem;
    color: #b22830;
}

.invoice-container img {
    max-height: 100vh;
}

/*kịch bản ẩn các cột*/

/*input.disabled {
    pointer-events: none;*/ /* Vô hiệu hóa các sự kiện chuột trên input */
    /*cursor: not-allowed;*/ /* Thay đổi con trỏ chuột để biểu thị input bị vô hiệu hóa */
/*}*/

.nocopy {
    user-select: none; /* Ngăn chặn chọn văn bản */
    -webkit-user-select: none; /* Cho các trình duyệt WebKit (Chrome, Safari) */
    -moz-user-select: none; /* Cho Firefox */
    -ms-user-select: none; /* Cho Internet Explorer/Edge */
}

.input-group-append {
    display: block
}

.txtShopDate {
    border: 1px solid #aaa3a3 !important;
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    color: black;
}

    .txtShopDate:focus {
        color: black;
        border: 1px solid black !important;
        /*border-right: none !important;*/
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        box-shadow: none;
    }

#lblShopDate {
    border: 1px solid #aaa3a3;
    background-color: #ffff;
    color: #787a7e !important;
}


.come {
    position: fixed;
    bottom: 10px;
    width: 100%; /* Đảm bảo phần tử sử dụng toàn bộ chiều rộng của màn hình */
    max-width: 100%; /* Giới hạn chiều rộng tối đa */
    font-size: 12px;
    color: #E1173E;
    font-weight: 500;
    display: none;
    opacity: 0.7;
    text-align: center; /* Căn giữa nội dung */
    /*font*/
}





@keyframes colorBlink {
    0% {
        color: black;
    }

    50% {
        color: red;
    }

    100% {
        color: black;
    }
}

.blink {
    animation: colorBlink 1s infinite;
}

    .blink svg {
        fill: currentColor; /* Sử dụng màu hiện tại cho SVG */
    }

.none {
    display: none;
}

.overlay {
    position: fixed; /* Đảm bảo lớp này ở trên cùng */
    top: 0;
    left: 0;
    width: 100vw; /* Chiếm toàn bộ chiều rộng */
    height: 100vh; /* Chiếm toàn bộ chiều cao */
    background: rgb(0 0 0 / 67%); /* Hiệu ứng mờ nhẹ */
    z-index: 10; /* Đảm bảo nó nổi lên trên */
    transition: opacity 0.5s ease; /* Hiệu ứng chuyển đổi mờ */
    opacity: 1;
}

.overlay2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 91vh;
    flex-direction: column;
}

.swipe-message {
    color: white;
    font-size: 16px;
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.2); /* Hiệu ứng nền nhẹ cho chữ */
    border-radius: 10px;
    transition: transform 0.5s ease;
}

.hidden {
    opacity: 0;
}

.swipe-message.swiped {
    transform: translateX(100vw); /* Vuốt sang phải ngoài màn hình */
}

#hand {
    width: 100px;
    height: auto;
    filter: invert(100%);
    position: relative; /* Cần thiết để di chuyển ảnh */
    animation: moveRight 2s infinite; /* Tên animation, thời gian, và số lần lặp */
}

.hand2 {
    transform: scaleX(-1);
    animation: moveLeft 2s infinite !important;
}


@keyframes moveRight {
    0% {
        left: 0;
        opacity: 0; /* Biến mất */
    }

    50% {
        left: 120px;
        opacity: 0; /* Biến mất */
    }
    /* Di chuyển sang phải 100px */
    100% {
        left: 0;
        opacity: 1; /* Độ trong suốt ban đầu */
    }
}

@keyframes moveLeft {
    0% {
        left: 0;
        opacity: 1; /* Biến mất */
    }

    50% {
        left: 120px;
        opacity: 0; /* Biến mất */
    }
    /* Di chuyển sang phải 100px */
    100% {
        left: 0;
        opacity: 0; /* Độ trong suốt ban đầu */
    }
}

#AlertSend {
    /*background-color: rgb(120, 40, 48);*/
    padding: 10px 0px;
    /*border: 1px solid #E1173E;*/
    border-radius: 8px;
}

.sentRed strong {
    font-size
    color: #E1173E;
}

#sendTitle {
    font-size: 16px;
    color: #E1173E;
    line-height: 1.3;
}
    #sendTitle i {
        font-size: 14px;
        color: black;
    }

    .btnSend2 {
        margin-right: 12px;
    }

.titleSend {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 8px 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}



.girdSend {
    font-size: 13px;
    display: grid;
    grid-template-columns: 2.4fr 0.28fr 7.5fr; /* Cột giữa rộng gấp đôi hai cột bên */
    margin-bottom: 5px;
}
    .girdSend i {
        font-size: 11px;
        color: black;
    }
.girdSendRow{
    line-height:13px;
}
.item {
    align-self: center; /* Căn giữa theo trục dọc */
    padding: 2px 0px 3px 2px;
}
    .item strong {
        font-weight: 600;
    }
.centered {
    justify-self: center; /* Căn giữa theo trục ngang */
}
.modal-body{
    padding: 16px 16px 16px 10px;
}
.itemHigh {
    overflow-wrap: anywhere;
    max-width: 350px;
    background-color: rgb(255 188 193 / 55%);
    display: flex; /* Sử dụng Flexbox để căn giữa */
    align-items: center; /* Căn giữa theo trục dọc */
    justify-content: left; /* Căn giữa theo trục ngang */
    height: 100%; /* Đảm bảo chiều cao của phần tử */
    text-align: left; /* Căn giữa chữ nếu cần */
    border-radius: 5px;
}
    .itemHigh strong {
        display: block; /* Đảm bảo thẻ <strong> là một block để dễ dàng căn giữa */
        line-height: 14px;
    }

@media screen and (max-height: 870px) {
    .come {
        font-size: 16px !important;
    }
}
/* Cho các màn hình điện thoại thông thường */
@media screen and (max-height: 630px) {
    .come {
        font-size: 14px !important;
    }
}


/* Cho các màn hình điện thoại nhỏ */
@media screen and (max-height: 400px) {
    .come {
        font-size: 12px !important;
    }
}
/* CSS cho chế độ mobile (màn hình nhỏ) */
@media screen and (max-width: 768px) {
    .form-container, .invoice-container {
        max-width: 100%;
        margin: 12px !important;
        padding-bottom: 15px !important;
    }

    #frmInfo input::placeholder {
        font-size: 12px !important;
    }

    .ui-datepicker .ui-datepicker-title select {
        font-size: 0.8em;
        margin: 1px 0;
    }

    .parent-container {
        overflow: hidden;
        position: relative;
    }

    .container2 {
        display: flex;
        width: 200%;
        transition: transform 0.3s ease-in-out;
        transform: translateX(0);
        overflow: hidden;
        align-items: normal;
    }

    .form-container,
    .invoice-container {
        width: 50%;
        flex-shrink: 0;
        transition: opacity 0.3s ease;
    }


        .form-container:not(.active) {
            opacity: 0;
            pointer-events: none;
        }


        .invoice-container:not(.active) {
            opacity: 0;
            pointer-events: none;
        }

        .invoice-container.active {
            opacity: 1;
            pointer-events: auto;
        }

        .form-container.active {
            opacity: 1;
            pointer-events: auto;
        }
    .girdSend {
        font-size: 13px;
        display: grid;
        grid-template-columns: 2.4fr 0.25fr 7.5fr; /* Cột giữa rộng gấp đôi hai cột bên */
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 400px) {
    .girdSend {
        font-size: 13px;
        display: grid;
        grid-template-columns: 2.4fr 0.35fr 6fr; /* Cột giữa rộng gấp đôi hai cột bên */
        margin-bottom: 5px;
    }
}