@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');


:root {
    --colorText: #000000;
    --white: #faf0e6;
}

.w20x20 {
    width: 20px;
    height: 20px;
}

.border-dotted-top {
    border-top: 1px dotted #ccc;
}

.border-dotted-bottom {
    border-bottom: 1px dotted #ccc;
}

.border-dotted-left {
    border-left: 1px dotted #ccc;
}

.border-dotted-right {
    border-right: 1px dotted #ccc;
}

.border-solid-top {
    border-top: 1px solid #ccc;
}

.border-solid-bottom {
    border-bottom: 1px solid #ccc;
}

.border-solid-left {
    border-left: 1px solid #ccc;
}

.border-solid-right {
    border-right: 1px solid #ccc;
}

.ErrorRed {
    /*border: 2px solid red;*/
    box-shadow: 0 0 5px 0 #000000;
    animation: ErrorRed-animation 1s infinite;
}

.ErrorOrange {
    /*border: 2px solid orange;*/
    box-shadow: 0 0 5px 0 #000000;
    animation: ErrorOrangen-animation 1s infinite;
}

.ErrorYellow {
    /*border: 2px solid yellow;*/
    box-shadow: 0 0 5px 0 #000000;
    animation: ErrorYellow-animation 1s infinite;
}

.leaflet-touch .leaflet-bar a {
    width: 26px !important;
    height: 26px !important;
    line-height: 25px !important;
}

/*format css zoom input zoom out*/
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
    background-size: 20px 20px !important;
    width: 26px !important;
    height: 26px !important;
    color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.leaflet-control-zoom-in {
    background-image: url('/OSM/IMG/iconzoomin.png') !important;
}

.leaflet-control-zoom-out {
    background-image: url('/OSM/IMG/iconzoomout.png') !important;
}

    .leaflet-control-zoom-in:after,
    .leaflet-control-zoom-out:after {
        content: '';
    }

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: unset !important;
}

.leaflet-control-measure .leaflet-control-measure-toggle, .leaflet-control-measure .leaflet-control-measure-toggle:hover {
    background-image: url('/OSM/IMG/iconruler.png') !important;
}

@keyframes ErrorRed-animation {
    0% {
        box-shadow: 0 0 10px 0 #fff; /* Giá trị của blur-radius lớn hơn */
    }

    100% {
        box-shadow: 0 0 20px 10px red; /* Giá trị của blur-radius lớn hơn */
    }
}

@keyframes ErrorOrangen-animation {
    0% {
        box-shadow: 0 0 10px 0 #fff; /* Giá trị của blur-radius lớn hơn */
    }

    100% {
        box-shadow: 0 0 20px 10px orange; /* Giá trị của blur-radius lớn hơn */
    }
}

@keyframes ErrorYellow-animation {
    0% {
        box-shadow: 0 0 10px 0 #fff; /* Giá trị của blur-radius lớn hơn */
    }

    100% {
        box-shadow: 0 0 20px 10px yellow; /* Giá trị của blur-radius lớn hơn */
    }
}

/*giao diện PC lơn*/
@media (max-width: 1912px) {
    #updateDataCuaRealTime {
        height: 65vh !important;
    }

    #UpdateDataRealTimeAuThuyen {
        height: 55vh !important;
    }
}


/*giao diện lap*/
@media (max-width: 1440px) {
    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_TrangThaiCua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_IMGAndCong .ddc_thongtincongcua_GiuaIMG img {
        height: 3em !important;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childLeft .ddc_childLeft_text, #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childRight .ddc_childLeft_text {
        font-size: 0.8em !important;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua {
        font-size: 0.8em !important;
    }

    #ddcForms_FormThongTinTongQuanCua .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box button {
        padding: 5px !important;
        font-size: 0.8em !important;
    }

    #ddcForms_FormThongTinTongQuanCua .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"]:has(:not(.btn)),
    #ddcForms_FormThongTinTongQuanAuTuyen .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"]:has(:not(.btn)) {
        /*padding: 5px 2px 2px 5px !important;*/
    }

    .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"] label {
        font-size: 10px !important;
        padding: 0px 6px !important;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childMucNuocAuThuyen {
        left: 36% !important;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_titleInMapAuThuyen .ddc_titleInMapAuThuyenHL,
    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_titleInMapAuThuyen .ddc_titleInMapAuThuyenTL {
        top: 42% !important;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_titleInMapAuThuyen .ddc_titleInMapAuThuyenTen {
        left: 35% !important;
        top: 35% !important;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_row {
        width: 190px !important;
        height: 45px !important;
    }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_row.ddc_boxInfo_childMucNuocAuThuyen {
            width: 295px !important;
        }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_box_tinhieuMoAuThuyen_Trai_Duoi,
    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_box_tinhieuMoAuThuyen_Phai_Duoi {
        bottom: 0.5% !important;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_box_tinhieuMoAuThuyen_Trai_Duoi {
        left: 14.5% !important;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_box_tinhieuMoAuThuyen_Phai_Duoi {
        right: 14.3% !important;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_box_tinhieuDongAuThuyen_Trai_Tren,
    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_box_tinhieuDongAuThuyen_Phai_Tren {
        top: 1.5% !important;
    }

    aside .fixed-profile {
        display: none !important;
    }

    .ddc_thongtincongcua .ddc_thongtincongcua_Trai .ddc_boxThongTinCongCua,
    .ddc_thongtincongcua .ddc_thongtincongcua_Phai .ddc_boxThongTinCongCua {
        width: 170px !important;
        padding: 0px !important;
    }

        .ddc_thongtincongcua .ddc_thongtincongcua_Trai .ddc_boxThongTinCongCua .ddc_boxThongTinCongCua_Phai,
        .ddc_thongtincongcua .ddc_thongtincongcua_Phai .ddc_boxThongTinCongCua .ddc_boxThongTinCongCua_Phai,
        .ddc_thongtincongcua .ddc_thongtincongcua_Trai .ddc_boxThongTinCongCua .ddc_boxThongTinCongCua_Trai,
        .ddc_thongtincongcua .ddc_thongtincongcua_Phai .ddc_boxThongTinCongCua .ddc_boxThongTinCongCua_Trai {
            padding: 2px !important;
            font-size: 11px !important;
        }

    .form-control {
        padding: 4px 4px;
    }

    .btn {
        --bs-btn-padding-x: 9px;
        --bs-btn-padding-y: 4px;
    }

    #updateDataCuaRealTime {
        height: 50vh !important;
    }
}

@media (max-width: 1265px) {
    .btn {
        --bs-btn-padding-x: 7px !important;
        --bs-btn-padding-y: 4px !important;
    }

    #UpdateDataRealTimeAuThuyen {
        height: 30vh !important;
    }
}

/*giao diện máy tính bản và điện thoại*/
@media (max-width: 768px) {
    #ddcForms_ThongTinTongHop #ThongTinTongHopIndex .ddc_body__tabHTVH .imgHTVH {
        width: 50px !important;
        height: 30px !important;
    }
}

#map {
    cursor: pointer;
}

#map {
    /*height: calc(100vh - 100px);*/ /*có footer*/
    height: calc(100vh - 75px); /*không có footer*/
    z-index: 1;
}

#resetPadMap .row > * {
    /*padding-right: 0 !important;*/
    /*padding-left: 0 !important;*/
}

#resetPadMap {
    /*padding: 0 !important;*/
}

html[data-layout=horizontal] .body-wrapper > #resetPadMap.container-fluid {
    padding: 0 !important;
}

    html[data-layout=horizontal] .body-wrapper > #resetPadMap.container-fluid > .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

.popupCustom_infoDetails {
    overflow: auto;
    /*height: 380px;*/
}

.popupCustom_infoDetails_Table {
    color: #323232;
    border: none;
    border-collapse: collapse;
    line-height: 1.3em;
    width: 100%;
}

    .popupCustom_infoDetails_Table tr:nth-child(odd) {
        background-color: rgba(76, 76, 76, .1);
    }

    .popupCustom_infoDetails_Table tr:nth-child(even) {
        background-color: rgba(76, 76, 76, .02);
    }

    .popupCustom_infoDetails_Table tr th {
        width: 50%;
        text-align: left;
        border-right: 3px solid rgba(0, 0, 0, .05);
    }

    .popupCustom_infoDetails_Table tr th {
        padding: 0.5em 0.7em;
        word-break: break-word;
        vertical-align: top;
        font-size: 12px;
        font-weight: 400;
    }

    .popupCustom_infoDetails_Table tr td {
        padding: 0.5em 0.7em;
        word-break: break-word;
        vertical-align: top;
        font-size: 12px;
        font-weight: 400;
    }

.popupCustom_title_btn {
    border: none;
    padding: 10px;
    cursor: pointer;
}

