/* =======================================
   🎨 Bootl AI Pro v2 – style.css
   Giữ nguyên mọi phần cũ + thêm hiệu ứng 3D, responsive, footer & chat mini
======================================= */

/* Toàn cục */
body {
  margin: 0;
  /*background: #000;*/
  color: #fff;
  font-family: "Segoe UI", Tahoma, sans-serif;
}

/* Header */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background: #0b001a;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
}
/* phần logo*/
.navbar img:hover {
  transform: scale(1.08) rotate(1deg);
  filter: drop-shadow(0 0 40px rgba(255,120,0,1))
          drop-shadow(0 0 60px rgba(0,255,255,1));
  transition: all 0.3s ease;
}
@keyframes glowPulse {
  0% { filter: drop-shadow(0 0 25px rgba(255,120,0,0.8)) drop-shadow(0 0 40px rgba(0,255,255,0.7)); }
  50% { filter: drop-shadow(0 0 40px rgba(255,120,0,1)) drop-shadow(0 0 70px rgba(0,255,255,1)); }
  100% { filter: drop-shadow(0 0 25px rgba(255,120,0,0.8)) drop-shadow(0 0 40px rgba(0,255,255,0.7)); }
}

.navbar img {
  animation: glowPulse 4s ease-in-out infinite;
}
 /* main chính */
 /* Đưa toàn bộ phần nội dung (mảng chính) lên gần menu hơn */
main {
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative;
  top: 0px; /* 👈 chỉnh con số này cho đến khi vừa ý */
  transition: all 0.4s ease-in-out;
}


/* Menu */
/* ===== 🎯 MAIN MENU CĂN GIỮA VÀ HIỆU ỨNG NÚT MỜ - PHÁT SÁNG ===== */
.main-menu {
  display: flex;                        /* Kích hoạt flexbox cho menu */
  justify-content: center;             /* Canh giữa các nút theo chiều ngang */
  align-items: center;                 /* Canh giữa theo chiều dọc (nếu có chiều cao) */
  gap: 60px;                            /* Khoảng cách giữa các nút */
  flex-wrap: wrap;                     /* Cho phép nút xuống hàng nếu không đủ chỗ */
  padding: 10px 0;                     /* Đệm trên/dưới cho menu */
  width: 100%;                         /* Đảm bảo chiếm toàn bộ chiều ngang */
  z-index: 999;                        /* Đảm bảo nằm trên nền khác */
}

/* === 💡 NÚT MENU CÓ PHONG CÁCH MỜ + PHÁT SÁNG === */
.main-menu a {
  background: rgba(0, 0, 0, 0.2);       /* Màu nền đen mờ 40% */
  color: #fff;                          /* Chữ trắng nổi bật */
  padding: 10px 16px;                   /* Kích thước vùng bấm */
  border-radius: 10px;                   /* Bo tròn nhẹ các góc */
  text-decoration: none;               /* Xóa gạch dưới của link */
  font-size: 16px;                      /* Kích thước chữ */
  font-weight: bold;                   /* ✅ Làm chữ đậm hơn */
  /*backdrop-filter: blur(8px);           Hiệu ứng mờ nền phía sau (trình duyệt hỗ trợ) */
  -webkit-backdrop-filter: blur(8px);  /* Hỗ trợ Safari */
  border: 1px solid rgba(255, 255, 255, .1); /* Viền mờ trắng */
  box-shadow: 0 0 12px rgba(0, 200, 255, 2); /* Hiệu ứng phát sáng */
  transition: all 0.3s ease;            /* Hiệu ứng chuyển động mượt */
}

/* === 🌈 HIỆU ỨNG KHI RÊ CHUỘT VÀO NÚT MENU === */
.main-menu a:hover {
  background: rgba(0, 0, 0, 0.6);       /* Nền đậm hơn khi hover */
  box-shadow: 0 0 20px rgba(0, 200, 255, 1);  /* Phát sáng mạnh hơn */
  transform: scale(1.2);              /* Phóng to nhẹ khi hover */
}


