/* ============================================================
   Nền cam nhạt + bông tuyết rơi (CSS only)
   ============================================================ */

/* Nền cam nhạt */
body {
  margin: 0;
  min-height: 100vh;
  background-color: #f5e6d3;
  position: relative;
  overflow-x: hidden;
}

/* Lớp tuyết rơi (full màn hình, không chặn click) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='400' viewBox='0 0 120 400'%3E%3Cg fill='%23fff' fill-opacity='0.95'%3E%3Ccircle cx='20' cy='0' r='1.5'/%3E%3Ccircle cx='80' cy='40' r='1'/%3E%3Ccircle cx='50' cy='80' r='2'/%3E%3Ccircle cx='100' cy='120' r='1'/%3E%3Ccircle cx='30' cy='160' r='1.5'/%3E%3Ccircle cx='70' cy='200' r='1'/%3E%3Ccircle cx='10' cy='240' r='2'/%3E%3Ccircle cx='60' cy='280' r='1'/%3E%3Ccircle cx='90' cy='320' r='1.5'/%3E%3Ccircle cx='40' cy='360' r='1'/%3E%3Ccircle cx='110' cy='50' r='1'/%3E%3Ccircle cx='15' cy='150' r='1.5'/%3E%3Ccircle cx='95' cy='260' r='1'/%3E%3Ccircle cx='55' cy='340' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 120px 400px;
  background-position: 0 0;
  animation: snowfall 18s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Lớp bông tuyết nhỏ (hình 6 cánh) */
.snow-layer.snowflakes {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='380' viewBox='0 0 100 380'%3E%3Cg stroke='%23fff' stroke-opacity='0.92' stroke-width='0.7' fill='none'%3E%3Cg transform='translate(15,20)'%3E%3Cline x1='4' y1='0' x2='4' y2='8'/%3E%3Cline x1='1' y1='2' x2='7' y2='6'/%3E%3Cline x1='1' y1='6' x2='7' y2='2'/%3E%3C/g%3E%3Cg transform='translate(55,80)'%3E%3Cline x1='4' y1='0' x2='4' y2='8'/%3E%3Cline x1='1' y1='2' x2='7' y2='6'/%3E%3Cline x1='1' y1='6' x2='7' y2='2'/%3E%3C/g%3E%3Cg transform='translate(80,160)'%3E%3Cline x1='3' y1='0' x2='3' y2='6'/%3E%3Cline x1='0.5' y1='1.5' x2='5.5' y2='4.5'/%3E%3Cline x1='0.5' y1='4.5' x2='5.5' y2='1.5'/%3E%3C/g%3E%3Cg transform='translate(25,240)'%3E%3Cline x1='4' y1='0' x2='4' y2='8'/%3E%3Cline x1='1' y1='2' x2='7' y2='6'/%3E%3Cline x1='1' y1='6' x2='7' y2='2'/%3E%3C/g%3E%3Cg transform='translate(70,320)'%3E%3Cline x1='3' y1='0' x2='3' y2='6'/%3E%3Cline x1='0.5' y1='1.5' x2='5.5' y2='4.5'/%3E%3Cline x1='0.5' y1='4.5' x2='5.5' y2='1.5'/%3E%3C/g%3E%3Cg transform='translate(40,50)'%3E%3Cline x1='3' y1='0' x2='3' y2='6'/%3E%3Cline x1='0.5' y1='1.5' x2='5.5' y2='4.5'/%3E%3Cline x1='0.5' y1='4.5' x2='5.5' y2='1.5'/%3E%3C/g%3E%3Cg transform='translate(90,200)'%3E%3Cline x1='4' y1='0' x2='4' y2='8'/%3E%3Cline x1='1' y1='2' x2='7' y2='6'/%3E%3Cline x1='1' y1='6' x2='7' y2='2'/%3E%3C/g%3E%3Cg transform='translate(10,290)'%3E%3Cline x1='3' y1='0' x2='3' y2='6'/%3E%3Cline x1='0.5' y1='1.5' x2='5.5' y2='4.5'/%3E%3Cline x1='0.5' y1='4.5' x2='5.5' y2='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 100px 380px;
  background-position: 0 0;
  animation: snowfall3 22s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Lớp tuyết thứ 2 (chậm hơn, tạo chiều sâu) */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='500' viewBox='0 0 160 500'%3E%3Cg fill='%23fff' fill-opacity='0.72'%3E%3Ccircle cx='40' cy='30' r='1'/%3E%3Ccircle cx='120' cy='100' r='1.5'/%3E%3Ccircle cx='70' cy='180' r='1'/%3E%3Ccircle cx='25' cy='250' r='2'/%3E%3Ccircle cx='140' cy='320' r='1'/%3E%3Ccircle cx='90' cy='400' r='1'/%3E%3Ccircle cx='55' cy='60' r='1.5'/%3E%3Ccircle cx='130' cy='200' r='1'/%3E%3Ccircle cx='15' cy='350' r='1'/%3E%3Ccircle cx='100' cy='450' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 500px;
  background-position: 60px 0;
  animation: snowfall2 24s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes snowfall {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 400px;
  }
}

@keyframes snowfall2 {
  from {
    background-position: 60px 0;
  }
  to {
    background-position: 60px 500px;
  }
}

@keyframes snowfall3 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 380px;
  }
}

/* Đảm bảo nội dung trang nằm trên lớp tuyết */
body > * {
  position: relative;
  z-index: 1;
}