.leaflet-popup-content {
    width: 25rem;
}

.leaflet-popup-close-button {
    font-size: 1.5rem !important;
    color: var(--white) !important;
}

.leaflet-container a.leaflet-popup-close-button {
    position: absolute;
    top: 2px;
    right: 10px;
}
/* css scroll bên trong form info */
/* width */

.popupCustom_infoDetails::-webkit-scrollbar {
    width: 10px;
}
/* Track */

.popupCustom_infoDetails::-webkit-scrollbar-track {
    background: #f1f1f1;
}
/* Handle */

.popupCustom_infoDetails::-webkit-scrollbar-thumb {
    background: #888;
}
    /* Handle on hover */

    .popupCustom_infoDetails::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
/* css scroll bên trong form info */
/* style popup active thông báo trạng thái */

.DDC_custom-popup-active {
    margin: 4px !important;
}

.leaflet-popup-content {
    margin: 6px;
}
/* custom legend */

.legend-btn-container {
    position: absolute;
    bottom: 90px;
    right: 14px;
    z-index: 1000;
    display: inline-block;
    width: 70px;
}

.legend-btn {
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 5px 10px;
    cursor: pointer;
}

.legend-container {
    display: none;
    position: absolute;
    bottom: 2.5rem;
    /* Điều chỉnh khoảng cách từ top */
    right: 1.5rem;
    /*border: 1px solid #ccc;*/
    /*border-radius: 5px;*/
    padding: 0;
    z-index: 1000;
    /* Đảm bảo legend hiển thị trên các lớp khác trên bản đồ */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    animation-duration: 0.5s;
    width: 200px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    background: #fff;
    border-radius: 5px;
    background-color: rgb(255 255 255);
}

    .legend-container.legend-extended {
        display: block;
        /*animation-name: slideInDown;*/
    }

    .legend-container.legend-hidden {
        display: block;
        animation-name: slideOutDown;
    }

    .legend-container .legendHeadDDC .textHead {
        background-color: #2e6392c7;
        color: #fff;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
        padding: 3px 0px;
        border-radius: 5px 5px 0 0;
    }

    .legend-container .legendBodyDDC {
    }

        .legend-container .legendBodyDDC #ddc_legendLayer {
            padding: 5px 10px;
        }

.legend-item {
    margin-bottom: 5px;
}

.legend-color {
    display: inline-block;
    /*width: 20px;
    height: 20px;*/
    margin-right: 5px;
    vertical-align: middle;
}

.legend-label {
    vertical-align: middle;
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

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

@keyframes slideOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}
/*color-profile legend*/
.ddc_color_MBCT {
    background-color: rgba(255, 235, 190, 1);
    border: 1px solid rgba(110, 110, 110, 1);
}

.ddc_color_MBTT {
    background-color: rgba(255, 235, 190, 0.5);
    border: 1px solid rgba(110, 110, 110, 0.5);
}

.ddc_color_BMVN {
    background-color: rgba(190, 232, 255, 1);
    border: 1px solid rgba(156, 156, 156, 1);
}

.leaflet-control-search {
    /*border: 2px solid rgba(0, 0, 0, 0.2);*/
    border: unset;
    background-clip: padding-box;
    margin-left: 14px !important;
}

.leaflet-touch .leaflet-control-layers-toggle {
    width: 30px;
    height: 30px;
}

.leaflet-control-layers-toggle {
    background-image: url(../IMG/layers.png);
    width: 30px;
    height: 36px;
}

.btn-customDN {
    padding: 3px;
    background: #fff;
    width: 26px;
    max-width: 26px;
    min-width: 26px;
    height: 26px;
    max-height: 26px;
    min-height: 26px;
    border-radius: 2px;
    cursor: pointer;
}

    .btn-customDN i {
        color: black;
        margin: 21%;
    }

    .btn-customDN img {
        width: 100%;
    }


.seach-container {
    width: 250px;
    position: fixed;
    top: 80px;
    right: -350px;
    z-index: 999;
    border: 1px solid #ccc;
    border-radius: 2px;
    /*padding: 10px;*/
    z-index: 1000;
    background: #fff;
    transition: all 0.3s;
    overflow-y: scroll;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

    /* .seach-container.active {
        display: block;
        animation-name: slideInDown;
    }*/

    .layer-container.active, .seach-container.active, .legend-container.active {
        right: 45px;
        z-index: 9999;
        overflow: hidden;
        font-size: 13px !important;
    }

#ddc_LayerrBar .table > :not(caption) > * > * {
    padding: 10px 10px !important;
}