/* Layout chính */
.layout {
  display: flex;
  gap: 20px;
  margin-top: 250px;
  padding: 20px;
  min-height: 100vh;
  overflow: hidden
}

/* Cột phụ trái & phải */
.side {
  flex: 1;
}
.content {
  flex: 2;
}

/* Hình khối giới thiệu */
.shape {
  background: linear-gradient(135deg, #111, #222);
  border: 1px solid #ff00ff;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.4s;
  
}
.shape:hover {
  transform: scale(1.03);
}

/* Shop sản phẩm */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.product {
  background: #111;
  border: 1px solid #ff00ff;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
}
.info-btn, .buy-btn {
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  border: none;
  border-radius: 8px;
  padding: 8px 15px;
  color: #000;
  cursor: pointer;
  font-weight: bold;
  margin: 5px;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}
.info-btn:hover, .buy-btn:hover {
  transform: scale(1.05);
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  overflow-y: auto;          /* ✅ Cho phép cuộn toàn khung modal */
  padding: 40px 0;           /* ✅ Tạo khoảng đệm trên dưới để không dính mép */
}

.modal-content {
  background: #111;
  border: 1px solid #ff00ff;
  padding: 25px;
  border-radius: 10px;
  max-width: 600px;
  width: 90%;                /* ✅ Cho responsive nhỏ gọn hơn */
  margin: auto;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
  max-height: 90vh;          /* ✅ Giới hạn chiều cao theo màn hình */
  overflow-y: auto;          /* ✅ Cuộn nội dung bên trong modal */
  scrollbar-color: #ff00ff #111;  /* ✅ (Tuỳ chọn) Đổi màu thanh cuộn */
  scrollbar-width: thin;
}

.close {
  color: #ff00ff;
  float: right;
  font-size: 24px;
  cursor: pointer;
}

/* Form */
input, textarea, button {
  width: 100%;
  padding: 8px;
  margin: 8px 0;
  border-radius: 6px;
  border: none;
}
textarea {
  resize: vertical;
}
button.send-order, .send-request, .contact-send {
  background: linear-gradient(45deg, #00ffff, #ff00ff);
  color: #000;
  font-weight: bold;
  cursor: pointer;
}
button:hover {
  opacity: 0.9;
}

/* Đối tác */
.partner-options {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}
.service-btn {
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
}
.service-btn:hover {
  transform: translateY(-3px);
}

/* Bảng giá */
.pricing-table {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.price-card {
  background: #111;
  border: 1px solid #ff00ff;
  border-radius: 12px;
  padding: 20px;
  width: 220px;
  text-align: center;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
}

/* Footer */
.footer {
  background: #0b001a;
  padding: 30px;
  color: #ccc;
  border-top: 2px solid #ff00ff;
}
.footer-columns {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer-columns div {
  width: 30%;
}
.footer a {
  color: #00ffff;
  text-decoration: none;
}
.footer-bottom {
  text-align: center;
  margin-top: 1px;
  padding-top: 1px;
  background: #0b001a;
  color: #ccc;
  border-top: 0px solid #ff00ff;
}

.footer h4,
.footer p,
.footer li {
  margin: 2px 0 !important;   /* ép cách dòng cực nhỏ */
  padding: 0 !important;
  line-height: 1.2 !important;
}

.footer .container {
  padding: 0 !important;      /* loại bỏ padding mặc định của container */
  margin: 0 auto !important;
}




/*=======================================
   ⚙️ ẨN các phần không active (tránh dồn hết 1 trang)
======================================= */

.section {
  display: none;
  transition: none;             /* Ngăn tất cả animation con làm chậm */
  will-change: opacity, transform; /* Báo trước GPU để render mượt */
}
.section.active {
  display: block;
  animation: fadeIn 0.01s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === FIX logo trống: không hiện icon lỗi, chừa chỗ thay ảnh sau === */


 /*thên mới*/

/* 💬 === KHUNG CHAT BOOTL */


/* ===== 🌈 Phần 1: Vùng bảo vệ để khung chat không phá bố cục khác ===== */
.bootl-chat { 
  /*all: initial;  Reset toàn bộ CSS mặc định – giúp cách ly khỏi các style khác */
  font-family: 'Segoe UI', Tahoma, sans-serif; /* Font chữ cơ bản */
}
.bootl-chat, .bootl-chat * { 
  box-sizing: border-box; /* Tính toán kích thước an toàn, không bị tràn */
}

/* ===== 💬 Phần 2: Toàn bộ hộp chat ===== */
.bootl-chat .chat-widget {
  position: fixed;         /* Giữ nguyên vị trí khi cuộn trang */
  bottom: 70px;            /* Cách đáy màn hình 80px */
  right: 20px;             /* Cách mép phải 20px */
  width: 300px;            /* Chiều rộng cố định */
  background: #111;        /* Màu nền đen xám */
  border: 2px solid #ff00ff; /* Viền tím nổi bật */
  border-radius: 12px;     /* Bo góc mềm mại */
  box-shadow: 0 0 20px rgba(255,0,255,.4); /* Hiệu ứng đổ bóng tím */
  /*position: sticky;*/
  color: #fff;             /* Màu chữ trắng */
  display: none;           /* Ẩn mặc định khi chưa mở */
  flex-direction: column;  /* Bố cục chia dọc */
  z-index: 9999;           /* Ưu tiên hiển thị trên cùng */
  overflow: hidden;        /* Ẩn phần tràn nội dung */
  transition: all 0.3s ease; /* Hiệu ứng mở/ẩn mượt mà */
}

/* ===== 🎀 Phần 3: Thanh tiêu đề ===== */
.bootl-chat .chat-header {
  background: linear-gradient(90deg, #ff00ff, #00ffff);
  color: #000;
  display: flex;
  margin: 0;
  display: flex;             /* 👈 căn ngang icon + chữ */
  align-items: center;       /* 👈 căn giữa dọc tuyệt đối */
  gap: 4px;                  /* 👈 khoảng cách giữa icon 💬 và chữ */
  line-height: 1.2;
  white-space: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 2px 8px;        /* 👈 giảm chiều cao */
  font-weight: 600;
  font-size: 13px;         /* 👈 nhỏ hơn để tiết kiệm chiều cao */
  height: 40px;            /* 👈 ép chiều cao cố định */
  border-radius: 8px 8px 0 0;
  box-sizing: border-box;
}


/* ===== 🏷 Tiêu đề: ép 1 dòng, không tràn ===== */


/* ===== 🔘 Nút thu nhỏ ===== */
.bootl-chat .minimize-btn {
  background: none; 
  border: none; 
  font-size: 30px; 
  line-height: 1;
  cursor: pointer; 
  color: #000; 
}

/* ===== 📜 Phần nội dung chat ===== */
.bootl-chat .chat-body {
  flex: 1;
  padding: 10px;
  overflow-y: auto;          /* Cho phép cuộn khi vượt quá chiều cao */
  background: #111;
  font-size: 14px;
  max-height: 220px;         /* Giới hạn chiều cao cố định */
  min-height: 220px;         /* Không thấp hơn mức này */
  word-wrap: break-word;     /* Tự xuống dòng khi quá dài */
}


/* ===== 🖋️ Khu nhập tin ===== */
.bootl-chat .chat-input-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 4px solid #444;
  background: #000;
  padding: 8px;
  gap: 10px;
}

/* === Sửa lỗi hiển thị chữ trong ô nhập Bootl Chat === */
.bootl-chat #bootlChatInput {
  flex: 1;
  min-width: 80%;
  max-height: 60px;             /* Giới hạn chiều cao hợp lý */
  overflow-y: auto;             /* Khi gõ dài sẽ tự cuộn */
  
  background-color: #111 !important; /* Nền tối */
  color: #fff !important;            /* Chữ trắng */
  font-family: 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500;
  
  border: 1px solid #333;
  border-radius: 6px;
  
  padding-top: 10px;             /* 👈 THÊM padding trên */
  padding-bottom: 10px;          /* 👈 THÊM padding dưới */
  padding-left: 10px;
  padding-right: 10px;

  line-height: normal !important; /* 👈 KHẮC PHỤC lỗi chữ bị cắt */
  height: auto !important;        /* Cho phép cao tự nhiên */
  
  box-sizing: border-box;
  resize: none;                   /* Không cho kéo */
  outline: none;
  display: block;
}

.bootl-chat #bootlChatSend {
  background: linear-gradient(90deg, #ff00ff, #00ffff);
  color: #000;
  border: none;
  border-radius: 6px;
  font-weight: 70;
  cursor: pointer;
  padding: 8px 10px;
  flex-shrink: 1;                 /* giữ nguyên kích thước nút, không bị co lại */
}

/* ===== 💡 Nút bật lại chat (floating button) ===== */
.bootl-chat #bootlToggle {
  position: fixed !important;
  bottom: 20px;               /* Cách đáy 20px */
  right: 20px;                /* Cách phải 20px */
  padding: 8px 14px;          /* Kích thước nút */
  background: linear-gradient(90deg,#970697,#00ffff);
  border: none;
  border-radius: 24px;
  font-weight: 700;
  cursor: pointer;
  color: #000;
  box-shadow: 0 0 10px #ff00ff;
  z-index: 10000;
  display: inline-block;
  width: auto !important;     /* Chặn lỗi button full width */
  white-space: nowrap;        /* Giữ text trên 1 dòng */
}


/* 🌈 Hiệu ứng ánh sáng chạy quanh logo */


body {
  filter: brightness(1.05) contrast(1.2);
  background-image: url('background4k.png') !important;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  overflow-x: hidden;
}

/* Lớp ánh sáng plasma nhẹ phủ lên */
body::before {
  container, .card, header, footer {
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.3);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center,
              rgba(120, 0, 255, 0.12),
              rgba(0, 0, 0, 0.3));
  z-index: -1;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
}}
@keyframes plasmaPulse {
  0% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.15) saturate(1.3); }
  100% { filter: brightness(1) saturate(1); }
}
/* làm mờ 
body {
  animation: plasmaPulse 12s ease-in-out infinite;
}
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25); /* độ mờ 
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: -1; */


