.hk-training { padding-block: 100px; background: #fff; }
.hk-training__header { text-align: center; margin-bottom: 60px; }
.hk-training__eyebrow { color: #c6a251; font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 20px; }
.hk-training h2 { font-size: 36px; font-weight: 600; line-height: 1.2; margin: 0 0 20px; }
.hk-training__subtitle { max-width: 830px; margin: auto; font-size: 18px; line-height: 1.3; color: #555; }
.hk-training__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; margin-bottom: 60px; }
.hk-training__card { padding: 28px 30px 30px; background: #f7f7f7; border: 1px solid #e8e8e8; border-radius: 20px; }
.hk-training__number { display: block; color: #c9a653; font-size: 24px; font-weight: 700; line-height: 1.2; margin-bottom: 26px; }
.hk-training h3 { font-size: 20px; line-height: 1.2; font-weight: 600; margin: 0 0 10px; }
.hk-training__card p { color: #777; font-size: 14px; line-height: 1.2; margin: 0; }
.hk-training__slider { position: relative; }
.hk-training__track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hk-training__track::-webkit-scrollbar { display: none; }
.hk-training__video { position: relative; flex: 0 0 217px; padding: 0; border: 0; background: #111; scroll-snap-align: start; scroll-snap-stop: always; }
.hk-training__video img { display: block; width: 100%; height: auto; }
.hk-training__play { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: white; color: #555; font-size: 16px; }
.hk-training__video:focus-visible { outline: 3px solid #c9a653; outline-offset: -3px; }
.hk-training__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 1px solid #ddd; border-radius: 50%; background: white; color: #333; box-shadow: 0 4px 14px #0001; font-size: 28px; }
.hk-training__arrow--prev { left: -22px; }
.hk-training__arrow--next { right: -22px; }
.hk-training__arrow:disabled { color: #bbb; cursor: default; }
.hk-video-dialog { position: fixed; inset: 0; margin: auto; padding: 44px 12px 12px; width: fit-content; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border: 0; border-radius: 12px; background: #111; overflow: auto; }
.hk-video-dialog::backdrop { background: #000c; }
.hk-video-dialog video { display: block; max-width: 100%; width: auto; height: min(80dvh, 900px); object-fit: contain; }
.hk-video-dialog__close { position: absolute; top: 4px; right: 8px; width: 36px; height: 36px; border: 0; background: transparent; color: white; font-size: 28px; }
@media(max-width:1023px) { .hk-training__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } }
@media(max-width:767px) {
 .hk-training { padding-block: 56px; }
 .hk-training__header { margin-bottom: 32px; }
 .hk-training h2 { font-size: 28px; }
 .hk-training h2 br { display: none; }
 .hk-training__subtitle { font-size: 16px; line-height: 1.5; }
 .hk-training__grid { grid-template-columns: minmax(0,1fr); margin-bottom: 32px; }
 .hk-training__card { padding: 24px; }
 .hk-training__number { margin-bottom: 20px; }
 .hk-training__video { flex-basis: 180px; }
 .hk-training__arrow--prev { left: -12px; }
 .hk-training__arrow--next { right: -12px; }
}