.layer-container {
    width: 350px;
    position: fixed;
    top: 80px;
    right: -350px;
    height: calc(100% - 100px);
    z-index: 999;
    background: #fff;
    color: #000;
    transition: all 0.3s;
    overflow-y: scroll;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

.legend-container {
    width: 250px;
    position: fixed;
    /*top: 80px;*/
    right: -350px;
    z-index: 999;
    border: 1px solid #ccc;
    border-radius: 2px;
    /*padding: 10px;*/
    z-index: 1000;
    background: #fff;
    transition: all 0.3s;
    overflow-y: scroll;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

.leaflet-container .leaflet-control-search {
    float: right !important;
}
/*custom popup leaflet*/
.leaflet-popup-content-wrapper {
    padding: 1px !important;
    text-align: left !important;
    border-radius: 0px !important;
}

.popupCustom_title {
    /*padding: 5px 5px;*/
    background: #0074d9;
    color: #fff;
    font-family: 'Roboto-Bold', Arial, Helvetica, sans-serif;
}

    .popupCustom_title h4 {
        padding: 5px 5px;
        background: #0074d9;
        color: #fff;
        font-family: 'Roboto-Bold', Arial, Helvetica, sans-serif;
        margin: 0;
        font-size: 15px;
        font-weight: bold;
    }

.leaflet-popup-content {
    margin: 0px !important;
}

.leaflet-right .leaflet-control {
    margin-right: 20px !important;
}
/*zindex popup lên trên bản đồ*/
.popupwindow_container {
    z-index: 9;
}
/*custome form ddc*/

.popupwindow_content {
    overflow: hidden !important;
}

[id^="ddcForms_"] .ddcForm_body .tab-pane {
    height: calc(100vh - 16rem);
    overflow: auto;
}

    [id^="ddcForms_"] .ddcForm_body .tab-pane::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }

    [id^="ddcForms_"] .ddcForm_body .tab-pane::-webkit-scrollbar {
        width: 6px;
        background-color: #F5F5F5;
    }

    [id^="ddcForms_"] .ddcForm_body .tab-pane::-webkit-scrollbar-thumb {
        background-color: #000000;
    }

[id^="ddcForms_"] .ddcForm_body [class^="ddc_form_Tab_"] .ddc_form_BgInTab {
    position: relative;
    width: 230px;
    height: 32px;
    position: relative;
    font-family: 'Oswald-Bold';
    font-weight: 700;
    background: #DCEDF5 !important;
}

    [id^="ddcForms_"] .ddcForm_body [class^="ddc_form_Tab_"] .ddc_form_BgInTab:before {
        content: "";
        position: absolute;
        right: -16px;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 16px solid #DCEDF5;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
    }

    [id^="ddcForms_"] .ddcForm_body [class^="ddc_form_Tab_"] .ddc_form_BgInTab .ddc_form_TileInTab {
        color: #0479EC;
        font-weight: 700;
        padding: 10px 8px !important;
        font-family: 'Oswald', sans-serif;
    }

.ddc_form_TileInTab {
    color: black;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
}

[id^="ddcForms_"] .ddcForm_body [class^="ddc_form_Tab_"] .ddc_body__tabQT,
[id^="ddcForms_"] .ddcForm_body [class^="ddc_form_Tab_"] .ddc_body__tabVH {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 3px;
    padding: 3px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

[id^="ddcForms_"] .ddcForm_body [class^="ddc_form_Tab_"] .ddc_body__tabVH {
    display: none;
}

    [id^="ddcForms_"] .ddcForm_body [class^="ddc_form_Tab_"] .ddc_body__tabQT.active,
    [id^="ddcForms_"] .ddcForm_body [class^="ddc_form_Tab_"] .ddc_body__tabVH.active {
        display: block;
    }

[id^="ddcForms_"] .ddcForm_body .ddc_form_Tab_QT .ddc_form__Row_Application h6 {
    text-align: center;
    text-transform: uppercase;
}

[id^="ddcForms_"] .ddcForm_body .ddc_form_Tab_QT .ddc_form__Row_Application span.ddc_Info_NumQT {
    color: #469C46;
    font-weight: 700;
    font-size: 1.75rem;
}

[id^="ddcForms_"] .ddcForm_body .ddc_form_Tab_QT .ddc_form__Row_Application div.ddc_Info_TextQT {
    font-style: italic;
    font-size: 12px !important;
    font-weight: 700;
}

[id^="ddcForms_"] .ddcForm_body .ddc_form_Tab_QT .ddc_form__Row_Application .row .ddc_gachTrai {
    border-right: 1px dashed #ccc;
}

.ddcForm_head_title {
    font-weight: 700;
    background: #F1EFEF;
}

.ddcForm_body_title {
    height: 32px; /* Chiều cao của phần tử chứa văn bản */
    line-height: 30px; /* Cùng chiều cao với phần tử chứa văn bản */
    text-align: center; /* Căn giữa văn bản theo chiều ngang */
}

/*customecolor*/
/*#00AEFF*/
.thead-color_custome tr th {
    background: #00AEFF;
    color: white;
}

.ddcForm_footer {
}

.ddcForm_body_table table tbody tr td:first-child {
    cursor: pointer;
}

[id^="ddcForms_"] .card .card-body {
    padding: 5px;
}
/*[id^="ddcForms_"] .card .card-body .tab-content {
    border-bottom: 1px solid red;
}*/

[id^="ddcForms_"] .card .nav.nav-tabs {
    border-radius: 0;
    background: #F5F5F5;
}

[id^="ddcForms_"] .card .nav-tabs .nav-link {
    border-radius: 0 !important;
    padding: 5px;
}

    [id^="ddcForms_"] .card .nav-tabs .nav-link.active {
        background: #0074d9;
        color: white;
    }

#ddc_AllMatBang .ddc_AnhMatBang {
    position: relative;
    width: 100%; /* Có thể thay đổi kích thước tùy ý */
    height: auto; /* Đảm bảo chiều cao tự động điều chỉnh */
}

    #ddc_AllMatBang .ddc_AnhMatBang .background-image {
        width: 100%; /* Đảm bảo ảnh nền bao phủ phần tử cha */
        height: auto; /* Đảm bảo chiều cao tự động điều chỉnh */
    }

    /*#ddc_AllMatBang .ddc_AnhMatBang .DongMoCua-container {
        position: absolute;#ddc_AllMatBang .ddc_AnhMatBang .DongMoCua-container_Tren img
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }*/
    #ddc_AllMatBang .ddc_AnhMatBang .DongMoCua-container_Tren, #ddc_AllMatBang .ddc_AnhMatBang .DongMoCua-container_Duoi {
        height: 0;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .DongMoCua-container_Tren {
        position: absolute;
        width: 8.2%;
        background-color: initial !important;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .DongMoCua-container_Duoi {
        position: absolute;
        width: 8.2%;
        background-color: initial !important;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .DongMoCua-container_Tren img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        /*transform: rotate(180deg);*/
    }

    #ddc_AllMatBang .ddc_AnhMatBang .DongMoCua-container_Duoi img {
        position: absolute;
        right: 0;
        width: 100%;
        /*transform: rotate(180deg);*/
    }

    #ddc_AllMatBang .ddc_AnhMatBang .Camera-container {
        /*position: absolute;*/
    }

        #ddc_AllMatBang .ddc_AnhMatBang .Camera-container [class^="Camera-container-"] {
            height: 36px;
            width: 36px;
            background: #0074d9;
            border-radius: 50%;
            text-align: center;
            display: flex; /* Sử dụng flexbox để căn giữa */
            justify-content: center; /* Căn giữa theo chiều ngang */
            align-items: center; /* Căn giữa theo chiều dọc */
        }

            #ddc_AllMatBang .ddc_AnhMatBang .Camera-container [class^="Camera-container-"] i {
                color: white;
            }

        #ddc_AllMatBang .ddc_AnhMatBang .Camera-container .Camera-container-Tren1 {
            position: absolute;
            top: 43%;
            left: 80%;
        }

            #ddc_AllMatBang .ddc_AnhMatBang .Camera-container .Camera-container-Tren1 i {
                /*transform: rotate(45deg);*/
            }

        #ddc_AllMatBang .ddc_AnhMatBang .Camera-container .Camera-container-Tren2 {
            position: absolute;
            top: 25%;
            left: 23.5%;
        }

            #ddc_AllMatBang .ddc_AnhMatBang .Camera-container .Camera-container-Tren2 i {
                /*transform: rotate(45deg);*/
            }

        #ddc_AllMatBang .ddc_AnhMatBang .Camera-container .Camera-container-DuoiTrai1 {
            position: absolute;
            top: 54%;
            left: 58%;
        }

            #ddc_AllMatBang .ddc_AnhMatBang .Camera-container .Camera-container-DuoiTrai1 i {
                /*transform: rotate(-135deg);*/
            }

        #ddc_AllMatBang .ddc_AnhMatBang .Camera-container .Camera-container-DuoiPhai1 {
            position: absolute;
            top: 94%;
            left: 70%;
        }

            #ddc_AllMatBang .ddc_AnhMatBang .Camera-container .Camera-container-DuoiPhai1 i {
                /*transform: rotate(180deg);*/
            }

        #ddc_AllMatBang .ddc_AnhMatBang .Camera-container .Camera-container-DuoiTrai2 {
            position: absolute;
            top: 54%;
            left: 27.5%;
        }

            #ddc_AllMatBang .ddc_AnhMatBang .Camera-container .Camera-container-DuoiTrai2 i {
                /*transform: rotate(-45deg);*/
            }

        #ddc_AllMatBang .ddc_AnhMatBang .Camera-container .Camera-container-DuoiTrai3 {
            position: absolute;
            top: 1%;
            left: 70%;
        }

            #ddc_AllMatBang .ddc_AnhMatBang .Camera-container .Camera-container-DuoiTrai3 i {
                /*transform: rotate(-45deg);*/
            }
    /*#ddc_AllMatBang .ddc_AnhMatBang .DongMoCua {
        position: absolute;*/ /* Đặt vị trí tuyệt đối cho các biểu tượng */
    /*}*/

    /*#ddc_AllMatBang .ddc_AnhMatBang .DongMoCuaTren {
        top: 10rem;
        left: 38.4rem;
    }*/

    /*#ddc_AllMatBang .ddc_AnhMatBang .DongMoCuaDuoi {
        bottom: 10rem;*/ /* Điều chỉnh vị trí của biểu tượng 1 theo ý muốn */
    /*left: 38.4rem;
    }*/

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_Box__TinHieu {
        position: absolute;
        border-radius: 1px;
        background: #000000c9;
        width: 22px;
        height: 36px;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_box_tinhieuMo_Tren {
        top: 4%;
        right: 31%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_box_tinhieuDong_Tren {
        top: 25%;
        right: 40%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_box_tinhieuMo_Duoi {
        top: 94%;
        right: 32%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_box_tinhieuDong_Duoi {
        top: 78%;
        right: 40%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_Box__TinHieu .ddc_box-tinhieu {
        width: 6px;
        height: 6px;
    }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_Box__TinHieu .ddc_box-tinhieu.ddc_TinHieuDo {
            background: red;
        }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_Box__TinHieu .ddc_box-tinhieu.ddc_TinHieuXam {
            background-color: rgba(255, 255, 255, 0.5);
        }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_Box__TinHieu .ddc_box-tinhieu.ddc_TinHieuTrong {
            background-color: rgb(255 255 255 / 0%);
        }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_Box__TinHieu .ddc_box-tinhieu.ddc_TinHieuXanh {
            background: green !important;
        }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_Box__TinHieu .ddc_box-tinhieu.ddc_TinHieuXanhLaCay {
            background-color: #4cff00 !important
        }

[class^="Camera-container-"] {
    cursor: pointer;
}

.popupCustom .ddctramquantrac table {
    display: flex;
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center;
}

    .popupCustom .ddctramquantrac table td {
        padding: 0.25rem 0.25rem;
        text-align: center;
    }

    .popupCustom .ddctramquantrac table .ddc_btnSettingInfo {
        cursor: pointer;
    }

#ddc_AllMatBang .ddc_AnhMatBang .ddc_titleInMap {
}

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_titleInMap .ddc_titleInMapHL {
        position: absolute;
        top: 4%;
        left: 39%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_titleInMap .ddc_titleInMapTL {
        position: absolute;
        bottom: 4%;
        left: 41%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_titleInMap .ddc_titleInMapHL, #ddc_AllMatBang .ddc_AnhMatBang .ddc_titleInMap .ddc_titleInMapTL {
        font-size: 20px;
        text-transform: uppercase;
        font-weight: bold
    }

.ddc_TextDuoiDataTable1 {
    font-size: 10px;
}

#ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo {
    cursor: pointer;
    width: 13.1%;
}

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap {
        position: absolute;
        width: 13.02%; /*// ssss*/
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_row {
        display: grid;
        grid-template-columns: 50% 50%;
        padding: 1px;
        /* width: 200px;
        min-width: 200px;
        max-width: 200px;*/
        background: #fff;
        text-align: center;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_TrangThaiCua {
        /* width: 200px;
        min-width: 200px;
        max-width: 200px;*/
        width: 100%; /*// ssss*/
        padding: 2px
    }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_TrangThaiCua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_IMGAndCong {
            width: 100%;
            /*height: 355px;*/
            position: relative;
            overflow: hidden;
            margin: auto;
            background-color: #E2E2E2;
        }

            #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_TrangThaiCua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_IMGAndCong .ddc_thongtincongcua_GiuaCong_SDMB {
                position: absolute;
                padding-left: 7.8%;
                padding-right: 7.3%;
                width: 100%;
                transition: all 1s ease;
                /* transform: translate(0, 100%); */
                top: 0%;
                z-index: 999;
                /*margin-top: 4px;*/
                height: 93%;
            }

                #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_TrangThaiCua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_IMGAndCong .ddc_thongtincongcua_GiuaCong_SDMB .ddc_thongtincongcua_CanhCong {
                    background: rgb(182, 182, 182);
                    height: 100%;
                    border: 1px solid rgb(147 143 143);
                }

            #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_TrangThaiCua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_IMGAndCong .ddc_thongtincongcua_GiuaIMG img {
                width: 100%;
                height: 80px;
            }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childDoMoTL {
        top: 20%;
        left: 46%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childDoManTL {
        top: 10%;
        left: 30%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childMucNuocTL {
        top: 10%;
        left: 46%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childCuaSo1 {
        top: 35%;
        left: 46%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childCuaSo2 {
        top: 35%;
        left: 30%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childAuThuyen {
        top: 44%;
        right: 22%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childDoMoHL {
        bottom: 20%;
        left: 46%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childDoManHL {
        bottom: 10%;
        left: 30%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childMucNuocHL {
        bottom: 10%;
        left: 46%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childLeft {
        background-color: #0074d9;
        color: var(--white);
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childRight {
        background-color: #E2E2E2;
    }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childLeft .ddc_childLeft_text,
        #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childRight .ddc_childLeft_text {
            font-size: 14px;
            font-weight: 600;
        }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childLeft .ddc_childLeft_time,
        #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childRight .ddc_childLeft_time {
            font-size: 10px;
        }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_CuaRow {
        display: grid;
        grid-template-columns: 10% 90%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua {
        text-transform: uppercase;
        padding: 1px;
        /*width: 200px;*/
        width: 100%; /*// ssss*/
        background: #fff;
        text-align: center;
        font-weight: 700;
    }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua .ddc_BoxInfo_tinHieuCuaDiv {
            width: 15px;
            height: 15px;
            border-radius: 50%;
        }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua.ddc_BoxInfo_tinHieuCua_TiChot .ddc_BoxInfo_tinHieuCuaDiv {
            background: #00C2FF;
        }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua.ddc_BoxInfo_tinHieuCua_DongHet .ddc_BoxInfo_tinHieuCuaDiv {
            background: #FF711E;
        }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua.ddc_BoxInfo_tinHieuCua_LoiKet .ddc_BoxInfo_tinHieuCuaDiv {
            background: #00C2FF;
        }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua.ddc_BoxInfo_tinHieuCua_MoCua .ddc_BoxInfo_tinHieuCuaDiv {
            background: #FF711E;
        }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua.ddc_BoxInfo_tinHieuCua_DongCua .ddc_BoxInfo_tinHieuCuaDiv {
            background: #FF711E;
        }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua.ddc_BoxInfo_tinHieuCua_TiChot span:last-child {
            color: #00C2FF !important;
        }

        #ddc_AllMatBang .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua.ddc_BoxInfo_tinHieuCua_DongHet span:last-child {
            color: #FF711E !important;
        }

#ddc_AllMatBang .ddc_AnhMatBang .ddc_titleInXa {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
}

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_titleInXa .ddc_titleXaTrai {
        position: absolute;
        bottom: 10%;
        left: 4%;
    }

    #ddc_AllMatBang .ddc_AnhMatBang .ddc_titleInXa .ddc_titleXaPhai {
        position: absolute;
        top: 10%;
        right: 4%;
    }

#ddc_AllMatBang .ddc_AnhMatBang .ddcBox_TenCotTru .ddcBox_TenCotTru_Title {
    position: absolute;
    background: white;
    border-radius: 30%;
    padding: 4px;
    color: black;
    font-weight: 800;
}

.ddc_thongtincongcua, .ddc_Trangthaicongcua {
    background-color: whitesmoke;
}

    .ddc_thongtincongcua .ddc_thongtincongcua_Trai {
    }

    .ddc_thongtincongcua .ddc_thongtincongcua_Giua {
        position: relative;
    }

        .ddc_thongtincongcua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_title {
            text-align: center;
            font-weight: 700;
            text-transform: uppercase;
        }

        .ddc_thongtincongcua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_IMGAndCong {
            /*width: 650px;
            height: 355px;
            position: relative;
            overflow: hidden;
            margin: auto;*/
            width: 100%;
            height: 155px;
            position: relative;
            overflow: hidden;
            margin: auto;
        }

            .ddc_thongtincongcua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_IMGAndCong .ddc_thongtincongcua_GiuaCong,
            .ddc_thongtincongcua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_IMGAndCong [class^="ddc_thongtincongcua_GiuaCong_"] {
                position: absolute;
                padding-left: 7.7%;
                padding-right: 7.7%;
                width: 100%;
                transition: all 1s ease;
                /*transform: translate(0, 100%);*/
                top: 0%;
                z-index: 999;
                /* margin-top: 4px; */
                height: 100%;
            }

                .ddc_thongtincongcua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_IMGAndCong .ddc_thongtincongcua_GiuaCong .ddc_thongtincongcua_CanhCong,
                .ddc_thongtincongcua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_IMGAndCong [class^="ddc_thongtincongcua_GiuaCong_"] .ddc_thongtincongcua_CanhCong {
                    background: rgb(182, 182, 182);
                    height: 100%;
                    border: 1px solid;
                }

            .ddc_thongtincongcua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_IMGAndCong .ddc_thongtincongcua_GiuaIMG {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
            }

                .ddc_thongtincongcua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_IMGAndCong .ddc_thongtincongcua_GiuaIMG img {
                    width: 100%;
                    height: 100%;
                }


    .ddc_thongtincongcua .ddc_thongtincongcua_Phai {
    }

        .ddc_thongtincongcua .ddc_thongtincongcua_Trai .ddc_boxThongTinCongCua,
        .ddc_thongtincongcua .ddc_thongtincongcua_Phai .ddc_boxThongTinCongCua {
            display: grid;
            grid-template-columns: 50% 50%;
            padding: 3px;
            width: 200px;
            background: #fff;
            text-align: center;
        }

            .ddc_thongtincongcua .ddc_thongtincongcua_Trai .ddc_boxThongTinCongCua .ddc_boxThongTinCongCua_Trai,
            .ddc_thongtincongcua .ddc_thongtincongcua_Phai .ddc_boxThongTinCongCua .ddc_boxThongTinCongCua_Trai {
                background-color: #0074d9;
                color: white;
                font-size: 13px;
                font-weight: 500;
                padding: 8px 3px;
            }

            .ddc_thongtincongcua .ddc_thongtincongcua_Trai .ddc_boxThongTinCongCua .ddc_boxThongTinCongCua_Phai,
            .ddc_thongtincongcua .ddc_thongtincongcua_Phai .ddc_boxThongTinCongCua .ddc_boxThongTinCongCua_Phai {
                background-color: #E2E2E2;
                color: black;
                font-size: 13px;
                font-weight: 500;
                padding: 6px;
            }

                .ddc_thongtincongcua .ddc_thongtincongcua_Trai .ddc_boxThongTinCongCua .ddc_boxThongTinCongCua_Phai div:first-child,
                .ddc_thongtincongcua .ddc_thongtincongcua_Phai .ddc_boxThongTinCongCua .ddc_boxThongTinCongCua_Phai div:first-child {
                    font-weight: bold;
                }

                .ddc_thongtincongcua .ddc_thongtincongcua_Trai .ddc_boxThongTinCongCua .ddc_boxThongTinCongCua_Phai div:last-child,
                .ddc_thongtincongcua .ddc_thongtincongcua_Phai .ddc_boxThongTinCongCua .ddc_boxThongTinCongCua_Phai div:last-child {
                    font-size: 10px !important;
                }

    .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua {
        /*background: #fff;*/
    }

        .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_boxTrangThaiCongCua_Card {
            background: #fff;
        }

        .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_head .ddc_Trangthaicongcua_head_title {
            background: #0074d9;
            padding: 6px;
            color: white;
            text-transform: uppercase;
            font-weight: bold;
        }

        .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body {
            padding-bottom: 1px;
        }

            .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box {
            }

                .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box fieldset.ddc_scheduler-border {
                    border: 1px groove #91C5FF !important;
                    padding: 10px !important;
                    margin: 20px !important;
                    position: relative;
                }

                    .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box fieldset.ddc_scheduler-border legend.ddc_scheduler-border {
                        color: black !important;
                        font-size: 12px !important;
                        padding: 0 5px !important;
                        position: absolute !important;
                        top: -10px;
                        left: 10px;
                        background: white !important; /* Để đảm bảo văn bản nằm trên đường viền */
                        font-weight: bold;
                        text-transform: uppercase;
                    }

legend {
    width: unset;
}

.ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"] {
    padding: 10px;
}

    .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"] .ddc_paddingCircel {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"] .ddc_paddingRectangle {
        display: inline-block;
        width: 36px;
        height: 17px;
        /*margin-right: 10px;*/
    }


    .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"] .ddc_tinHieuTrong {
        border: 1px solid #bbb5b5d9;
    }

    .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"] .ddc_tinHieuXanh {
        background-color: #0094ff;
    }

    .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"] .ddc_tinHieuTrong {
        border: 1px solid #bbb5b5d9;
    }

    .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"] .ddc_TinHieuXanhLaCay {
        background-color: #4cff00 !important;
        border: 1px solid #bbb5b5d9;
    }

    .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"] .ddc_TinHieuDo {
        background-color: red !important;
        border: 1px solid #bbb5b5d9;
    }

    .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"] label {
        font-size: 12px;
        font-weight: bold;
        padding: 0px 8px;
        color: #000 !important;
    }