/* 🌫️ Lớp kính mờ toàn trang phía trước ảnh nền 3D */
/* 🌫️ Hiệu ứng mờ trong suốt cho toàn bộ khung nội dung */
.navbar, .layout, .content-wrapper, .box, .footer, .main-menu, .shape {
  background: rgba(0, 0, 0, 0.2);      /* Màu nền đen mờ 30% */
  /*backdrop-filter: blur(0px);           Hiệu ứng làm mờ nền phía sau */
  -webkit-backdrop-filter: blur(5px);  /* Hỗ trợ cho Safari */
  border: 1px solid rgba(255, 255, 255, 0.1);  /* Viền sáng nhẹ */
  border-radius: 16px;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.05);
}

/* chân trang */
/* Gọn và trong suốt hơn cho phần .footer (Bootl AI Plasma Style) */
.footer {
  background: rgba(0, 0, 0, 0,00001) !important;    /* nền trong suốt nhìn xuyên hồ */
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;

  padding: 15px 0 !important;                    /* 👈 giảm chiều cao */
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.5;
  text-align: center;                            /* căn giữa toàn bộ */
  box-shadow: 0 0 20px rgba(0, 255, 255, 0,1);   /* ánh sáng plasma nhẹ */
  position: relative;
  top: 0px;       /* 👈 kéo lên (âm = lên, dương = xuống) */
  transform: scale(1);  /* 👈 thu nhỏ (1 = bình thường, >1 = phóng to) */
  transition: all 0.3s ease; /* giúp di chuyển mượt hơn (tuỳ chọn) */
}
/* các khối chuyển không giật */
.toggle-content {
  transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
}

