.dtlx-registration-page {
    width: min(1180px, calc(100% - 32px));
    margin: 48px auto 72px;
}
.dtlx-course-article-page .dtlx-article-container {
    width:72%;
    max-width:none;
}
.dtlx-course-article-page .dtlx-course-article-layout {
    grid-template-columns:minmax(0,1fr) 380px;
    gap:38px;
}
@media(max-width:1200px){
    .dtlx-course-article-page .dtlx-article-container { width:calc(100% - 32px); }
    .dtlx-course-article-page .dtlx-course-article-layout {
        grid-template-columns:minmax(0,1fr) 340px;
        gap:26px;
    }
}
@media(max-width:760px){
    .dtlx-course-article-page .dtlx-article-container { width:calc(100% - 24px); }
    .dtlx-course-article-page .dtlx-course-article-layout { grid-template-columns:1fr;gap:20px; }
}
.dtlx-course-registration-sidebar { min-width:0; }
.dtlx-course-mobile-cta,
.dtlx-course-mobile-backdrop,
.dtlx-course-mobile-panel-head,
.dtlx-course-mobile-title-video,
.dtlx-course-mobile-hotline { display:none; }
@media(min-width:761px){
    .dtlx-course-registration-sidebar {
        position:sticky;
        top:var(--dtlx-course-top, 88px);
        max-height:var(--dtlx-course-space, calc(100vh - 108px));
        box-sizing:border-box;
        overflow-y:auto;
        overscroll-behavior:contain;
        scrollbar-width:thin;
        scrollbar-color:#b8c6dc transparent;
    }
    .dtlx-course-registration-sidebar::-webkit-scrollbar { width:5px; }
    .dtlx-course-registration-sidebar::-webkit-scrollbar-thumb { background:#b8c6dc;border-radius:10px; }
}

/* Fit the course video and every form control into a short desktop viewport.
 * Keep overflow available for zoom, validation messages and resized notes. */
@media (min-width:761px) {
    .dtlx-course-registration-sidebar.is-fitted { padding:14px; }
    .is-fitted .dtlx-course-article-registration { gap:14px; }
    .is-fitted .dtlx-course-article-registration .dtlx-registration-video,
    .is-fitted .dtlx-course-article-registration .dtlx-registration-form { padding:14px; }
    .dtlx-course-registration-sidebar.is-compact {
        padding:8px;
    }
    .is-compact .dtlx-course-article-registration { gap:10px; }
    .is-compact .dtlx-course-article-registration .dtlx-registration-video,
    .is-compact .dtlx-course-article-registration .dtlx-registration-form {
        padding:10px;
    }
    .is-compact .dtlx-course-article-registration .dtlx-registration-video h2,
    .is-compact .dtlx-course-article-registration .dtlx-registration-form h2 {
        margin:0 0 8px;
        font-size:16px;
        line-height:1.35;
    }
    .is-compact .dtlx-registration-form > p { display:none; }
    .is-compact .dtlx-registration-video-player,
    .is-compact .dtlx-course-article-registration .dtlx-registration-video-empty {
        height:clamp(64px, calc(var(--dtlx-course-space) - 370px), 150px);
        min-height:0;
        aspect-ratio:auto;
    }
    .is-compact .dtlx-registration-video-player img,
    .is-compact .dtlx-registration-video-player video { object-fit:contain; }
    .is-compact .dtlx-registration-video-empty { padding:8px;font-size:13px; }
    .is-compact .dtlx-registration-form .dtlx-dang-ky-form {
        gap:7px;
        grid-template-columns:minmax(0,1fr);
    }
    .is-compact .dtlx-dang-ky-form input:not([type="hidden"]),
    .is-compact .dtlx-dang-ky-form select {
        min-width:0;
        min-height:38px;
        height:38px!important;
        padding:8px 10px!important;
        font-size:14px;
        line-height:20px;
    }
    .is-compact .dtlx-dang-ky-form select { padding-right:32px!important; }
    .is-compact .dtlx-course-article-registration .dtlx-registration-form textarea {
        min-width:0;
        min-height:52px;
        height:52px!important;
        padding:7px 10px;
        font-size:14px;
        line-height:18px;
    }
    .is-compact .dtlx-registration-form .dtlx-btn {
        min-height:42px;
        padding:8px 12px;
        margin:0;
        font-size:14px;
        line-height:22px;
    }
    .is-compact.is-tight .dtlx-registration-form .dtlx-dang-ky-form {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .is-compact.is-tight .dtlx-dang-ky-form select,
    .is-compact.is-tight .dtlx-dang-ky-form textarea,
    .is-compact.is-tight .dtlx-dang-ky-form .dtlx-btn { grid-column:1 / -1; }
    .is-compact.is-tight .dtlx-registration-video-player,
    .is-compact.is-tight .dtlx-course-article-registration .dtlx-registration-video-empty {
        height:clamp(64px, calc(var(--dtlx-course-space) - 325px), 150px);
    }
    .is-compact.is-short .dtlx-course-article-registration { gap:6px; }
    .is-compact.is-short .dtlx-course-article-registration .dtlx-registration-video,
    .is-compact.is-short .dtlx-course-article-registration .dtlx-registration-form { padding:6px; }
    .is-compact.is-short .dtlx-registration-video h2 { display:none; }
    .is-compact.is-short .dtlx-registration-form .dtlx-dang-ky-form { gap:5px; }
    .is-compact.is-short .dtlx-dang-ky-form input:not([type="hidden"]),
    .is-compact.is-short .dtlx-dang-ky-form select {
        height:34px!important;
        min-height:34px;
        padding-top:6px!important;
        padding-bottom:6px!important;
    }
    .is-compact.is-short .dtlx-course-article-registration .dtlx-registration-form textarea {
        min-height:38px;
        height:38px!important;
    }
    .is-compact.is-short .dtlx-registration-form .dtlx-btn { min-height:36px;padding:5px 12px; }
}
@media(max-width:760px){
    .dtlx-course-mobile-title-video {
        display:block;
        width:100%;
        margin:18px 0 24px;
        padding:0;
    }
    .dtlx-course-mobile-title-video .dtlx-registration-video-player {
        width:100%;
        border-radius:12px;
        box-shadow:0 8px 24px rgba(11,47,114,.12);
    }
    .dtlx-course-registration-sidebar {
        position:fixed;
        z-index:10002;
        right:0;
        bottom:0;
        left:0;
        width:100%;
        max-width:none;
        max-height:min(88vh,760px);
        margin:0;
        padding:0 16px 24px;
        overflow-y:auto;
        border-radius:20px 20px 0 0;
        background:#f7f9fc;
        box-shadow:0 -18px 48px rgba(4,20,54,.28);
        transform:translateY(105%);
        visibility:hidden;
        transition:transform .32s ease,visibility .32s ease;
        overscroll-behavior:contain;
        box-sizing:border-box;
    }
    .dtlx-course-registration-sidebar.is-open { transform:translateY(0);visibility:visible; }
    .dtlx-course-mobile-panel-head {
        position:sticky;
        z-index:4;
        top:0;
        display:flex;
        align-items:center;
        justify-content:space-between;
        min-height:48px;
        margin:0 -16px 10px;
        padding:0 12px 0 16px;
        border-bottom:1px solid #e1e7f0;
        background:#fff;
        color:#0b2f72;
    }
    .dtlx-course-registration-sidebar .dtlx-registration-video { display:none; }
    .dtlx-course-mobile-hotline {
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:44px;
        margin:-6px 0 14px;
        border:1px solid #cfe0f8;
        border-radius:10px;
        background:#edf5ff;
        color:#0b2f72;
        font-size:14px;
        text-decoration:none;
    }
    .dtlx-course-mobile-close {
        flex:0 0 36px!important;
        width:36px!important;min-width:36px!important;max-width:36px!important;
        height:36px!important;min-height:36px!important;max-height:36px!important;
        aspect-ratio:1/1;
        margin:0!important;padding:0!important;border:0;border-radius:50%!important;
        display:grid!important;place-items:center;
        background:#edf2fa;color:#0b2f72;font-size:25px;line-height:1;cursor:pointer;
        box-sizing:border-box;
    }
    .dtlx-course-mobile-cta {
        position:fixed;
        z-index:9998;
        right:14px;
        bottom:86px;
        left:14px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        min-height:56px;
        padding:9px 18px;
        border:0;
        border-radius:14px;
        background:linear-gradient(135deg,#0d3a87,#0b2f72);
        color:#fff;
        box-shadow:0 10px 28px rgba(11,47,114,.34);
        font-family:Poppins,sans-serif;
        cursor:pointer;
    }
    .dtlx-course-mobile-cta span { font-size:16px;font-weight:700;text-transform:uppercase; }
    .dtlx-course-mobile-cta small { font-size:11px;opacity:.85; }
    .dtlx-course-mobile-backdrop {
        position:fixed;
        z-index:10001;
        inset:0;
        width:100%;height:100%;
        padding:0;border:0;
        background:rgba(4,15,38,.58);
        opacity:0;
        visibility:hidden;
        transition:opacity .25s ease,visibility .25s ease;
    }
    .dtlx-course-mobile-backdrop.is-open { display:block;opacity:1;visibility:visible; }
    body.dtlx-course-panel-open { overflow:hidden!important; }
    body.dtlx-course-panel-open .dtlx-course-mobile-cta { opacity:0;pointer-events:none; }
    .dtlx-course-article-page { padding-bottom:148px; }
}
.dtlx-course-article-registration {
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
    align-items:start;
    margin:0;
}
.dtlx-course-article-registration .dtlx-registration-video,
.dtlx-course-article-registration .dtlx-registration-form {
    width:100%;
    padding:20px;
    box-sizing:border-box;
    border-radius:12px;
}
.dtlx-course-article-registration .dtlx-registration-video h2,
.dtlx-course-article-registration .dtlx-registration-form h2 { font-size:19px;line-height:1.35; }
.dtlx-course-article-registration .dtlx-registration-video-empty { min-height:180px; }
.dtlx-course-article-registration .dtlx-registration-form textarea { min-height:92px; }
.dtlx-course-article-registration .dtlx-registration-form .dtlx-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}
@media(max-width:800px){
    .dtlx-course-article-registration{grid-template-columns:1fr;}
}
.dtlx-registration-heading {
    margin-bottom: 28px;
    text-align: center;
}
.dtlx-registration-heading > span {
    color: #e6502b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
}
.dtlx-registration-heading h1 {
    margin: 7px 0 5px;
    color: #0b2f72;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.2;
}
.dtlx-registration-heading p { margin: 0; }
.dtlx-registration-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    gap: 28px;
    align-items: start;
}
.dtlx-registration-video,
.dtlx-registration-form {
    padding: 26px;
    border: 1px solid #e1e7f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(11, 47, 114, .08);
}
.dtlx-registration-video h2,
.dtlx-registration-form h2 {
    margin: 0 0 16px;
    color: #0b2f72;
    font-size: 23px;
}
.dtlx-registration-form > p { margin: -7px 0 18px; color: #667085; }
.dtlx-registration-video-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    background: #07142d;
}
.dtlx-registration-video-player img,
.dtlx-registration-video-player video,
.dtlx-registration-video-player iframe {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dtlx-registration-video-empty {
    display: grid;
    min-height: 300px;
    place-items: center;
    padding: 25px;
    border-radius: 10px;
    background: #f2f5fa;
    color: #667085;
    text-align: center;
}
.dtlx-registration-form .dtlx-dang-ky-form {
    display: grid;
    gap: 13px;
}
.dtlx-registration-form input,
.dtlx-registration-form select,
.dtlx-registration-form textarea {
    width: 100%;
    margin: 0;
    border: 1px solid #d5dce7;
    border-radius: 8px;
    background: #fff;
}
.dtlx-registration-form .dtlx-btn {
    width: 100%;
    min-height: 48px;
    margin: 2px 0 0;
}
.dtlx-registration-details {
    margin-top: 34px;
    padding: 34px;
    border: 1px solid #e1e7f0;
    border-radius: 16px;
    background: #f7f9fc;
}
.dtlx-registration-details-heading { margin-bottom: 20px; text-align: center; }
.dtlx-registration-details-heading span {
    color: #e6502b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}
.dtlx-registration-details-heading h2 {
    margin: 5px 0 0;
    color: #0b2f72;
    font-size: clamp(25px, 3vw, 34px);
}
.dtlx-registration-intro {
    max-width: 920px;
    margin: 0 auto 24px;
    color: #475467;
    text-align: center;
}
.dtlx-registration-intro p:last-child,
.dtlx-registration-notes p:last-child { margin-bottom: 0; }
.dtlx-registration-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.dtlx-registration-detail-grid article,
.dtlx-registration-notes {
    padding: 22px;
    border: 1px solid #e1e7f0;
    border-radius: 12px;
    background: #fff;
}
.dtlx-registration-detail-grid h3,
.dtlx-registration-notes h3 {
    margin: 0 0 13px;
    color: #0b2f72;
    font-size: 18px;
}
.dtlx-registration-detail-grid ul { margin: 0; padding: 0; list-style: none; }
.dtlx-registration-detail-grid li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 23px;
    color: #344054;
}
.dtlx-registration-detail-grid li:last-child { margin-bottom: 0; }
.dtlx-registration-detail-grid li::before {
    position: absolute;
    top: 2px;
    left: 0;
    color: #08ad82;
    content: "✓";
    font-weight: 700;
}
.dtlx-registration-notes { margin-top: 18px; border-left: 4px solid #e6502b; }
@media (max-width: 820px) {
    .dtlx-registration-page { margin-top: 28px; }
    .dtlx-registration-grid { grid-template-columns: 1fr; }
    .dtlx-registration-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .dtlx-registration-page { width: min(100% - 20px, 1180px); }
    .dtlx-registration-video,
    .dtlx-registration-form { padding: 18px; border-radius: 12px; }
    .dtlx-registration-details { padding: 20px 14px; border-radius: 12px; }
    .dtlx-registration-detail-grid article,
    .dtlx-registration-notes { padding: 18px; }
    .dtlx-registration-video-empty { min-height: 190px; }
}