/* ===== Thông báo chung – Base style ===== */
#msg_notice,
#msg_warning,
#msg_error,
#msg_info,
.warning-banner {
  display: flex;
  align-items: center;              /* Căn giữa dọc icon + text */
  gap: 12px;                        /* Khoảng cách icon - text */
  padding: 14px 18px;
  padding-left: 52px;               /* Đẩy text ra để tránh chồng icon */
  margin-bottom: 16px;
  min-height: 56px;                 /* Chiều cao tối thiểu đẹp, không quá nhỏ */
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;                 /* Linh hoạt cho đa dòng */
  background-repeat: no-repeat;
  background-position: 18px center; /* Icon căn giữa dọc */
  background-size: 20px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
}

#msg_notice:hover,
#msg_warning:hover,
#msg_error:hover,
#msg_info:hover,
.warning-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* ===== Notice (Thành công - Xanh lá) ===== */
#msg_notice {
  border: 1px solid #28a745;
  background-color: #d4edda;
  color: #155724;
  background-image: url('../images/icons/ok.png');
}

/* ===== Warning (Cảnh báo - Vàng/Cam) ===== */
#msg_warning,
.warning-banner {
  border: 1px solid #fd7e14;
  background-color: #fff3cd;
  color: #856404;
  background-image: url('../images/icons/alert.png');
}

/* ===== Error (Lỗi - Đỏ) ===== */
#msg_error {
  border: 1px solid #dc3545;
  background-color: #f8d7da;
  color: #721c24;
  background-image: url('../images/icons/error.png');
}

/* ===== Info (Thông tin - Xanh dương) ===== */
#msg_info {
  border: 1px solid #17a2b8;
  background-color: #d1ecf1;
  color: #0c5460;
  background-image: none;           /* Không có icon → padding nhỏ hơn */
  padding-left: 18px;
}

/* ===== Warning cũ (nền vàng italic) ===== */
.warning {
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  background-color: #fffbe6;
  border: 1px solid #ffeaa7;
  font-style: italic;
  color: #a66f00;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.warning strong {
  text-transform: uppercase;
  color: #c82333;
  font-style: normal;
  font-weight: 700;
}

/* ===== Responsive trên mobile ===== */
@media (max-width: 576px) {
  #msg_notice,
  #msg_warning,
  #msg_error,
  #msg_info,
  .warning-banner {
    padding: 12px 14px;
    padding-left: 48px;
    min-height: 52px;
    font-size: 14px;
    background-position: 14px center;
    background-size: 18px;
  }
  
  #msg_info {
    padding-left: 14px;
  }
  
  .warning {
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* ===== Ticket Table Đẹp – No Radius + Hiện Đại ===== */
#ticketTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
    font-size: 15px;
  }
  
  /* Header – tối màu, không bo góc */
  #ticketTable thead th {
    background-color: #1e293b !important;  /* Dark slate */
    color: #fff !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 16px 20px !important;
    border: none !important;
    text-align: left;
    vertical-align: middle;
  }
  
  /* Cell thường */
  #ticketTable td {
    padding: 16px 20px !important;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
  }
  
  /* Striped – sọc xen kẽ nhẹ */
  #ticketTable.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8fafc;
  }
  
  /* Hover row – sáng lên + shadow nhẹ */
  #ticketTable.table-hover tbody tr:hover {
    background-color: #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
  }
  
  /* Loại bỏ radius hoàn toàn (cả table và wrapper) */
  .table-responsive,
  #ticketTable,
  #ticketTable thead th,
  #ticketTable thead th:first-child,
  #ticketTable thead th:last-child,
  #ticketTable tbody tr td:first-child,
  #ticketTable tbody tr td:last-child,
  #ticketTable tbody tr:last-child td {
    border-radius: 0 !important;
  }
  
  /* Wrapper responsive – không radius, shadow nhẹ */
  .table-responsive {
    border-radius: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: none; /* Shadow đã có ở table */
  }
  
  /* Link trong table */
  #ticketTable a {
    color: #0068d1;
    text-decoration: none;
    font-weight: 500;
  }
  
  #ticketTable a:hover {
    text-decoration: underline;
  }
  
  /* Icon sort */
  #ticketTable th a i {
    margin-left: 6px;
    font-size: 0.8rem;
    opacity: 0.7;
 
    header .container-fluid {
      padding: 0.75rem 1rem;
    }
  }

  /* Responsive stacked trên mobile (đẹp, dễ đọc, không cuộn ngang) */
  @media (max-width: 768px) {
    #ticketTable thead {
      display: none;
    }
    
    #ticketTable tbody tr {
      display: block;
      margin-bottom: 20px;
      border: 1px solid #e2e8f0;
      padding: 16px;
      background: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    #ticketTable tbody td {
      display: block;
      text-align: right;
      padding: 10px 0;
      position: relative;
      border-bottom: none;
    }
    
    #ticketTable tbody td::before {
      content: attr(data-label);
      position: absolute;
      left: 0;
      font-weight: 600;
      color: #495057;
      text-transform: uppercase;
      font-size: 0.85rem;
      letter-spacing: 0.5px;
    }
    
    #ticketTable tbody td:last-child {
      border-bottom: none;
    }
  }

