/* Glass CSS - Separated to avoid Lightning CSS stripping backdrop-filter */

.glass {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;

  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);

  border: 1px solid transparent;
  background-clip: padding-box;
  overflow: hidden;
}
  
.glass-none-mobile {
  position: relative; /* mobile: chỉ giữ position */
}

.glass.shadown-none {
  box-shadow: none;
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.27), 
    
    /* Top: Ánh sáng */
    inset 2px 2px 4px -2px rgba(255, 255, 255, 0.45), 
    inset 1px 1px 1px 0 rgba(255, 255, 255, 0.25), 
    
    /* Bottom: Ánh sáng */
    inset -2px -2px 4px -2px rgba(255, 255, 255, 0.45), 
    inset -1px -1px 1px 0 rgba(255, 255, 255, 0.25), 
    
    /* Left: Bóng tối */
    inset 2px 2px 5px -1px rgba(0, 0, 0, 0.5), 
    inset 1px 1px 2px 0 rgba(0, 0, 0, 0.4), 
    
    /* Right: Bóng tối */
    inset -2px -2px 5px -1px rgba(0, 0, 0, 0.5), 
    inset -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
  left: 0px;
  right: 0px;
  z-index: -1;
}
  


@media (min-width: 768px) {
  .glass-none-mobile {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;

    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);

    border: 1px solid transparent;
    background-clip: padding-box;
    overflow: hidden;
  }

  .glass-none-mobile::before {
    display: none;
  }
}