.container-fluid.one{
  background:#fff;
  padding:20px 0 60px 0;
}
.container-fluid.two{
  background:#fbfbfb;
  padding:20px 0;
}
.container-fluid.three{
  background:#79b23a;
}
.panel-default > .panel-heading {
    background-color: #ddd;
    border-color: #ddd;
    color: #333;
}
.panel-heading {
  padding:10px 15px;
  background-color:#ddd;
}
.panel-body {
  padding:15px;
}
.panel-footer {
  padding:10px 15px;
  background-color:#ddd;
  border-bottom:3px !important;
}

.white{
  color:#fff;
}

.box{
  padding:20px 20px 20px 20px;
  box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
  background-color:#FFF;
  border-radius:4px;
}
.box h3{
  margin-bottom:10px;
}


/***** TABLES START *****/ 
/***** TABLES START *****/ 
/***** TABLES START *****/ 
.table-striped > tbody > tr:nth-child(2n+1), .table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: #f9f9f9;
}

th {
  background-color:#ddd;
}
tr {
  background-color:#fff;
}
.white-row > td{
  background-color:#fff;
}
.grey-row > td{
  background-color:#f9f9f9;
}
.month-view > tbody > tr > td, .table > tfoot > tr > td {
  padding:0px;
  text-align:center;
}
.month-view td p {
  display:block;
  padding:12px 0px 12px 0px; 
  margin:0px;
  font-weight:bold;
  cursor:default;
}
.month-view td a {
  display:block;
  padding:12px 0px 12px 0px; 
  text-decoration:none;
  cursor:crosshair;
    -moz-box-shadow:inset 0 0 5px 0 #dcdcdc;
    -webkit-box-shadow:inset 0 0 5px 0 #dcdcdc;
    box-shadow:inset 0 0 5px 0 #dcdcdc;
}
.month-view td a:link {color: #000}
.month-view td a:visited {color:#666}
.month-view td a:hover, .prod td a:active, .prod td a:focus {
  background-color:#e3e3e3;
}
.month-view th {
  text-align:center !important;
  padding:12px 0px 12px 0px !important;
  font-weight:400
}
.month-view.editable-click, a.editable-click, a.editable-click:hover {
    border-bottom: 0px;
  font-weight:bold;
  cursor:crosshair;
}

.booked {
  background:url(../images/project-a.png) no-repeat center center;
}
.overbooked {
  background:url(../images/bg-overbooked.png) repeat;
}
.unavailable {
  background:url(../images/bg-unavailable.png) repeat;
}

.month-view table td {
  text-align:center;
  vertical-align:middle;
}
.month-view  td.highlighted {
  background-color:rgba(0,0,0,0.3) !important;
}

/***** TABLES END *****/ 
/***** TABLES END *****/ 
/***** TABLES END *****/ 




.p-t-lg{
  padding-top:40px;
}
.p-t{
  padding-top:22px;
}
.p-t-sm{
  padding-top:10px;
}
.p-t-md{
  padding-top:36px;
}
.p-t-n{
  padding-top:0px;
}
.p-b{
  padding-bottom:15px;
}
.p-b-sm{
  padding-bottom:10px;
}
.p-l-sm{
  padding-left:10px;
}
.p-b-lg{
  padding-bottom:20px;
}
.p-b-n{
  padding-bottom:0px;
}
.m-r{
  margin-right:10px;
}
.m-r-md{
  margin-right:15px;
}
.m-r-lg{
  margin-right:25px;
}
.m-r-sm{
  margin-right:5px;
}
.m-t{
  margin-top:20px;
}
.m-t-sm{
  margin-top:8px;
}
.m-t-lg{
  margin-top:35px;
}
.m-t-xs{
  margin-top:4px;
}
.m-b{
  margin-bottom:20px;
}
.m-b-sm{
  margin-bottom:10px;
}
.m-b-md{
  margin-bottom:15px;
}
.m-b-lg{
  margin-bottom:25px;
}
.m-l{
  margin-left:10px;
}
.m-l-sm{
  margin-left:6px;
}
.m-l-lg{
  margin-left:25px;
}
.m-t-n{
  margin-top:0px;
}

/* Footer positioning fix */
html {
  height: 100% !important;
}

body {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column;
}

.page-container {
  flex: 1 0 auto !important;
}

.page-footer {
  flex-shrink: 0 !important;
  width: 100% !important;
  position: relative !important;
  clear: both !important;
}
.m-n{
  margin:0px;
}
.radio, .checkbox {
    margin-bottom: 0px;
    margin-top: 0px;
}
.b-b-none{
  border-bottom:0px;
}
.b-r-none{
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  border-radius: 0px !important;
}
.list-m-r{
  display: inline-block;
    width: 60px;
}
.list-group-item-gray{
  background-color:#fcfcfc;
}

.icon-3x{
  font-size:20px;
}


.btn-twitter {
    background-color: #00acee;
    border-color: #00a1df;
    color: #ffffff;
}
.btn-twitter:hover,
.btn-twitter:focus,
.btn-twitter:active,
.btn-twitter.active,
.open > .dropdown-toggle.btn-twitter {
  color: #ffffff;
  background-color: #008fc5;
  border-color: #0075a2;
}

.btn-facebook {
    background-color: #3b5998;
    border-color: #344e86;
    color: #ffffff;
}
.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active,
.btn-facebook.active,
.open > .dropdown-toggle.btn-facebook {
  color: #ffffff;
  background-color: #30487b;
  border-color: #23345a;
}

.sidebar.affix {
    position: fixed;
  width:165px;
}

.col-md-8.scrollable{
}
@media screen and (max-width: 1024px) 
{
.col-md-8.scrollable {
}
}

.black{
  color:#000;
}

.well {
    padding: 5px 15px;
    margin: 10px 0 0;
}
.well1 {
    background-color: #eeefff;
}
.well2 {
    background-color: #FFEEEE;
}
.rating{
  color: white;
  text-decoration: none;
}
.rating:hover{
  text-decoration: none;
}
.datepicker-dropdown{
  z-index: 9999 !important;
}
.language{
  float: left;
  margin: 15px 5px;
}
.blockUI{
  z-index: 100000 !important;
}
.error{
  display: block;
  color: red;
}
.dataTables_empty{
  text-align: center;
}
table td a span.fa{
  margin-right: 5px;
  font-size: 16px;
}

.dataTables_processing {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 250px;
  margin-left: -125px;
  margin-top: -15px;
  padding: 14px 0 2px 0;
  border: 1px solid #ddd;
  text-align: center;
  color: #999;
  font-size: 14px;
  height: 54px;
  background: url(../images/loaders/3d/067.gif) 35px no-repeat;
  background-color: white;
  z-index: 1;
}
div.dataTables_paginate {
  text-align: right;
  margin-top:10px !important;
  margin-right: 10px;
  margin-bottom: 20px;
  float: left;
}

/* Pagination nested */
.paginate_disabled_previous, .paginate_enabled_previous,
.paginate_disabled_next, .paginate_enabled_next {
  display: inline-block;
  float: left;
  padding: 0 14px;
  line-height: 28px;
  text-decoration: none;
  border: 1px solid #c4c4c4;
  border-left-width: 1px;
  background: rgb(255,255,255);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2YzZjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(255,255,255,1) 1%, rgba(243,243,243,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(243,243,243,1)));
  background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
  background: -o-linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
  background: -ms-linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
  background: linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3',GradientType=0 );
  min-height: 28px;
  color: #717171;
  box-shadow:0 1px 0 #eaeaea ,0 1px 0 #fff inset;
  margin-right: 4px;
  -webkit-border-radius: 2px 2px 2px 2px;
  -moz-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
  font-weight: 700;
}
.paginate_disabled_previous:hover, .paginate_enabled_previous:hover,
.paginate_disabled_next:hover, .paginate_enabled_next:hover {
  text-decoration: none !important;
}
.paginate_disabled_previous:active, .paginate_enabled_previous:active,
.paginate_disabled_next:active, .paginate_enabled_next:active {
  outline: none;
}

.paginate_disabled_previous,
.paginate_disabled_next {
  color: #666 !important;
}
.paginate_disabled_previous, .paginate_enabled_previous {
  padding-left: 23px;
}
.paginate_disabled_next, .paginate_enabled_next {
  padding-right: 23px;
  margin-left: 10px;
}

.paginate_disabled_previous {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.paginate_enabled_previous, .paginate_enabled_next:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  cursor: pointer;
}
.paginate_enabled_previous:hover {
  border: 1px solid #a3a3a3;
  background: #e8e6e6;
}

.paginate_disabled_next {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.paginate_enabled_next {
  opacity: 1;
  filter: alpha(opacity=100);
}

.paging_full_numbers {
  height: 28px;
}

.paging_full_numbers a:active {
  color: #f2f2f2;
  box-shadow:0 1px 0 #eaeaea ,0 1px 0 #67c3da inset;
  border-color: #5098aa;
  background: #88BBC8;
}

.paging_full_numbers a:hover {
  border: 1px solid #a3a3a3;
  background: #e8e6e6;
}

.paging_full_numbers a.paginate_button,
  .paging_full_numbers a.paginate_active {
  border: 1px solid #aaa;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  padding: 2px 5px;
  margin: 0 3px;
  cursor: pointer;
  *cursor: hand;
  color: #333 !important;
}

.paging_full_numbers a.paginate_button {
  display: inline-block;
  float: left;
  padding: 0 14px;
  line-height: 28px;
  text-decoration: none;
  border: 1px solid #c4c4c4;
  border-left-width: 1px;
  background: rgb(255,255,255);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2YzZjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(255,255,255,1) 1%, rgba(243,243,243,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(243,243,243,1)));
  background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
  background: -o-linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
  background: -ms-linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
  background: linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3',GradientType=0 );
  min-height: 28px;
  color: #717171;
  box-shadow:0 1px 0 #eaeaea ,0 1px 0 #fff inset;
  margin-right: 4px;
  -webkit-border-radius: 2px 2px 2px 2px;
  -moz-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
  font-weight: 700;
}

.paging_full_numbers a.paginate_button:hover {
  border: 1px solid #a3a3a3;
  background: #e8e6e6;
}

.paging_full_numbers a.paginate_active {
  color: #f2f2f2;
  box-shadow:0 1px 0 #eaeaea ,0 1px 0 #67c3da inset;
  border-color: #5098aa;
  background: #88BBC8;
  float: left;
  padding: 0 14px;
  line-height: 28px;
  -webkit-border-radius: 2px 2px 2px 2px;
  -moz-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
  font-weight: 700;
  cursor:default;
  text-decoration: none;
  color:#fff;
}
.fileinput-filename{
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  width: 90%;
  text-overflow: ellipsis;
}
table a:hover, table a:focus{
  text-decoration: none;
}
.select2-drop, .select2-drop.select2-drop-above{
  z-index: 99999;
}
.datepicker.dropdown-menu{
  z-index: 99999 !important;
}
.sidebar hr{
  margin: 10px 0;
}
table.table span.label{
  margin-bottom: 2px;
  display: inline-block;
}
#dashboard_list .progress{
  background-color: #DDDDDD;
  margin-bottom: 0;
  position: relative;
}
#dashboard_list .progress .progress-bar + div{
  position: absolute;
  display: block;
  text-align: center;
  width: 100%;
}
.grey-salsa.btn {
  color: #FAFCFB;
  background-color: #B2B2B2;
}
.container-fluid .number-stats .stat-number .number{
  font-size: 17px;
}
.container-fluid .portlet{
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 0;
}
.portlet-title .caption button{
  border: none;
}
.container-fluid .table.table-light > tbody > tr > td,
.container-fluid .table.table-light > thead > tr > th{
  color: black;
}

