/* ============ Tokens nho nhỏ ============ */
:root{
  --ahm-bg:#ffffff;
  --ahm-border:#e5e7eb;          /* viền xám nhạt */
  --ahm-border-strong:#d1d5db;   /* viền đậm hơn cho grid */
  --ahm-muted:#64748b;           /* chữ mờ */
  --ahm-heading:#0f172a;         /* tiêu đề */
  --ahm-primary:#2563eb;         /* xanh dương */
  --ahm-success:#16a34a;
  --ahm-edit:#3b82f6;            /* màu nhấn khi edit */
  --ahm-chip-bg:#eef2ff;         /* chip mã booking */
  --ahm-chip-fg:#3730a3;
  --ahm-shadow:0 20px 60px rgba(2,6,23,.18);
}

/* ============ Modal ============ */
.ahmcd-overlay{
  position:fixed; inset:0; display:none; z-index:9999;
  align-items:center; justify-content:center;
  background:rgba(2,6,23,.45); backdrop-filter:saturate(120%) blur(2px);
}
.ahmcd-modal{
  width:min(960px,96vw); max-height:90vh; overflow:auto;
  background:var(--ahm-bg); border-radius:18px; box-shadow:var(--ahm-shadow);
  border:1px solid var(--ahm-border);
}
.ahmcd-head{
  padding:18px 22px; border-bottom:1px solid var(--ahm-border);
  display:flex; align-items:center; justify-content:space-between;
}
.ahmcd-head h3{margin:0; font-size:20px; font-weight:700; color:var(--ahm-heading);}
.ahmcd-body{ padding:18px 22px; }

/* ============ Form 3 cột + vạch chia hàng/cột ============ */
.ahm-grid-3x3{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:0; /* dùng kĩ thuật kẻ vạch thay vì gap */
  border:1px solid var(--ahm-border-strong);
  border-radius:12px; overflow:hidden; background:#fafafa;
}
.ahm-field{
  padding:14px; background:#fff; /* mỗi ô là 1 “ô bảng” */
  border-right:1px solid var(--ahm-border-strong);
  border-bottom:1px solid var(--ahm-border-strong);
  display:flex; flex-direction:column; gap:6px;
}
.ahm-field:nth-child(3n){ border-right:none; }              /* bỏ viền phải cột 3 */
.ahm-field:nth-last-child(-n+3){ border-bottom:none; }      /* bỏ viền dưới hàng cuối */

.ahm-field label{font-weight:600; color:var(--ahm-heading); font-size:14px;}
.ahm-field input,
.ahm-field select,
.ahm-field textarea{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--ahm-border); background:#fff; transition:all .12s ease;
}
.ahm-field input:focus,
.ahm-field select:focus,
.ahm-field textarea:focus{
  outline:none; border-color:var(--ahm-primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.18);
}

/* Edit mode – NHẸ nhàng: chỉ viền modal + field đổi border */
.ahmcd-modal.is-editing{ border-color:var(--ahm-edit); box-shadow:0 24px 80px rgba(59,130,246,.25); }
.ahmcd-modal.is-editing .ahm-field input,
.ahmcd-modal.is-editing .ahm-field select,
.ahmcd-modal.is-editing .ahm-field textarea{
  border-color:rgba(59,130,246,.55); background:#fbfdff;
}

/* ============ Booking info hàng dưới form ============ */
#ahmcd-bcode{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:var(--ahm-chip-bg); color:var(--ahm-chip-fg); font-weight:700;
}


/* Responsive: 2 cột ở tablet, 1 cột ở mobile */
@media (max-width:1000px){ .ahm-grid-3x3{ grid-template-columns:repeat(2,1fr);} .ahm-field:nth-child(3n){border-right:1px solid var(--ahm-border-strong);} .ahm-field:nth-child(2n){border-right:none;} .ahm-field:nth-last-child(-n+2){border-bottom:none;} }
@media (max-width:640px){ .ahm-grid-3x3{ grid-template-columns:1fr;} .ahm-field{border-right:none;} .ahm-field:last-child{border-bottom:none;} }





/* ====== BẢNG ====== */
.ahmcd-wrap .ahmcd-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  font-size:15px;
}
.ahmcd-wrap .ahmcd-table thead th{
  background:#f8fafc;
  color:#1e293b;
  font-weight:700;
  border-bottom:2px solid #e2e8f0;
  padding:12px 10px;
  text-align:center;             /* căn giữa header */
}
.ahmcd-wrap .ahmcd-table tbody td{
  border-bottom:1px solid #f1f5f9;
  padding:10px 12px;
  text-align:center;             /* căn giữa cell */
  vertical-align:middle;
}
/* hover mỗi hàng */
.ahmcd-wrap .ahmcd-table tbody tr{transition:background .2s ease !important}
.ahmcd-wrap .ahmcd-table tbody tr:hover{background:#f9fafb !important}

/* ====== NÚT “Xem chi tiết” ====== */
.ahmcd-wrap .ahmcd-actions .ahmcd-view{
  background:#2563eb !important;
  border:none !important;
  color:#fff !important;
  padding:7px 14px !important;
  font-size:14px !important;
  font-weight:600 !important;
  border-radius:8px !important;
  cursor:pointer;
  transition:background .2s ease, transform .1s ease;
}
.ahmcd-wrap .ahmcd-actions .ahmcd-view:hover{
  background:#1d4ed8 !important;
  transform:translateY(-1px);
}
.ahmcd-wrap .ahmcd-actions .ahmcd-view:active{
  background:#1e40af !important;
  transform:none;
}

/* ====== PHÂN TRANG (đúng ID nút hiện tại) ====== */
.ahmcd-wrap #ahmcd-prev,
.ahmcd-wrap #ahmcd-next{
  background:#2563eb !important;
  border:none !important;
  color:#fff !important;
  padding:7px 14px !important;
  font-size:14px !important;
  font-weight:600 !important;
  border-radius:8px !important;
  cursor:pointer;
  transition:background .2s ease, transform .1s ease;
}
.ahmcd-wrap #ahmcd-prev:hover,
.ahmcd-wrap #ahmcd-next:hover{
  background:#1d4ed8 !important;
  transform:translateY(-1px);
}
.ahmcd-wrap #ahmcd-prev:disabled,
.ahmcd-wrap #ahmcd-next:disabled{
  background:#cbd5e1 !important;
  cursor:not-allowed !important;
  transform:none !important;
}

/* chữ “Trang X / Y” cạnh pagination */
.ahmcd-wrap #ahmcd-page{
  font-weight:600;
  color:#334155;
  margin:0 10px;
}



/* ===== FOOTER (pagination + per page) ===== */
.ahmcd-footer{
  display:flex;
  justify-content:space-between; /* trái phải */
  align-items:center;
  margin-top:15px;
}

/* pagination trái */
.ahmcd-footer .ahmcd-pagination{
  display:flex;
  align-items:center;
  gap:10px;
}

/* select perpage phải */
.ahmcd-footer .ahmcd-perpage{
  font-size:14px;
  color:#334155;
}
.ahmcd-footer .ahmcd-perpage select{
  margin:0 5px;
  padding:4px 8px;
  border:1px solid #cbd5e1;
  border-radius:6px;
}




/* Khi đang ở chế độ chỉnh sửa */
#ahmcd-form.is-editing input,
#ahmcd-form.is-editing select,
#ahmcd-form.is-editing textarea {
  border: 2px solid #3498db;
  background: #f8fbff;
}