/* ==========================================================================
   bTicket — tối ưu điện thoại (07/11/2026)
   Nạp SAU cùng ở login.php / index.php / add-ticket.php / details-ticket.php.
   Chỉ tác động màn hẹp (<= 767.98px), trừ nhãn trạng thái dùng chung.
   Màu theo bảng chuẩn bERP: primary #3699FF, success #1BC5BD,
   warning #FFA800, danger #F64E60, info #8950FC, chữ phụ #6c757d,
   viền #ced4da, nền #f8f9fa / #F3F6F9.
   ========================================================================== */

:root {
  --m-primary: #3699FF;
  --m-success: #1BC5BD;
  --m-warning: #FFA800;
  --m-danger: #F64E60;
  --m-info: #8950FC;
  --m-muted: #6c757d;
  --m-border: #ced4da;
  --m-bg: #f8f9fa;
  --m-bg2: #F3F6F9;
  --m-gutter: 16px;
  --m-tap: 44px;
}

/* --------------------------------------------------------------------------
   Nhãn trạng thái dạng pill (dùng ở thẻ ticket)
   -------------------------------------------------------------------------- */
.tt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: #fff;
}
.tt-pill.tt-1 { background: var(--m-primary); }
.tt-pill.tt-5 { background: var(--m-info); }
.tt-pill.tt-2 { background: var(--m-warning); }
.tt-pill.tt-3 { background: var(--m-success); }
.tt-pill.tt-4 { background: var(--m-danger); }

/* Màn rộng vẫn dùng nút trạng thái cũ, pill chỉ hiện ở dạng thẻ */
.td-trangthai .tt-pill { display: none; }

/* Lỗi đăng nhập hiện ngay dưới ô mã (mọi kích thước) */
.login-error {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--m-danger);
  background: #fff;
  color: var(--m-danger);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.login-error[hidden] { display: none; }

/* Logo riêng cho màn hẹp ở trang đăng nhập (màn rộng đã có logo cột trái) */
.m-login-logo { display: none; }

/* ==========================================================================
   MÀN HẸP
   ========================================================================== */
