@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700;800;900&display=swap');

/* Top Info Bar Styles - Consistent across all layouts */
.top-info-bar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #d0d0d0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    box-shadow: none !important;
    margin: 0 !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    padding: 0 30px !important;
}

.top-info-left {
    flex: 1 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.company-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.top-info-right {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-shrink: 0 !important;
    height: 100% !important;
}

.top-info-contacts {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: nowrap !important;
}

.contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 15px !important;
    color: #000000 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

.contact-item i {
    color: #7c7c7c !important;
    font-size: 20px !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.contact-text {
    white-space: nowrap !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.top-info-languages {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.lang-flag {
    display: inline-block !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lang-flag:hover {
    opacity: 1 !important;
}

.lang-flag i {
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.lang-separator {
    color: #ccc !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .top-info-contacts {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .contact-text {
        font-size: 12px !important;
    }
}

@media (max-width: 768px) {
    .top-info-bar {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        visibility: hidden !important;
    }
    
    /* Hide company footer section (map footer) on small screens */
    .company-footer-section {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    
    footer.footer.footer-static.footer-light.navbar-border.navbar-shadow .company-footer-section {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    
    footer.footer.footer-static.footer-light.navbar-border.navbar-shadow:has(.company-footer-section),
    footer.footer.footer-static:has(.company-footer-section) {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    
    .top-info-left {
        display: none !important;
    }
    
    .top-info-contacts {
        display: none !important;
    }
    
    .top-info-languages {
        display: none !important;
    }
    
    body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    body.vertical-layout.vertical-menu-modern {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    body.vertical-layout.vertical-overlay-menu {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    body.vertical-layout.vertical-menu-modern .app-content.content {
        padding-top: 50px !important;
    }
    
    .header-navbar.fixed-top {
        top: 0 !important;
        margin-top: 0 !important;
    }
    
    body.vertical-layout.vertical-menu-modern .header-navbar.fixed-top {
        top: 0 !important;
        margin-top: 0 !important;
    }
    
    html {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

body {
    font-size: 13px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    background-color: #009A44;
    background-image: url("../images/cong.png");
    background-repeat: repeat;
    background-position: center;
    background-size: cover;
    color: black;
}

/* Hide topbar and company footer after login */
body.vertical-layout.vertical-menu-modern .top-info-bar {
    display: none !important;
}

body.vertical-layout.vertical-menu-modern .company-footer-section {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

body.vertical-layout.vertical-menu-modern footer:not(.system-footer) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

body.vertical-layout.vertical-menu-modern {
    padding-top: 40 !important; 
}

body.vertical-layout.vertical-menu-modern .app-content.content {
    padding-top: 20px !important; 
}

body.vertical-layout.vertical-menu-modern .content-wrapper {
    padding-top: 0 !important; 
}

/* Adjust header position for all pages with top bar */
.header-navbar.fixed-top {
    top: 38px !important; 
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .header-navbar.fixed-top {
        top: 0 !important;
        margin-top: 0 !important;
    }
}

/* Header position when logged in (no topbar) */
body.vertical-layout.vertical-menu-modern .header-navbar.fixed-top {
    top: 0 !important; 
}

/* Remove any default spacing from navbar */
.header-navbar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.header-navbar .navbar-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.vertical-layout.vertical-overlay-menu {
    padding-top: 108px !important;
}

/*.modalInvocieLodding {
    width: 600px;
    margin: 0 auto;
}



*/
.modal {
    z-index: 10500;
}


.modal-invoice {
    z-index: 10600 !important;
}

/* 🔹 Full màn hình, không tràn ngang */
.modal-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;          /* giữ modal luôn giữa ngang */
  bottom: 0;
  width: 100%;       /* KHÔNG dùng 100vw, vì 100vw bao gồm scrollbar → gây cuộn ngang */
  height: 100vh;     /* full cao màn hình */
  margin: 0;
  padding: 0;
  overflow: hidden;  /* đảm bảo không tràn nội dung */
}

/* 🔹 Modal nội dung full chiều cao */
.modal-content {
  height: 100%;
  border-radius: 0;
  border: none;
  display: flex;
  flex-direction: column;
}

/* 🔹 Header + Footer cố định */
.modal-header, .modal-footer {
  flex-shrink: 0;
}

/* 🔹 Body cuộn riêng */
.modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;  /* ✅ Chặn cuộn ngang bên trong */
  padding: 15px 20px;
}

/* 🔹 Giữ layout không nhảy khi mở modal */
body.modal-open {
  overflow-y: scroll !important;
  overflow-x: hidden !important; /* ✅ Ẩn cuộn ngang toàn trang */
}

/* ===== Modal PDF Viewer Styles ===== */
.modal-dialog.pdf-viewer {
    position: fixed;
    top: 0;
    width: 100vw; /* hoặc 100vw nếu bạn muốn full ngang */
    height: 100vh; /* full chiều cao màn hình */
    margin: auto;
    padding: 0;
}

.pdf-viewer .modal-body {
    flex: 1;
    padding: 0;
    overflow: hidden; /* ẩn cuộn trong modal body, chỉ PDF cuộn */
}

/* PDF full body */
.pdf-embed embed {
    width: 100%;
    height: 100%;
    border: none;
}

.header-invocie-issue {
    background-color: white !important;
    padding: 5px 5px !important;
    color: #FFF;
    border-bottom: 0px solid #13bd5a !important;
}


#loadingModal.show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* full màn hình */
    display: flex; /* Dùng flex để căn giữa */
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: center; /* Căn giữa theo chiều ngang */
    background: rgba(255, 255, 255, 0.5); /* nền mờ nếu cần */
    z-index: 30000;
    overflow: hidden;
}


#loadingModal .modal-content {
    margin: auto !important;
    padding-top: calc(100vh / 3) !important;
    background: rgba(255, 255, 255, 0); /* nền mờ nếu cần */
}

.border-primary {
    border: 1px solid #009A44 !important;
}

.bg-primary {
    background-color: #009A44 !important;
}
.text-primary {
    color: #009A44 !important;
}

.bg-search {
    background-color: #d2edfa;
}

.mainRow {
    border-bottom: 1px solid #bdb9b9;
    padding-top: 5px;
    padding-bottom: 5px;
}

.mainRow div {
    padding-bottom: 5px;
}

    .mainRow .badge {
        line-height: unset;
        margin-bottom: auto;
    }
/*style tvp*/
.main-menu.menu-dark .navigation {
    background-color: #009A44;
    color: white;
}

.navbar-semi-dark .navbar-header {
    background-color: #009A44;
    color: white;
}

.main-menu.menu-dark {
    background-color: #009A44;
    color: white;
}

.main-menu.menu-dark .navigation > li.open > a {
    background-color: #f8ba31; /* For browsers that do not support gradients */
    background-image: linear-gradient(to right, #f8ba31, #fddc6b, #f8ba31);
    color: black;
    border-right: 4px solid #f8ba31;
}

.main-menu.menu-dark .navigation > li > ul {
    background-color: #009A44;
}

.main-menu.menu-dark .navigation li a{
    color: white;
}

.app-content .wizard > .steps > ul > li.current .step {
    color: #009A44;
    border-color: #009A44;
}

.app-content .wizard > .actions > ul > li > a {
    background-color: #009A44;
}

.app-content .wizard > .steps > ul > li.done .step {
    border-color: #009A44;
    background-color: #009A44;
}

.app-content .wizard.wizard-circle > .steps > ul > li:before, .app-content .wizard.wizard-circle > .steps > ul > li:after {
    background-color: #009A44;
}

.header-in-row {
    padding: 0.5rem 1.5rem !important;
}

.btn-collapse {
    top: 7px !important;
}

.btn-info {
    background-color: #009A44 !important;
}
.blue {
   color: #009A44 !important;
}

a#btnLeft {
    margin-left: auto;
    margin-right: 10px;
}

a#btnRight {
    margin-right: auto;
    margin-left: 5px;
}

.btn-blue {
    border-color: #17db6c !important;
    background-color: #009A44 !important;
    border: 2px solid #17db6c;
    border-radius: 1.5rem;
}



.btn-primary {
    color: #fff;
    border-color: #17db6c !important;
    background-color: #009A44 !important;
}

    .btn-primary:hover {
        color: #fff !important;
        border-color: #17db6c !important;
        background-color: #1e4275 !important;
    }

    .btn-primary:focus,
    .btn-primary:active {
        color: #fff !important;
        border-color: #17db6c !important;
        background-color: #1e4275 !important;
    }

.header-navbar .navbar-container ul.nav li a.dropdown-user-link {
    line-height: 23px;
    padding: 1.4rem 1rem;
}

a.nav-link.red.box-like-border {
    padding: 1.9rem 0 !important;
}

span.like-border {
    border: solid 1px #b7b7b7;
    border-radius: 4px;
    padding: 0.8rem 0.5rem !important;
}

.dropdown i {
     margin-right: 0rem; 
}

.header-navbar .navbar-container ul.nav li > a.nav-link i.flag-icon {
    margin-right: 0rem;
}

a.nav-link.hotline {
    padding: 1.3rem 1rem !important;
}

.avatar-text {
    background-color: #009A44;
    padding: 0.2rem 0.2rem !important;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border-radius: 1000px;
    border: 1px solid #009A44;

}

.avatar-text .flag-icon:before {
    content: "" !important;
    margin-right: 0px;
    margin-left: 3px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header-navbar .navbar-container ul.nav li > a.nav-link {
    font-size: 1.15rem;
    padding: 1.8rem 1rem;
    font-weight: 600 !important;
}

/* Apply Josefin Sans font to header and footer (exclude icons) */
.header-navbar *:not([class*="ft-"]):not([class*="fa-"]):not(i),
.top-info-bar *:not([class*="ft-"]):not([class*="fa-"]):not(i),
.navbar *:not([class*="ft-"]):not([class*="fa-"]):not(i),
.footer *:not([class*="ft-"]):not([class*="fa-"]):not(i),
.company-footer-bg *:not([class*="ft-"]):not([class*="fa-"]):not(i) {
    font-family: "Josefin Sans", sans-serif !important;
}

/* Preserve icon fonts */
[class^="ft-"], [class*=" ft-"],
[class^="fa-"], [class*=" fa-"],
.fas, .far, .fal, .fab, .fa {
    font-family: feather, 'FontAwesome', 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
}

.actions.clearfix{
    text-align:center;
    align-self:center;
}

.ui-datepicker-prev span {
    background-image: url("../icon/left.png") !important;
    background-position: 0px 0px !important;
}

.ui-datepicker-next span {
    background-image: url("../icon/right.png") !important;
    background-position: 0px 0px !important;
}
/*
.border-menu {
    margin: 0.9rem 0.5rem;
    border: 2px solid #1c4683;
}

.header-navbar .navbar-container ul.nav .border-menu.li > a.nav-link {
    padding: 0px !important;
}*/
/*=Header small=*/
/*.header-navbar{
    min-height: 4.2rem;
}
    .header-navbar .navbar-wrapper {
        height: 4.2rem !important;
    }

    .header-navbar .navbar-header {
        height: 4.2rem !important;
    }

.navbar-light .navbar-nav li{
    margin-top: -10px;
}*/
/*.header-navbar .navbar-container ul.nav li > a.nav-link {
    font-size: 1.15rem;
    padding: 1.5rem 1rem;
}*/
/*===*/
.logologin {
    height: 60px !important;
    width: auto !important;
    padding-top: 5px !important;
    padding-left: -10px;
}

.header-navbar .navbar-header{
    padding:3px;
}

.brand-text {
    padding-left: 0px;
}

.header-navbar .navbar-header .navbar-brand {
    padding-top: 0px !important;
}

.header-navbar .navbar-header .navbar-brand img {
    width: auto !important;
}

.colorDefault {
    color: #01203c;
}

.BgDefault {
    background-color: #01203c;
    color: white;
}

.logo img{
    width: auto;
    height: 60px !important;
    padding-top: 5px;
}

.text-orange {
    color: #ef6c00;
}

.text-red {
    color: #c62828;
}

.text-white {
    color: white;
}

.text-blue {
    color: #005525;
}

.text-green {
    color: #65ee65;
}

.bgheader {
    background-color: #f9f9f9;
}

.background-orange {
    background-color: #ef6c00;
    color: #eceff1 !important;
}

.background-red {
    background-color: #c62828;
    color: #eceff1 !important;
}

.background-white {
    background-color: white;
    color: #263238 !important;
}

.background-blue {
    background-color: #005525;
    color: #eceff1 !important;
}

.background-black {
    background-color: #808080;
    color: white !important;
}

.background-green {
    background-color: #00695c;
    color: #eceff1 !important;
}

.background-lightgreen {
    background-color: #65ee65;
    color: #ffffff !important;
}

.background-grey {
    background-color: #898b8c;
    color: #ffffff !important;
}

.required {
    color: orangered;
}

.summary {
    color: #8c0114;
    font-weight: bold;
}

.table-div:hover {
    background-color: rgba(192, 220, 192, 0.6);
}

.table-div-input input {
    /*border: none;*/
    background: none;
    text-transform: uppercase;
}

.table-div-input input:read-only {
    border: 1px solid #cacfe7 !important;
    border-radius: .21rem !important;
    background-color: #eceff1 !important;
}


input.nonBg:read-only {
    border: 1px solid #cacfe7 !important;
    border-radius: .21rem !important;
    background: none !important;
}

.table th, .table td {
    padding: .75rem 0.5rem;
}

/*.table-responsive {
    display: table;
}*/


.bntGrid {
    padding-right: 3px;
}

.badge-grid{
    margin: 0px;
}

.header-grid{
    padding: 5px 0px;
}
.input.form-control.input-sm{
    padding:2px!important;
}
.card {
    margin-bottom: 0px;
}

.pl-1{
    padding-left:2px!important;
}
.cl-md-1 {
    padding: 5px 2px !important;
}
.cl-md-4 {
    padding: 5px 2px !important;
}
.cl-md-2 {
    padding: 5px 2px !important;
}

select.form-control:not([size]):not([multiple]).input-sm, input.form-control.input-sm {
    padding: 2px !important;
}

.input-sm {
    font-size: 13px !important;
}

.labelfor-sm {
    display: inherit;
    margin-bottom: 0px;
}

.table-div-input input:disabled {
    border: none;
    background: none;
}

.table-div-input input:read-only {
    border: none;
    background: none;
}
/*.modal-xl {
    width: 21cm !important;
    min-width: 21cm !important;
    max-width: 21cm !important;
}*/
.item-invoice {
    width: 20cm !important;
}

.page-wrap {
    width: 20cm !important;
    padding: 0px 100px !important;
    margin-left: 1000px !important;
}

.item-invoice p{
   margin-bottom: 0.2rem !important;
}

.modal-dialog {
    max-width: 210mm;
    margin: auto;
}
/*.modal-dialog {
    width: 210mm !important;
    min-width: 210mm;
    max-width: 210mm;
    margin: auto;
}*/

.modal-content {
    padding: 10px 15px
}

.modal-header {
    background-color: #13bd5a;
    padding: 16px 16px;
    color: #FFF;
    border-bottom: 2px dashed #13bd5a;
}

.sub-title{
    /*font-size: 11px;
    padding-top: 0px;*/
    font-style: italic;
}

.lstTable table {
    font-family: arial, sans-serif;
    border-collapse: collapse !important;
    width: 100%;
}
.lstTable th {
    text-align: center!important;
}
.lstTable td, .lstTable th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 5px 3px 5px 3px !important;
}


.even td.sorting_1 {
    background-color: #ffffff !important;
}

.even:hover > td.sorting_1 {
    background-color: #f9f9f9 !important;
}

.odd:hover > td.sorting_1 {
    background-color: #f9f9f9 !important;
}

.activeRow {
    background-color: #C2D1CF;
    color: orangered;
}

.detailRow {
    background-color: rgba(245, 247, 250, .5);
}

.detailRowBg {
    background-color: #d8e3eb;
}
    .detailRowBg:hover {
        background-color: #d8e3eb !important;
    }


/*colum ===============================================================================================*/
.cl-md-1 {
    float: left;
    width: 5%;
    padding: 5px;
}

.cl-md-2 {
    float: left;
    width: 10%;
    padding: 5px;
}

.cl-md-3 {
    float: left;
    width: 15%;
    padding: 5px;
}

.cl-md-4 {
    float: left;
    width: 20%;
    padding: 5px;
}

.cl-md-5 {
    float: left;
    width: 25%;
    padding: 5px;
}

.cl-md-6 {
    float: left;
    width: 30%;
    padding: 5px;
}

.cl-md-7 {
    float: left;
    width: 35%;
    padding: 5px;
}

.cl-md-8 {
    float: left;
    width: 40%;
    padding: 5px;
}

.cl-md-9 {
    float: left;
    width: 45%;
    padding: 5px;
}

.cl-md-10 {
    float: left;
    width: 50%;
    padding: 5px;
}

.cl-md-11 {
    float: left;
    width: 55%;
    padding: 5px;
}

.cl-md-12 {
    float: left;
    width: 60%;
    padding: 5px;
    padding: 5px;
}

.cl-md-13 {
    float: left;
    width: 65%;
    padding: 5px;
}

.cl-md-14 {
    float: left;
    width: 70%;
    padding: 5px;
}

.cl-md-15 {
    float: left;
    width: 75%;
    padding: 5px;
}

.cl-md-16 {
    float: left;
    width: 80%;
    padding: 5px;
}

.cl-md-17 {
    float: left;
    width: 85%;
    padding: 5px;
}

.cl-md-18 {
    float: left;
    width: 90%;
    padding: 5px;
}

.cl-md-19 {
    float: left;
    width: 95%;
    padding: 5px;
}

.cl-md-20 {
    float: left;
    width: 100%;
    padding: 5px;
}

@media only screen and (max-width: 576px) {
    .cl-1 {
        float: left;
        width: 5%;
        padding: 5px;
    }

    .cl-2 {
        float: left;
        width: 10%;
        padding: 5px;
    }

    .cl-3 {
        float: left;
        width: 15%;
        padding: 5px;
    }

    .cl-4 {
        float: left;
        width: 20%;
        padding: 5px;
    }

    .cl-5 {
        float: left;
        width: 25%;
        padding: 5px;
    }

    .cl-6 {
        float: left;
        width: 30%;
        padding: 5px;
    }

    .cl-7 {
        float: left;
        width: 35%;
        padding: 5px;
    }

    .cl-8 {
        float: left;
        width: 40%;
        padding: 5px;
    }

    .cl-9 {
        float: left;
        width: 45%;
        padding: 5px;
    }

    .cl-10 {
        float: left;
        width: 50%;
        padding: 5px;
    }

    .cl-11 {
        float: left;
        width: 55%;
        padding: 5px;
    }

    .cl-12 {
        float: left;
        width: 60%;
        padding: 5px;
        padding: 5px;
    }

    .cl-13 {
        float: left;
        width: 65%;
        padding: 5px;
    }

    .cl-14 {
        float: left;
        width: 70%;
        padding: 5px;
    }

    .cl-15 {
        float: left;
        width: 75%;
        padding: 5px;
    }

    .cl-16 {
        float: left;
        width: 80%;
        padding: 5px;
    }

    .cl-17 {
        float: left;
        width: 85%;
        padding: 5px;
    }

    .cl-18 {
        float: left;
        width: 90%;
        padding: 5px;
    }

    .cl-19 {
        float: left;
        width: 95%;
        padding: 5px;
    }

    .cl-20 {
        float: left;
        width: 100%;
        padding: 5px;
    }
}

table.zero-configuration tbody td {
    word-break: break-word;
    vertical-align: top;
}


.loadingModal {
    top: 40%;
}

.loadingModal .modal-content {
    background-color: transparent;
    border: none;
}

.tag span {
    display: none;
}

.tagging .tag {
    background: none repeat scroll 0 0 #1a73e8;
    text-transform: uppercase;
    border-radius: 2px;
    color: white;
    cursor: default;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    padding: 7px 20px 7px 7px;
    margin: 5px 10px 0 0;
}

.tagging .tag .tag-i {
    color: white;
    cursor: pointer;
    font-size: 1.3em;
    height: 0;
    line-height: 0.1em;
    position: absolute;
    right: 5px;
    top: 1rem;
    text-align: center;
    width: 10px;
}

input.type-zone {
    line-height: 1.25;
    margin: 7px;
    text-transform: uppercase;
}

.uppercase {
    text-transform: uppercase;
}

.scroll{
    display:block!important;
}

tr.main-hedear th {
    border: solid 0.5px white !important;
}

table.table.table-input th {
    min-width: 120px;
}

.custom-control-float-left {
    padding-top: 12px;
    position: relative;
    display: block;
    min-height: 1.45rem;
    padding-left: 1.5rem;
    float: left;
    padding-right: inherit;
}

.line{
    line-height:0.5rem;
    background-color: white;
    align-items: center;
}

.form-check.form-check-inlabel {
    float: right;
}

.form-check-inlabel label.form-check-label {
    padding-right: 25px;
}

@media only screen and (max-width: 576px) {
    .logo {
        padding-top: 5px !important;
    }

    /*=Header small=*/
    /*.header-navbar {
        min-height: 4.2rem;
    }

    .header-navbar .navbar-wrapper {
        height: 4.2rem !important;
    }

    .header-navbar .navbar-header {
        height: 4.2rem !important;
    }

    .navbar-light .navbar-nav li {
        margin-top: -10px;
    }

    .header-navbar .navbar-container ul.nav li > a.nav-link {
        font-size: 1.15rem;
        padding: 1.5rem 1rem;
    }*/
}

footer.footer.footer-static.footer-light.navbar-border.navbar-shadow {
    background-color: #009a44;
    background-image: linear-gradient(rgba(0, 154, 68, 0.85), rgba(0, 154, 68, 0.85)), url(/images/footer.jpg);
}

/* Company Footer Section - Scoped styles to avoid conflicts */
.company-footer-bg {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    background-size: cover;
    background-position: center;
    overflow-x: hidden;
    color: #ffffff;
    transition: width 0.3s ease, left 0.3s ease !important; /* Smooth transition when menu toggles */
}

body.vertical-layout.vertical-menu-modern.menu-expanded .company-footer-bg {
    width: 100%;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .company-footer-bg {
    width: calc(100vw - 60px);
    left: 60px;
    right: 0;
    margin-left: 0;
    margin-right: 0;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .company-footer-container {
    max-width: 1100px;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .company-footer-col h3 {
    font-size: clamp(18px, 1.8vw, 24px);
}

body.vertical-layout.vertical-menu-modern.menu-expanded .company-footer-contact p {
    font-size: clamp(14px, 1.1vw, 16px);
}

body.vertical-layout.vertical-menu-modern.menu-expanded .company-footer-map {
    height: 220px;
    width: 75%;
}

body.vertical-layout.vertical-menu-modern.menu-expanded.navbar-brand-center .company-footer-bg,
body.vertical-layout.vertical-menu-modern.menu-collapsed.navbar-brand-center .company-footer-bg {
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

@media (max-width: 991.98px) {
    body.vertical-layout.vertical-menu-modern.menu-expanded .company-footer-bg,
    body.vertical-layout.vertical-menu-modern.menu-collapsed .company-footer-bg {
        margin-left: -50vw;
    }
}

.company-footer-section {
    position: relative;
    padding: 30px 0 30px 0;
    z-index: 1;
}

.company-footer-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
    z-index: 2;
}

.company-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.company-footer-col h3 {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
    padding-bottom: 12px;
    border-bottom: 1px solid #ffffff;
    display: block;
}

.company-footer-contact p {
    font-size: clamp(15px, 1.2vw, 18px);
    margin: 15px 0;
    color: #ffffff;
    display: flex;
    align-items: flex-start;
    line-height: 1.6;
}

.company-footer-contact i {
    margin-right: 12px;
    margin-top: 3px;
    font-size: 18px;
    color: #ffffff;
    min-width: 20px;
}

.company-footer-email a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.company-footer-email a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.company-footer-map {
    position: relative;
    width: 80%;
    height: 250px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    margin-left: auto;
    margin-right: auto;
    transition: height 0.3s ease, width 0.3s ease;
}

.company-footer-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive Company Footer */
@media (max-width: 992px) {
    .company-footer-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .company-footer-map {
        height: 180px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 576px) {
    .company-footer-section {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    
    .company-footer-map {
        display: none !important;
        height: 0 !important;
    }
    
    footer.footer.footer-static.footer-light.navbar-border.navbar-shadow .company-footer-section {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    
    footer.footer.footer-static.footer-light.navbar-border.navbar-shadow:has(.company-footer-section),
    footer.footer.footer-static:has(.company-footer-section) {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}

#eventBannerModal .modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 95vw; 
}

#eventBannerModal .modal-content {
    background: transparent; 
    border: none;
    box-shadow: none;
    display: inline-block;
    width: auto;
}

#eventBannerModal .modal-body {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#eventBannerModal .banner img {
    width: auto;
    height: auto;
    max-width: 85vw; 
    max-height: 85vh; 
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* System Footer (Version and Copyright) */
.system-footer,
footer.system-footer,
footer.footer.footer-static.footer-light.navbar-border.navbar-shadow.system-footer {
    background-color: #FFFF00 !important;
    background-image: none !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
}

.system-footer p {
    margin: 0 !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
}

.system-footer a {
    text-decoration: none !important;
}

.system-footer a:hover {
    text-decoration: none !important;
}

body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

html {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.system-footer + *,
.system-footer::after {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

footer {
    margin-bottom: 0 !important;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .system-footer {
    margin-left: 260px !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .system-footer {
    margin-left: 50px !important;
}