.toggle-content.active {
  opacity: 1;
  max-height: 1000px; /* hoặc chiều cao thực tế */
}
.content-wrapper {
  contain: layout paint;   /* cô lập layout con khỏi toàn bộ section */
  overflow: hidden;
}


/* telegram */
.floating-buttons {
  position: fixed;
  top: 71%; /* Đẩy cao lên khỏi chatbox */
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 9999;
}
.hide-hotline {
  display: none !important;
}

/* Khi chat mở thì ẩn */
.chat-open .floating-buttons {
  opacity: 0;
  pointer-events: none;
  display: none !important;
}

.float-btn {
  display: inline-block;
  padding: 10px 2px;
  background: linear-gradient(135deg, #00ffff, #ff00ff);
  color: #fff;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
  transition: all 0.3s ease;
  font-size: 14px;
}

.float-btn:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, #ff00ff, #00ffff);
}
/* thêm chức năng ẩn khi mở khung chat */
.chat-open .floating-buttons {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}


/* gắn hỗ trợ lên màn hình */

/* === PATCH CỐ ĐỊNH NÚT HỖ TRỢ – DÍNH VÀO MÀN HÌNH === */

/* 1) Gỡ các thuộc tính tổ tiên làm hỏng fixed */
body { filter: none !important; }               /* bỏ filter khỏi body */
.footer { transform: none !important; }         /* bỏ transform của footer */
.layout, .content-wrapper {
  overflow: visible !important;                 /* tránh cắt nút */
  contain: none !important;                     /* bỏ cô lập layout */
}

