/* ============================================================
   SAVINA · TRANG TRÍ THEO MÙA
   ------------------------------------------------------------
   LÀM LẠI. Bản trước chủ yếu đổi màu nhấn — bạn nhìn vào gần như
   không thấy gì khác, và đúng là vậy: đổi màu một dòng nhãn nhỏ
   thì có mùa cũng như không.

   Nay trang trí bám thẳng vào KHUNG mà người đọc đang nhìn: tuyết
   vương trên mép trên các thẻ và tab, mạng nhện ở góc thẻ, cành
   mai vắt qua góc. Không đụng tới màu nền, màu chữ hay màu nhấn
   của trang — chế độ sáng/tối vẫn giữ nguyên như bạn đặt.

   Mọi hoạ tiết đều không bắt chuột, nằm ngoài luồng đọc, và tắt
   hẳn khi in giấy hoặc khi người đọc xin giảm chuyển động.
   ============================================================ */

/* Những khung được trang trí. Gom một chỗ để thêm bớt dễ. */
:root[data-savina-season]:not([data-savina-season="mac-dinh"]) .card,
:root[data-savina-season]:not([data-savina-season="mac-dinh"]) .term,
:root[data-savina-season]:not([data-savina-season="mac-dinh"]) .step,
:root[data-savina-season]:not([data-savina-season="mac-dinh"]) .pcCard,
:root[data-savina-season]:not([data-savina-season="mac-dinh"]) .price-market-card,
:root[data-savina-season]:not([data-savina-season="mac-dinh"]) .ttMuc,
:root[data-savina-season]:not([data-savina-season="mac-dinh"]) .analysisCard,
:root[data-savina-season]:not([data-savina-season="mac-dinh"]) .knowledge-card,
:root[data-savina-season]:not([data-savina-season="mac-dinh"]) .region-card {
  position: relative;
}

/* ---------- Giáng sinh · tuyết vương trên mép trên ----------
   Tuyết trắng nên hợp cả nền sáng lẫn nền tối, không cần hai bản. */
:root[data-savina-season="giang-sinh"] .card::before,
:root[data-savina-season="giang-sinh"] .term::before,
:root[data-savina-season="giang-sinh"] .step::before,
:root[data-savina-season="giang-sinh"] .pcCard::before,
:root[data-savina-season="giang-sinh"] .price-market-card::before,
:root[data-savina-season="giang-sinh"] .ttMuc::before,
:root[data-savina-season="giang-sinh"] .analysisCard::before,
:root[data-savina-season="giang-sinh"] .knowledge-card::before,
:root[data-savina-season="giang-sinh"] .region-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 15px;
  z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 15'><path d='M0 9c6-5 11-1 17-4 7-3 11 2 18 1 6-1 9-5 15-4 7 1 10 6 17 5 6-1 9-5 16-4 7 1 11 5 18 3 7-2 11-6 19-3v12H0z' fill='%23ffffff'/><circle cx='28' cy='6' r='1.6' fill='%23ffffff'/><circle cx='74' cy='5' r='1.4' fill='%23ffffff'/></svg>") repeat-x center/auto 15px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.14));
}
/* Tab cũng có tuyết, nhưng mỏng hơn vì tab nhỏ */
:root[data-savina-season="giang-sinh"] .pcTab,
:root[data-savina-season="giang-sinh"] .phTab,
:root[data-savina-season="giang-sinh"] .ttTab { position: relative; }
:root[data-savina-season="giang-sinh"] .pcTab[aria-pressed="true"]::before,
:root[data-savina-season="giang-sinh"] .phTab[aria-pressed="true"]::before,
:root[data-savina-season="giang-sinh"] .ttTab[aria-pressed="true"]::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: -4px; height: 9px;
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 9'><path d='M0 6c5-4 9-1 14-3 5-2 8 2 13 1 5-1 7-4 12-3 5 1 8 4 13 3 3-1 5-3 8-2v10H0z' fill='%23ffffff'/></svg>") repeat-x center/auto 9px;
}

/* ---------- Halloween · mạng nhện góc thẻ ---------- */
:root[data-savina-season="halloween"] .card::after,
:root[data-savina-season="halloween"] .term::after,
:root[data-savina-season="halloween"] .pcCard::after,
:root[data-savina-season="halloween"] .price-market-card::after,
:root[data-savina-season="halloween"] .ttMuc::after,
:root[data-savina-season="halloween"] .knowledge-card::after {
  content: ""; position: absolute; right: 0; top: 0; width: 56px; height: 56px;
  z-index: 2; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'><g fill='none' stroke='%23c2601c' stroke-width='1.4' stroke-linecap='round'><path d='M56 0 0 56M56 0v56M56 0H0'/><path d='M56 14C44 16 16 44 14 56M56 28C48 30 30 48 28 56M56 42c-6 2-12 8-14 14'/></g></svg>") no-repeat center/contain;
}

/* ---------- Tết · cành mai vắt qua góc ---------- */
:root[data-savina-season="tet"] .card::after,
:root[data-savina-season="tet"] .term::after,
:root[data-savina-season="tet"] .pcCard::after,
:root[data-savina-season="tet"] .price-market-card::after,
:root[data-savina-season="tet"] .ttMuc::after,
:root[data-savina-season="tet"] .knowledge-card::after {
  content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 50px;
  z-index: 2; pointer-events: none; opacity: .78;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 50'><path d='M0 6c12 2 24 8 34 18' fill='none' stroke='%238a6a3a' stroke-width='2' stroke-linecap='round'/><g fill='%23e8b53c'><circle cx='14' cy='8' r='3.4'/><circle cx='20' cy='4' r='3.4'/><circle cx='20' cy='13' r='3.4'/><circle cx='26' cy='9' r='3.4'/><circle cx='20' cy='8.5' r='2.1' fill='%23c98a1e'/></g><g fill='%23e8b53c'><circle cx='34' cy='20' r='3'/><circle cx='40' cy='17' r='3'/><circle cx='40' cy='25' r='3'/><circle cx='45' cy='21' r='3'/><circle cx='40' cy='21' r='1.9' fill='%23c98a1e'/></g></svg>") no-repeat center/contain;
}