.ddc_btnGreen {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #333333 !important;
}

    .ddc_btnGreen:hover {
        background-color: #4cff00 !important;
        color: #333333 !important;
    }

.ddc_btnRed {
    border: 1px solid red !important;
    color: red !important;
}

    .ddc_btnRed:hover {
        background-color: red !important;
        color: white !important;
    }
@keyframes blinkColor {
    0%, 100% {
        background-color: red;
        color: white !important;
    }

    50% {
        background-color: white;
        color: red !important;
    }
}

    .ddc_btnRed.active {        
        animation: blinkColor 1s infinite;
    }



#layer-container .ddc_LayerrBar_Card {
}

    #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_head,
    #seach-container .ddc_search_head {
        padding: 5px;
        font-weight: 700;
        border-bottom: 1px solid #bbbbbb;
    }

        #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_head .ddc_LayerrBar_head_Row,
        #seach-container .ddc_search_head .ddc_search_head_Row {
            display: grid;
            grid-template-columns: 90% 10%;
            /*padding: 3px;*/
            /*width: 200px;*/
            background: #fff;
            /*text-align: center;*/
            justify-content: center;
            align-items: center;
        }

            #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_head .ddc_LayerrBar_head_Row .ddc_LayerrBar_head_back,
            #seach-container .ddc_search_head .ddc_search_head_Row .ddc_search_head_back {
                text-align: center;
                background: inherit;
                position: absolute;
                right: 10px;
                cursor: pointer;
                -webkit-transition: all 0.3s;
                -o-transition: all 0.3s;
                transition: all 0.3s;
            }

                #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_head .ddc_LayerrBar_head_Row .ddc_LayerrBar_head_back:hover,
                #seach-container .ddc_search_head .ddc_search_head_Row .ddc_search_head_back:hover {
                    /*border-radius: 50%;*/
                    background: #ccc;
                }

                    #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_head .ddc_LayerrBar_head_Row .ddc_LayerrBar_head_back:hover i,
                    #seach-container .ddc_search_head .ddc_search_head_Row .ddc_search_head_back:hover i {
                        color: #46a3ff;
                    }

    #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_body .ddc_LayerrBar_body_Row {
        display: grid;
        grid-template-columns: 10% 90%;
        padding: 3px;
        /*width: 200px;*/
        background: #fff;
        /*text-align: center;*/
    }

        #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_body .ddc_LayerrBar_body_Row .ddc_LayerrBar_body_checkBox {
            text-align: center;
            border-bottom: 1px solid;
            border-left: 1px solid;
        }

        #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_body .ddc_LayerrBar_body_Row .ddc_LayerrBar_body_NameLayer {
            border-bottom: 1px solid;
        }

    #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_body .table-borderedDN thead,
    #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_body .table-borderedDN tbody,
    #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_body .table-borderedDN tfoot,
    #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_body .table-borderedDN tr,
    #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_body .table-borderedDN td,
    #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_body .table-borderedDN th {
        border: 1px solid #dee2e6;
    }

        #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_body .table-borderedDN tr td:first-child {
            text-align: center;
            width: 40px;
        }

            #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_body .table-borderedDN tr td:first-child input[type='checkbox'] {
                width: 18px;
                height: 18px;
                border: 2px solid #777;
                display: block;
                text-align: center;
                position: relative;
                cursor: pointer;
                border-radius: 2px;
            }


    #layer-container .ddc_LayerrBar_Card .ddc_LayerrBar_body .ddc_boxBanDoNen {
        padding: 5px;
        font-weight: 700;
        border-bottom: 1px solid #bbbbbb;
        /*border-top: 1px solid #bbbbbb;*/
    }