.login .content{
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15);
}
.portlet > .portlet-title > .tools > a.admin-btn{
  height: auto;
}
.datepicker-days th{
  background: transparent;
}
.datepicker-days th, .datepicker-days td{
  font-size: 14px;
}
.note-handle .note-control-selection{
  z-index: 99;
}
table > tbody > tr > td .user-pic {
  display: inline-block;
  vertical-align: middle;
  height: 30px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}
.page-header.navbar .page-logo .logo-default {
  margin: 4px 0 0 0;
}
.modal-body h4 {
  border-bottom: 1px dashed #888;
  padding-bottom: 5px;
  margin-bottom: 20px;
}
.total-price{
  text-align: right;
  font-weight: bold;
  background-color: #F3565D !important;
  color: yellow;
}
.sum-price{
  text-align: right;
  font-weight: bold;
  background-color: rgb(246, 227, 180) !important;
}
.small-input-price{
  width: 100px; 
  display: inline-block;
}
.input-price{
  width: 35%; 
  display: inline-block;
  text-align: right;
}
.report-total-price{
  display: inline-block;
  width: 100px;
  text-align: right;
}
.tree-demo a{
  display: inline-block;
  margin-bottom: 5px;
}
.tree-demo .fa-edit{
  display: none;
}
.tree-demo .active .fa-edit{
  display: inline-block;
}
.tools .pull-right{
  margin-bottom: 0;
}
.form-control.datepicker{
  padding: 6px 12px;
}
#mini_product_list_paginate a{
  padding: 0 6px;
}
#mini_product_list_paginate span{
  display: none;
}
.table-responsive table#mini_product_list thead tr th:last-child{
  width: 20px !important;
}
.table-responsive .note{
  margin-bottom: 0;
}
#store_import_list .input-group, #store_export_list .input-group,
#order_detail_list .input-group, #return_detail_list .input-group{
  width: 200px;
}
#order_detail_list input[name=total_price],
#order_detail_list input[name=paid],
#order_detail_list input[name=unpaid],
#return_detail_list input[name=total_price],
#return_detail_list input[name=paid],
#return_detail_list input[name=unpaid] {
  width: 85px !important;
}