/* ---------- Trung thu · đèn lồng treo góc ---------- */
:root[data-savina-season="trung-thu"] .card::after,
:root[data-savina-season="trung-thu"] .term::after,
:root[data-savina-season="trung-thu"] .pcCard::after,
:root[data-savina-season="trung-thu"] .price-market-card::after,
:root[data-savina-season="trung-thu"] .ttMuc::after,
:root[data-savina-season="trung-thu"] .knowledge-card::after {
  content: ""; position: absolute; right: 14px; top: 0; width: 26px; height: 52px;
  z-index: 2; pointer-events: none; opacity: .82;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 52'><path d='M13 0v10' stroke='%238a6a3a' stroke-width='1.6' stroke-linecap='round'/><rect x='4' y='10' width='18' height='24' rx='8' fill='%23d4612a'/><path d='M2 11h22M2 33h22' stroke='%23b5651d' stroke-width='2' stroke-linecap='round'/><path d='M13 34v9M9 43h8' stroke='%23c98a1e' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat center/contain;
}

/* ---------- Năm mới · ánh kim rắc trên mép trên ---------- */
:root[data-savina-season="nam-moi"] .card::before,
:root[data-savina-season="nam-moi"] .term::before,
:root[data-savina-season="nam-moi"] .pcCard::before,
:root[data-savina-season="nam-moi"] .price-market-card::before,
:root[data-savina-season="nam-moi"] .ttMuc::before,
:root[data-savina-season="nam-moi"] .knowledge-card::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: -6px; height: 13px;
  z-index: 2; pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 13'><g fill='%23d8ab63'><path d='M12 1l1.6 4.4L18 7l-4.4 1.6L12 13l-1.6-4.4L6 7l4.4-1.6z'/><path d='M54 3l1.1 3L58 7l-2.9 1L54 11l-1.1-3L50 7l2.9-1z'/><path d='M96 2l1.3 3.6L101 7l-3.7 1.4L96 12l-1.3-3.6L91 7l3.7-1.4z'/></g><g fill='%23e8c468'><circle cx='32' cy='6' r='1.6'/><circle cx='74' cy='8' r='1.4'/><circle cx='112' cy='5' r='1.5'/></g></svg>") repeat-x center/auto 13px;
}

/* ---------- Hạt rơi (chỉ Giáng sinh và Tết) ---------- */
.mua-hat { position: fixed; inset: 0; z-index: 9983; pointer-events: none; overflow: hidden; }
.mua-hat i {
  position: absolute; top: -24px; display: block; opacity: .62;
  animation: muaRoi linear infinite;
}
@keyframes muaRoi {
  0%   { transform: translate3d(0, -24px, 0) rotate(0deg); }
  100% { transform: translate3d(var(--lech, 20px), 104vh, 0) rotate(var(--xoay, 220deg)); }
}

@media (max-width: 560px) {
  :root[data-savina-season="halloween"] .card::after,
  :root[data-savina-season="halloween"] .term::after,
  :root[data-savina-season="halloween"] .pcCard::after { width: 44px; height: 44px; }
  :root[data-savina-season="tet"] .card::after,
  :root[data-savina-season="tet"] .term::after,
  :root[data-savina-season="tet"] .pcCard::after { width: 52px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) { .mua-hat { display: none; } }
@media print { .mua-hat { display: none; } :root[data-savina-season] *::before,
  :root[data-savina-season] *::after { background-image: none !important; } }

/* Ô con bên trong thẻ (danh sách chuyên mục, danh sách bài) không có lớp
   riêng — chúng chỉ là thẻ <a> trong một khung. Gọi tên theo khung cha
   để tuyết bám được vào từng ô, chứ không chỉ vào khung ngoài cùng. */
:root[data-savina-season]:not([data-savina-season="mac-dinh"]) .others > a,
:root[data-savina-season]:not([data-savina-season="mac-dinh"]) .list > a,
:root[data-savina-season]:not([data-savina-season="mac-dinh"]) .grid > a { position: relative; }

:root[data-savina-season="giang-sinh"] .others > a::before,
:root[data-savina-season="giang-sinh"] .list > a::before,
:root[data-savina-season="giang-sinh"] .grid > a::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: -5px; height: 11px;
  z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 11'><path d='M0 7c5-4 9-1 14-3 6-2 9 2 14 1 5-1 8-4 13-3 5 1 8 4 13 3 5-1 8-4 13-3 5 1 9 4 14 2 3-1 6-3 9-2v9H0z' fill='%23ffffff'/></svg>") repeat-x center/auto 11px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
}
:root[data-savina-season="nam-moi"] .others > a::before,
:root[data-savina-season="nam-moi"] .list > a::before,
:root[data-savina-season="nam-moi"] .grid > a::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: -5px; height: 11px;
  z-index: 2; pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 11'><g fill='%23d8ab63'><path d='M14 1l1.3 3.6L19 6l-3.7 1.4L14 11l-1.3-3.6L9 6l3.7-1.4z'/><path d='M58 2l1 2.8L62 6l-3 1.1L58 10l-1-2.9L54 6l3-1.2z'/></g><g fill='%23e8c468'><circle cx='36' cy='5' r='1.4'/><circle cx='80' cy='6' r='1.3'/></g></svg>") repeat-x center/auto 11px;
}