/* ===== CSS CHO NAVBAR GỘP USER INFO + MENU CHÍNH ===== */
/* Dán vào Custom CSS – áp dụng cho toàn bộ client */

/* Navbar chung */
.navbar {
  padding: 0.75rem 0 !important;
}

.navbar .container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Nav links - pill đẹp */
.navbar .nav-link {
  font-weight: 500;
  background-color: #0d6efd;
  color: #fff;
  transition: all 0.3s ease;
}

.navbar .nav-link:hover {
  background-color: #569ee6;
}

.navbar .nav-link.active {
  font-weight: 600;
}

/* Dropdown user */
.navbar .dropdown-toggle {
  font-weight: 500;
}

.navbar .dropdown-toggle::after {
  margin-left: 0.5em;
}

.navbar .dropdown-menu {
  border: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  border-radius: 0.75rem;
  padding: 0.5rem 0;
}

.navbar .dropdown-item {
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  margin: 0 0.5rem;
  font-weight: 500;
}

.navbar .dropdown-item:hover {
  background-color: #f8f9fa;
}

/* Button Sign In */
.navbar .btn-primary {
  font-weight: 600;
}

/* Mobile hamburger */
.navbar-toggler {
  padding: 0.5rem;
}

.navbar-toggler-icon {
  width: 1.5em;
  height: 1.5em;
}

/* Mobile collapse – đẹp hơn */
@media (max-width: 768px) {
  .navbar-collapse {
    background-color: #fff;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  }

  .navbar-nav .nav-link {
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
    background-color: #0d6efd;

  }

  .navbar-nav .nav-link.active {
    background-color: #0d6efd;
  }

  .navbar-nav .dropdown {
    margin-top: 0.5rem;
  }
}

/* Fix khi không có logo (nếu bạn bỏ logo) */
.navbar-brand {
  margin-right: 0;
}

/* Optional: thêm khoảng cách nếu có logo */
.navbar .navbar-brand img {
  height: 40px;
}
  
/* Fix hamburger & dropdown trên mobile osTicket */
.navbar-toggler {
  border: none !important;
  padding: 0.5rem !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.dropdown-toggle::after {
  display: inline-block !important;
  margin-left: 0.5em !important;
  vertical-align: 0.255em !important;
  content: "" !important;
  border-top: 0.3em solid !important;
  border-right: 0.3em solid transparent !important;
  border-bottom: 0 !important;
  border-left: 0.3em solid transparent !important;
}

.offcanvas, .collapse {
  visibility: visible !important;

  .content {padding:0px -20px !important;}
  .shadow-lg, .card, .card-body, .rounded-4, .w-100, body{padding:0px !important; margin:0px !important;}
  .btn-lg {margin-bottom: 10px !important; font-size: 10pt;}
  .card-body {
    padding: 0rem !important;     /* Padding rất nhỏ, nội dung sát cạnh */
  }

  /* Nếu muốn gần như không padding (chỉ còn 0.5rem) */
  /* .card-body { padding: 0.5rem !important; } */

  /* Card con bên phải (hướng dẫn) cũng giảm padding */
  .bg-light, .bg-white {
    padding: 0.5rem !important;
  }

  /* Giảm margin giữa các phần tử */
  .mb-4 { margin-bottom: 1rem !important; }
  .mb-5 { margin-bottom: 1.5rem !important; }
  .g-5 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }

  /* Title và text nhỏ gọn hơn */
  .h1, h1.h3 { font-size: 1.6rem !important; margin-bottom: 1rem !important; }
  .lead { font-size: 1rem !important; margin-bottom: 1rem !important; }

  .form-control,
  .form-control-lg {
    width: 100% !important;
    max-width: none !important;
    height: 3rem !important;      
    padding: 0.75rem 1rem !important;
    font-size: 1.1rem !important;
    border-radius: 0.5rem !important;
  }

  /* Input group (nếu dùng icon) */
  .input-group-lg .input-group-text {
    font-size: 1.1rem !important;
    padding: 0 0.75rem !important;
  }

  .form-label {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Button lớn, full width nếu cần */
  .btn-lg {
    padding: 0.875rem 1.5rem !important;
    font-size: 1.1rem !important;
    width: 100%;
  }
  .p-5{padding:0px !important;}
}

/* 3. 2 cột → 1 cột trên mobile */
@media (max-width: 992px) {
  [class*="col-lg-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem;
  }

  #clientLogin .form-control,
  #ticketForm .form-control,
  form .form-control {
    width: 100% !important;
    box-sizing: border-box;
  }
}