@media (min-width: 768px) {  
	.table-responsive {  overflow: inherit;   }
    .table-lg-sm {
        padding: 0.3rem; /* giống table-sm */
        font-size: 0.875rem; /* giống table-sm */
      }
    .table-lg-sm td, .table-lg-sm th {
        padding: 0.3rem;
      } 
}

@media (max-width: 576px) {
    .position-fixed { width: 93%; /* Màn hình nhỏ, chiếm toàn bộ chiều rộng */ }
    .navi_menu {  width: 60%; }
    .in_lua_td_width { width: 25%; }
    .so_mau_in_td { width: 20%; }
}

@media (min-width: 576px) and (max-width: 767px) {
    .position-fixed { width: 25%; /* Cho kích thước cột nhỏ hơn ở màn hình nhỏ (tương đương col-3) */ }
    .navi_menu {  width: 70%; }
    .in_lua_td_width { width: 25%; }
    .so_mau_in_td { width: 20%; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .position-fixed { width: 50%; /* Cho kích thước cột trung bình (tương đương col-2) */ }
    .navi_menu {  width: 50%; }
    .in_lua_td_width { width: 25%; }
    .so_mau_in_td { width: 20%; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .position-fixed { width: 40%; /* Cho kích thước cột lớn (tương đương col-2) */ }
    .sidebar_fix {width: 15.5% !important; /* Cho kích thước cột rất lớn (tương đương col-2) */}
    .navi_menu {  width: 40%; }
    .in_lua_td_width { width: 20%; }
    .so_mau_in_td { width: 15%; }
}

@media (min-width: 1200px) {
    .position-fixed { width: 30%; /* Cho kích thước cột rất lớn (tương đương col-2) */ }
    .sidebar_fix {width: 16% !important; /* Cho kích thước cột rất lớn (tương đương col-2) */}
    .navi_menu {  width: 30%; }
    .in_lua_td_width { width: 15%; }
    .so_mau_in_td { width: 10%; }
}

html {
  /*height: -webkit-fill-available;*/
}

body, footer {
  min-height: -webkit-fill-available;
  font-size:11pt !important;
}

main {
  /*height: 100vh;
  height: -webkit-fill-available;*/
  min-height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
}

.viewport_height{min-height: 85vh !important}

/*---- CHỈNH KÍCH THƯỚC, WIDTH, HEIGHT -------*/
.w-5{width:5%!important}
.w-10{width:10%!important}
.w-15{width:15%!important}
.w-20{width:20%!important}
.w-30{width:30%!important}
.w-35{width:35%!important}
.w-40{width:40%!important}
.w-45{width:45%!important}
.w-55{width:55%!important}
.w-60{width:60%!important}
.w-65{width:65%!important}
.w-70{width:70%!important}

/*---- CHỈNH MÀU SẮC -------*/
.xdark, tr.xdark td { background-color: #e9ecef !important; }
.xgreen, tr.xgreen td { background-color: #FBFFF2 !important; }
.xinfo, tr.xinfo td { background-color: #E6FFFE !important; }
.xsuccess, tr.xsuccess td { background-color: #E8FFEA !important; }
.xyellow, tr.xyellow td { background-color: #FEF7E5 !important; }
.xrose, tr.xrose td { background-color: #FFE7FF !important; }
.xprimary, tr.xprimary td { background-color: #E6F7FF !important; }
.xred, tr.xred td { background-color: #FFE5E6 !important; }
.xpurple, tr.xpurple td { background-color: #E8EDFF !important; }



/*---- CHỈNH FONT CHỮ: MÀU SẮC, FONT SIZE -------*/
.form-check-label, .pointerAjax, .popUpModal, .zoomIt{cursor:pointer}
.text-shadow, .form-check-label:hover, .pointerAjax:hover, .popUpModal:hover{ text-shadow: 0px 0px 15px yellow;}
.text-yellow {
    color: yellow;
    border: 1px solid rgba(255, 255, 0, 0.7);  /* Viền màu vàng nhạt */
    padding: 2px;  /* Thêm khoảng cách giữa văn bản và viền */
    border-radius: 3px;  /* Tùy chọn: làm tròn góc viền */
}
.text-body-secondary, tr.text-body-secondary td{color:#52595f;}
.text-secondary, tr.text-secondary td{color:#6c757d;}

.fs-7{font-size:11pt;}
.fs-8{font-size:10.5pt;}
.fs-9{font-size:9pt;}
.fs-10{font-size:8pt;}

/*---- TINH CHỈNH / DECOR HTML VIEWER -------*/

tr:hover td {
    background-color: #E6F7FF !important; /* tương đương với bg-light */
  }

/* Khi in: ẩn mọi thứ, chỉ hiển thị phần cần in */
@media print {
  body {
    visibility: hidden;
  }
  .print-area {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
  #pre_check {
    top: -15px;
    left: -110px;
    width: 190mm; height: 148mm;
    margin:0;
  }
}

.page-break {
    page-break-before: always; /* hoặc page-break-after: always */
  }

label:has(~ input[required])::after {
    content: " *";
    color: red;
}

label:has(~ select[required])::after {
    content: " *";
    color: red;
}

.nav-pills button {
    width: 100%; /* Cần thiết để pseudo-element được đặt đúng vị trí */
}

.nav-link.active {
    font-weight: 600; /* Semibold */
}

.avatar-img {
    width: 37px;            /* Kích thước chiều rộng của avatar */
    height: 37px;           /* Kích thước chiều cao của avatar */
    border-radius: 50%;     /* Để hình ảnh trở thành hình tròn */
    object-fit: cover;      /* Đảm bảo hình ảnh không bị méo */
    /*border: 1px solid #ddd;  Đường viền quanh avatar */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Thêm hiệu ứng bóng mờ */
    padding: 3px;
}

.avatar-img.large {
    width: 100px;           /* Kích thước lớn cho avatar */
    height: 100px;          /* Kích thước lớn cho avatar */
}

.avatar-img.small {
    width: 30px;            /* Kích thước nhỏ cho avatar */
    height: 30px;           /* Kích thước nhỏ cho avatar */
}

.ord_featured {
    width: 30px;            /* Kích thước nhỏ cho avatar */
    height: 30px;           /* Kích thước nhỏ cho avatar */
    border-radius: 9%;     /* Để hình ảnh trở thành hình tròn */
    object-fit: cover;      /* Đảm bảo hình ảnh không bị méo */
}

.ord_featured_lg {
    width: 39px;            /* Kích thước nhỏ cho avatar */
    height: 39px;           /* Kích thước nhỏ cho avatar */
}

.ord_featured_xl {
    width: 60px;            /* Kích thước nhỏ cho avatar */
    height: 60px;           /* Kích thước nhỏ cho avatar */
}


/*---- Gradient Backgrounds -------*/

.bg-primary-dark {
    background: linear-gradient(to left, #000, rgb(13 110 253)); /* Gradient từ trắng sang xanh nhạt */
    color: #fff; /* Chữ màu đen cho dễ đọc */
}
.bg-primary-gradient {
    background: linear-gradient(to left, #ffffff, #cce7ff); /* Gradient từ trắng sang xanh nhạt */
    color: black; /* Chữ màu đen cho dễ đọc */
}
.bg-warning-gradient {
    background: linear-gradient(to left, #ffffff, #fff4cc); /* Gradient từ trắng sang vàng nhạt */
    color: black; /* Chữ màu đen cho dễ đọc */
}
.bg-danger-gradient {
    background: linear-gradient(to left, #ffffff, #ffcccc); /* Gradient từ trắng sang đỏ nhạt */
    color: black; /* Chữ màu đen cho dễ đọc */
}
.bg-success-gradient {
    background: linear-gradient(to left, #ffffff, #E8FFEA); /* Gradient từ trắng sang xanh lá nhạt */
    color: black; /* Chữ màu đen cho dễ đọc */
}
.bg-info-gradient {
    background: linear-gradient(to left, #ffffff, #E6FFFE); /* Gradient từ trắng sang xanh dương nhạt */
    color: black; /* Chữ màu đen cho dễ đọc */
}
.bg-pink-gradient {
    background: linear-gradient(to left, #ffffff, #FFE7FF); /* Gradient từ trắng sang xanh dương nhạt */
    color: black; /* Chữ màu đen cho dễ đọc */
}
.bg-purple-gradient {
    background: linear-gradient(to left, #ffffff, #E8EDFF); /* Gradient từ trắng sang xanh dương nhạt */
    color: black; /* Chữ màu đen cho dễ đọc */
}


/*---- CHỈNH FORM CONTROL -------*/

#pre_check input, .noborder-input input {
    border: none;
    outline: none;
}
#pre_check input, .noborder-input input:focus {
    border-color: transparent; /* Loại bỏ viền border */
    box-shadow: none; /* Loại bỏ shadow */
    outline: none; /* Loại bỏ outline */
}

/* Mặc định màu nền và màu chữ của input */
input[readonly] {
    background-color: #f8fafd; /* Màu nền mặc định là trắng */
    color: #000; /* Màu chữ mặc định là đen */
    border: 1px solid #dee2e6; /* Đặt lại viền mặc định của input */
}

/* Nếu bạn muốn loại bỏ hiệu ứng mờ của `readonly` */
input[readonly]::-webkit-input-placeholder {
    color: inherit; /* Giữ nguyên màu placeholder */
}
input[readonly]:focus {
    background-color: #f8fafd; /* Màu nền mặc định là trắng */
    border-color: #dee2e6; /* Đảm bảo viền khi focus vẫn có màu mặc định */
    outline: none; /* Bỏ viền khi focus */
}


/* -- Canh input Group thẳng hàng -- */
.input-group {
    display: flex;
}

.fix-4 {
    flex: 0.4;
}

/* -- Select2 ----------->
/* Tùy chỉnh font-size cho hộp tìm kiếm của Select2 */
.select2-container .select2-selection--single {
    height: calc(1.25em + .75rem + 2px);  /* Kích thước nhỏ */
    font-size: 11pt !important;  /* Font-size 11pt cho hộp tìm kiếm */
    padding: .25rem .75rem;  /* Padding nhỏ giống form-control-sm */
}

/* Tùy chỉnh font-size cho trường tìm kiếm trong dropdown */
.select2-container .select2-search--dropdown .select2-search__field {
    height: calc(1.25em + .75rem);  /* Kích thước nhỏ của hộp tìm kiếm */
    font-size: 11pt !important;  /* Font-size 11pt cho trường tìm kiếm */
}

/* Tùy chỉnh font-size cho kết quả trong dropdown */
.select2-container .select2-results__option {
    font-size: 11pt !important;  /* Font-size 11pt cho các kết quả trong dropdown */
}

/* Dấu * đỏ cho label khi có input hoặc select với thuộc tính required bên trong input-group */
label:has(~ .input-group input[required])::after,
label:has(~ .input-group select[required])::after {
    content: " *";
    color: red;
}