#layer-container .table {
    margin-bottom: unset;
}

.ddc_listCameraInCong [class^="col-"] img {
    width: 100%;
}

.ddc_listCameraInCong [class^="col-"] p {
    text-transform: uppercase;
    font-weight: 700;
    color: black;
    padding: 10px;
    text-align: center;
}


/*Âu thuyền*/
#ddc_AllMatBangAuThuyen .ddc_AnhMatBang {
    position: relative;
    width: 100%; /* Có thể thay đổi kích thước tùy ý */
    height: auto; /* Đảm bảo chiều cao tự động điều chỉnh */
}

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .background-imageAuThuyen {
        width: 100%; /* Đảm bảo ảnh nền bao phủ phần tử cha */
        /*height: 460px;*/ /* Đảm bảo chiều cao tự động điều chỉnh */
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .DongMoCuaAuThuyen-container_Trai {
        /*position: absolute;
        top: 89%;
        left: 26.4%;
        width: 3.5%;
        transform: scale(0.97);*/

        position: absolute;
        top: 83.5%;
        left: 13.4%;
        width: 15.9%;
    }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .DongMoCuaAuThuyen-container_Trai img {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 90%;
        }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .DongMoCuaAuThuyen-container_Phai {
        /*position: absolute;
        top: 89%;
        right: 26.2%;
        width: 3.5%;#ddc_AllMatBangAuThuyen .ddc_AnhMatBang .DongMoCuaAuThuyen-container_Phai
        transform: scale(0.97);*/

        position: absolute;
        top: 83.5%;
        right: 13.2%;
        width: 15.9%;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .DongMoCuaAuThuyen-container_Phai,
    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .DongMoCuaAuThuyen-container_Trai {
        height: 0;
    }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .DongMoCuaAuThuyen-container_Phai img {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 90%;
            /*transform: rotate(180deg);*/
        }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_box_tinhieuMoAuThuyen_Trai_Duoi {
        bottom: 0;
        left: 12.5%;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_box_tinhieuDongAuThuyen_Trai_Tren {
        top: 0;
        left: 29%;
    }


    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_box_tinhieuMoAuThuyen_Phai_Duoi {
        bottom: 0;
        right: 12.3%;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_box_tinhieuDongAuThuyen_Phai_Tren {
        top: 0;
        right: 28.8%;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_Box__TinHieuAuThuyen {
        position: absolute;
        border-radius: 1px;
        background: #000000c9;
        width: 40px;
        height: 63px;
    }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_Box__TinHieuAuThuyen .ddc_box-tinhieuAuThuyen {
            width: 17px;
            height: 17px;
            border-radius: 50%
        }

            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_Box__TinHieuAuThuyen .ddc_box-tinhieuAuThuyen.ddc_TinHieuDo {
                background: red;
            }

            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_Box__TinHieuAuThuyen .ddc_box-tinhieuAuThuyen.ddc_TinHieuXam {
                background-color: rgba(255, 255, 255, 0.5);
            }

            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_Box__TinHieuAuThuyen .ddc_box-tinhieuAuThuyen.ddc_TinHieuTrong {
                background-color: rgb(255 255 255 / 0%);
            }

            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_Box__TinHieuAuThuyen .ddc_box-tinhieuAuThuyen.ddc_TinHieuXanh {
                background: green !important;
            }

            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_Box__TinHieuAuThuyen .ddc_box-tinhieuAuThuyen.ddc_TinHieuXanhLaCay {
                background-color: #4cff00 !important
            }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_titleInMapAuThuyen .ddc_titleInMapAuThuyenHL {
        position: absolute;
        top: 45%;
        left: 2%;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_titleInMapAuThuyen .ddc_titleInMapAuThuyenTen {
        position: absolute;
        top: 38%;
        left: 42%;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_titleInMapAuThuyen .ddc_titleInMapAuThuyenTL {
        position: absolute;
        top: 45%;
        right: 2%;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_titleInMapAuThuyen .ddc_titleInMapAuThuyenHL, #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_titleInMapAuThuyen .ddc_titleInMapAuThuyenTL {
        font-size: 20px;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_titleInMapAuThuyen .ddc_titleInMapAuThuyenTen {
        font-size: 28px;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_titleInMapAuThuyen .ddc_titleInMapAuThuyenHL, #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_titleInMapAuThuyen .ddc_titleInMapAuThuyenTL, #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_titleInMapAuThuyen .ddc_titleInMapAuThuyenTen {
        text-transform: uppercase;
        font-weight: bold;
        color: black;
    }








    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo {
        cursor: pointer;
        color: black
    }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap {
            position: absolute;
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_row {
            display: grid;
            grid-template-columns: 50% 50%;
            padding: 3px;
            width: 200px;
            background: #fff;
            text-align: center;
            height: 55px;
        }

            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_row.ddc_boxInfo_childMucNuocAuThuyen {
                width: 190px;
            }

        /* #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childDoMoTL {
        top: 20%;
        left: 46%;
    }*/

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childDoManTL {
            top: 21%;
            right: 1%;
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childMucNuocTL {
            bottom: 27%;
            right: 1%;
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childCuaSo1 {
            top: 35%;
            left: 30%;
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childCuaSo2 {
            top: 35%;
            left: 46%;
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childAuThuyen {
            top: 44%;
            right: 22%;
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childDoMoHL {
            bottom: 20%;
            left: 46%;
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childDoManHL {
            top: 21%;
            left: 1%;
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childMucNuocHL {
            bottom: 27%;
            left: 1%;
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_childMucNuocAuThuyen {
            bottom: 20%;
            left: 40%
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childLeft {
            background-color: #0074d9;
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childRight {
            background-color: #E2E2E2;
        }

            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childLeft .ddc_childLeft_text,
            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childRight .ddc_childLeft_text {
                font-size: 14px;
                font-weight: 600;
            }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childLeft .ddc_childLeft_text {
            color: var(--white)
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childLeft .ddc_childLeft_time,
        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_titleInMap .ddc_childRight .ddc_childLeft_time {
            font-size: 10px;
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua {
            text-transform: uppercase;
            display: grid;
            grid-template-columns: 10% 90%;
            padding: 3px;
            width: 200px;
            background: #fff;
            text-align: center;
            font-weight: 700;
        }

            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua .ddc_BoxInfo_tinHieuCuaDiv {
                width: 15px;
                height: 15px;
                border-radius: 50%;
            }

            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua.ddc_BoxInfo_tinHieuCua_TiChot .ddc_BoxInfo_tinHieuCuaDiv {
                background: #00C2FF;
            }

            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua.ddc_BoxInfo_tinHieuCua_DongHet .ddc_BoxInfo_tinHieuCuaDiv {
                background: #FF711E;
            }

            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua.ddc_BoxInfo_tinHieuCua_TiChot span:last-child {
                color: #00C2FF !important;
            }

            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfo_Cua.ddc_BoxInfo_tinHieuCua_DongHet span:last-child {
                color: #FF711E !important;
            }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .DoMoHL_Trai {
        position: absolute;
        bottom: 6%;
        left: 22%;
        transform: scale(0.97);
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .DoMoTL_Phai {
        position: absolute;
        bottom: 6%;
        right: 22%;
        transform: scale(0.97);
    }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .DoMoHL_Trai .ddc_DoMO_Trai_Text, #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .DoMoTL_Phai .ddc_DoMO_Phai_Text {
            color: black;
        }

            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .DoMoHL_Trai .ddc_DoMO_Trai_Text .ddc_doMOHL, #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .DoMoTL_Phai .ddc_DoMO_Phai_Text .ddc_doMOTL {
                background: white;
                padding: 5px;
                margin: 5px;
                border-radius: 2px
            }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container {
        /*position: absolute;*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container [class^="Camera-container-"] {
            height: 42px;
            width: 42px;
            background: #0074d9;
            border-radius: 50%;
            text-align: center;
            display: flex; /* Sử dụng flexbox để căn giữa */
            justify-content: center; /* Căn giữa theo chiều ngang */
            align-items: center; /* Căn giữa theo chiều dọc */
        }

            #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container [class^="Camera-container-"] i {
                color: white;
            }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container.Camera-container-Tren {
            position: absolute;
            top: 2%;
            left: 49%;
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container.Camera-container-DuoiTrai {
            position: absolute;
            /*bottom: 5%;*/
            /*left: 4%;*/
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container.Camera-container-DuoiPhai {
            position: absolute;
            bottom: 5%;
            right: 4%;
        }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container.Camera-container-Tren,
        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container.Camera-container-DuoiTrai,
        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container.Camera-container-DuoiPhai {
            color: black;
            font-weight: bold;
        }

#ddcForms_ThongTinTongHop .ddcForm {
    height: 816px;
    /*overflow-y: auto;*/
}

.ddcForm_body_ThongTinCong {
    border: 1px solid #ccc;
    margin: 0 0 10px 0;
    padding: 0 0 8px 0;
}

    .ddcForm_body_ThongTinCong .headQTVH {
        background-color: #BBDDFB;
        padding: 6px;
    }

    .ddcForm_body_ThongTinCong .headQTVH_title {
        font-size: 14px;
        font-weight: bold;
        color: #0479EC;
        text-transform: uppercase;
        cursor: pointer;
    }

    .ddcForm_body_ThongTinCong .headQTVH_settingMore {
        color: #0479EC;
        padding: 3px 8px;
        cursor: pointer;
    }

.ddc_bodyQTVH .ddc_bodyQTVH_boxTop {
}

    .ddc_bodyQTVH .ddc_bodyQTVH_boxTop div:first-child {
        font-size: 14px;
    }

    .ddc_bodyQTVH .ddc_bodyQTVH_boxTop div:last-child {
        font-weight: bold;
        font-size: 16px;
        color: #00b731;
    }

.ddc_bodyQTVH .ddc_bodyQTVH_boxBottom .ddc_bodyQTVH_boxBottom_h {
    color: #0479EC;
    padding: 0 0 0 8px;
}

    .ddc_bodyQTVH .ddc_bodyQTVH_boxBottom .ddc_bodyQTVH_boxBottom_h:first-child {
    }

    .ddc_bodyQTVH .ddc_bodyQTVH_boxBottom .ddc_bodyQTVH_boxBottom_h:last-child {
    }

.ddc_bodyQTVH .ddc_bodyQTVH_boxBottom .ddc_bodyQTVH_boxBottom_b .ddc_bodyQTVH_boxBottom_b_l {
    width: 30%;
}

.ddc_bodyQTVH .ddc_bodyQTVH_boxBottom .ddc_bodyQTVH_boxBottom_b img {
    width: 66px;
}

.ddc_bodyQTVH .ddc_bodyQTVH_boxBottom .ddc_bodyQTVH_boxBottom_b .ddc_bodyQTVH_boxBottom_b_r {
    width: 70%;
}

.ddc_body__tabHTVH {
}

    .ddc_body__tabHTVH .textHTVH {
        text-align: center;
        color: #105169;
        font-family: "Roboto-Medium", Arial, Helvetica, sans-serif;
        font-size: 12px;
        height: 36px
    }

    .ddc_body__tabHTVH .imgHTVH {
        width: 68px;
        height: 48px;
    }

    .ddc_body__tabHTVH .row {
        width: 100%;
        /* margin-top: unset !important;
        margin-right: unset !important;
        margin-left: unset !important;*/
    }

#ddc_AllMatBang .ddc_ChuThichTinHieu {
    padding: 5px;
}

    #ddc_AllMatBang .ddc_ChuThichTinHieu [class^="ddc_ChuThich"] span:first-child {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        color: white;
        margin-right: 10px;
    }

    #ddc_AllMatBang .ddc_ChuThichTinHieu .ddc_ChuThichLKC span:first-child {
        background: red;
    }

        #ddc_AllMatBang .ddc_ChuThichTinHieu .ddc_ChuThichLKC span:first-child:before {
            content: '\f12a'; /* Unicode cho biểu tượng fa-exclamation từ Font Awesome */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900; /* Đảm bảo sử dụng trọng lượng phông chữ đúng */
        }

    #ddc_AllMatBang .ddc_ChuThichTinHieu .ddc_ChuThichCTC span:first-child {
        background: #00C2FF;
    }

    #ddc_AllMatBang .ddc_ChuThichTinHieu .ddc_ChuThichCDH span:first-child {
        background: #FF711E;
    }

    #ddc_AllMatBang .ddc_ChuThichTinHieu .ddc_ChuThichCDM span:first-child {
        background: #02D110;
    }

        #ddc_AllMatBang .ddc_ChuThichTinHieu .ddc_ChuThichCDM span:first-child:before {
            content: '\f062'; /* Unicode cho biểu tượng fa-exclamation từ Font Awesome */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900; /* Đảm bảo sử dụng trọng lượng phông chữ đúng */
        }

    #ddc_AllMatBang .ddc_ChuThichTinHieu .ddc_ChuThichCDD span:first-child {
        background: #FF0000;
    }

        #ddc_AllMatBang .ddc_ChuThichTinHieu .ddc_ChuThichCDD span:first-child:before {
            content: '\f063'; /* Unicode cho biểu tượng fa-exclamation từ Font Awesome */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900; /* Đảm bảo sử dụng trọng lượng phông chữ đúng */
        }

[class^="ddc_TinHieuBox_"] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    color: white;
    margin-right: 10px;
}

.ddc_TinHieuBox_LKC {
    background: red !important;
}

    .ddc_TinHieuBox_LKC:before {
        content: '\f12a'; /* Unicode cho biểu tượng fa-exclamation từ Font Awesome */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900; /* Đảm bảo sử dụng trọng lượng phông chữ đúng */
    }

.ddc_TinHieuBox_CTC {
    /*content: '\f063';*/ /* Unicode cho biểu tượng fa-exclamation từ Font Awesome */
    /*font-family: 'Font Awesome 5 Free';
    font-weight: 900;*/ /* Đảm bảo sử dụng trọng lượng phông chữ đúng */
    background: #00C2FF !important;
}

.ddc_TinHieuBox_CDH {
    /*content: '\f063';*/ /* Unicode cho biểu tượng fa-exclamation từ Font Awesome */
    /*font-family: 'Font Awesome 5 Free';
    font-weight: 900;*/ /* Đảm bảo sử dụng trọng lượng phông chữ đúng */
    background: #FF711E !important;
}

.ddc_TinHieuBox_CDM {
    background: #02D110;
}

    .ddc_TinHieuBox_CDM:before {
        content: '\f062'; /* Unicode cho biểu tượng fa-exclamation từ Font Awesome */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900; /* Đảm bảo sử dụng trọng lượng phông chữ đúng */
    }

.ddc_TinHieuBox_CDD {
    background: #FF0000 !important;
}

    .ddc_TinHieuBox_CDD:before {
        content: '\f063'; /* Unicode cho biểu tượng fa-exclamation từ Font Awesome */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900; /* Đảm bảo sử dụng trọng lượng phông chữ đúng */
    }

.ddc_TinHieuBox_BG_LKC {
    background: red !important;
}

.ddc_TinHieuBox_BG_CTC {
    background: #00C2FF !important;
}

.ddc_TinHieuBox_BG_CDH {
    background: #FF711E !important;
}

.ddc_TinHieuBox_BG_CDM {
    background: #02D110 !important;
}

.ddc_TinHieuBox_BG_CDD {
    background: #FF0000 !important;
}

.Custom_IconCong {
    background: white;
    border: 2px solid red;
    border-radius: 2px;
    z-index: 999 !important;
}

    .Custom_IconCong img {
        width: 100%;
        height: 100%;
    }


.ddc_SearchBanDo {
    position: relative;
    width: 20em;
    border: 1px solid #91C5FF;
    padding: 2px 0;
    border-radius: 32px;
}

    .ddc_SearchBanDo .search-container {
        position: relative; /* Đặt container cha của input */
        width: 100%;
    }

    .ddc_SearchBanDo .search-input {
        width: 100%;
        height: 30px;
        font-size: 16px;
        padding-left: 11%; /* Để chừa chỗ cho icon */
        border: none;
        outline: none;
        background: transparent;
    }

    .ddc_SearchBanDo .search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background: url("../IMG/social/iconsearchcolor.png") no-repeat center center;
        background-size: cover;
        cursor: pointer;
    }

    /* Định vị dropdown */
    .ddc_SearchBanDo #searchResults {
        position: absolute;
        top: 100%; /* Đặt ngay dưới input */
        left: 0;
        width: 100%;
        background-color: white;
        border: 1px solid #ccc;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 1000; /* Đảm bảo dropdown luôn ở trên */
        display: none; /* Ẩn mặc định */
        max-height: 200px; /* Giới hạn chiều cao */
        overflow-y: auto; /* Thêm thanh cuộn nếu nội dung vượt quá */
    }

        /* Hiển thị dropdown khi có kết quả */
        .ddc_SearchBanDo #searchResults.active {
            display: block;
        }

        /* Định dạng danh sách */
        .ddc_SearchBanDo #searchResults ul {
            list-style: none;
            margin: 0;
            padding: 4px;
        }

            .ddc_SearchBanDo #searchResults ul li {
                padding: 8px 12px;
                cursor: pointer;
            }

                .ddc_SearchBanDo #searchResults ul li:hover {
                    background-color: #f1f1f1;
                }

.ddc_social {
    align-items: center !important;
}

    .ddc_social .ddc_phoneSup {
        font-size: 16px;
        color: black;
        font-weight: 500;
    }

    .ddc_social .ddc_phone::before {
        content: '';
        background-image: url("../IMG/social/phone.png");
        background-size: 20px 20px; /* Kích thước của hình ảnh */
        display: inline-block;
        width: 20px; /* Chiều rộng của pseudo-element */
        height: 20px; /* Chiều cao của pseudo-element */
    }

    .ddc_social .ddc_skype::before {
        content: '';
        background-image: url("../IMG/social/skype.png");
        background-size: 20px 20px; /* Kích thước của hình ảnh */
        display: inline-block;
        width: 20px; /* Chiều rộng của pseudo-element */
        height: 20px; /* Chiều cao của pseudo-element */
    }

    .ddc_social .ddc_zalo::before {
        content: '';
        background-image: url("../IMG/social/zalo.png");
        background-size: 20px 20px; /* Kích thước của hình ảnh */
        display: inline-block;
        width: 20px; /* Chiều rộng của pseudo-element */
        height: 20px; /* Chiều cao của pseudo-element */
    }

.ddc_body__tabHTVH .curHoTroVanHanh {
    cursor: pointer;
    padding: 0px 5px;
}

#ChildThongTinTongHop {
    display: none;
}

#accordionCamera [id^="collapse_"] {
    height: 50vh;
    overflow-y: auto;
}

    #accordionCamera [id^="collapse_"] img {
        cursor: pointer;
    }