@media (max-width: 767.98px) {

  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
  body {
    font-size: 15px;
    background: var(--m-bg);
    -webkit-text-size-adjust: 100%;
  }

  /* Ô nhập >= 16px để iOS không tự phóng to khi chạm */
  input.form-control,
  select.form-control,
  select.custom-select,
  textarea.form-control,
  .select2-container--bootstrap4 .select2-selection__rendered,
  .select2-search__field {
    font-size: 16px !important;
  }

  .btn { min-height: var(--m-tap); font-size: 15px; }

  /* ---------------- Khung chung: lề 16px, không tràn ---------------- */
  .container-scroller,
  .page-body-wrapper,
  .main-panel { max-width: 100vw; overflow-x: hidden; }

  .main-panel { padding-top: 70px; }
  .content-wrapper {
    padding: 12px var(--m-gutter) 24px !important;
    background: var(--m-bg);
  }
  .content-wrapper > .mt-4.mb-4 { margin-top: 8px !important; }
  .center-main-panel { border-radius: 12px; }
  .center-main-panel.p-3,
  .center-main-panel > .p-3 { padding: 12px !important; }
  .custom-fixed-top { width: 100%; height: 0; }
  .footer { padding: 12px var(--m-gutter); }

  /* ---------------- Header gọn: menu | logo | tài khoản ---------------- */
  .navbar {
    padding: 0 !important;
    height: 64px;
  }
  .navbar .navbar-menu-wrapper {
    margin: 8px var(--m-gutter) 0;
    width: calc(100% - 2 * var(--m-gutter)) !important;
    padding: 0 8px !important;
    border-radius: 12px;
    min-height: 52px;
  }
  .navbar .navbar-menu-wrapper > .d-flex {
    align-items: center !important;
    min-height: 52px;
    gap: 4px;
  }
  .navbar .navbar-menu-wrapper .navbar-toggler-right {
    order: 1;
    min-width: var(--m-tap);
    min-height: var(--m-tap);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #3f4254;
  }
  .navbar .navbar-brand.brand-logo-mini {
    order: 2;
    margin: 0 auto 0 4px;
    padding: 0;
  }
  .navbar .navbar-brand.brand-logo-mini img { height: 30px; width: auto; }
  .navbar .navbar-nav {
    order: 3;
    margin-left: auto;
    min-width: 0;
  }
  .navbar .nav-profile .nav-link {
    display: flex;
    align-items: center;
    min-height: var(--m-tap);
    padding: 0 4px !important;
    max-width: 58vw;
  }
  .navbar .nav-profile .profile-name {
    display: inline-block;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    vertical-align: middle;
  }
  .navbar .nav-profile .nav-profile-img { width: 32px; height: 32px; flex: 0 0 32px; }
  .navbar .nav-profile .dropdown-toggle::after { display: none; }
  .navbar .navbar-dropdown-custom {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    min-width: 200px;
    width: auto !important;
  }
  .navbar .navbar-dropdown-custom .dropdown-item {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: 16px;
  }

  /* Menu trượt (sidebar) — mục bấm cao, chữ to */
  .sidebar-offcanvas { top: 72px; max-height: calc(100vh - 72px); }
  .sidebar .nav .nav-item .nav-link {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
  .sidebar .nav .nav-item .menu-title { white-space: normal; }

  /* Nút sáng/tối nổi: không đè nút gửi */
  .darkmode-toggle { right: 16px !important; bottom: 16px !important; }
  body.co-thanh-day .darkmode-toggle { bottom: 88px !important; }

  /* ---------------- Tiêu đề trang (Thêm mới / Chi tiết) ---------------- */
  .page-title-bar { flex-wrap: nowrap; gap: 10px; }
  .page-title-bar .square-btn {
    width: var(--m-tap) !important;
    height: var(--m-tap) !important;
    flex: 0 0 var(--m-tap);
    margin-right: 0 !important;
  }
  .page-title-bar h2 {
    font-size: 20px !important;
    margin: 0;
    border-right: 0 !important;
    padding-right: 0 !important;
  }
  .page-title-bar nav[aria-label="breadcrumb"] { display: none; }

  /* ---------------- Nhãn trên ô (thay nhãn nổi) ---------------- */
  .form-floating,
  .floating-select-two {
    display: flex;
    flex-direction: column;
  }
  .form-floating > label,
  .floating-select-two > label {
    order: -1;
    position: static !important;
    height: auto !important;
    padding: 0 0 6px !important;
    transform: none !important;
    opacity: 1 !important;
    font-size: 15px;
    color: #3f4254;
    border: 0;
  }
  .form-floating > .form-control {
    height: auto;
    min-height: 48px;
    padding: 10px 12px !important;
    border: 1px solid var(--m-border);
    border-radius: 8px;
  }
  .floating-select-two {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .floating-select-two .select2-container { width: 100% !important; }
  .floating-select-two .select2-container--bootstrap4 .select2-selection--single,
  .floating-select-two select {
    min-height: 48px;
    height: auto !important;
    padding: 10px 36px 10px 12px !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 8px !important;
    background: #fff;
    display: flex;
    align-items: center;
  }
  .floating-select-two .select2-container--bootstrap4 .select2-selection--single * { font-size: 16px; }
  .select2-container--bootstrap4 .select2-results__option {
    font-size: 16px !important;
    min-height: var(--m-tap);
    padding: 10px 12px;
  }

  /* ================= DANH SÁCH TICKET (index.php) ================= */

  /* Ô đếm theo trạng thái: lưới 3 cột gọn */
  .tk-thongke {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
    margin: 0 !important;
  }
  .tk-thongke > div {
    background: var(--m-bg2);
    border-radius: 10px;
    padding: 8px 6px;
    min-width: 0;
  }
  .tk-thongke .thumbs-custom { display: none !important; }
  .tk-thongke .ml-3 { margin-left: 0 !important; width: 100%; text-align: center; }
  .tk-thongke .font-1-286rem { font-size: 20px !important; text-align: center !important; margin-bottom: 2px !important; }
  .tk-thongke .font-17pt { font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Nút Thêm mới hết dòng */
  .tk-them-moi { width: 100%; }
  .tk-them-moi .btn {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--m-primary) !important;
    color: #fff !important;
    font-size: 16px !important;
    border-radius: 10px;
  }
  .tk-them-moi .btn a,
  .tk-them-moi .btn:hover { color: #fff !important; text-decoration: none; }

  /* Bộ lọc trạng thái: nút chip dễ chạm */
  .tk-loc .form-floating-empty { border: 0; padding: 0; min-height: 0; background: transparent !important; }
  .tk-loc .rps-flex-wrap,
  .tk-loc .d-flex.gap-6 {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
    justify-content: flex-start !important;
  }
  .tk-loc .md-checkbox {
    min-height: var(--m-tap);
    padding: 0 12px;
    border: 1px solid var(--m-border);
    border-radius: 999px;
    background: #fff;
  }
  .tk-loc .md-checkbox label { font-size: 15px !important; }
  .tk-loc .bg-light { background: transparent !important; }
  .tk-loc .px-3.pt-3 { padding: 0 !important; }

  /* Ô tìm kiếm hết dòng */
  .cs-db-2 {
    float: none !important;
    width: 100%;
    margin: 4px 0 8px;
  }
  .cs-db-2 input[type="search"] { min-height: 48px; border-radius: 10px; border: 1px solid var(--m-border); }

  /* DataTables điều hướng */
  div.dataTables_wrapper div.dataTables_length,
  div.dataTables_wrapper div.dataTables_info { text-align: center; font-size: 15px; color: var(--m-muted); }
  div.dataTables_wrapper div.dataTables_length select { min-height: 40px; font-size: 16px; }
  div.dataTables_wrapper div.dataTables_paginate ul.pagination { flex-wrap: wrap; gap: 4px; }
  .dataTables_paginate .page-link {
    min-width: var(--m-tap);
    min-height: var(--m-tap);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
  }

  /* Bảng -> thẻ */
  table.tk-bang,
  table.tk-bang tbody { display: block !important; width: 100% !important; border: 0 !important; }
  table.tk-bang { margin-top: 4px !important; background: transparent; }
  table.tk-bang thead { display: none !important; }
  table.tk-bang tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "ma     sua"
      "tieude tieude"
      "tt     tg"
      "duan   duan";
    gap: 6px 12px;
    align-items: center;
    position: relative;
    margin: 0 0 12px;
    padding: 14px var(--m-gutter);
    background: #fff !important;
    border: 1px solid var(--m-border);
    border-left: 4px solid var(--m-border);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(54, 153, 255, .15);
  }
  table.tk-bang tbody tr:active { background: var(--m-bg2) !important; }
  table.tk-bang tbody tr.tk-tt-1 { border-left-color: var(--m-primary); }
  table.tk-bang tbody tr.tk-tt-5 { border-left-color: var(--m-info); }
  table.tk-bang tbody tr.tk-tt-2 { border-left-color: var(--m-warning); }
  table.tk-bang tbody tr.tk-tt-3 { border-left-color: var(--m-success); }
  table.tk-bang tbody tr.tk-tt-4 { border-left-color: var(--m-danger); }

  table.tk-bang tbody td {
    display: block;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: left !important;
    white-space: normal;
    min-width: 0;
  }
  table.tk-bang tbody td.td-stt,
  table.tk-bang tbody td.d-none { display: none !important; }
  table.tk-bang tbody td.td-ma { grid-area: ma; font-size: 15px; color: var(--m-muted); }
  table.tk-bang tbody td.td-ma a { color: var(--m-muted) !important; font-weight: 600; }
  table.tk-bang tbody td.td-ma::before { content: "#"; }
  table.tk-bang tbody td.td-thaotac { grid-area: sua; }
  table.tk-bang tbody td.td-thaotac .btn {
    width: var(--m-tap);
    height: var(--m-tap);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 10px;
  }
  table.tk-bang tbody td.td-tieude { grid-area: tieude; }
  table.tk-bang tbody td.td-tieude a {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #181c32 !important;
    word-break: break-word;
  }
  table.tk-bang tbody td.td-tieude .w-content { width: 100% !important; max-width: 100% !important; }
  table.tk-bang tbody td.td-tieude .toggle-button { font-size: 15px; padding: 4px 0; }
  table.tk-bang tbody td.td-trangthai { grid-area: tt; }
  table.tk-bang tbody td.td-trangthai .btnStatusNCR { display: none !important; }
  table.tk-bang tbody td.td-trangthai .tt-pill { display: inline-flex !important; }
  table.tk-bang tbody td.td-thoigian { grid-area: tg; font-size: 15px; color: var(--m-muted); white-space: nowrap; }
  table.tk-bang tbody td.td-thoigian::before { content: "\f073"; font-family: FontAwesome; margin-right: 6px; }
  table.tk-bang tbody td.td-duan {
    grid-area: duan;
    font-size: 15px;
    color: var(--m-muted);
    word-break: break-word;
  }
  table.tk-bang tbody td.td-duan::before { content: "Dự án: "; }
  /* Dòng "không có dữ liệu" của DataTables */
  table.tk-bang tbody td.dataTables_empty {
    grid-column: 1 / -1;
    text-align: center !important;
    padding: 16px 0 !important;
  }
  table.tk-bang tbody tr:has(td.dataTables_empty) {
    display: block !important;
    border-left-color: var(--m-border);
    cursor: default;
  }
  .customer-img-datatable { max-width: 60%; height: auto; }

  /* ================= TẠO TICKET (add-ticket.php) ================= */
  .tk-form .center-main-panel > .p-3 { padding: var(--m-gutter) !important; }
  .tk-form .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .tk-form .darkmod-white,
  .tk-form .dark-mode-text { font-size: 15px; }
  .tk-form .darkmod-white .small { display: block; font-size: 15px; font-weight: 400; margin-top: 2px; color: var(--m-muted) !important; }

  /* Ô chọn tệp: cao, dễ bấm */
  .tk-form input[type="file"].form-control,
  .tk-binhluan input[type="file"] {
    width: 100% !important;
    min-height: 52px;
    height: auto;
    padding: 8px !important;
    font-size: 15px;
    border: 1px dashed var(--m-primary);
    border-radius: 10px;
    background: var(--m-bg2);
    cursor: pointer;
  }
  .tk-form input[type="file"]::file-selector-button,
  .tk-binhluan input[type="file"]::file-selector-button {
    min-height: 36px;
    margin-right: 10px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--m-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
  }
  .tk-form input[type="file"]::-webkit-file-upload-button,
  .tk-binhluan input[type="file"]::-webkit-file-upload-button {
    min-height: 36px;
    margin-right: 10px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--m-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
  }
  /* Ô chọn ảnh: cả khung là nút bấm */
  .tk-chon-anh {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 72px;
    margin-right: 0 !important;
    padding: 8px 12px !important;
    border: 1px dashed var(--m-primary) !important;
    border-radius: 10px;
    background: var(--m-bg2);
    cursor: pointer;
  }
  .tk-chon-anh img { width: 56px !important; height: 56px !important; border-radius: 8px; flex: 0 0 56px; }
  .tk-chon-anh::after {
    content: "Chạm để chọn ảnh (chọn được nhiều ảnh)";
    font-size: 15px;
    color: var(--m-primary);
    font-weight: 600;
  }
  #list_images { margin-top: 8px; }
  #list_images > * { max-width: 33.333%; flex: 0 0 33.333%; }
  #list_images img { width: 100%; height: auto; border-radius: 8px; }

  /* CKEditor: thanh công cụ xuống dòng, vùng soạn đủ cao */
  .cke { width: 100% !important; max-width: 100%; border-radius: 8px; overflow: hidden; }
  .cke_top { white-space: normal !important; }
  .cke_toolbar { float: left; }
  .cke_toolgroup { margin-bottom: 4px !important; }
  a.cke_button { min-width: 32px; min-height: 32px; }
  .tk-form .cke_contents { height: 260px !important; }
  .tk-binhluan .cke_contents { height: 180px !important; }
  .tk-form textarea#noidung,
  .tk-binhluan textarea { min-height: 200px; font-size: 16px; }

  /* Nút Lưu dính đáy, hết dòng */
  .tk-form { padding-bottom: 88px; }
  .btn-save-bottom {
    margin-left: 0 !important;
    padding: 10px var(--m-gutter) calc(10px + env(safe-area-inset-bottom)) !important;
    z-index: 1030;
  }
  .btn-save-bottom .btn {
    width: 100%;
    min-height: 52px;
    background: var(--m-success) !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700;
    border-radius: 10px;
  }
  .msg-text {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--m-danger);
    background: #fff;
    font-size: 15px;
    line-height: 1.4;
  }

  /* ================= CHI TIẾT TICKET (details-ticket.php) ================= */
  .tk-chitiet > .p-3 { padding: 12px !important; }
  .tk-chitiet .row.p-0.m-0 > .col-sm-12 { padding: 0 !important; margin-bottom: 12px !important; }

  /* Thông tin ticket: lưới nhãn / giá trị */
  .tk-thongtin {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
    height: auto !important;
    padding: 0 0 12px !important;
    font-size: 15px;
  }
  .tk-thongtin > span,
  .tk-thongtin > div > span { margin: 0 !important; word-break: break-word; }
  .tk-thongtin > div { display: contents !important; }
  .tk-thongtin .text-muted { color: var(--m-muted) !important; white-space: nowrap; }

  /* Lịch sử: khung chat, không cuộn lồng */
  .scroll-history { max-height: none !important; overflow: visible !important; }
  .scroll-history > .mt-3 { margin-top: 0 !important; }
  .cmt-item { padding-top: 12px !important; }
  .cmt-item > .d-flex {
    align-items: flex-start !important;
    gap: 8px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .cmt-item > .d-flex > img {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px;
    margin-right: 0 !important;
  }
  .cmt-item .media-body {
    min-width: 0;
    max-width: calc(100% - 52px);
    padding: 10px 12px;
    border-radius: 4px 14px 14px 14px;
    background: var(--m-bg2);
    border: 1px solid #e4e6ef;
  }
  /* Khách (mình) bên phải, nền xanh nhạt */
  .cmt-item.cmt-kh > .d-flex { flex-direction: row-reverse; }
  .cmt-item.cmt-kh .media-body {
    border-radius: 14px 4px 14px 14px;
    background: #E1F0FF;
    border-color: #c4e1ff;
  }
  /* Nội dung ticket gốc: khung nổi bật, hết dòng */
  .cmt-item.cmt-goc > .d-flex > img { display: none; }
  .cmt-item.cmt-goc .media-body {
    max-width: 100%;
    width: 100%;
    background: #fff;
    border: 1px solid var(--m-border);
    border-left: 4px solid var(--m-primary);
    border-radius: 10px;
  }
  .cmt-item .media-body > .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0;
    margin-bottom: 4px;
  }
  .cmt-item .media-body > .d-flex h5 { font-size: 15px !important; font-weight: 700; margin-bottom: 0 !important; }
  .cmt-item .media-body > .d-flex .ml-auto { margin: 0 !important; }
  .cmt-item .media-body > .d-flex .ml-auto .mb-2 { margin-bottom: 0 !important; font-size: 15px; color: var(--m-muted) !important; }
  .cmt-item .user-comment-content,
  .cmt-item .user-comment-content p,
  .cmt-item .user-comment-content span {
    font-size: 15px !important;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .cmt-item .user-comment-content img:not(.img-details) { max-width: 100% !important; height: auto !important; }
  .cmt-item .user-comment-content table { display: block !important; max-width: 100%; overflow-x: auto; }
  .cmt-item .user-comment-content a { overflow-wrap: anywhere; }
  .cmt-item .user-comment-content.d-flex { flex-wrap: wrap; gap: 8px; align-items: center; }
  .cmt-item .details-dashed { margin-left: 0 !important; }
  .cmt-item .img-details {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover;
    border-radius: 8px;
  }

  /* Ô bình luận + gửi ở cuối */
  .tk-binhluan { padding: 0 !important; }
  .tk-binhluan .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .tk-binhluan .font-weight-bold.mb-3 { margin-bottom: 8px !important; font-size: 15px; }
  .tk-binhluan .text-dark.mb-2 { font-size: 15px; color: var(--m-muted) !important; }
  .tk-binhluan .custom-file-details-ticket { padding: 0 !important; border: 0 !important; }
  .tk-binhluan .input-file.w-80 { width: 100% !important; }
  .cmt-send-bar { margin-left: 0 !important; width: 100%; flex-direction: column; align-items: stretch !important; gap: 10px; }
  .cmt-send-bar select.custom-select {
    width: 100% !important;
    min-height: 52px;
    margin-right: 0 !important;
    border: 2px solid var(--m-primary);
    border-radius: 10px;
    font-weight: 600;
  }
  .cmt-send-bar .btn {
    width: 100%;
    min-height: 52px;
    padding: 0 16px !important;
    background: var(--m-success) !important;
    border-color: var(--m-success) !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700;
    border-radius: 10px !important;
  }

  /* ================= ĐĂNG NHẬP (login.php) ================= */
  .login-trang .row.h-100vh { height: auto !important; min-height: 100vh; min-height: 100dvh; margin: 0; }
  .login-trang .container-fluid { padding: 0; }
  .login-trang .rps-right-login {
    padding: 24px var(--m-gutter) !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--m-bg);
  }
  .login-trang .rps-center-login-form {
    width: 100%;
    max-width: 420px;
    margin: 0 !important;
    padding: 24px var(--m-gutter) !important;
    background: #fff;
    border-radius: 16px;
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
  }
  .login-trang .text-login-right { font-size: 22px; text-align: center; line-height: 1.35; }
  .login-trang .font-center-right { font-size: 15px; text-align: center; color: var(--m-muted); }
  .login-trang .text-access { font-size: 15px; color: var(--m-muted); }
  .login-trang .d-flex.text-access {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px;
  }
  .login-trang .d-flex.text-access .ml-auto {
    margin-left: 0 !important;
    min-height: var(--m-tap);
    display: flex;
    align-items: center;
  }
  .login-trang .token-access-input { position: relative; }
  .login-trang .token-access-input input {
    height: 52px;
    padding: 0 52px 0 14px;
    border: 1px solid var(--m-border);
    border-radius: 10px;
    font-size: 17px !important;
  }
  .login-trang .token-access-input input:focus { border-color: var(--m-primary); box-shadow: 0 0 0 3px rgba(54, 153, 255, .2); }
  .login-trang .positon-eye {
    position: absolute;
    right: 0;
    top: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .login-trang .custom-checkbox-wh { width: 22px; height: 22px; }
  .login-trang label[for="remember-me"] { min-height: var(--m-tap); display: flex; align-items: center; margin: 0; }
  .login-trang #login-button {
    width: 100%;
    min-height: 52px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 10px;
    background: var(--m-primary);
    border-color: var(--m-primary);
  }
  .login-trang .divider { width: 100%; }
  .login-trang .modal-dialog { margin: 16px; }
  .login-trang .modal-footer .btn { width: 100%; min-height: 48px; }
}

/* Logo đăng nhập: cột trái (có logo) bị ẩn từ <= 992px */
@media (max-width: 991.98px) {
  .login-trang .m-login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
  }
  .login-trang .m-login-logo img { height: 44px; width: auto; }
  .login-trang .m-login-logo span { font-size: 26px; font-weight: 700; color: #181c32; }
}

@media (max-width: 380px) {
  .tk-thongke { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .navbar .nav-profile .profile-name { max-width: 30vw; }
}

/* ==========================================================================
   07/11/2026 lượt 2 — GĐ "xấu quá" (ảnh chụp ở chế độ tối):
   - Điện thoại: tắt chế độ tối (darkmode-js đảo màu + style.css tô nền xanh đậm, chữ trắng → ô đếm mất chữ). Ẩn nút ☀.
   - Ô đếm thành thẻ trắng, số màu theo trạng thái; bộ lọc trạng thái thành chip bật/tắt (ô tick ẩn, chip đổi màu khi chọn).
   ========================================================================== */
@media (max-width: 767.98px) {
  .darkmode-toggle, .darkmode-layer, .darkmode-background { display: none !important; }

  body, .content-wrapper, .main-panel { background: var(--m-bg) !important; }
  .center-main-panel, .center-main-panel .bg-light { background: #fff !important; filter: none !important; box-shadow: none !important; }
  .center-main-panel { border-radius: 12px; border: 1px solid #e9edf2; }
  .navbar .navbar-menu-wrapper { background: #fff !important; color: #3f4254 !important; border: 1px solid #e9edf2; box-shadow: 0 2px 8px rgba(15, 23, 42, .04); }
  .navbar .navbar-brand.brand-logo-mini { display: flex !important; align-items: center; gap: 8px; text-decoration: none; }
  .navbar .navbar-brand.brand-logo-mini::after { content: "bTicket · Hỗ trợ"; font-size: 16px; font-weight: 700; color: #3f4254; white-space: nowrap; }

  /* Ô đếm: thẻ trắng, số to màu trạng thái, nhãn xám */
  .tk-thongke > div { background: #fff !important; border: 1px solid #e9edf2; border-radius: 12px; padding: 10px 4px !important; }
  .tk-thongke .font-1-286rem { font-size: 22px !important; font-weight: 700 !important; line-height: 1.2; }
  .tk-thongke .font-17pt, .tk-thongke .color-text { font-size: 13px !important; color: var(--m-muted) !important; opacity: 1 !important; }
  .tk-thongke .text-custom-project { color: var(--m-info) !important; }
  .tk-thongke .text-custom-new { color: var(--m-primary) !important; }
  .tk-thongke .text-processing, .tk-thongke .text-warning { color: var(--m-warning) !important; }
  .tk-thongke .text-processed { color: var(--m-info) !important; }
  .tk-thongke .text-custom-complete { color: var(--m-success) !important; }
  .tk-thongke .text-custom-end { color: var(--m-muted) !important; }

  /* Bộ lọc trạng thái: chip, ô tick ẩn */
  .tk-loc .md-checkbox { position: relative; padding: 0 !important; border: 0 !important; background: transparent !important; min-height: 0; }
  .tk-loc .md-checkbox input[type=checkbox] { position: absolute !important; opacity: 0 !important; width: 1px; height: 1px; pointer-events: none; }
  .tk-loc .md-checkbox label {
    display: inline-flex !important; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px !important; margin: 0 !important;
    border: 1px solid var(--m-border); border-radius: 999px; background: #fff; color: #3f4254 !important;
    font-size: 14px !important; font-weight: 600 !important; cursor: pointer; user-select: none;
  }
  .tk-loc .md-checkbox label::before, .tk-loc .md-checkbox label::after { display: none !important; content: none !important; }
  .tk-loc .md-checkbox input[type=checkbox]:checked + label { background: #E1F0FF; border-color: var(--m-primary); color: var(--m-primary) !important; }
  .tk-loc .md-checkbox input[type=checkbox]:checked + label::before { content: "✓" !important; display: inline !important; position: static !important; width: auto; height: auto; border: 0; background: none; font-weight: 700; }
  .tk-loc .rps-flex-wrap, .tk-loc .d-flex.gap-6 { gap: 8px !important; }
  .tk-loc .rps-flex-wrap > div { margin: 0 !important; }

  /* Ô chọn dự án */
  .tk-loc select, .tk-loc .select2-container .select2-selection { min-height: 44px !important; border-radius: 10px !important; border-color: var(--m-border) !important; }
  .tk-loc .floating-select-two > label, .tk-loc .form-floating > label { color: var(--m-muted) !important; font-size: 13px !important; text-align: left; }

  /* Nút Thêm mới: primary chuẩn, chữ hoa đầu câu */
  .tk-them-moi .btn { background: var(--m-primary) !important; text-transform: none !important; font-weight: 700 !important; box-shadow: none !important; }
}

/* 07/11/2026: 1 nút "Chọn file" (add-ticket) — dùng mọi kích thước màn */
.tk-chon-file { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px dashed var(--m-primary); border-radius: 10px; background: #E1F0FF; color: var(--m-primary); font-weight: 700; cursor: pointer; }
.tk-ds-tep { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tk-tep { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--m-border); border-radius: 10px; background: #fff; }
.tk-tep img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: 0 0 44px; }
.tk-tep .tk-tep-icon { width: 44px; text-align: center; font-size: 26px; color: var(--m-primary); flex: 0 0 44px; }
.tk-tep span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #3f4254; }
.tk-tep-xoa { border: 0; background: transparent; color: var(--m-danger); font-size: 24px; line-height: 1; width: 36px; height: 36px; flex: 0 0 36px; }
@media (max-width: 767.98px) { .tk-chon-file { width: 100%; min-height: 48px; } }