/* ==================== RESET & BASE ==================== */
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f0f2f5;
      overflow-x: hidden;
  }

  /* ==================== LOADING OVERLAY ==================== */
  .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.95);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
  }

  .loading-content {
      text-align: center;
  }

  .loading-message {
      margin-top: 15px;
      font-size: 16px;
      color: #13633F;
      font-weight: 500;
  }

  .spinner-border {
      width: 3rem;
      height: 3rem;
      border-width: 0.3em;
  }

  /* ==================== LOGIN & AUTH ==================== */
  .login-container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f3f4f6;
      padding: 20px;
  }

  .auth-container {
      display: flex;
      max-width: 850px;
      width: 100%;
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      margin: 20px;
  }

  .auth-illustration {
      flex: 1;
      background: linear-gradient(135deg, #13633F 0%, #0B3B24 100%);
      color: #fff;
      padding: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
      overflow: hidden;
      z-index: 1;
  }

  .auth-illustration::before,
  .auth-illustration::after {
      content: '';
      position: absolute;
      z-index: -1;
      border-radius: 20%;
      background: rgba(255, 255, 255, 0.06);
      animation: floating-shapes infinite ease-in-out alternate;
  }

  .auth-illustration::before {
      width: 250px;
      height: 250px;
      top: -60px;
      left: -80px;
      transform: rotate(45deg);
      animation-duration: 18s;
  }

  .auth-illustration::after {
      width: 300px;
      height: 350px;
      bottom: -100px;
      right: -100px;
      transform: rotate(30deg);
      background: rgba(255, 255, 255, 0.04);
      animation-duration: 5s;
      animation-delay: -5s;
  }

  @keyframes floating-shapes {
      0% {
          transform: translate(0, 0) rotate(var(--rotation-start, 45deg));
      }

      100% {
          transform: translate(40px, -50px) rotate(calc(var(--rotation-start, 45deg) + 15deg));
      }
  }

  .auth-illustration::before {
      --rotation-start: 45deg;
  }

  .auth-illustration::after {
      --rotation-start: 30deg;
  }

  .auth-form-container {
      flex: 1;
      padding: 40px;
  }

  .auth-tabs {
      display: flex;
      border-bottom: 1px solid #eee;
      margin-bottom: 20px;
  }

  .auth-tab {
      flex: 1;
      padding: 10px;
      text-align: center;
      cursor: pointer;
      color: #757575;
      transition: all 0.3s;
      border-bottom: 2px solid transparent;
  }

  .auth-tab.active {
      color: #13633F;
      border-bottom: 2px solid #13633F;
      font-weight: 600;
  }

  .auth-tab:hover {
      color: #0B3B24;
  }

  .auth-tab-content {
      display: none;
  }

  .auth-tab-content.active {
      display: block;
  }

  .form-group {
      margin-bottom: 15px;
  }

  .form-group label {
      display: block;
      margin-bottom: 6px;
      color: #374151;
      font-weight: 500;
      font-size: 14px;
  }

  .login-btn {
      width: 100%;
      padding: 11px;
      background: linear-gradient(90deg, #13633F, #0B3B24);
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      margin-top: 8px;
  }

  .login-btn:hover {
      background: linear-gradient(90deg, #0B3B24, #13633F);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
  }

  .auth-link {
      color: #13633F;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.2s;
  }

  .auth-link:hover {
      color: #0B3B24;
      text-decoration: underline;
  }

  .auth-note {
      font-size: 13px;
      color: #666;
      margin-top: 10px;
      line-height: 1.4;
  }

  @media (max-width: 768px) {
      .auth-container {
          flex-direction: column;
          margin: 10px;
      }

      .auth-illustration {
          padding: 30px 20px;
      }

      .auth-form-container {
          padding: 30px 20px;
      }
  }

  /* ==================== WRAPPER & LAYOUT ==================== */
  .wrapper {
      display: flex;
      width: 100%;
      min-height: 100vh;
  }

  /* ==================== SIDEBAR ==================== */
  .sidebar {
      width: 260px;
      background: linear-gradient(180deg, #0B3B24 0%, #13633F 100%);
      height: 100vh;
      height: 100dvh;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 1050;
      transition: transform 0.3s ease-in-out;
      box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
  }

  .sidebar-header {
      padding: 20px;
      background: rgba(0, 0, 0, 0.15);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .sidebar-brand {
      color: white;
      font-size: 20px;
      font-weight: 700;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .sidebar-user-info {
      padding: 15px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .user-avatar {
      width: 40px;
      height: 40px;
      background: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0B3B24;
      font-size: 16px;
      font-weight: 700;
      flex-shrink: 0;
  }

  .user-details .user-name {
      color: white;
      font-size: 15px;
      font-weight: 600;
  }

  .user-details .user-role {
      color: rgba(255, 255, 255, 0.7);
      font-size: 12px;
  }

  .sidebar-menu {
      list-style: none;
      padding: 15px 0;
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      margin-bottom: 0;
  }

  .sidebar-item {
      position: relative;
  }

  .sidebar-link {
      display: flex;
      align-items: center;
      padding: 12px 20px;
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      transition: all 0.2s;
      gap: 15px;
      font-size: 15px;
      font-weight: 500;
  }

  .sidebar-link:hover {
      background: rgba(255, 255, 255, 0.1);
      color: white;
      border-left: 4px solid rgba(255, 255, 255, 0.5);
  }

  .sidebar-link.active {
      background: rgba(255, 255, 255, 0.2);
      color: white;
      border-left: 4px solid #ffffff;
      font-weight: 600;
  }

  .sidebar-link i {
      font-size: 18px;
      width: 24px;
      text-align: center;
  }

  /* CSS CHO MENU GOM NHÓM (THƯ MỤC) */
  .sidebar-submenu {
      list-style: none;
      padding-left: 0;
      background: rgba(0, 0, 0, 0.15);
      border-left: 3px solid rgba(255, 255, 255, 0.1);
  }

  .sidebar-sublink {
      display: flex;
      align-items: center;
      padding: 10px 20px 10px 40px !important;
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      font-size: 13px !important;
      transition: all 0.2s;
  }

  .sidebar-sublink:hover,
  .sidebar-sublink.active {
      color: white;
      background: rgba(255, 255, 255, 0.05);
  }

  .group-toggle-icon {
      margin-left: auto;
      transition: transform 0.3s;
      font-size: 12px !important;
  }

  .sidebar-link[aria-expanded="true"] .group-toggle-icon {
      transform: rotate(90deg);
  }

  /* ==================== MAIN CONTENT & OVERLAY ==================== */
  .main-content {
      margin-left: 260px;
      width: calc(100% - 260px);
      min-height: 100vh;
      transition: transform 0.3s ease;
  }

  .sidebar-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(3px);
      z-index: 1040;
      opacity: 0;
      transition: opacity 0.3s ease;
  }

  /* ==================== TOPBAR ==================== */
  .topbar {
      background: white;
      padding: 15px 25px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
  }

  .topbar-title {
      font-size: 22px;
      font-weight: 600;
      color: #2c3e50;
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .mobile-toggle {
      display: none;
  }

  /* Ẩn nút mobile trên desktop */

  .topbar-actions {
      display: flex;
      gap: 12px;
      align-items: center;
  }

  .topbar-user {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: 15px;
      padding-left: 15px;
      border-left: 1px solid #e5e7eb;
  }

  .user-info {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .user-name-display {
      font-size: 13px;
      font-weight: 500;
      color: #2c3e50;
  }

  /* ==================== ICON BUTTONS ==================== */
  .icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      font-size: 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .icon-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .icon-btn-export {
      background: linear-gradient(135deg, #13633F 0%, #0B3B24 100%);
      color: white;
  }

  .icon-btn-import {
      background: linear-gradient(135deg, #2E8B57 0%, #2563eb 100%);
      color: white;
  }

  .icon-btn-add {
      background: linear-gradient(135deg, #D97706 0%, #7c3aed 100%);
      color: white;
  }

  .icon-btn-profile,
  .icon-btn-logout {
      background: none;
      box-shadow: none;
      font-size: 24px;
  }

  .icon-btn-profile {
      color: #f59e0b;
  }

  .icon-btn-logout {
      color: #ef4444;
  }

  .icon-btn-profile:hover,
  .icon-btn-logout:hover {
      box-shadow: none;
  }

  .icon-btn-refresh {
      background: white;
      color: #13633F;
      border: 1px solid #e5e7eb;
  }

  .icon-btn-refresh:hover {
      background: #f3f4f6;
      color: #0B3B24;
  }

  .icon-btn::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: -35px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 11px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
      z-index: 1000;
  }

  .icon-btn:hover::after {
      opacity: 1;
  }

  /* ==================== BUTTONS (GENERIC) ==================== */
  .btn-primary {
      background: linear-gradient(135deg, #13633F 0%, #0B3B24 100%);
      border: none;
  }

  .btn-primary:hover {
      background: linear-gradient(135deg, #0B3B24 0%, #13633F 100%);
  }

  .btn-purple {
      background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
      border: none;
      color: white;
  }

  .btn-purple:hover {
      background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
      color: white;
  }

  .btn-secondary {
      background: #6b7280;
      border: none;
  }

  .btn-outline-primary {
      color: #13633F !important;
      border-color: #13633F !important;
  }

  .btn-outline-primary:hover,
  .btn-outline-primary:active,
  .btn-outline-primary:focus {
      background-color: #13633F !important;
      border-color: #13633F !important;
      color: #ffffff !important;
  }

  .text-primary {
      color: #13633F !important;
  }

  /* ==================== TRANG CHỦ & PHÂN HỆ (HOME GRID) ==================== */
  .home-section-title {
      font-size: 15px;
      font-weight: 700;
      color: #6b7280;
      margin-top: 25px;
      margin-bottom: 15px;
      padding-bottom: 8px;
      border-bottom: 1px solid #e5e7eb;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  .app-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
      text-align: left;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
      border: 1px solid #f3f4f6;
      cursor: pointer;
      transition: all 0.2s ease;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-decoration: none;
  }

  .app-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      border-color: #d1d5db;
  }

  .app-icon-wrapper {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 12px;
      color: white;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  }

  .app-card-title {
      color: #1f2937;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 4px;
      line-height: 1.3;
  }

  .app-card-desc {
      color: #6b7280;
      font-size: 12px;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      /* Thêm chuẩn quốc tế */
      overflow: hidden;
  }

  .bg-gradient-1 {
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  }

  .bg-gradient-2 {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }

  .bg-gradient-3 {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  }

  .bg-gradient-4 {
      background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  }

  .bg-gradient-5 {
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  }

  .bg-gradient-6 {
      background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  }

  /* ==================== CONTENT AREA ==================== */
  .content-wrapper {
      padding: 20px;
  }

  .content-card {
      background: white;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .page-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
  }

  .alert {
      border: none;
      border-radius: 8px;
  }

  .alert-purple {
      background: #FFF7ED;
      color: #9A3412;
      border: 1px solid #FDBA74;
  }

  /* ==================== TABLE & BADGES ==================== */
  .table {
      width: 100%;
  }

  .table td,
  .table th {
      padding: 2px 4px;
      height: 28px;
      line-height: 1.2;
      vertical-align: middle;
      font-size: 13px;
  }

  .table thead th {
      background: #f8f9fa;
      color: #2c3e50;
      font-weight: 600;
      border-bottom: 2px solid #dee2e6;
      white-space: nowrap;
      text-align: center !important;
  }

  .table-actions {
      display: flex;
      white-space: nowrap;
  }

  .btn-action {
      padding: 5px 10px;
      border: none;
      border-radius: 5px;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.3s;
  }

  .btn-edit {
      background: transparent !important;
      color: #f59e0b !important;
  }

  .btn-edit:hover {
      background: rgba(245, 158, 11, 0.1) !important;
      transform: scale(1.1);
  }

  .btn-delete {
      background: transparent !important;
      color: #ef4444 !important;
  }

  .btn-delete:hover {
      background: rgba(239, 68, 68, 0.1) !important;
      transform: scale(1.1);
  }

  .value-badge,
  .role-badge,
  .date-badge,
  .type-badge,
  .file-link,
  .url-link {
      padding: 0px 6px !important;
      font-size: 11px !important;
      line-height: 18px !important;
      margin: 0 !important;
      display: inline-block !important;
  }

  .date-badge {
      padding: 4px 12px;
      border-radius: 20px;
      font-weight: 500;
      display: inline-block;
      font-size: 12px;
  }

  .date-past {
      background-color: #fde8e8;
  }

  .date-today {
      background-color: #ffeeb9;
  }

  .date-future {
      background-color: #cedaff;
  }

  .date-legend {
      font-size: 12px;
      display: flex;
      gap: 15px;
      align-items: center;
      flex-wrap: wrap;
  }

  .date-legend .date-badge {
      padding: 2px 8px;
      font-size: 11px;
  }

  .value-badge {
      padding: 4px 12px;
      border-radius: 15px;
      font-weight: 500;
      display: inline-block;
      font-size: 12px;
      margin: 2px;
  }

  .role-badge {
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
  }

  .role-admin {
      background: #13633F;
      color: white;
  }

  .role-user {
      background: #2E8B57;
      color: white;
  }

  .type-badge {
      padding: 3px 8px;
      border-radius: 4px;
      background: #e0e7ff;
      color: #13633F;
      font-size: 11px;
      font-weight: 500;
  }

  .data-badge {
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 12px;
      font-weight: normal;
      margin-left: 10px;
  }

  .badge-admin {
      background: #13633F;
      color: white;
  }

  .badge-user {
      background: #2E8B57;
      color: white;
  }

  .color-preview {
      display: inline-block;
      width: 18px;
      height: 18px;
      border-radius: 4px;
      border: 1px solid #ddd;
      vertical-align: middle;
      margin-right: 5px;
  }

  .file-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      color: white;
      text-decoration: none;
      border-radius: 6px;
      font-size: 12px;
      transition: all 0.2s;
  }

  .file-link:hover {
      opacity: 0.85;
      transform: translateY(-1px);
      color: white;
      text-decoration: none;
  }

  .url-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      background: #13633F;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      font-size: 12px;
      transition: all 0.2s;
  }

  .url-link:hover {
      opacity: 0.85;
      color: white;
      text-decoration: none;
  }

  /* ==================== FILE UPLOAD ==================== */
  .file-upload-field {
      position: relative;
  }

  .existing-file {
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .file-preview {
      margin-top: 10px;
  }

  .file-selected {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      background: #f9fffc;
      border: 2px solid #13633F;
      border-radius: 8px;
  }

  .file-selected i {
      font-size: 20px;
  }

  .file-selected span {
      flex: 1;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  /* ==================== FILTER PANEL & MULTISELECT ==================== */
  .filter-panel {
      background: #f9fffc;
      border-radius: 8px;
      border: 1px solid #13633F;
      padding: 15px;
  }

  .filter-panel .form-label {
      font-weight: 600;
      color: #0B3B24;
  }

  .filter-dropdown-menu {
      min-width: 280px;
      padding: 15px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
      border: 1px solid #e0e0e0;
  }

  .filter-dropdown-menu .form-group {
      margin-bottom: 10px;
  }

  .filter-dropdown-menu label {
      font-size: 12px;
      color: #666;
      margin-bottom: 2px;
  }

  .filter-trigger-input {
      background-color: #fff !important;
      cursor: pointer;
      text-overflow: ellipsis;
  }

  .multiselect-wrapper {
      position: relative;
  }

  .multiselect-input {
      cursor: pointer;
      background-color: #fff !important;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      padding-right: 30px;
  }

  .multiselect-arrow {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      color: #6c757d;
  }

  .multiselect-dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      max-height: 200px;
      overflow-y: auto;
      background: white;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      z-index: 1060;
      padding: 0.5rem;
      margin-top: 2px;
  }

  .multiselect-dropdown-menu.show {
      display: block;
  }

  /* ==================== CHARTS & REPORTS ==================== */
  .charts-container {
      background: #f9fafb;
      padding: 15px;
      border-radius: 8px;
      border: 1px solid #e5e7eb;
  }

  .charts-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
      margin-top: 10px;
  }

  .chart-item {
      background: white;
      padding: 12px;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s;
  }

  .chart-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .chart-title {
      font-size: 12px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 8px;
      text-align: center;
  }

  @media (max-width: 1200px) {
      .charts-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  @media (max-width: 768px) {
      .charts-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  .report-container {
      display: flex;
      flex-direction: column;
      height: calc(100vh - 150px);
      background: #f1f3f4;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  }

  .report-iframe-wrapper {
      flex: 1;
      overflow: hidden;
      background: white;
  }

  .report-tabs-bar {
      height: 40px;
      background: #f1f3f4;
      border-top: 1px solid #dadce0;
      display: flex;
      align-items: center;
      padding: 0 10px;
      overflow-x: auto;
  }

  .report-tab-btn {
      padding: 8px 15px;
      margin-top: 4px;
      margin-right: 2px;
      border: none;
      background: transparent;
      color: #5f6368;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border-radius: 4px 4px 0 0;
      transition: all 0.2s;
      white-space: nowrap;
  }

  .report-tab-btn:hover {
      background: #e8eaed;
      color: #202124;
  }

  .report-tab-btn.active {
      background: #ffffff;
      color: #1a73e8;
      border-bottom: 3px solid #1a73e8;
      font-weight: 600;
      box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
  }

  #report-content-area {
      background-color: #fff;
      padding: 20px;
      overflow: auto;
      height: 100%;
  }

  .charts-section {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 30px;
      justify-content: center;
  }

  .report-grid-table {
      border-collapse: collapse;
      width: 100%;
      font-size: 13px;
      background: white;
      color: #333;
  }

  .report-grid-table th,
  .report-grid-table td {
      border: 1px solid #e0e0e0;
      padding: 4px 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .report-grid-header {
      background: #f8f9fa;
      color: #666;
      font-weight: bold;
      text-align: center;
      padding: 6px !important;
  }

  .report-row-header {
      background: #f8f9fa;
      color: #666;
      text-align: center;
      width: 40px;
      min-width: 40px;
  }

  /* ==================== POS INVOICE CUSTOMIZATION ==================== */
  .pos-invoice-header {
      border-bottom: 2px dashed #ccc;
      padding-bottom: 15px;
      margin-bottom: 20px;
  }

  .pos-invoice-title {
      text-align: center;
      margin-top: 15px;
  }

  .pos-invoice-title h3 {
      font-weight: bold;
      color: #333;
      margin-bottom: 5px;
      text-transform: uppercase;
  }

  .pos-invoice-number {
      font-family: monospace;
      font-size: 14px;
      color: #666;
      display: inline-block;
      padding: 4px 15px;
      background: #f8f9fa;
      border-radius: 20px;
      border: 1px solid #ddd;
  }

  .pos-footer-msg {
      font-size: 13px;
      color: #555;
      font-style: italic;
  }

  .pos-search-wrapper {
      position: relative;
  }

  .pos-search-results {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      max-height: 250px;
      overflow-y: auto;
      background: white;
      border: 1px solid #ccc;
      border-radius: 0 0 8px 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 1060;
      display: none;
  }

  .pos-search-item {
      padding: 10px 15px;
      cursor: pointer;
      border-bottom: 1px solid #eee;
      transition: background 0.2s;
  }

  .pos-search-item:hover {
      background: #f0f7ff;
  }

  .pos-search-item:last-child {
      border-bottom: none;
  }

  /* ==================== MODAL STYLES (ĐÃ SỬA LỖI VIỀN & GÓC TRẮNG) ==================== */
  .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1050;
      overflow-y: auto;
      overscroll-behavior: contain;
  }

  .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1040;
  }

  .modal-dialog {
      position: relative;
      margin: 1.75rem auto;
      z-index: 1055;
  }

  .modal-90 {
      max-width: 90%;
      width: 90%;
  }

  .modal-content {
      border: none;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }

  .modal-header {
      background: linear-gradient(135deg, #13633F 0%, #0B3B24 100%);
      color: white;
      border-bottom: none;
      border-radius: 12px 12px 0 0;
      padding: 15px 20px;
  }

  .modal-header .modal-title {
      font-weight: 600;
      font-size: 18px;
  }

  .modal-header .btn-close {
      filter: brightness(0) invert(1);
  }

  .modal-body {
      padding: 20px;
  }

  .modal-footer {
      border-top: 1px solid #e5e7eb;
      padding: 15px 20px;
      background: #fff;
      border-radius: 0 0 12px 12px;
  }

  .form-label {
      color: #0B3B24;
      font-weight: 600;
      margin-bottom: 6px;
      font-size: 14px;
  }

  .form-control:focus {
      border-color: #13633F;
      box-shadow: 0 0 0 0.2rem rgba(30, 64, 175, 0.25);
  }

  /* ==================== DATATABLE CUSTOMIZATION ==================== */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
      margin-bottom: 15px;
  }

  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
      margin-top: 15px;
  }

  .dt-buttons {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
  }

  .dt-buttons>.dt-button {
      width: 36px !important;
      height: 36px !important;
      padding: 0 !important;
      border-radius: 50% !important;
      border: none !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }

  .dt-buttons>.dt-button>span {
      display: none;
  }

  .dt-button-collection {
      max-height: 250px;
      overflow-y: auto;
  }

  .dt-button-collection .dt-button {
      width: 100% !important;
      border-radius: 0 !important;
      height: auto !important;
      padding: 8px 12px !important;
  }

  .dt-button {
      font-size: 13px !important;
      padding: 5px 10px !important;
      border-radius: 5px !important;
      font-weight: 500 !important;
      transition: all 0.3s !important;
  }

  .dt-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  }

  .dt-buttons .btn-secondary {
      background: #fff !important;
      border: 1px solid #6c757d !important;
      color: #6c757d !important;
  }

  .dt-buttons .btn-secondary:hover {
      background: #6c757d !important;
      color: #fff !important;
  }

  .dt-buttons .btn-success {
      background: #fff !important;
      border: 1px solid #198754 !important;
      color: #198754 !important;
  }

  .dt-buttons .btn-success:hover {
      background: #198754 !important;
      color: #fff !important;
  }

  .dt-buttons .btn-danger {
      background: #fff !important;
      border: 1px solid #dc3545 !important;
      color: #dc3545 !important;
  }

  .dt-buttons .btn-danger:hover {
      background: #dc3545 !important;
      color: #fff !important;
  }

  .dt-buttons .btn-info {
      background: #fff !important;
      border: 1px solid #0dcaf0 !important;
      color: #0dcaf0 !important;
  }

  .dt-buttons .btn-info:hover {
      background: #0dcaf0 !important;
      color: #fff !important;
  }

  .page-item.active .page-link {
      background-color: #13633F !important;
      border-color: #13633F !important;
  }

  .spinner-border-sm {
      width: 1rem !important;
      height: 1rem !important;
      border-width: 0.15em !important;
  }

  /* ==================== MISC STYLES ==================== */
  .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: #6c757d;
  }

  .empty-state i {
      font-size: 80px;
      margin-bottom: 20px;
      opacity: 0.2;
  }

  .empty-state h3 {
      margin-bottom: 10px;
      color: #495057;
  }

  .theme-preview {
      font-size: 14px;
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
  }

  .user-profile-info {
      background: #f8fafc;
  }

  .allowed-sheets-list {
      max-height: 120px;
      overflow-y: auto;
  }

  .allowed-sheets-list .form-check {
      margin-bottom: 5px;
  }

  /* Custom Scrollbar */
  ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
  }

  ::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
      background: #a1a1a1;
  }

  /* Animations */
  @keyframes fadeIn {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  @keyframes slideIn {
      from {
          transform: translateY(-10px);
          opacity: 0;
      }

      to {
          transform: translateY(0);
          opacity: 1;
      }
  }

  .modal.show {
      animation: fadeIn 0.2s ease-out;
  }

  .modal-dialog {
      animation: slideIn 0.3s ease-out;
  }

  /* Swal Toast Adjustments */
  .swal2-popup.swal2-toast {
      padding: 10px 15px;
  }

  .swal2-popup.swal2-toast .swal2-title {
      font-size: 14px;
  }

  .content-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 20px;
      color: #13633F;
  }

  .content-loading .spinner-border {
      width: 3rem;
      height: 3rem;
      margin-bottom: 15px;
  }

  .content-loading-text {
      font-size: 16px;
      font-weight: 500;
  }

  /* ==================== MOBILE RESPONSIVE (NEW SIDEBAR) ==================== */
  @media (max-width: 992px) {
      .sidebar {
          transform: translateX(-100%);
          /* [SỬA ĐỔI]: Trên mobile, bỏ chiều cao cố định để cuộn tự nhiên theo màn hình chung */
          height: auto !important;
          min-height: 100vh;
          bottom: 0;
          /* Đảm bảo nó dãn đến đáy nếu nội dung ít */
      }

      .sidebar.active {
          transform: translateX(0);
          /* Bật overflow-y cho toàn bộ sidebar trên mobile để nó tự cuộn nếu dài */
          overflow-y: auto;
      }

      /* [SỬA ĐỔI]: Bỏ cuộn độc lập của menu bên trong trên mobile */
      .sidebar-menu {
          overflow-y: visible !important;
          height: auto !important;
          flex: none !important;
          /* Ngăn flexbox ép chiều cao */
      }

      .main-content {
          margin-left: 0;
          width: 100%;
      }

      .sidebar-toggle-close {
          display: block;
      }

      .sidebar-overlay.show {
          display: block;
          opacity: 1;
      }

      /* Đảm bảo phần footer không bị đẩy xuống dưới cùng màn hình che khuất */
      .sidebar-footer {
          margin-top: 20px;
          position: static !important;
          /* Hủy cơ chế dính đáy nếu có */
      }
  }

  /* ==================== MOBILE FIXES (GỘP CHUNG BẢNG VÀ MODAL) ==================== */
  @media (max-width: 768px) {
      .mobile-toggle {
          display: block !important;
          font-size: 20px;
          background: none;
          border: none;
          color: #333;
          padding: 0 10px;
          margin-right: 5px;
          cursor: pointer;
      }

      .modal-dialog {
          margin: 15px auto !important;
          max-width: calc(100% - 30px) !important;
          width: auto !important;
      }

      .modal-90 {
          max-width: calc(100% - 30px) !important;
          width: auto !important;
      }

      .modal-content {
          height: auto !important;
          border-radius: 12px !important;
      }

      .table-responsive {
          border: 1px solid #e5e7eb;
          border-radius: 8px;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          margin-bottom: 15px;
      }

      .date-legend {
          flex-direction: row !important;
          align-items: center !important;
          width: 100%;
          margin-bottom: 10px;
      }

      .dt-buttons {
          display: flex !important;
          flex-wrap: nowrap !important;
          overflow-x: auto !important;
          justify-content: flex-start !important;
          width: 100%;
          padding-bottom: 5px;
          gap: 5px !important;
      }

      .dt-buttons .dt-button {
          flex: 0 0 auto !important;
          margin-bottom: 0 !important;
      }

      .topbar {
          padding: 12px 15px;
          flex-wrap: wrap;
          gap: 10px;
      }

      .topbar-title {
          font-size: 18px;
          width: 100%;
      }

      .topbar-actions {
          width: 100%;
          justify-content: flex-end;
      }

      .topbar-user {
          margin-left: 0;
          padding-left: 0;
          border-left: none;
      }

      .user-name-display,
      .icon-btn::after {
          display: none;
      }

      .content-wrapper {
          padding: 15px;
      }

      .app-card {
          padding: 12px 15px;
          flex-direction: row;
          align-items: center;
          gap: 15px;
          border-radius: 10px;
      }

      .app-icon-wrapper {
          margin-bottom: 0;
          width: 38px;
          height: 38px;
          font-size: 18px;
          flex-shrink: 0;
          border-radius: 8px;
      }

      .app-card-title {
          font-size: 14px;
          margin-bottom: 2px;
      }

      .app-card-desc {
          font-size: 11px;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          /* Thêm chuẩn quốc tế */
      }

      .home-section-title {
          font-size: 13px;
          margin-top: 15px;
          margin-bottom: 10px;
      }
  }

  /* ==================== PC SIDEBAR COLLAPSE ==================== */
  /* Nút bấm thu gọn */
  .collapse-pc-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      z-index: 10;
  }

  .collapse-pc-btn:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(1.1);
  }

  /* Trạng thái Sidebar bị thu gọn */
  .sidebar.collapsed {
      width: 80px;
  }

  /* 1. Thu gọn Logo và Ẩn text SABECO HANOI */
  .sidebar.collapsed .sidebar-header {
      padding: 20px 10px !important;
  }

  .sidebar.collapsed .sidebar-header img {
      max-width: 45px !important;
      /* Thu nhỏ logo tự động */
      margin-top: 10px;
  }

  .sidebar.collapsed .sidebar-header a {
      display: none !important;
      /* Ẩn chữ SABECO */
  }

  /* 2. Ẩn các chi tiết không cần thiết */
  .sidebar.collapsed .sidebar-user-info .user-details,
  .sidebar.collapsed .sidebar-header-sm,
  .sidebar.collapsed .sidebar-footer {
      display: none;
  }

  .sidebar.collapsed .sidebar-user-info {
      justify-content: center;
      padding: 15px 0;
  }

  /* Căn giữa Icon Menu */
  .sidebar.collapsed .sidebar-link {
      justify-content: center;
      padding: 15px 0;
      position: relative;
      /* Đặt làm mốc tọa độ cho Tooltip */
  }

  .sidebar.collapsed .sidebar-link i {
      margin: 0;
      font-size: 20px;
  }

  /* 3. HIỆU ỨNG TOOLTIP BÊN PHẢI (Tinh tế và hiện đại) */
  .sidebar.collapsed .sidebar-menu {
      overflow: visible !important;
      /* Mở khóa chống cắt Tooltip */
  }

  /* Tái sử dụng thẻ span tên menu thành Tooltip */
  .sidebar.collapsed .sidebar-link span {
      display: block !important;
      position: absolute;
      top: 50%;
      left: 90px;
      /* Bắt đầu từ xa */
      transform: translateY(-50%);
      background-color: #1e293b;
      /* Nền xám đen sang trọng */
      color: #fff;
      padding: 8px 14px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      /* Hiệu ứng nảy (bounce) */
      z-index: 1000;
      pointer-events: none;
      /* Tránh cản trở click */
  }

  /* Mũi tên nhỏ chỉ ngược lại vào Icon */
  .sidebar.collapsed .sidebar-link span::before {
      content: '';
      position: absolute;
      top: 50%;
      left: -5px;
      transform: translateY(-50%);
      border-width: 6px 6px 6px 0;
      border-style: solid;
      border-color: transparent #1e293b transparent transparent;
  }

  /* Kích hoạt Tooltip trượt vào khi Hover */
  .sidebar.collapsed .sidebar-link:hover span {
      opacity: 1;
      visibility: visible;
      left: 75px;
      /* Trượt nhẹ từ 90px về 75px */
  }

  /* Mở rộng Main Content khi Sidebar thu gọn */
  .main-content.expanded {
      margin-left: 80px;
      width: calc(100% - 80px);
  }

  /* Mobile overrides */
  @media (max-width: 992px) {
      .collapse-pc-btn {
          display: none !important;
      }

      .sidebar.collapsed {
          width: 260px;
      }

      .main-content.expanded {
          margin-left: 0;
          width: 100%;
      }
  }

  /* Chặn cuộn lan truyền (Scroll Chaining) cho các Menu Dropdown */
  .dropdown-options-list {
      overscroll-behavior: contain !important;
  }

  /* ==================== FIX LỖI LẸM Ô CHECKBOX ==================== */

  /* 1. Mở rộng không gian bên trái, ép ghi đè class px-3 trong JavaScript */
  .custom-dropdown-menu .form-check,
  .multiselect-dropdown-menu .form-check {
      padding-left: 2.5rem !important;
      padding-right: 1rem;
  }

  /* 2. Căn ô vuông thụt vào đúng vị trí và chỉnh kích thước vừa vặn */
  .custom-dropdown-menu .form-check .form-check-input,
  .multiselect-dropdown-menu .form-check .form-check-input {
      margin-left: -1.75rem !important;
      margin-top: 0.15rem;
      cursor: pointer;
      width: 1.15em;
      height: 1.15em;
      border-color: #adb5bd;
  }

  /* 3. Đổi màu ô vuông thành màu xanh chủ đạo của App khi được tick */
  .custom-dropdown-menu .form-check .form-check-input:checked,
  .multiselect-dropdown-menu .form-check .form-check-input:checked {
      background-color: #13633F;
      border-color: #13633F;
  }

  /* 4. Cho phép click vào chữ cũng tick được ô vuông */
  .custom-dropdown-menu .form-check label,
  .multiselect-dropdown-menu .form-check label {
      cursor: pointer;
      width: 100%;
      display: block;
      margin-bottom: 0;
  }

  /* ================================================================= */
  /* THUẬT TOÁN CO GIÃN THÔNG MINH TỐI THƯỢNG (V2 - NÂNG CẤP TRÍ TUỆ)  */
  /* ================================================================= */

  /* 1. CONTAINER BẢO VỆ BẢNG (CHỐNG CUỘN LAN TRUYỀN) */
  .table-responsive,
  .json-grid-wrapper .table-responsive {
      overflow-x: auto !important;
      width: 100% !important;
      overscroll-behavior: none !important;
      -webkit-overflow-scrolling: touch !important;
  }

  /* 2. MỞ KHÓA TÍNH TOÁN CỦA TRÌNH DUYỆT CHO MỌI BẢNG */
  .table-responsive table,
  .jg-table {
      border-collapse: separate !important;
      border-spacing: 0;
      table-layout: auto !important;
      width: max-content !important;
      min-width: 100% !important;
  }

  /* 3. HEADER LÀM KHUÔN CƠ BẢN */
  .table-responsive table th,
  .jg-table th {
      white-space: nowrap !important;
      vertical-align: middle !important;
      padding: 8px 10px !important;
  }

  /* Khoảng trống cho mũi tên DataTables */
  #data-table th {
      padding-right: 25px !important;
  }

  /* 4. CELL NỘI DUNG: TỰ CO RÚT VÀ BẺ DÒNG THÔNG MINH */
  .table-responsive table td,
  .jg-table td {
      vertical-align: middle !important;
      border-bottom: 1px solid #dee2e6;
      padding: 6px 8px !important;

      min-width: 0 !important;

      white-space: normal !important;
      word-wrap: break-word !important;
      max-width: 350px !important;
  }

  /* 5. ĐẶC TRỊ BẢNG FORM NHẬP LIỆU (JSON GRID) */
  .jg-table td {
      white-space: nowrap !important;
  }

  .jg-table td input,
  .jg-table td select {
      width: 100% !important;
      min-width: 60px !important;
      box-sizing: border-box;
  }

  /* ================================================================= */
  /* 6. CỐ ĐỊNH CỘT ĐẦU (STT/ID) - [BẢN NÂNG CẤP ĐỘ NHẠY]             */
  /* ================================================================= */
  .table-responsive table th:first-child,
  .table-responsive table td:first-child,
  .jg-table th:first-child,
  .jg-table td:first-child {
      position: sticky !important;
      left: 0;
      z-index: 5;

      /* BÍ QUYẾT: Trả lại tự do (auto) và cấm xuống dòng (nowrap) */
      /* Cột sẽ tự phình ra vừa khít với dòng chữ dài nhất (VD: "Trung bình [TPO]") */
      width: auto !important;
      white-space: nowrap !important;

      text-align: center;
      border-right: 1px solid #dee2e6;
      background-color: #ffffff;
  }

  /* ĐẶC TRỊ: Bỏ position sticky cho bảng Cấu hình QC để Dropdown có thể bay ra ngoài */
  #qc-advanced-format-group .table-responsive table th:first-child,
  #qc-advanced-format-group .table-responsive table td:first-child,
  #qc-advanced-format-group .table-responsive table th:last-child,
  #qc-advanced-format-group .table-responsive table td:last-child {
      position: static !important;
      z-index: 1 !important;
      box-shadow: none !important;
  }

  /* ================================================================= */
  /* 7. CỐ ĐỊNH CỘT CUỐI (THAO TÁC) - VẪN BÓP NGHẸT 1PX              */
  /* ================================================================= */
  .table-responsive table th:last-child,
  .table-responsive table td:last-child,
  .jg-table th:last-child,
  .jg-table td:last-child {
      position: sticky !important;
      right: 0;
      z-index: 5;
      width: 1px !important;
      /* Chỉ chứa Icon nên ép sát tuyệt đối */
      white-space: nowrap !important;
      text-align: center;
      border-left: 1px solid #dee2e6;
      background-color: #ffffff;
  }

  /* Tô nền xám cho Header cố định */
  .table-responsive table th:first-child,
  .table-responsive table th:last-child,
  .jg-table th:first-child,
  .jg-table th:last-child {
      background-color: #f8f9fa;
  }

  /* ================================================================= */
  /* BẢO VỆ HEADER MODAL TRÊN MOBILE (KHÔNG BỊ VĂNG KHỎI MÀN HÌNH)     */
  /* ================================================================= */
  @media (max-width: 992px) {
      .modal-dialog {
          display: flex !important;
          align-items: flex-start !important;
          margin: 10px auto !important;
          height: calc(100dvh - 20px) !important;
      }

      .modal-content {
          width: 100% !important;
          max-height: 100% !important;
          height: auto !important;
          display: flex !important;
          flex-direction: column !important;
          position: relative !important;
          top: auto !important;
          left: auto !important;
          transform: none !important;
      }

      .modal-header,
      .modal-footer {
          flex-shrink: 0 !important;
      }

      .modal-body {
          flex: 1 1 auto !important;
          overflow-y: auto !important;
          -webkit-overflow-scrolling: touch !important;
          overscroll-behavior: none !important;
      }
  }

  /* ==================== PREVIEW MODAL STYLES ==================== */
  .preview-header-meta {
      background-color: #f8f9fa;
      border-bottom: 1px solid #e9ecef;
      padding: 10px 20px;
      font-size: 13px;
      color: #6c757d;
      display: flex;
      gap: 20px;
  }

  .preview-grid {
      display: flex;
      flex-wrap: wrap;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
  }

  .preview-item {
      width: 50%;
      display: flex;
      border-bottom: 1px solid #e9ecef;
  }

  /* Cột lẻ có viền phải */
  .preview-item:nth-child(odd) {
      border-right: 1px solid #e9ecef;
  }

  /* Xóa viền dưới của 2 item cuối cùng */
  .preview-item:nth-last-child(-n+2):nth-child(odd),
  .preview-item:last-child:nth-child(even) {
      border-bottom: none;
  }

  /* Nếu item cuối cùng bị lẻ loi, cho nó full width */
  .preview-item:last-child:nth-child(odd) {
      width: 100%;
      border-right: none;
  }

  .preview-label {
      width: 140px;
      background-color: #f8f9fa;
      padding: 12px 15px;
      color: #495057;
      font-weight: 500;
      font-size: 13px;
      border-right: 1px solid #e9ecef;
      display: flex;
      align-items: center;
      flex-shrink: 0;
  }

  .preview-value {
      padding: 12px 15px;
      flex-grow: 1;
      font-size: 14px;
      color: #212529;
      display: flex;
      align-items: center;
      word-break: break-word;
  }

  /* Nút quay lại preview */
  .btn-outline-secondary.back-to-preview {
      color: #6c757d;
      border-color: #ced4da;
      background: #fff;
  }

  .btn-outline-secondary.back-to-preview:hover {
      background: #f8f9fa;
      color: #495057;
  }

  @media (max-width: 768px) {
      .preview-item {
          width: 100%;
          border-right: none !important;
      }

      .preview-item:nth-last-child(2) {
          border-bottom: 1px solid #e9ecef;
          /* Phục hồi viền cho mobile */
      }
  }

  #data-table tbody tr {
      cursor: pointer;
  }

  /* ================================================================= */
  /* QUY TẮC HIỂN THỊ: KHUNG XANH ĐỨNG IM - KHUNG ĐỎ CUỘN NGANG        */
  /* ================================================================= */

  /* 1. Đảm bảo toàn bộ khung lớn chứa DataTables không bao giờ phình to */
  .dataTables_wrapper {
      width: 100% !important;
      max-width: 100vw !important;
      overflow-x: hidden !important;
  }

  /* 2. KHUNG XANH (Header & Footer): Cấm cuộn ngang, tự rớt dòng mềm mại */
  .top-controls-wrapper,
  .bottom-controls-wrapper {
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      overflow-x: hidden !important;
  }

  /* 3. KHUNG ĐỎ (Bảng dữ liệu): Khu vực DUY NHẤT được phép cuộn ngang */
  .custom-table-scroll {
      width: 100% !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      /* Tránh xuất hiện thanh cuộn dọc dư thừa */
      -webkit-overflow-scrolling: touch !important;
      /* Cuộn mượt trên iPhone/iPad */
  }

  /* 4. Tinh chỉnh riêng cho Mobile để Khung Xanh xếp lớp tuyệt đẹp */
  @media (max-width: 768px) {

      /* Ép thanh Search và Hiển thị rớt dòng, căn giữa */
      .top-controls-wrapper .dataTables_length,
      .top-controls-wrapper .dataTables_filter {
          text-align: center !important;
          margin-bottom: 10px;
      }

      /* Ép nhóm nút bấm (Copy, Excel...) tự động bẻ dòng nếu quá dài, không chọc thủng viền màn hình */
      .top-controls-wrapper .dt-buttons {
          display: flex !important;
          flex-wrap: wrap !important;
          justify-content: center !important;
          gap: 5px;
          margin-bottom: 10px;
      }

      /* Đảm bảo phân trang nằm gọn giữa màn hình */
      .bottom-controls-wrapper .dataTables_paginate {
          margin-top: 10px;
          display: flex;
          justify-content: center;
      }
  }

  /* ========================================================
   GIAO DIỆN COMBOBOX HIỆN ĐẠI (FLOATING CARD & ORANGE GLOW)
   ======================================================== */

  /* 1. Ô nhập liệu: Luôn bo tròn 4 góc, hiệu ứng mượt mà */
  .dropdown-search-input,
  .multiselect-input {
      border-radius: 6px !important;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  /* 2. Hiệu ứng Focus: Viền màu cam và bóng đổ cam nhạt */
  .custom-dropdown-wrapper.is-open .dropdown-search-input,
  .multiselect-wrapper.is-open .multiselect-input,
  .dropdown-search-input:focus,
  .multiselect-input:focus {
      border-color: #fd7e14 !important;
      /* Màu cam Bootstrap */
      box-shadow: 0 0 0 0.25rem rgba(253, 126, 20, 0.25) !important;
      /* Glow cam */
      outline: none;
  }

  /* 3. Khung danh sách sổ xuống: Bo tròn, lơ lửng (cách 6px) */
  .custom-dropdown-menu,
  .multiselect-dropdown-menu {
      border-radius: 8px !important;
      /* Bo góc mảng menu dưới */
      margin-top: 6px !important;
      /* TẠO KHE HỞ LƠ LỬNG */
      border: 1px solid #dee2e6 !important;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
      /* Bóng đổ 3D */
      padding: 6px !important;
      /* Đệm bên trong để các dòng không chạm sát viền */
  }

  /* 4. Tùy chọn bên trong: Bo góc khi hover */
  .dropdown-item-opt {
      border-radius: 6px !important;
      margin: 2px 0 !important;
      padding: 8px 12px !important;
      color: #333;
      transition: background-color 0.15s ease;
  }

  .dropdown-item-opt:hover {
      background-color: #f8f9fa !important;
      /* Xám cực nhạt khi di chuột */
  }

  /* Đảm bảo ẩn hẳn ô tìm kiếm phụ bên trong menu (nếu còn sót) */
  .custom-dropdown-menu .sticky-top {
      display: none !important;
  }

  .multiselect-dropdown-menu {
      /* 1. Xóa bỏ giới hạn chiều cao, cho phép list tự động giãn hết cỡ */
      max-height: none !important;

      /* 2. Tắt thanh cuộn phụ của list */
      overflow-y: visible !important;

      /* 3. Đảm bảo bóng đổ và viền vẫn giữ nguyên (giữ code cũ của bạn ở đây) */
      border-radius: 8px !important;
      margin-top: 6px !important;
      border: 1px solid #dee2e6 !important;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
      padding: 6px !important;
  }

  /* ================================================================= */
  /* ĐẶC TRỊ LỖI NÚT "X" XUYÊN THỦNG CỘT CỐ ĐỊNH TRÊN IOS/SAFARI       */
  /* ================================================================= */

  /* 1. Nhốt nút X vào Stacking Context nội bộ, không cho thoát ra ngoài */
  .custom-dropdown-wrapper,
  .multiselect-wrapper {
      z-index: 1 !important;
  }

  /* 2. Tắt layer 3D (transform) của Safari để nút X bị tước quyền xuyên thấu */
  .clear-dropdown-btn,
  .clear-setting-btn {
      transform: none !important;
      /* Tắt transform */
      top: 0 !important;
      bottom: 0 !important;
      margin: auto !important;
      height: 14px !important;
      /* Căn giữa lại theo kiểu truyền thống an toàn */
      z-index: 2 !important;
      /* Vẫn nổi trên ô Input nhưng nằm gọn trong Wrapper */
  }

  /* 3. Đổ bê tông cho cột STT cố định, ép luôn nền trắng để che nút X đi */
  .table-responsive table td:first-child,
  .jg-table td:first-child {
      position: sticky !important;
      left: 0;
      z-index: 20 !important;
      /* Level 20 đè bẹp Wrapper Level 1 */
      background-color: #fff !important;
  }

  .table-responsive table th:first-child,
  .jg-table th:first-child {
      position: sticky !important;
      left: 0;
      z-index: 25 !important;
      background-color: #f8f9fa !important;
  }

  /* ================================================================= */
  /* GIẢI PHÓNG CỘT CỐ ĐỊNH (STICKY) CHO CÁC BẢNG CÀI ĐẶT BÊN TRONG MODAL */
  /* ================================================================= */

  /* 1. Giải phóng bảng Cấu hình Các phép tính (JSON Grid) */
  #jg-calc-table th:first-child,
  #jg-calc-table td:first-child,

  /* 2. Giải phóng bảng Cài đặt Mẫu nhập liệu (Batch Config) */
  #batch-config-table th:first-child,
  #batch-config-table td:first-child {
      position: static !important;
      z-index: 1 !important;
      box-shadow: none !important;
      background-color: transparent !important;
  }

  /* ================================================================= */
  /* TRÙM CUỐI: GHI ĐÈ & FIX TOÀN BỘ LỖI HIỂN THỊ HEADER & CỘT CỐ ĐỊNH */
  /* ================================================================= */

  /* 1. Ép Tiêu đề bảng chính: Bẻ dòng (Alt+Enter), Căn giữa ngang & dọc */
  #data-table thead th {
      text-align: center !important;
      vertical-align: middle !important;
      white-space: normal !important;
      /* Phá vỡ lệnh nowrap cũ để bẻ dòng */
      word-wrap: break-word !important;
      line-height: 1.4 !important;
      padding-right: 25px !important;
      /* Tránh chữ đè lên mũi tên sắp xếp */
  }

  /* 2. Dọn dẹp lệnh trùng lặp cho Cột đầu tiên (ID/STT) - Đổ bê tông chống lẹm */
  .table-responsive table td:first-child,
  .jg-table td:first-child {
      position: sticky !important;
      left: 0;
      z-index: 20 !important;
      /* Đè bẹp mọi Dropdown lơ lửng */
      background-color: #fff !important;
      white-space: nowrap !important;
      /* Cột ID thì không được phép bẻ dòng */
  }

  .table-responsive table th:first-child,
  .jg-table th:first-child {
      position: sticky !important;
      left: 0;
      z-index: 25 !important;
      background-color: #f8f9fa !important;
  }

  /* ================================================================= */
  /* HIỆU ỨNG INPUT BIẾN THÀNH HUY HIỆU (BADGE) TRONG BẢNG LÔ/MẺ       */
  /* ================================================================= */
  .grid-input-badge {
      border-radius: 15px !important;
      padding: 3px 8px !important;
      display: inline-block !important;
      margin: 0 !important;
      /* Chống ép giữa tự động */
      text-align: center !important;
      /* Nội dung bên trong viên thuốc luôn căn giữa */
      font-weight: normal !important;
      border: 1px solid transparent !important;
      transition: all 0.2s ease !important;
      line-height: 1.5 !important;
  }

  .grid-input-badge:focus {
      box-shadow: 0 0 0 0.25rem rgba(253, 126, 20, 0.25) !important;
      border-color: #fd7e14 !important;
      outline: none;
      transform: scale(1.05);
      z-index: 10;
  }

  .grid-input-badge~.fa-chevron-down,
  .grid-input-badge~.fa-list-check {
      opacity: 0 !important;
      pointer-events: none !important;
  }

  /* ================================================================= */
  /* FIX LỖI CĂN LỀ DỌC VÀ CHỐNG CẮT CHỮ NGÀY THÁNG TRONG BẢNG LÔ/MẺ   */
  /* ================================================================= */

  #batch-detail-tbody td,
  .jg-tbody td {
      vertical-align: middle !important;
      padding: 6px 8px !important;
      height: 42px !important;
  }

  #batch-detail-tbody .stealth-input-hover,
  .jg-tbody .stealth-input-hover {
      height: auto !important;
      min-height: 28px !important;
      padding: 3px 8px !important;
      margin: 0 !important;
      line-height: normal !important;
  }

  .grid-input-badge {
      font-weight: normal !important;
      /* Tuyệt đối giữ chữ thường */
      border-radius: 12px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: normal !important;
      padding: 2px 10px !important;
  }

  /* ĐẶC TRỊ LỖI CĂN GIỮA DỌC VÀ NGANG CHO Ô NGÀY THÁNG */
  input[type="date"].grid-input-badge,
  input[type="date"].stealth-input-hover {
      min-width: 125px !important;
      text-align: center !important;
      padding-top: 2px !important;
      padding-bottom: 2px !important;
  }

  /* Can thiệp sâu vào Shadow DOM của trình duyệt để ép lịch vào tâm */
  input[type="date"]::-webkit-datetime-edit {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      height: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
  }

  input[type="date"]::-webkit-datetime-edit-fields-wrapper {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
  }

  #batch-detail-tbody td>.d-flex,
  .jg-tbody td>.d-flex {
      height: 100% !important;
      min-height: 28px;
      align-items: center !important;
  }

  /* ================================================================= */
  /* HIỆU ỨNG TÀNG HÌNH & NỔI KHUNG NHẬP LIỆU KHI HOVER DÒNG           */
  /* ================================================================= */

  /* 1. Trạng thái bình thường: Các ô nhập liệu tàng hình, hòa vào nền */
  #batch-detail-table .stealth-input-hover:not(.grid-input-badge):not([readonly="readonly"]),
  .jg-table .stealth-input-hover:not(.grid-input-badge):not([readonly="readonly"]) {
      border: 1px solid transparent !important;
      background-color: transparent !important;
      box-shadow: none !important;
      transition: all 0.2s ease-in-out !important;
  }

  /* 2. Khi rê chuột vào dòng (TR): Bất ngờ nổi lên các khung viền cho ô chưa khóa */
  #batch-detail-tbody tr:hover .stealth-input-hover:not(.grid-input-badge):not([readonly="readonly"]),
  .jg-tbody tr:hover .stealth-input-hover:not(.grid-input-badge):not([readonly="readonly"]) {
      border: 1px solid #cbd5e1 !important;
      /* Viền xám nhạt tinh tế */
      background-color: #ffffff !important;
      /* Nền trắng bứt lên khỏi nền xám hover của dòng */
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
      /* Bóng chìm tạo độ sâu 3D */
      border-radius: 4px !important;
  }

  /* 3. Khi click chuột vào ô (Focus): Phát sáng viền màu xanh chủ đạo */
  #batch-detail-table .stealth-input-hover:focus,
  .jg-table .stealth-input-hover:focus {
      border: 1px solid #13633F !important;
      background-color: #ffffff !important;
      box-shadow: 0 0 0 0.2rem rgba(19, 99, 63, 0.2) !important;
      outline: none !important;
      z-index: 10;
      /* Đẩy lên trên cùng để viền phát sáng không bị lẹm */
  }

  /* 4. Tôn trọng tuyệt đối Cảnh báo QC Standards (Huy hiệu) */
  /* Không cho phép đổi nền thành trắng khi hover nếu ô đó đang bị báo đỏ/vàng */
  #batch-detail-tbody tr:hover .grid-input-badge,
  .jg-tbody tr:hover .grid-input-badge {
      filter: brightness(0.95);
  }

  /* ================================================================= */
  /* KIẾN TRÚC BẢNG CỐ ĐỊNH SIÊU MƯỢT (NÉT THANH 1PX & LỀ ĐÔI TINH TẾ)   */
  /* ================================================================= */

  /* 1. KHUNG BAO NGOÀI: Tăng tốc GPU & Hiệu ứng lề đôi (Double Border) */
  .smooth-scroll-wrapper {
      will-change: transform, scroll-position;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);

      /* Viền trên/dưới mỏng nhẹ 1px */
      border-top: 1px solid #dee2e6;
      border-bottom: 1px solid #dee2e6;

      /* HIỆU ỨNG LỀ 2 BÊN: 2 nét kẻ song song (double) cực kỳ sang trọng và tinh tế */
      border-left: 2px double #ced4da;
      border-right: 2px double #ced4da;

      border-radius: 6px;
  }

  /* 2. BẢNG NÉT THANH: Bỏ viền tổng, chỉ dùng viền nội bộ 1px màu xám nhạt */
  .custom-sticky-table {
      border-collapse: separate !important;
      border-spacing: 0 !important;
      border: none !important;
  }

  /* Kẻ viền Dưới và Phải cho TẤT CẢ các ô ở giữa */
  .custom-sticky-table th,
  .custom-sticky-table td {
      border-bottom: 1px solid #dee2e6 !important;
      border-right: 1px solid #dee2e6 !important;
      border-top: none !important;
      border-left: none !important;
  }

  /* Xóa viền Phải ở cột cuối cùng để không bị cấn nét với Khung Lề Đôi bên ngoài */
  .custom-sticky-table th:last-child,
  .custom-sticky-table td:last-child {
      border-right: none !important;
  }

  /* Xóa viền Dưới ở dòng cuối cùng */
  .custom-sticky-table tbody tr:last-child td {
      border-bottom: none !important;
  }

  /* 3. ĐỔ BÊ TÔNG 100% (Chống lẹm chữ, xuyên thấu khi cuộn) */
  .custom-sticky-table th {
      background-color: #f8f9fa !important;
      z-index: 10;
      background-clip: padding-box !important;
  }

  .custom-sticky-table td.link-sticky-left,
  .custom-sticky-table td.link-sticky-right {
      background-color: #ffffff !important;
      z-index: 5;
      background-clip: padding-box !important;
  }

  .custom-sticky-table th.link-sticky-left,
  .custom-sticky-table th.link-sticky-right {
      z-index: 20 !important;
  }

  /* 4. ÉP MÀU HOVER XÁM SIÊU NHẠT TOÀN DÒNG (Bảo toàn nét kẻ dọc) */
  .custom-sticky-table tbody tr:hover>td {
      background-color: #fafafa !important;
      /* Xám siêu mỏng, giúp nét kẻ viền nổi bật hoàn toàn */
  }

  /* ================================================================= */
  /* HIỆU ỨNG VALIDATION (BÁO ĐỎ) SIÊU MƯỢT - CHUẨN ENTERPRISE SaaS    */
  /* ================================================================= */

  .is-invalid {
      border: 1px solid #e11d48 !important;
      /* Đỏ hồng dịu mắt */
      background-color: #fff1f2 !important;
      /* Nền hồng nhạt */
      color: #be123c !important;
      /* Chữ đỏ đậm */
      border-radius: 6px !important;

      /* Mix 2 hiệu ứng: Rung nảy nhẹ + Tỏa hào quang nhịp đập */
      animation: gentle-shake 0.4s ease-in-out 1, error-pulse 1.8s infinite;
      z-index: 10;
      transition: all 0.3s ease;

      /* Tiêm Icon Cảnh báo (SVG) tự động vào góc phải ô Input */
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23e11d48'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e11d48' stroke='none'/%3e%3c/svg%3e") !important;
      background-repeat: no-repeat !important;
      background-position: right 8px center !important;
      background-size: 16px 16px !important;
      padding-right: 30px !important;
      /* Đẩy chữ tránh đè lên Icon */
  }

  /* Đặc trị đẩy vị trí Icon cho Dropdown & Multiselect (tránh đè mũi tên) */
  .custom-dropdown-wrapper .is-invalid,
  .multiselect-wrapper .is-invalid {
      background-position: right 30px center !important;
      padding-right: 50px !important;
  }

  /* Khi User click vào để sửa: Dừng nháy, viền đỏ sắc nét, đổ bóng tĩnh */
  .is-invalid:focus {
      animation: none !important;
      background-color: #ffffff !important;
      border-color: #be123c !important;
      box-shadow: 0 0 0 0.25rem rgba(225, 29, 72, 0.2) !important;
  }

  /* Hoạt ảnh Rung vật lý (Có độ nghiêng góc nhẹ) */
  @keyframes gentle-shake {

      0%,
      100% {
          transform: translateX(0);
      }

      20% {
          transform: translateX(-3px) rotate(-0.5deg);
      }

      40% {
          transform: translateX(3px) rotate(0.5deg);
      }

      60% {
          transform: translateX(-1.5px) rotate(-0.5deg);
      }

      80% {
          transform: translateX(1.5px) rotate(0.5deg);
      }
  }

  /* Hoạt ảnh Hào quang nhịp đập (Pulsing Glow) */
  @keyframes error-pulse {
      0% {
          box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.4);
      }

      70% {
          box-shadow: 0 0 0 6px rgba(225, 29, 72, 0);
      }

      100% {
          box-shadow: 0 0 0 0 rgba(225, 29, 72, 0);
      }
  }

  /* ==================== MULTI-FILE UPLOAD GRID ==================== */
  .file-grid-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
  }

  .file-preview-item {
      position: relative;
      width: 85px;
      height: 85px;
      border: 1px solid #dee2e6;
      border-radius: 6px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .file-preview-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 5px;
  }

  .file-preview-item .file-icon-box {
      text-align: center;
      width: 100%;
      padding: 5px;
  }

  .file-preview-item .file-icon-box i {
      font-size: 24px;
      margin-bottom: 5px;
  }

  .file-preview-item .file-icon-box .file-name {
      font-size: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #6c757d;
  }

  .btn-remove-file {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #dc3545;
      color: white;
      border: 2px solid white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      cursor: pointer;
      z-index: 10;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      padding: 0;
      transition: transform 0.2s;
  }

  .btn-remove-file:hover {
      transform: scale(1.15);
      background: #bb2d3b;
  }

  /* Khóa khung sườn chống rách ảnh khi vuốt trên iOS */
  html,
  body {
      background-color: #f0f2f5;
      /* Ép màu nền cứng để nếu iOS chụp lỗi, nó không bị chớp đen/trắng */
      overflow-x: hidden;
      width: 100%;
      overscroll-behavior-y: none;
      /* Khóa hiệu ứng nảy dây thun của Safari */
      overscroll-behavior-x: none;
  }