html[data-mua="xuan"] {
  --nen: #FAFDF7;
  --nen-2: #FFFFFF;
  --nen-3: #EDF6E7;
  --muc: #1B2A18;
  --muc-2: #46583F;
  --muc-3: #647560;
  --vien: #DCEBD2;
  --vien-dam: #BCD8AE;
  --nhan: #3F7C3A;
  --nhan-dam: #2E5E2A;
  --nhan-nhat: #6BA463;
  --vang: #8A6316;
  --xanh: #2E6A4C;
  --do: #A8362F;

  --mua-1: #F2B8C6;
  --mua-2: #A8D89A;
  --mua-3: #FFF3C4;

  --hat-1: #F2B8C6;
  --hat-2: #FFD9E2;
  --hat-3: #B9E0A8;

  --chan-nen: #1F2E1C;
  --chan-muc: #C6D4BE;
  --chan-nhat: #9AAB92;
}

html[data-mua="ha"] {
  --nen: #F6FBFE;
  --nen-2: #FFFFFF;
  --nen-3: #E2F1F9;
  --muc: #0E2530;
  --muc-2: #385465;
  --muc-3: #5C7583;
  --vien: #CEE7F1;
  --vien-dam: #A5CEE1;
  --nhan: #0B6389;
  --nhan-dam: #074A67;
  --nhan-nhat: #3E97C0;
  --vang: #8E5811;
  --xanh: #0C7461;
  --do: #B33F2C;

  --mua-1: #2FA8DC;
  --mua-2: #FF7F5C;
  --mua-3: #FFD36B;
  --hat-1: #8FD9F6;
  --hat-2: #FFB49A;
  --hat-3: #FFE9A8;

  --chan-nen: #0C2634;
  --chan-muc: #BBD5E2;
  --chan-nhat: #8FAEBE;
}

html[data-mua="thu"] {
  --nen: #FDF7EE;
  --nen-2: #FFFFFF;
  --nen-3: #F7E9D6;
  --muc: #2A1A0F;
  --muc-2: #5C432E;
  --muc-3: #786047;
  --vien: #ECDAC1;
  --vien-dam: #D7BC98;
  --nhan: #97491A;
  --nhan-dam: #70340F;
  --nhan-nhat: #BC7845;
  --vang: #856219;
  --xanh: #55632F;
  --do: #8B2E25;

  --mua-1: #D9722B;
  --mua-2: #A32E22;
  --mua-3: #E0A93C;
  --hat-1: #DE7C2E;
  --hat-2: #C0492E;
  --hat-3: #E8B44A;

  --chan-nen: #2E1A0E;
  --chan-muc: #D5BE9F;
  --chan-nhat: #A9927A;
}

html[data-mua="dong"] {
  --nen: #F7F9FC;
  --nen-2: #FFFFFF;
  --nen-3: #E8EDF5;
  --muc: #101A2B;
  --muc-2: #3A4657;
  --muc-3: #616D7E;
  --vien: #DCE3EE;
  --vien-dam: #BCC7D8;
  --nhan: #1B3A6B;
  --nhan-dam: #12294D;
  --nhan-nhat: #4A6FA5;
  --vang: #7C5F19;
  --xanh: #1F6152;
  --do: #9B3340;

  --mua-1: #BFD8EE;
  --mua-2: #1B3A6B;
  --mua-3: #C9A227;

  --hat-1: #FFFFFF;
  --hat-2: #CFE4F6;
  --hat-3: #E6CF7A;

  --chan-nen: #0E1B30;
  --chan-muc: #C3CEDF;
  --chan-nhat: #94A2B6;
}

html[data-mua="xuan"] .hero__anh.co-3d {
  background: radial-gradient(120% 100% at 50% 0%,
    var(--n3d-giua, #F3FAEE) 0%, var(--n3d-chinh, #DDEFD3) 62%, var(--n3d-ria, #C3E0B4) 100%);
}
html[data-mua="ha"] .hero__anh.co-3d {
  background: radial-gradient(120% 100% at 50% 0%,
    var(--n3d-giua, #E9F7FE) 0%, var(--n3d-chinh, #BFE4F6) 62%, var(--n3d-ria, #7FC4E6) 100%);
}
html[data-mua="thu"] .hero__anh.co-3d {
  background: radial-gradient(120% 100% at 50% 0%,
    var(--n3d-giua, #FBEEDA) 0%, var(--n3d-chinh, #EFCF9E) 62%, var(--n3d-ria, #D9A05B) 100%);
}
html[data-mua="dong"] .hero__anh.co-3d {
  background: radial-gradient(120% 100% at 50% 0%,
    var(--n3d-giua, #1B3357) 0%, var(--n3d-chinh, #12233E) 62%, var(--n3d-ria, #0B1728) 100%);
}

.hat-mua {
  position: fixed; inset: 0; z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.hat-mua.hien { opacity: 1; }
.hat-mua canvas { display: block; width: 100%; height: 100%; }

.thanh-tren, .chan-trang { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hat-mua { display: none; }
}