/* 2) Chặn rule global kéo nút thành full width */
#bootlToggle { width: auto !important; display: inline-flex !important; white-space: nowrap !important; }

/* 3) Dán nút vào viewport (màn hình) thật sự */
#bootlToggle {
  position: fixed !important;
  bottom: 4px !important;
  right: 10px !important;
  z-index: 2147483647 !important;               /* cao nhất có thể */
  transform: none !important;
  pointer-events: auto;
  padding: 10px 15px !important;
  border-radius: 30px !important;
  background: linear-gradient(90deg,#ff00ff,#00ffff) !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow: 0 0 18px rgba(255,0,255,.6);
}

/* 4) Nếu vô tình có pseudo kéo dài nền, tắt hẳn */
#bootlToggle::before, #bootlToggle::after { content: none !important; display: none !important; }

/* thu nhỏ 3 ô bảng giá */

/* === Thu nhỏ 3 ô bảng giá === */
.pricing-table {
  justify-content: center;     /* Căn giữa toàn bộ các ô */
  gap: 10px;                   /* Khoảng cách giữa các ô */
  padding: 20px 0;
}

.price-card {
  transform: scale(0.85);      /* 👈 Thu nhỏ 85% kích thước gốc */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0.95;               /* Làm nhẹ hơn một chút */
  background: rgba(0, 0, 0, 0.4); /* Nền trong suốt hơn, nhìn thấy hồ */
  border: 1px solid #ff00ff;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
  backdrop-filter: blur(4px);  /* Hiệu ứng kính mờ nhẹ */
}

/* Khi rê chuột vào ô thì phóng to nhẹ cho sinh động */
.price-card:hover {
  transform: scale(0.9);
  box-shadow: 0 0 25px rgba(255, 0, 255, 0.6);
}

/* hai ô trong shop trong suốt */

