/* ---- CSS CHO HỆ THỐNG PROMO POPUP (STYLE LIQUID GLASS) ---- */
#compact-promo-system {
  display: none; /* <-- THÊM DÒNG NÀY: Ẩn hoàn toàn mặc định */
  opacity: 0; /* Ẩn bằng cách làm trong suốt */
  visibility: hidden; /* Ẩn khỏi layout và tương tác */
  transform: translateY(10px); /* Hơi dịch xuống dưới một chút */
  transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0s 0.4s; /* Hiệu ứng mờ dần và trượt lên trong 0.4 giây */
  /* Các thuộc tính khác như margin, padding giữ nguyên */
  /* KHÔNG còn display: none; nữa */
}

/* Thêm class mới này để kích hoạt hiệu ứng */
#compact-promo-system.visible {
  display: block; /* <-- THÊM DÒNG NÀY: Cho nó hiện ra dạng khối */
  opacity: 1; /* Hiện rõ */
  visibility: visible; /* Cho phép nhìn thấy và tương tác */
  transform: translateY(0); /* Trượt về vị trí ban đầu */
  transition-delay: 0s; /* Bỏ delay khi hiện ra */
}
/* Nút bấm chính - Giờ là một tấm kính mờ */
.compact-promo-trigger {
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 12px; /* Bo tròn nhiều hơn */
  cursor: pointer;
  margin-bottom: 15px;
  width: auto;          /* <-- THÊM DÒNG NÀY */
  max-width: 100%;      /* <-- THÊM DÒNG NÀY (để không bị tràn nếu quá dài) */
  
  /* Hiệu ứng "kính mờ" */
  background: rgba(255, 255, 255, 0.2); /* Nền trong suốt */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Hỗ trợ Safari */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Viền sáng */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}
.compact-promo-trigger:hover { background: rgba(255, 255, 255, 0.3); }

/* Chữ và tag bên trong nút bấm */
.promo-title { font-weight: 600; color: #1a202c; margin-right: 15px; } /* Chữ đậm hơn để dễ đọc */
.promo-tags-container { display: flex; gap: 8px; flex-wrap: wrap; overflow: hidden; margin-right: 10px; }
.promo-tag {
  background-color: rgba(229, 62, 62, 0.1); /* Màu đỏ trong suốt */
  color: #c53030;
  border: 1px solid rgba(229, 62, 62, 0.2);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.promo-arrow { margin-left: auto; font-size: 20px; color: #4a5568; }

/* CSS chung cho các Popup */
.promo-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0; top: 0;
  width: 100%; height: 100%;
}
.promo-modal-overlay {
  position: absolute;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.4); /* Giảm độ tối một chút */
  backdrop-filter: blur(4px); /* Làm mờ cả nền phía sau */
  -webkit-backdrop-filter: blur(4px);
}
.promo-modal-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;

  /* Hiệu ứng "kính mờ" cho popup chính */
  background: rgba(248, 249, 250, 0.8); /* Nền trắng xám, trong suốt */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.promo-modal.active .promo-modal-content {
  transform: translateY(0);
}
.promo-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(52, 73, 94, 0.1); /* Viền mờ */
}
.promo-modal-header h4 { margin: 0; font-size: 16px; font-weight: 600; color: #2d3748; }
.promo-modal-close {
  background: none; border: none; font-size: 24px;
  cursor: pointer; color: #718096;
}
.promo-modal-body { padding: 15px 20px; max-height: 60vh; overflow-y: auto; }

/* CSS cho danh sách voucher trong popup */
.promo-list-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 10px;

  /* Hiệu ứng "kính mờ" cho từng item */
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.promo-list-item-text { flex-grow: 1; }
.promo-list-item-text p { margin: 0; font-weight: 500; color: #2d3748; }
.promo-list-item-text small {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: #4a5568;
  font-weight: 500;
}
.promo-copy-btn {
  background-color: #e53e3e; color: white; border: none; padding: 6px 12px;
  border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 12px; white-space: nowrap;
  transition: background-color 0.2s;
}
.promo-copy-btn:hover { background-color: #c53030; }