.custom-text-ThuongLuuHaLuu {
    width: auto !important; /* Chiều rộng tự động theo nội dung */
    display: inline-block; /* Giữ phần tử có chiều rộng tự động */
    color: white;
    height: unset !important;
    font-size: 1em !important;
    text-align: center;
    text-transform: uppercase;
    background: #0074d9e3;
    border-radius: 5px;
    white-space: nowrap;
    padding: 0 5px;
}

.custom-text-ViTriTenXa {
    width: auto !important; /* Chiều rộng tự động theo nội dung */
    display: inline-block; /* Giữ phần tử có chiều rộng tự động */
    color: white;
    height: unset !important;
    font-size: 1em !important;
    text-align: center;
    text-transform: uppercase;
    background: #0074d9e3;
    border-radius: 5px;
    white-space: nowrap;
    padding: 0 5px;
}

#myModalContent .accordion-header {
    background: #2698F1 !important;
    color: white !important;
}

    #myModalContent .accordion-header .accordion-button {
        color: white;
        text-transform: uppercase;
        font-size: 1rem;
        background: #2698F1 !important;
    }

#ddcForms_FormThongTinTongQuanCua .card .card-body {
    padding: 2px;
}

#ddcForms_FormThongTinTongQuanCua .ddcForm_head, #ddcForms_FormThongTinTongQuanAuTuyen .ddcForm_head {
    font-size: 13px;
}