/* === Làm trong suốt nền 2 ô Shop sản phẩm === */
.product {
  background: rgba(0, 0, 0, 0.4) !important;   /* 💧 Nền đen mờ 45% để thấy hồ */
  backdrop-filter: blur(6px) !important;        /* 🌫️ Làm mờ nhẹ phần nền sau ô */
  -webkit-backdrop-filter: blur(6px) !important;/* Hỗ trợ cho Safari */
  border: 1px solid rgba(255, 0, 255, 0.6) !important; /* Viền tím sáng hơn một chút */
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.35) !important; /* Ánh sáng tím mờ */
  transition: all 0.3s ease-in-out;
}

/* Khi rê chuột vào, ô sáng rõ hơn một chút */
.product:hover {
  background: rgba(0, 0, 0, 0.6) !important;    /* Tăng độ mờ nhẹ khi hover */
  box-shadow: 0 0 25px rgba(255, 0, 255, 0.6);
  transform: scale(1.03);
}



/* === Làm trong suốt khung chi tiết sản phẩm (Modal) === */
/* === Tinh chỉnh độ trong và ánh sáng cho modal Bootl AI === */

/* Làm lớp nền (background mờ) dịu hơn */
.modal {
  background: rgba(0, 0, 0, 0.25) !important; /* 👈 nhẹ hơn chút */
  backdrop-filter: blur(4px) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(4px) brightness(1.1) !important;
  transition: background 0.6s ease, backdrop-filter 0.6s ease;
}

/* Làm khung modal trong sáng và có chiều sâu hơn */
.modal-content {
  background: rgba(0, 0, 0, 0.35) !important; /* 👈 sáng và trong hơn */
  backdrop-filter: blur(12px) saturate(1.2) !important; /* 👈 thêm độ sâu */
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  border: 1px solid rgba(255, 0, 255, 0.6);
  box-shadow:
    0 0 25px rgba(255, 0, 255, 0.5),
    0 0 35px rgba(0, 255, 255, 0.25) inset;
  border-radius: 16px;
  transform: scale(0.98);
  animation: modalGlow 1.2s ease forwards;
}

/* Ánh sáng plasma lan nhẹ khi mở modal */
@keyframes modalGlow {
  0% { box-shadow: 0 0 5px rgba(255,0,255,0.2); transform: scale(0.95); opacity: 0; }
  100% { box-shadow: 0 0 25px rgba(255,0,255,0.6), 0 0 35px rgba(0,255,255,0.25) inset; transform: scale(1); opacity: 1; }
}

/* 3 nút hotline... */
/* Bóng mờ chung cho các nút */
.floating-buttons {
  position: fixed;                      /* Cố định vị trí trên màn hình, không bị cuộn theo trang */
  bottom: 50px;                        /* Cách đáy màn hình 120px */
  right: 10px;                          /* Cách mép phải 20px */
  display: flex;                        /* Dùng layout flexbox để sắp xếp các nút */
  flex-direction: column;              /* Sắp xếp theo chiều dọc (trên–dưới) */
  gap: 12px;                            /* Khoảng cách giữa các nút là 12px */
  z-index: 9999;                        /* Đảm bảo luôn nằm trên cùng mọi thành phần khác */
}


.floating-buttons .float-btn {
  background: rgba(0, 0, 0, 0.4);       /* Nền màu đen mờ (40% trong suốt) */
  color: #fff;                          /* Chữ màu trắng */
  padding: 8px 3px;                   /* Khoảng đệm: trên/dưới 12px, trái/phải 18px */
  border-radius: 10px;                  /* Bo tròn các góc 10px */
  text-decoration: none;                /* Bỏ gạch chân liên kết */
  font-size: 16px;                      /* Cỡ chữ 16px */
  /*backdrop-filter: blur(8px);           Làm mờ nền phía sau nút (hiệu ứng kính mờ) */
  -webkit-backdrop-filter: blur(8px);  /* Tương thích Safari (WebKit) */
  border: 1px solid rgba(255,255,255,0.2); /* Viền trắng mờ (20% trong suốt) */
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.6); /* Đổ bóng ánh sáng màu xanh cyan nhẹ */
  transition: all 0.3s ease;            /* Hiệu ứng chuyển động mượt khi hover */
}


