/**
 * Zalo OA Block — D91
 * Biến từ theme (global.css:161-170):
 *   --cream-darker: #F5F0E8  ✓ tồn tại
 *   --terracotta-darker: #8B3A2F  ✓ tồn tại
 *   --navy: #1a2332  ✓ tồn tại
 *   --serif: 'Playfair Display', Georgia, serif  ✓ tồn tại (global.css:162)
 *   --sans: KHÔNG tồn tại trong theme → giữ 'Inter', sans-serif
 * Desktop >768px: hiện QR, ẩn nút.
 * Mobile ≤768px: ẩn QR, hiện nút full width.
 */

/* === Wrapper === */
.zoa {
  background: var(--cream-darker, #F5F0E8);
  border: 1px solid rgba(26, 35, 50, 0.1);
  border-radius: 8px;
  padding: 24px;
  margin: 24px 0;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* === Text column === */
.zoa__text {
  flex: 1;
  min-width: 0;
}

.zoa__eyebrow {
  font-family: 'Inter', sans-serif; /* --sans không tồn tại trong theme; giữ 'Inter', sans-serif */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta-darker); /* tồn tại: global.css:169 = #8B3A2F */
  margin: 0 0 8px;
}

.zoa__title {
  font-family: var(--serif); /* tồn tại: global.css:162 = 'Playfair Display', Georgia, serif */
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy, #1a2332);
  margin: 0 0 10px;
  line-height: 1.25;
}

.zoa__desc {
  font-family: 'Inter', sans-serif; /* --sans không tồn tại trong theme; giữ 'Inter', sans-serif */
  font-size: 0.9375rem;
  color: var(--navy, #1a2332);
  line-height: 1.6;
  margin: 0 0 10px;
}

.zoa__note {
  font-family: 'Inter', sans-serif; /* --sans không tồn tại trong theme; giữ 'Inter', sans-serif */
  font-size: 0.75rem;
  color: #4a5260; /* thay rgba(26,35,50,0.6) bằng mã màu tĩnh */
  margin: 0;
  font-style: italic;
}

/* === Nút (mobile) === */
.zoa__btn {
  display: inline-block;
  margin-top: 14px;
  padding: 12px 20px;
  background: #0068FF;
  color: #fff;
  font-family: 'Inter', sans-serif; /* --sans không tồn tại trong theme; giữ 'Inter', sans-serif */
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  /* Contrast #fff on #0068FF = 4.56:1 ✓ */
}

.zoa__btn:hover {
  background: #0052cc;
  color: #fff;
}

/* === QR column (desktop) === */
.zoa__qr {
  flex-shrink: 0;
  width: 148px;
}

.zoa__qr img {
  width: 148px;
  height: 148px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid rgba(26, 35, 50, 0.08);
  background: #fff;
}

/* === Responsive === */

/* Desktop: hiện QR, ẩn nút */
@media (min-width: 769px) {
  .zoa__btn {
    display: none;
  }
}

/* Mobile: ẩn QR, hiện nút */
@media (max-width: 768px) {
  .zoa {
    flex-direction: column;
    gap: 16px;
  }

  .zoa__qr {
    display: none;
  }

  .zoa__btn {
    display: block;
  }
}