* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-layout {
  padding: 0 20px;
}


iframe {
  width: 100% !important;
  height: 600px !important;
  border: 0;
}

.editor {
  height: 250px;
  margin-bottom: 20px;
  background: #fff;
}

input,
textarea {
  outline: none;
}

.required:after {
  content: " *";
  color: red;
}

/* Ẩn scrollbar nhưng vẫn scroll được */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  /* IE, Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* Ẩn marker mặc định của thẻ <details> */
details>summary {
  list-style: none;
}

details>summary::-webkit-details-marker {
  display: none;
}

/* Hiệu ứng xoay mũi tên khi accordion được mở */
details[open] summary .arrow-down {
  transform: rotate(180deg);
}

.masonry {
    column-count: 3;
    column-gap: 1rem;
}

.masonry img {
    width: 100%;
    display: block;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
}

@media (max-width: 1024px) {
    .masonry {
        column-count: 2;
    }
}

@media (max-width: 640px) {
    .masonry {
        column-count: 1;
    }
}

blockquote {
    border-left-width: 4px;
    border-left-color: var(--primary);
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: #f5f3ff;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    font-style: italic;
    color: var(--secondary);
}