/* Giữ cùng 1 hàng trên màn laptop */
  .header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:nowrap; /* không cho xuống dòng */
  }
  .header-left{
    display:flex;
    align-items:center;
    gap:8px;
    flex:1 1 auto;   /* chiếm phần còn lại bên trái */
    min-width:0;     /* CHỐT: cho phép co để không đẩy nút sang dòng 2 */
    white-space:nowrap;
  }
  .header-search{
    width: clamp(220px, 28vw, 460px); /* responsive cho laptop */
  }
  .header-row .input-group-text{ border-right:0; }
  .header-row .form-control{ min-width:0; } /* tránh đẩy vỡ layout */
  .header-create-btn{ flex:0 0 auto; }      /* không cho co và không rớt dòng */

  /* Panel chung */
  .floating-panel {
    position: absolute;
    z-index: 1055;
    width: 260px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-radius: 10px;
    padding: 10px;
  }
  .floating-panel.small { width: 180px; }
  .floating-panel .title {
    font-weight: 600; font-size: .9rem; margin-bottom: .25rem;
  }
  .floating-panel .subtle { color:#6c757d; font-size:.85rem; }
  .floating-panel .sep { height:1px; background:#f1f3f5; margin:.5rem 0; }
  .floating-panel .form-check { margin: .2rem 0; }

  /* Panel actions (ba chấm) */
  .action-menu .list-group-item {
    border: 0; padding: .55rem .75rem; cursor: pointer;
  }
  .action-menu .list-group-item:hover { background:#f8f9fa; }
  .action-menu .list-group-item i { width: 18px; }
  .action-menu .list-group-item.text-danger i { color: #dc3545; }

  /* Ảnh trong modal chi tiết: co giãn hợp lý theo viewport */
.detail-img{
    width:100%;
    max-height:60vh;     /* giới hạn chiều cao để không tràn */
    object-fit:contain;  /* hiển thị đầy đủ ảnh, không crop */
  }

  .floating-panel {
    position: absolute; z-index: 1055;
    background: #fff; border: 1px solid #e9ecef;
    border-radius: .75rem; box-shadow: 0 10px 30px rgba(0,0,0,.08);
    padding: 12px; min-width: 280px;
  }
  .floating-panel .title { font-weight: 600; margin-bottom: 6px; }
  .floating-panel .sep { height:1px; background:#eee; margin:10px 0; }
  .action-menu .list-group-item { cursor: pointer; }
  
    /* Thu nhỏ modal chi tiết xuống ~720px, vẫn responsive */
    #viewDetailModal .modal-dialog { --bs-modal-width: 720px; }

    /* Giảm tỉ lệ cover để modal thấp hơn, đỡ “choán” */
    #viewDetailModal .ratio.ratio-21x9 { padding-top: 0; }
    #viewDetailModal .ratio.ratio-21x9 { aspect-ratio: 16 / 9; } /* dùng aspect-ratio thay padding hack */
    #viewDetailModal .ratio img { display: block; width: 100%; height: auto; object-fit: cover; }
        
    /* Trên màn nhỏ, để Bootstrap tự co lại */
    @media (max-width: 576px) {
      #viewDetailModal .modal-dialog { --bs-modal-width: 100%; margin: .5rem; }
    }

  /* Nếu hẹp hơn laptop (tablets), lúc này CHỦ ĐỘNG cho xuống 2 hàng đẹp */
  @media (max-width: 992px){
    .header-row{ flex-wrap:wrap; }
    .header-left{ width:100%; order:1; }
    .header-create-btn{ order:2; }
  }