.pagination>li>a.disabled{
  color: #23527c;
  background-color: #eee;
  border-color: #ddd;
  cursor: default;
}
.btn-print{
  display: none !important;
}
.mini_product_list_no_paginate #mini_product_list_paginate{
  display: none !important;
}
#order_form .form-group{
  margin-bottom: 5px;
}
#order_form hr{
    margin: 5px 0;
}
.page-sidebar .page-sidebar-menu.page-sidebar-menu-compact > li > .sub-menu > li > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-compact > li > .sub-menu > li > a{
    font-size: 12px;
}
.form-control .select2-choice{
  overflow: visible;
}
.table-responsive table ul{
  padding: 0;
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle {
  padding: 22px 8px 21px 8px;
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .username {
  color: #7f96ac;
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  top: 5px;
  position: relative;
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-menu{
  width: auto;
}
.yellow-highlight, .yellow-highlight a{
  background-color: rgb(246, 227, 180) !important;
}
@media (min-width: 1024px) and (max-width: 1100px){
  .username{
    display: none !important;
  }
  .page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle {
    padding: 24px 8px 24px 8px;
  }
  .small-input-price {
    width: 60px;
    display: inline-block;
  }
  .sum-price.input-price{
    width: 35%;
  }
  .sum-price, .total-price{
    width: 100px;
  }
  .label-sum-price{
    width: 100px;
  }
  .page-actions .btn-group a{
    padding: 7px 6px;
  }
}
@media (max-width: 1023px){
  .tools .pull-right{
    margin-right: 0;
    margin-top: 10px;
  }
  
  /* Fix spacing between icons and text in buttons */
  .btn i {
    margin-right: 5px !important;
  }
  
  /* Make customer, supplier, employee, material, material type and received order add/edit modals full width on mobile */
  #customer_detail .modal-dialog,
  #customer_view .modal-dialog,
  #supplier_detail .modal-dialog,
  #supplier_view .modal-dialog,
  #employee_detail .modal-dialog,
  #employee_view .modal-dialog,
  #material_inventory_detail .modal-dialog,
  #material_detail .modal-dialog,
  #material_type_detail .modal-dialog,
  #received_order_detail .modal-dialog {
    width: 96% !important;
  }
  
  /* Make warehouse and warehouse location modals 96% width on mobile */
  #warehouse_detail .modal-dialog,
  #warehouse_location_detail .modal-dialog {
    width: 96% !important;
  }
  
  /* Mobile tools layout */
  .portlet-title .tools {
    float: none !important;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .portlet-title .tools .form-group {
    float: none !important;
    width: 100%;
    margin: 0 !important;
  }
  .portlet-title .tools a.btn,
  .portlet-title .tools .btn-group {
    float: none !important;
    margin: 0 !important;
    flex: 1 1 calc(50% - 4px);
    max-width: calc(50% - 4px);
    text-align: center;
    box-sizing: border-box;
  }
  .portlet-title .tools a.btn {
    height: 34px;
    line-height: 20px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .portlet-title .tools .btn-group {
    position: relative;
  }
  .portlet-title .tools .btn-group button.dropdown-toggle {
    width: 100%;
    height: 34px;
    line-height: 20px;
    padding: 6px 12px;
  }
  .portlet-title .tools .btn-group .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    float: none;
    width: 100%;
    margin: 0;
  }
  .portlet-title .tools form[style*="display:none"],
  .portlet-title .tools form[style*="display: none"] {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
}
.modal-body .required {
  color: #e02222;
  font-size: 12px;
  padding-left: 2px;
}

.modal-body .form-horizontal .form-group .col-md-9 .select2-container {
  font-size: 12px;
  padding-left: 2px;
}

/* Fix cho modal Thông tin nguyên liệu trên iOS Safari */
@supports (-webkit-touch-callout: none) {
  /* Chỉ áp dụng cho modal material-info-form */
  #material-info-form {
    position: absolute !important;
    z-index: 1051 !important;
  }
  
  #material-info-form .modal-dialog {
    transform: none !important;
    -webkit-transform: none !important;
    margin: 30px auto !important;
  }
  
  #material-info-form .modal-content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  /* Đảm bảo backdrop không gây vấn đề với các form khác */
  #material-info-form + .modal-backdrop {
    z-index: 1050 !important;
  }
}