#ddcForms_FormThongTinTongQuanCua .ddc_thongtincongcua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_title,
#ddcForms_FormThongTinTongQuanAuTuyen .ddc_thongtincongcua .ddc_thongtincongcua_Giua .ddc_thongtincongcua_Giua_title {
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.5rem;
}

#ddcForms_FormThongTinTongQuanCua .ddcForm_body .tab-pane,
#ddcForms_FormThongTinTongQuanAuTuyen .ddcForm_body .tab-pane {
    height: 100%;
    /*overflow: auto;*/
}

[id^="ddcForms_"] .ddcForm_body .tab-pane .row.ddc_Trangthaicongcua,
[id^="ddcForms_"] .ddcForm_body .tab-pane .row.ddc_thongtincongcua,
[id^="ddcForms_"] .ddcForm_body .tab-pane#TongQuanAuThuyen .row {
    margin: 0 !important;
}

[id^="ddcForms_"] hr {
    margin: 0.5rem 0 !important;
}

#ddcForms_FormThongTinTongQuanCua .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_head .ddc_Trangthaicongcua_head_title,
#ddcForms_FormThongTinTongQuanAuTuyen .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_head .ddc_Trangthaicongcua_head_title {
    font-size: 13px;
}

#ddcForms_FormThongTinTongQuanCua .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box fieldset.ddc_scheduler-border,
#ddcForms_FormThongTinTongQuanAuTuyen .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box fieldset.ddc_scheduler-border {
    border: 1px groove #91C5FF !important;
    padding: 2px 6px !important;
    margin: 18px 2px !important;
    position: relative;
}

