/* su-kien.css — Khối hình ảnh sự kiện đào tạo thực tế tại hội trường.
   Mọi màu sắc bắt buộc dùng qua var() từ tokens.css. Cấm mã màu thô.
   Tệp dưới 150 dòng. Thiết kế cao cấp: không đổ bóng, viền 1px, bo góc 16px. */

.khoi-su-kien {
  padding: 120px 0;
  border-top: 1px solid var(--vien);
}

.su-kien__mo-dau {
  max-width: 580px;
  margin-bottom: 32px;
  color: var(--chu-phu);
  font-size: var(--co-van);
  line-height: var(--dong-van);
}

.su-kien__luoi {
  display: grid;
  grid-template-columns: 58% calc(42% - 24px);
  gap: 24px;
  align-items: stretch;
}

.su-kien__the {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.su-kien__the--lon {
  height: 100%;
}

.su-kien__cot-phu {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
  height: 100%;
}

.su-kien__khung-anh {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  overflow: hidden;
  background: var(--nen-phu);
  box-shadow: none;
}

.su-kien__the--lon .su-kien__khung-anh {
  min-height: 420px;
}

.su-kien__the--nho .su-kien__khung-anh {
  min-height: 180px;
}

.su-kien__anh {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: none;
  border: none;
}

.su-kien__chu-thich {
  font-size: var(--co-chu-thich);
  line-height: 1.6;
  color: var(--chu-phu);
  margin-top: 12px;
  max-width: 460px;
}

/* Bản màn hình hẹp và điện thoại: ba ảnh xếp dọc */
@media (max-width: 900px) {
  .khoi-su-kien {
    padding: var(--cach-khoi-m, 72px) 0;
  }
  .su-kien__mo-dau {
    margin-bottom: 24px;
  }
  .su-kien__luoi {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .su-kien__cot-phu {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .su-kien__the--lon .su-kien__khung-anh,
  .su-kien__the--nho .su-kien__khung-anh {
    min-height: auto;
    aspect-ratio: 3 / 2;
  }
  .su-kien__chu-thich {
    font-size: 13px;
    margin-top: 8px;
    max-width: 100%;
  }
}

/* Tôn trọng cài đặt giảm chuyển động của hệ điều hành */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}