/* Lớp giao diện dùng chung cho mọi trang: nút Zalo nổi và banner đồng ý cookie.
   Bảng màu bám đúng hệ màu hiện có: navy #0B1622 / #12263A, gold #C9A464,
   cream #F6F3EC. Không đổi bất cứ thứ gì của thiết kế gốc. */

/* ---- Nút Zalo nổi ---- */
.az-zalo {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px 13px 15px;
  border-radius: 999px;
  background: #0068FF; /* xanh thương hiệu Zalo — khách nhận ra ngay */
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(0, 104, 255, .7), 0 2px 6px rgba(0, 0, 0, .2);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
.az-zalo:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px -12px rgba(0, 104, 255, .85), 0 2px 6px rgba(0, 0, 0, .22);
  color: #fff;
}
.az-zalo:active { transform: translateY(0); }
.az-zalo svg { width: 22px; height: 22px; display: block; flex: none; }

/* Trên màn hình hẹp chỉ còn biểu tượng, để không che nội dung */
@media (max-width: 640px) {
  .az-zalo { padding: 14px; gap: 0; }
  .az-zalo .az-zalo-text { display: none; }
}

/* Nhường chỗ cho banner khi banner đang hiện, tránh chồng lên nhau */
body.az-banner-open .az-zalo { bottom: clamp(96px, 22vw, 116px); }

/* ---- Banner đồng ý cookie ---- */
.az-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: rgba(11, 22, 34, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(201, 164, 100, .32);
  color: rgba(246, 243, 236, .82);
  font-size: 14px;
  line-height: 1.6;

  /* Quãng đường cố tình ngắn (14px), không trượt cả chiều cao banner.
     Nếu hiệu ứng bị đứng giữa chừng — tab chạy nền, trình duyệt lạ, máy yếu —
     banner vẫn nằm gần đúng chỗ và hai nút vẫn bấm được. Trượt 100% mà kẹt
     giữa chừng là banner nằm ngoài màn hình và khách không chọn được gì. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .35s ease, visibility 0s linear .45s;
}
.az-consent.az-in {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .35s ease, visibility 0s;
}
.az-consent-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px clamp(18px, 5vw, 48px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 32px);
  flex-wrap: wrap;
}
/* Khai báo đầy đủ, không dựa vào kế thừa. Banner được chèn vào nhiều trang, mà
   trang chính sách quyền riêng tư có luật `p { color: navy đậm }` của riêng nó —
   luật đó thắng màu kế thừa và biến chữ banner thành tối trên nền tối, gần như
   không đọc được. Component dùng chung phải tự đứng vững ở bất kỳ trang nào. */
.az-consent p {
  margin: 0;
  flex: 1 1 320px;
  color: rgba(246, 243, 236, .82);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.az-consent a {
  color: #C9A464;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.az-consent a:hover { color: #DDBE83; }
.az-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.az-btn {
  font: inherit;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), background .25s ease, border-color .25s ease, color .25s ease;
}
.az-btn:hover { transform: translateY(-2px); }
.az-btn:active { transform: translateY(0); }
.az-btn-primary { background: #C9A464; color: #0B1622; border: 1px solid #C9A464; }
.az-btn-primary:hover { background: #DDBE83; border-color: #DDBE83; }
.az-btn-ghost { background: transparent; color: rgba(246, 243, 236, .8); border: 1px solid rgba(246, 243, 236, .3); }
.az-btn-ghost:hover { border-color: #C9A464; color: #C9A464; }

/* Trên điện thoại, banner mặc định chiếm gần 40% chiều cao màn hình vì chữ
   xuống dòng nhiều và hai nút nằm chồng nhau. Siết lại: chữ nhỏ hơn một nấc,
   đệm mỏng hơn, hai nút chia đôi một hàng. Khách vẫn đọc và bấm thoải mái mà
   nội dung phía sau không bị che mất. */
@media (max-width: 640px) {
  .az-consent { font-size: 13px; line-height: 1.5; }
  .az-consent-inner { padding: 14px 18px; gap: 12px; }
  .az-consent p { flex: 1 1 100%; }
  .az-consent-actions { width: 100%; gap: 8px; }
  .az-btn { flex: 1 1 0; padding: 12px 10px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .az-consent { transition: none; }
  .az-zalo, .az-btn { transition: none; }
  .az-zalo:hover, .az-btn:hover { transform: none; }
}