#ddcForms_FormThongTinTongQuanCua .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"] .ddc_paddingCircel,
#ddcForms_FormThongTinTongQuanAuTuyen .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"] .ddc_paddingCircel {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 1px;
}

#ddcForms_FormThongTinTongQuanCua .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"]:has(:not(.btn)),
#ddcForms_FormThongTinTongQuanAuTuyen .ddc_Trangthaicongcua .ddc_boxTrangThaiCongCua .ddc_Trangthaicongcua_body .ddc_Trangthaicongcua_body_box .row [class^="col-"]:has(:not(.btn)) {
    padding: 10px 2px 2px 10px;
}

#ThongTinTongHopIndex .ddcForm_body {
    font-size: 13px !important;
}

#ThongTinTongHopIndex .ddc_form_Tab_QT i.col_left_TH,
#ThongTinTongHopIndex .ddc_form_Tab_QT i.col_right_TH {
    cursor: pointer;
}

#ThongTinTongHopIndex .ddc_Info_TextQT {
    font-style: unset;
    font-size: 12px !important;
    font-weight: unset;
    text-transform: uppercase;
}

#ThongTinTongHopIndex .ddcForm_body .ddc_form_Tab_QT .ddc_form__Row_Application h6 {
    margin-bottom: 0px !important;
}

#ThongTinTongHopIndex .table > :not(caption) > * > * {
    padding: 5px 10px !important;
}

#ThongTinTongHopIndex .form-control,
#ddcForms_ThongTinChiTietDiemDo .form-control,
#ChildThongTinTongHop .form-control {
    padding: 5px 16px;
    font-size: 0.775rem;
    margin: 3px;
}

#ChildThongTinTongHop table thead tr th {
    padding: 2px 2px;
}

#ChildThongTinTongHop table tbody tr td {
    padding: 2px 10px;
}

#ddcForms_ThongTinChiTietDiemDo button {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

#ThongTinTongHopIndex .fa-angle-double-down::before {
    content: "\f103";
}

#ThongTinTongHopIndex .fa-angle-double-down.active::before {
    content: "\f102";
}

#sidebar .leaflet-sidebar-tabs img {
    width: 30px;
    height: 30px;
}

.DashboardHead .iconDashboard {
    width: 14px;
    height: 12px;
    padding: 0px 1px;
}

    .DashboardHead .iconDashboard img {
        padding: 0px 1px;
    }

#cameraHome img {
    width: 100%;
}

#AppendChildCameraHome button {
    padding: 5px 10px;
}

#AppendChildCameraHome .accordion-body {
    padding: 5px 10px;
    overflow: hidden
}

    #AppendChildCameraHome .accordion-body .row > * {
    }

    #AppendChildCameraHome .accordion-body p {
        margin: 0 0 5px 0 !important;
    }

#AppendChildCameraHome #accordionCamera [id^="collapse_"] {
    height: 100% !important;
}

.custom-tooltip {
    top: 100%;
    bottom: auto;
    left: 50%;
}

    .custom-tooltip::before {
        content: "";
        position: absolute;
        bottom: 100%; /* Position the arrow at the bottom of the tooltip */
        left: 50%;
        transform: translateX(-50%);
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #ffffff transparent;
        /*  opacity: 0.5;*/
    }

#ddcForms_FormThongTinTongQuanCua .ddc_Trangthaicongcua {
    overflow: auto;
    height: 100%;
}

#ddc_popupDashboard.active {
    display: block;
    box-shadow: 1px 2px 10px 0px #ccc;
}

    #ddc_popupDashboard.active:hover {
        opacity: 1;
    }

#ddc_popupDashboard {
    display: none;
}

#ddc_popupDashboard {
    position: fixed;
    bottom: 2%;
    right: 64px;
    /* width: 37%;
    height: 46%;*/
    background: white;
    z-index: 9;
    /*border:1px solid black;*/
    opacity: 0.3;
}

    #ddc_popupDashboard .DashboardHead {
        font-size: 14px;
        color: white;
        text-transform: uppercase;
        text-align: center;
        padding: 2px;
        font-weight: 700;
        background-color: #0074d9;
        height: 25px;
    }

.table.tableCustome td, .table.tableCustome th {
    padding: 6px !important;
    font-size: 13px;
}

    .table.tableCustome td span.text {
        font-weight: bold;
        padding: 0px 8px !important;
        color: #000 !important;
    }

.customTrangThai {
    border: 1px solid #E2E2E2;
    /*background: red;*/
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
}

    .customTrangThai.trangthaiTrue {
        background: #4cff00 !important
    }

    .customTrangThai.trangthaiFalse {
        /*background: tra !important*/
    }

.table.tableCustomeTram td, .table.tableCustomeTram th {
    padding: 16px !important;
    font-size: 13px;
}

    .table.tableCustomeTram td:first-child {
        background: #4498e1f0;
        padding: 6px;
        color: white;
        text-transform: uppercase;
        font-weight: bold;
        border-bottom: 1px solid white;
    }

    .table.tableCustomeTram td:nth-child(2) {
        background: #b3f0ffeb;
        padding: 6px;
        color: black;
        text-transform: lowercase;
        font-weight: bold;
        border-bottom: 1px solid white;
    }

/*@media (max-width: 1440px) {
    .ImgXYBDN {
        height: 20em !important;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_row.ddc_boxInfo_childMucNuocAuThuyen {
        width: 180px !important;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container.Camera-container-DuoiTrai {
        position: absolute;
        bottom: 5%;
        left: 4%;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container [class^="Camera-container-"] {
        height: 25px !important;
        width: 25px !important;
    }
}*/

@media (min-width: 769px) and (max-width: 1024px) {
    #ImgXYBDN {
        /*height: 20em !important;*/
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .ddc_boxInfo .ddc_boxInfoddc_row.ddc_boxInfo_childMucNuocAuThuyen {
        width: 180px !important;
    }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container.Camera-container-DuoiTrai {
        position: absolute;
        bottom: 5%;
        left: 4%;
    }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container.Camera-container-DuoiTrai div:nth-child(2) {
        }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container [class^="Camera-container-"] {
        height: 25px !important;
        width: 25px !important;
    }

        #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container [class^="Camera-container-"] div:nth-child(2) {
            font-size: 10px !important;
        }

    #ddc_AllMatBangAuThuyen .ddc_AnhMatBang .Camera-container.Camera-container-Tren {
        position: absolute;
        top: 2%;
        left: 44%;
    }
}

@media (min-width: 320px) and (max-width: 768px) {
    #ddcForms_FormThongTinTongQuanAuTuyen .card-body, #ddcForms_FormThongTinTongQuanCua .card .card-body {
        height: 100vh;
        overflow: auto;
    }

    #UpdateDataRealTimeAuThuyen {
        overflow-y: unset !important;
    }
}
.MatKetNoi {
    line-height: 1.25;
    font-size: 15px;
    color: red;
    text-transform:uppercase;
    padding:2px;
}

.mkncuacong1.active, .mkncuacong2.active {
    animation: blinkConnectColor 0.8s infinite;
}

@keyframes blinkConnectColor {
    0%,50%,100% {
        color: white;
        background: #ffae1f;
    }

    25%,75% {
        color: white;
        background: red;
    }
}
.ddc_TranThaiRed {
    background-color: red !important;
}
.customTrangThai.ddc_TranThaiRed {    
    animation: blinkTranThaiColor 0.8s infinite;
}

@keyframes blinkTranThaiColor {
    0%, 100% {
        background-color: red;
    }

    50% {
        background-color: yellow;
    }
}