/***
=====================================================================
COMPREHENSIVE SIDEBAR FIX - ALL SCREEN SIZES
Hỗ trợ: Mobile, Laptop 12-15.6", Màn hình 24"+
Trạng thái: Collapsed & Expanded
=====================================================================
***/

/* ====================================================================
   BIẾN SỐ CHUNG (CSS Variables for easy customization)
==================================================================== */
:root {
  --sidebar-width-expanded: 240px;
  --sidebar-width-collapsed: 54px;
  --header-height: 68px;
  --sidebar-bg-color: #2b3643;
  --sidebar-hover-shadow: 5px 0 15px rgba(0,0,0,0.2);
}

/* ====================================================================
   1. MOBILE (< 1024px) - Sử dụng Mobile Menu riêng
   Bao gồm: Phone, Tablet, Laptop nhỏ dưới 1024px
   OVERRIDE Metronic framework rules at 991px, 768px breakpoints
==================================================================== */
@media (max-width: 1023px) {
  /* Ẩn hoàn toàn sidebar desktop trên mobile - OVERRIDE ALL METRONIC RULES */
  .page-sidebar-wrapper,
  .page-sidebar,
  .page-sidebar.navbar-collapse,
  .page-sidebar.navbar-collapse.collapse,
  .page-sidebar.navbar-collapse.in,
  .page-sidebar.navbar-collapse.collapse.in,
  .page-sidebar-fixed .page-sidebar,
  .page-sidebar-fixed .page-sidebar-wrapper,
  body.page-sidebar-fixed .page-sidebar,
  body.page-sidebar-fixed .page-sidebar-wrapper,
  .page-sidebar .page-sidebar-menu,
  .page-sidebar-menu {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Override Metronic Bootstrap collapse behavior for sidebar */
  .page-sidebar.navbar-collapse.in,
  .page-sidebar.in,
  .navbar-collapse.in .page-sidebar {
    display: none !important;
    width: 0 !important;
    visibility: hidden !important;
  }

  /* Ẩn sidebar toggler trên mobile - dùng hamburger menu thay thế */
  .menu-toggler.sidebar-toggler,
  .sidebar-toggler,
  .page-header .menu-toggler.sidebar-toggler {
    display: none !important;
  }

  /* Hiện responsive toggler (hamburger) */
  .menu-toggler.responsive-toggler {
    display: none !important; /* Ẩn vì dùng custom mobile-menu-toggle */
  }

  /* Reset tất cả margin/padding cho page container */
  .page-container {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }

  /* Reset margin cho content wrapper */
  .page-content-wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    float: none !important;
  }

  /* Reset margin cho content */
  .page-content-wrapper .page-content {
    margin-left: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100% !important;
  }

  /* Reset margin cho footer */
  .page-footer,
  .page-footer .page-footer-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Override fixed sidebar positioning */
  .page-sidebar-fixed .page-content-wrapper .page-content,
  .page-sidebar-fixed.page-sidebar-closed .page-content-wrapper .page-content,
  body.page-sidebar-fixed .page-content-wrapper .page-content {
    margin-left: 0 !important;
  }

  .page-sidebar-fixed .page-footer,
  .page-sidebar-fixed.page-sidebar-closed .page-footer,
  body.page-sidebar-fixed .page-footer {
    margin-left: 0 !important;
  }

  /* CRITICAL: Override all body class combinations with sidebar */
  body.page-sidebar-fixed .page-sidebar-wrapper,
  body.page-sidebar-fixed .page-sidebar,
  body.page-sidebar-fixed .page-sidebar.navbar-collapse,
  body.page-sidebar-fixed .page-sidebar.navbar-collapse.collapse,
  body.page-sidebar-fixed .page-sidebar.navbar-collapse.in,
  body.page-header-fixed .page-sidebar-wrapper,
  body.page-header-fixed .page-sidebar,
  body.page-container-bg-solid .page-sidebar-wrapper,
  body.page-container-bg-solid .page-sidebar,
  body.page-header-fixed.page-container-bg-solid.page-sidebar-fixed .page-sidebar-wrapper,
  body.page-header-fixed.page-container-bg-solid.page-sidebar-fixed .page-sidebar,
  body.page-header-fixed.page-container-bg-solid.page-sidebar-fixed .page-sidebar.navbar-collapse.collapse {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
}

/* ====================================================================
   2. DESKTOP NHỎ (1024px - 1366px) - Sidebar visible
   Bao gồm: Laptop 12-15.6", Desktop nhỏ
==================================================================== */
@media (min-width: 1024px) and (max-width: 1366px) {
  /* Sidebar wrapper */
  .page-sidebar-wrapper {
    height: 100% !important;
    min-height: 100vh !important;
  }

  /* Sidebar chính */
  .page-sidebar {
    width: var(--sidebar-width-expanded) !important;
    height: calc(100vh - var(--header-height)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .page-sidebar .page-sidebar-menu {
    width: var(--sidebar-width-expanded) !important;
  }

  /* Fixed sidebar */
  .page-sidebar-fixed .page-sidebar {
    position: fixed !important;
    top: var(--header-height) !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--sidebar-width-expanded) !important;
    height: calc(100vh - var(--header-height)) !important;
    z-index: 9000 !important;
  }

  /* Content margin */
  .page-content-wrapper .page-content {
    margin-left: var(--sidebar-width-expanded) !important;
  }

  .page-footer .page-footer-inner {
    margin-left: var(--sidebar-width-expanded) !important;
  }

  /* === Sidebar thu gọn (collapsed) === */
  .page-sidebar-closed .page-sidebar,
  .page-sidebar-closed .page-sidebar .page-sidebar-menu {
    width: var(--sidebar-width-collapsed) !important;
  }

  .page-sidebar-closed.page-sidebar-fixed .page-sidebar {
    width: var(--sidebar-width-collapsed) !important;
  }

  .page-sidebar-closed .page-content-wrapper .page-content {
    margin-left: var(--sidebar-width-collapsed) !important;
  }

  .page-sidebar-closed .page-footer .page-footer-inner {
    margin-left: var(--sidebar-width-collapsed) !important;
  }

  /* Hover expand khi collapsed */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover {
    width: var(--sidebar-width-expanded) !important;
    z-index: 10000 !important;
    box-shadow: var(--sidebar-hover-shadow) !important;
    overflow-y: auto !important;
  }

  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu {
    width: var(--sidebar-width-expanded) !important;
  }
}

/* Section 3 đã được gộp vào Section 2 ở trên (1024px - 1366px) */

/* ====================================================================
   4. MÀN HÌNH LỚN 24 INCH++ (> 1366px)
==================================================================== */
@media (min-width: 1367px) {
  /* Sidebar wrapper */
  .page-sidebar-wrapper {
    height: 100% !important;
    min-height: 100vh !important;
  }

  /* Sidebar chính - EXPANDED */
  .page-sidebar {
    width: var(--sidebar-width-expanded) !important;
    height: calc(100vh - var(--header-height)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .page-sidebar .page-sidebar-menu {
    width: var(--sidebar-width-expanded) !important;
  }

  /* Fixed sidebar */
  .page-sidebar-fixed .page-sidebar {
    position: fixed !important;
    top: var(--header-height) !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--sidebar-width-expanded) !important;
    height: calc(100vh - var(--header-height)) !important;
    z-index: 9000 !important;
  }

  /* Content margin */
  .page-content-wrapper .page-content {
    margin-left: var(--sidebar-width-expanded) !important;
    min-height: calc(100vh - var(--header-height) - 33px) !important;
  }

  .page-footer .page-footer-inner {
    margin-left: var(--sidebar-width-expanded) !important;
  }

  /* === Sidebar thu gọn (collapsed) === */
  .page-sidebar-closed .page-sidebar,
  .page-sidebar-closed .page-sidebar .page-sidebar-menu {
    width: var(--sidebar-width-collapsed) !important;
  }

  .page-sidebar-closed.page-sidebar-fixed .page-sidebar {
    width: var(--sidebar-width-collapsed) !important;
  }

  .page-sidebar-closed .page-content-wrapper .page-content {
    margin-left: var(--sidebar-width-collapsed) !important;
  }

  .page-sidebar-closed .page-footer .page-footer-inner {
    margin-left: var(--sidebar-width-collapsed) !important;
  }

  /* Hover expand khi collapsed */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover {
    width: var(--sidebar-width-expanded) !important;
    z-index: 10000 !important;
    box-shadow: var(--sidebar-hover-shadow) !important;
    overflow-y: auto !important;
  }

  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu {
    width: var(--sidebar-width-expanded) !important;
  }

  /* Custom scrollbar */
  .page-sidebar::-webkit-scrollbar {
    width: 8px;
  }

  .page-sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
  }

  .page-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
  }

  .page-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

/* ====================================================================
   5. MENU STYLING CHUNG CHO TẤT CẢ DESKTOP (>= 768px)
==================================================================== */
@media (min-width: 1024px) {
  /* === Menu item expanded state === */
  .page-sidebar-menu.page-sidebar-menu-compact > li {
    text-align: left !important;
  }

  .page-sidebar-menu.page-sidebar-menu-compact > li > a {
    text-align: left !important;
    min-height: 50px !important;
    padding: 15px 15px 15px 15px !important;
    position: relative !important;
  }

  .page-sidebar-menu.page-sidebar-menu-compact > li > a > .title {
    display: inline-block !important;
    text-align: left !important;
    margin-top: 0px !important;
  }

  .page-sidebar-menu.page-sidebar-menu-compact > li > a > i {
    font-size: 16px !important;
    text-align: left !important;
    margin-right: 10px !important;
    width: auto !important;
  }

  /* Arrow positioning */
  .page-sidebar-menu.page-sidebar-menu-compact > li > a > .arrow {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    float: none !important;
    margin: 0 !important;
  }

  /* Selected indicator */
  .page-sidebar-menu.page-sidebar-menu-compact > li.active > a > .selected {
    top: 14px !important;
  }

  /* Submenu items */
  .page-sidebar-menu.page-sidebar-menu-compact > li > .sub-menu > li > a {
    padding-left: 40px !important;
    position: relative !important;
  }

  /* === COLLAPSED STATE MENU ITEMS === */
  .page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li > a {
    min-height: 54px !important;
    padding: 17px 0 !important;
    text-align: center !important;
  }

  .page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li > a > i {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li > a > .title,
  .page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li > a > .arrow,
  .page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li > a > .badge {
    display: none !important;
  }

  /* Hide submenu when collapsed */
  .page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li > .sub-menu {
    display: none !important;
  }

  /* === HOVER STATE KHI COLLAPSED === */
  /* Menu item hover - restore full layout */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a {
    padding: 15px 15px 15px 15px !important;
    min-height: 50px !important;
    text-align: left !important;
    position: relative !important;
  }

  /* Icon hover */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i {
    width: auto !important;
    text-align: left !important;
    margin-right: 10px !important;
    font-size: 16px !important;
    display: inline-block !important;
  }

  /* Title hover - show */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > .title {
    display: inline-block !important;
    opacity: 1 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Arrow hover - show positioned right */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > .arrow {
    display: inline-block !important;
    opacity: 1 !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    float: none !important;
    margin: 0 !important;
  }

  /* Selected indicator hover */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > .selected {
    right: 0 !important;
    top: 14px !important;
  }

  /* Badge hover - show */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > .badge {
    display: block !important;
  }

  /* Submenu hover - show inline */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > .sub-menu {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    margin: 0 !important;
  }

  /* Submenu items padding */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > .sub-menu > li > a {
    padding-left: 40px !important;
    position: relative !important;
  }

  /* Submenu arrow positioning */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a > .arrow {
    display: inline-block !important;
    opacity: 1 !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    float: none !important;
    margin: 0 !important;
  }

  /* 2nd level submenu */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > .sub-menu > li > .sub-menu > li > a {
    padding-left: 55px !important;
  }

  /* 3rd level submenu */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a {
    padding-left: 70px !important;
  }
}

/* ====================================================================
   6. SIDEBAR TOGGLE BUTTON
==================================================================== */
@media (min-width: 1024px) {
  .sidebar-toggle-item {
    display: block !important;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 15px;
  }

  .sidebar-toggle-item .sidebar-toggler {
    display: block !important;
    cursor: pointer;
    color: #9ba0a8;
    padding: 12px 15px;
    transition: all 0.3s ease;
  }

  .sidebar-toggle-item .sidebar-toggler:hover {
    background-color: rgba(255,255,255,0.05);
    color: #fff;
  }

  .sidebar-toggle-item .sidebar-toggler i {
    margin-right: 10px;
    transition: transform 0.3s ease;
  }

  /* Xoay icon khi sidebar đóng */
  .page-sidebar-closed .sidebar-toggle-item .sidebar-toggler i {
    transform: rotate(180deg);
  }

  /* Ẩn text khi sidebar thu gọn */
  .page-sidebar-closed .sidebar-toggle-item .title {
    display: none;
  }

  /* Căn giữa icon khi sidebar thu gọn */
  .page-sidebar-closed .sidebar-toggle-item .sidebar-toggler {
    text-align: center;
    padding: 12px 0;
  }

  /* Hover restore text visibility */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .sidebar-toggle-item .title {
    display: inline-block !important;
  }

  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .sidebar-toggle-item .sidebar-toggler {
    text-align: left !important;
    padding: 12px 15px !important;
  }

  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .sidebar-toggle-item .sidebar-toggler i {
    transform: rotate(0deg) !important;
  }
}

/* ====================================================================
   7. SMOOTH TRANSITIONS
==================================================================== */
@media (min-width: 1024px) {
  .page-sidebar {
    transition: width 0.3s ease !important;
  }

  .page-sidebar .page-sidebar-menu {
    transition: width 0.3s ease !important;
  }

  .page-content-wrapper .page-content {
    transition: margin-left 0.3s ease !important;
  }

  .page-footer .page-footer-inner {
    transition: margin-left 0.3s ease !important;
  }

  .page-sidebar-menu > li > a > .title,
  .page-sidebar-menu > li > a > .arrow,
  .page-sidebar-menu > li > a > .badge {
    transition: opacity 0.2s ease, display 0s !important;
  }
}

/* ====================================================================
   8. FOOTER FIX - ENSURE FOOTER STAYS AT BOTTOM
==================================================================== */
@media (min-width: 1024px) {
  .page-footer {
    clear: left !important;
  }

  .page-sidebar-fixed .page-footer {
    margin-left: var(--sidebar-width-expanded) !important;
  }

  .page-sidebar-fixed.page-sidebar-closed .page-footer {
    margin-left: var(--sidebar-width-collapsed) !important;
  }
}

/* ====================================================================
   9. FIREFOX SCROLLBAR SUPPORT
==================================================================== */
@media (min-width: 1024px) {
  /* Firefox scrollbar styling */
  .page-sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
  }

  /* Firefox hover state */
  .page-sidebar:hover {
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.05);
  }
}

/* ====================================================================
   10. TABLET LANDSCAPE ORIENTATION (1024x768, 1366x1024)
==================================================================== */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  /* Sidebar height adjustment for landscape tablets */
  .page-sidebar {
    height: calc(100vh - var(--header-height)) !important;
    max-height: calc(100vh - var(--header-height)) !important;
  }

  .page-sidebar-fixed .page-sidebar {
    height: calc(100vh - var(--header-height)) !important;
  }

  /* Ensure content doesn't overflow */
  .page-content-wrapper .page-content {
    min-height: calc(100vh - var(--header-height) - 33px) !important;
  }
}

/* iPad Pro landscape specific (1366x1024) */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .page-sidebar {
    width: var(--sidebar-width-expanded) !important;
  }

  /* Slightly smaller menu items for better fit */
  .page-sidebar-menu.page-sidebar-menu-compact > li > a {
    padding: 12px 15px !important;
    min-height: 46px !important;
  }
}