.floating-buttons .float-btn:hover {
  background: rgba(0, 0, 0, 0.6);       /* Làm nền đậm hơn khi rê chuột vào */
  box-shadow: 0 0 20px rgba(0, 200, 255, 1); /* Đổ bóng đậm hơn và sáng hơn */
  transform: scale(1.15);              /* Phóng to nhẹ nút lên 105% */
}


/* Ẩn khi có class chat-open */
.chat-open .floating-buttons {
  display: none !important;
}

/* ✅ Tối ưu cho điện thoại */
/* ✅ Mobile đứng */

/* ===================== */
/* 📱 Responsive cho Mobile (<=768px) */
/* ===================== */
@media (max-width: 768px) and (min-height: 500px) {

  /* Co menu-bar từ hàng ngang thành dọc */
  .menu-bar {
    flex-direction: column;        /* Chuyển từ ngang sang dọc */
    align-items: center;           /* Căn giữa các nút */
    gap: 10px;                     /* Khoảng cách giữa các nút */
    padding: 10px 0;               /* Đệm trên dưới */
    background: rgba(0, 0, 0, 0.6);/* Nền mờ cho đẹp hơn */
    backdrop-filter: blur(10px);   /* Hiệu ứng kính mờ */
    position: fixed;               /* Cố định đầu trang */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9998;
  }

  .menu-bar a {
    display: block;                /* Mỗi nút chiếm 1 dòng */
    width: 100%;                   /* Rộng full menu */
    text-align: center;            /* Căn giữa chữ */
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.1); /* Viền nhẹ */
    font-weight: 600;              /* Làm chữ “béo” hơn */
    font-size: 16px;
  }

  /* Thêm khoảng trống cho nội dung tránh bị che */
  body {
    padding-top: 180px;
  }
}

/* không đen màn hình khi xuất hiện  */

#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #000 url('logo.png') no-repeat center center;
  background-size: 120px;
  z-index: 9999;
  transition: opacity 0.1s ease;
}
body.loaded #preloader {
  opacity: 0;
  pointer-events: none;
}


/* ============================
   🌟 Nút Xem Mẹo – Thiết kế riêng
===============================*/

.meo-btn {
    background: rgba(255, 255, 255, 0.9);
    color: #3a0066;  /* tím đậm – hợp style web */
    border: 2px solid #d77bff;
    padding: 10px 18px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.25s ease;
    text-align: center;
    width: 180px;
    margin: 12px auto;
    display: block;
    box-shadow: 0 0 12px rgba(215, 123, 255, 0.7);
}

.meo-btn:hover {
    background: #d77bff;
    color: white;
    box-shadow: 0 0 18px rgba(215, 123, 255, 1);
    transform: translateY(-2px);
}

/* ===========================================
   📱 Tối ưu bố cục phần Mẹo IT & Máy Tính cho mobile
=========================================== */
@media (max-width: 768px) {

    /* Tiêu đề */
    #meos h2 {
        font-size: 22px;
        text-align: center;
        padding-bottom: 10px;
    }

    /* Grid chuyển từ 2 cột -> 1 cột */
    .product-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
        align-items: center;
    }

    /* Card mẹo */
    .product {
        width: 90% !important;
        padding: 18px 14px;
        border-radius: 12px;
        margin: 0 auto;
        box-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
        backdrop-filter: blur(4px);
    }

    /* Tiêu đề trong card */
    .product h3 {
        font-size: 18px;
        text-align: center;
        line-height: 1.4;
        margin-bottom: 14px;
    }

    /* Nút xem mẹo */
    .meo-btn {
        width: 70% !important;
        font-size: 15px;
        padding: 10px;
        margin-top: 8px;
    }
}