/* Chủ đề (18/10/2026) — hiện cho mọi khách tới hết hạn (chu-de.js + config.js CHU_DE).
   Màu lấy từ biến --cd-*: mặc định theo brand (vàng trên xanh ngọc); mỗi sự kiện khai bảng màu riêng bên dưới
   theo [data-chu-de="<ma>"] (anh chốt 18/10: chủ đề dùng màu của sự kiện, có hình minh hoạ như bó hoa). */
.chu-de, .dat-chu-de {
  --cd-nen: linear-gradient(120deg, color-mix(in oklch, var(--mau-nhan) 22%, var(--mau-nen)) 0%, color-mix(in oklch, var(--mau-nhan) 8%, var(--mau-nen)) 100%);
  --cd-vien: color-mix(in oklch, var(--mau-nhan) 55%, transparent);
  --cd-bong: color-mix(in oklch, var(--mau-nhan) 70%, transparent);
  --cd-tieu-de: var(--mau-nhan); --cd-chu: var(--mau-chu);
  --cd-bieu-nen: var(--nut-nen); --cd-bieu-chu: var(--nut-chu); --cd-hoa-van: none;
}

/* 20/10 — Ngày Phụ nữ Việt Nam: hồng phấn, hồng đậm, viền vàng kim, hoa văn cánh hoa mờ */
[data-chu-de="20-10"] {
  --cd-nen: linear-gradient(118deg, #fff5f8 0%, #ffe4ec 55%, #ffd3df 100%);
  --cd-vien: #e9a3b6; --cd-bong: #f07a9c;
  --cd-tieu-de: #b01f4b; --cd-chu: #5a2232;
  --cd-bieu-nen: #c2244f; --cd-bieu-chu: #fff5f8;
  --cd-hoa-van: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90'%3E%3Cg fill='%23f2a9bc' fill-opacity='.35'%3E%3Cellipse cx='14' cy='18' rx='5' ry='2.6' transform='rotate(-30 14 18)'/%3E%3Cellipse cx='70' cy='10' rx='4' ry='2' transform='rotate(40 70 10)'/%3E%3Cellipse cx='40' cy='62' rx='4.5' ry='2.3' transform='rotate(15 40 62)'/%3E%3Cellipse cx='104' cy='70' rx='5' ry='2.5' transform='rotate(-55 104 70)'/%3E%3C/g%3E%3C/svg%3E");
}

/* Khung ở đầu trang: thẻ + hình minh hoạ góc phải (nếu chủ đề có ảnh), vệt sáng lướt qua 1 lần */
.chu-de { position: relative; display: flex; align-items: center; gap: var(--k-3); width: fit-content; max-width: 30em; margin: 0 0 var(--k-6);
  padding: var(--k-3) var(--k-4) var(--k-3) var(--k-3); overflow: hidden; text-align: left;
  border: 1px solid var(--cd-vien); border-radius: var(--bo-lon); background: var(--cd-hoa-van), var(--cd-nen);
  box-shadow: 0 12px 30px -14px var(--cd-bong); animation: chu-de-vao .6s cubic-bezier(.2,.8,.2,1) both; }
.chu-de::after { content: ''; position: absolute; inset: 0; pointer-events: none; translate: -120% 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in oklch, var(--o-nhap-nen) 45%, transparent) 50%, transparent 70%);
  animation: chu-de-sang 1.6s .7s ease-out both; }
.chu-de-bieu { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-content: center;
  background: var(--cd-bieu-nen); color: var(--cd-bieu-chu); box-shadow: 0 0 0 4px color-mix(in oklch, var(--cd-bieu-nen) 18%, transparent); }
.chu-de-bieu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chu-de-nhan { margin: 0; font-family: var(--font-tieu-de); font-size: 1.375rem; line-height: 1.2; color: var(--cd-tieu-de); }
.chu-de-cau { margin: 2px 0 0; font-size: var(--co-chu-nho); line-height: 1.45; color: var(--cd-chu); }
/* Có hình minh hoạ: bỏ vòng biểu tượng, hình nằm góc phải và nhô nhẹ lên */
.chu-de.co-anh { padding: var(--k-4) 104px var(--k-4) var(--k-4); min-height: 104px; }
.chu-de.co-anh .chu-de-bieu { display: none; }
.chu-de-anh { position: absolute; right: 6px; bottom: -6px; width: 92px; height: auto; pointer-events: none;
  filter: drop-shadow(0 6px 10px color-mix(in oklch, var(--cd-bong) 45%, transparent)); }

/* Nhãn chủ đề trong thẻ sản phẩm ở form đặt sách */
.dat-chu-de { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--k-2); padding: 3px 12px 3px 8px; border-radius: var(--bo-tron);
  font-size: 0.8125rem; font-weight: 700; color: var(--cd-bieu-chu); background: var(--cd-bieu-nen); }
.dat-chu-de[data-chu-de="20-10"] { color: #a81d43; background: linear-gradient(118deg, #fff0f4, #ffd3df); box-shadow: inset 0 0 0 1px #e9a3b6; }
.dat-chu-de svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 759px) { .chu-de { margin-inline: auto; } }
@media (prefers-reduced-motion: no-preference) { .chu-de-anh { animation: chu-de-dua 5s ease-in-out 1s infinite; transform-origin: 50% 100%; } }
@keyframes chu-de-vao { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes chu-de-sang { to { translate: 120% 0; } }
@keyframes chu-de-dua { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@media (prefers-reduced-motion: reduce) { .chu-de, .chu-de::after { animation: none; } .chu-de::after { display: none; } }