/* ====================================================================
   11. TOUCH DEVICE SUPPORT (hover: none)
==================================================================== */
@media (hover: none) and (min-width: 1024px) {
  /* On touch devices, don't rely on hover for collapsed sidebar */
  /* Instead, show a tap indicator or keep sidebar expanded */

  .page-sidebar-closed.page-sidebar-fixed .page-sidebar {
    /* Add visual cue that sidebar is tappable */
    cursor: pointer;
  }

  /* Remove hover-dependent transitions on touch */
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover {
    /* On touch, hover won't work reliably, so we rely on tap/click */
    transition: none !important;
  }

  /* Menu items need larger touch targets (min 44px) */
  .page-sidebar-menu > li > a {
    min-height: 48px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .page-sidebar-menu .sub-menu > li > a {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* Pointer coarse (touch screens) */
@media (pointer: coarse) and (min-width: 1024px) {
  /* Larger touch targets */
  .page-sidebar-menu > li > a {
    min-height: 48px !important;
  }

  .page-sidebar-menu .sub-menu > li > a {
    min-height: 44px !important;
  }

  /* Sidebar toggle button larger for touch */
  .sidebar-toggle-item .sidebar-toggler {
    padding: 15px !important;
    min-height: 48px !important;
  }
}

/* ====================================================================
   12. ACCESSIBILITY - FOCUS STATES & KEYBOARD NAVIGATION
==================================================================== */
@media (min-width: 1024px) {
  /* Focus visible for keyboard navigation */
  .page-sidebar-menu > li > a:focus-visible {
    outline: 2px solid #5bc0de !important;
    outline-offset: -2px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  .page-sidebar-menu .sub-menu > li > a:focus-visible {
    outline: 2px solid #5bc0de !important;
    outline-offset: -2px !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* Toggle button focus */
  .sidebar-toggle-item .sidebar-toggler:focus-visible {
    outline: 2px solid #5bc0de !important;
    outline-offset: -2px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Skip focus outline when using mouse */
  .page-sidebar-menu > li > a:focus:not(:focus-visible),
  .page-sidebar-menu .sub-menu > li > a:focus:not(:focus-visible),
  .sidebar-toggle-item .sidebar-toggler:focus:not(:focus-visible) {
    outline: none !important;
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .page-sidebar-menu > li > a:focus-visible {
      outline: 3px solid #fff !important;
    }

    .page-sidebar-menu > li.active > a {
      border-left: 4px solid #fff !important;
    }
  }

  /* Reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    .page-sidebar,
    .page-sidebar .page-sidebar-menu,
    .page-content-wrapper .page-content,
    .page-footer .page-footer-inner,
    .page-sidebar-menu > li > a > .title,
    .page-sidebar-menu > li > a > .arrow,
    .page-sidebar-menu > li > a > .badge {
      transition: none !important;
    }
  }
}

/* ====================================================================
   13. SUBMENU LEVELS PADDING CONSISTENCY (Expanded State)
==================================================================== */
@media (min-width: 1024px) {
  /* Level 1 submenu items (direct children of main menu) */
  .page-sidebar-menu.page-sidebar-menu-compact > li > .sub-menu > li > a {
    padding-left: 40px !important;
  }

  /* Level 2 submenu items */
  .page-sidebar-menu.page-sidebar-menu-compact > li > .sub-menu > li > .sub-menu > li > a {
    padding-left: 55px !important;
  }

  /* Level 3 submenu items */
  .page-sidebar-menu.page-sidebar-menu-compact > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a {
    padding-left: 70px !important;
  }

  /* Submenu arrow icon for all levels */
  .page-sidebar-menu .sub-menu > li > a > .arrow {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* Active submenu item styling */
  .page-sidebar-menu .sub-menu > li.active > a,
  .page-sidebar-menu .sub-menu > li.open > a {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }
}

/* ====================================================================
   14. PRINT STYLES - HIDE SIDEBAR WHEN PRINTING
==================================================================== */
@media print {
  /* Hide sidebar completely */
  .page-sidebar-wrapper,
  .page-sidebar {
    display: none !important;
    width: 0 !important;
  }

  /* Reset content margin for full-width printing */
  .page-content-wrapper .page-content {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .page-footer {
    margin-left: 0 !important;
  }

  /* Hide mobile menu as well */
  .mobile-menu-wrapper,
  .mobile-menu-overlay,
  .mobile-menu-toggle {
    display: none !important;
  }
}

/* ====================================================================
   15. MOBILE VS DESKTOP MENU TOGGLE FIX
   Đảm bảo hamburger menu chỉ hiện trên mobile, sidebar hiện trên desktop
==================================================================== */

/* === DESKTOP (>= 1024px): Ẩn mobile menu, hiện desktop sidebar === */
@media (min-width: 1024px) {
  /* Force hide mobile menu elements on desktop - ULTRA AGGRESSIVE */
  .mobile-menu-toggle,
  .mobile-menu-square,
  a.mobile-menu-toggle,
  a.mobile-menu-square,
  .page-header-inner .mobile-menu-toggle,
  .page-header-inner .mobile-menu-square,
  .page-header-inner a.mobile-menu-toggle,
  .page-header-inner a.mobile-menu-square,
  [class*="mobile-menu-toggle"],
  [class*="mobile-menu-square"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    /* Clip techniques for extra safety */
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(100%) !important;
    /* Prevent any flex/grid display */
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Override any inline styles set by jQuery */
  .mobile-menu-toggle[style],
  .mobile-menu-square[style],
  a.mobile-menu-toggle[style],
  a.mobile-menu-square[style] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(100%) !important;
  }

  .mobile-menu-wrapper,
  .mobile-menu-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Force show desktop sidebar */
  .page-sidebar-wrapper {
    display: block !important;
    visibility: visible !important;
    width: auto !important;
  }

  .page-sidebar {
    display: block !important;
    visibility: visible !important;
  }

  /* Ensure sidebar menu is visible */
  .page-sidebar .page-sidebar-menu {
    display: block !important;
    visibility: visible !important;
  }
}

/* === MOBILE (< 1024px): Hiện mobile menu, ẩn desktop sidebar === */
@media (max-width: 1023px) {
  /* Force show mobile menu toggle */
  .mobile-menu-toggle,
  .mobile-menu-square,
  a.mobile-menu-toggle,
  a.mobile-menu-square {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10001 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Mobile menu wrapper - initially hidden, shown via JS */
  .mobile-menu-wrapper {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Force hide desktop sidebar on mobile */
  .page-sidebar-wrapper,
  .page-sidebar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
  }
}

/* ====================================================================
   16. ADDITIONAL SIDEBAR VISIBILITY FIXES
==================================================================== */

/* Ensure sidebar is always visible on tablet/desktop when not collapsed */
@media (min-width: 1024px) {
  /* Non-closed sidebar should always show */
  body:not(.page-sidebar-closed) .page-sidebar-wrapper,
  body:not(.page-sidebar-closed) .page-sidebar {
    display: block !important;
    visibility: visible !important;
  }

  /* Collapsed sidebar should still show (just narrower) */
  body.page-sidebar-closed .page-sidebar-wrapper,
  body.page-sidebar-closed .page-sidebar {
    display: block !important;
    visibility: visible !important;
  }

  /* Override any jQuery .hide() inline styles */
  .page-sidebar-wrapper[style*="display: none"],
  .page-sidebar[style*="display: none"] {
    display: block !important;
  }
}

/* Fix for case when body has both mobile and sidebar classes */
@media (min-width: 1024px) {
  body.mobile-menu-open .page-sidebar-wrapper,
  body.mobile-menu-open .page-sidebar {
    display: block !important;
    visibility: visible !important;
  }

  body.mobile-sidebar-open .page-sidebar-wrapper,
  body.mobile-sidebar-open .page-sidebar {
    display: block !important;
    visibility: visible !important;
  }
}

/* ====================================================================
   17. MOBILE HAMBURGER POSITIONING FIX
   Đảm bảo hamburger luôn ở bên trái trên mobile
==================================================================== */
@media (max-width: 1023px) {
  /* Force hamburger to left side - override any flex centering */
  .page-header-inner .mobile-menu-toggle,
  .page-header-inner .mobile-menu-square,
  .page-header-inner a.mobile-menu-toggle,
  .page-header-inner a.mobile-menu-square {
    position: absolute !important;
    left: 10px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    /* Ensure it's not affected by flex */
    flex: none !important;
    order: -1 !important;
  }

  /* Ensure header has position relative for absolute positioning */
  .page-header-inner {
    position: relative !important;
  }

  /* Mobile menu wrapper should slide from left */
  .mobile-menu-wrapper {
    position: fixed !important;
    left: -260px !important;
    top: 0 !important;
    width: 260px !important;
    height: 100vh !important;
    z-index: 10000 !important;
    transition: left 0.3s ease !important;
  }

  /* When menu is open */
  body.mobile-menu-open .mobile-menu-wrapper {
    left: 0 !important;
  }

  /* Overlay */
  .mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }

  body.mobile-menu-open .mobile-menu-overlay {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Sections 18-19 đã được xóa - không còn cần thiết vì < 1024px giờ dùng mobile layout */