:root {
  --color-main-accent: #ff4747;
}

/* ===== MAIN GRID ===== */
#main {
  display: grid;
  grid-template-columns: 55fr 34fr;
}

/* ===== PRIMARY SECTIONS ===== */
.calendar-section {
  grid-column: 1 / 2;
  z-index: 3;
}

.language-reference {
  grid-column: 2 / 3;
  z-index: 4;
}

/* ===== ADS VERTICAL (MAIN ADS) ===== */
.ads-vertical {
  grid-column: 1 / 2;
  margin-top: 16px;
  background: red;
  z-index: 2;
}

/* ===== ADS HORIZONTAL (BRIDGE BAR) ===== */
.ads-horizontal {
  grid-column: 1 / -1;
  height: 500px; /* thanh nền */
  margin-top: 0px; /* bị đè */
  z-index: -100;
  pointer-events: none;
  /*
  background: linear-gradient(
    to top,
    rgba(0,0,0,0),
    rgba(0,0,0,1)
  );
  */
}

/* ===== PRODUCTS ===== */
.products-section {
  grid-column: 1 / -1;
  margin-top: -32px; /* đè lên ads-horizontal */
  z-index: 3;
}

/* ===== RESPONSIVE: MOBILE ===== */
@media (max-width: 700px) {
  #main {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .calendar-section,
  .language-reference,
  .ads-vertical,
  .ads-horizontal,
  .products-section {
    grid-column: 1 / -1;
  }

  .ads-horizontal {
    height: auto;
  }
}

/* effect click full page */
.click-effect-layer {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
  z-index: 1000;
}

.snowflake-effect {
  position: absolute;
  width: 8px;
  height: 8px;

  background: var(--color-main-accent);
  border-radius: 50%;
  opacity: 0.9;

  animation: snow-keyframes 1s forwards;
}
@keyframes snow-keyframes {
  0% {
    transform: translate(0,0);
    opacity: 0.9;
  }
  100% {
    transform: translate(var(--x-click-effect), var(--y-click-effect));
    opacity: 0;
  }
}