/*
 * CungHoc Course Bundle frontend skin.
 * Chỉ định dạng HTML native của Tutor LMS Pro. Không thay form, giá, subscription,
 * checkout, enrollment hoặc quan hệ khóa học trong combo.
 */
body.chcd-bundle-native-page{
    --chcd-color-brand:#5b3df5;
    --chcd-color-brand-hover:#482dcf;
    --chcd-color-accent:#7b61ff;
    --chcd-color-text-primary:#1d1f30;
    --chcd-color-text-secondary:#686b7e;
    --chcd-color-border:#e7e7ef;
    --chcd-color-surface-base:#fff;
    --chcd-color-surface-soft:#f7f7fb;
    --chcd-radius-xs:12px;
    --chcd-radius-sm:18px;
    --chcd-shadow-card:0 14px 38px rgba(29,31,48,.09);
    background:var(--chcd-color-surface-soft);
    color:var(--chcd-color-text-primary);
}
body.chcd-bundle-native-page .chcd-bundle-hero{
    position:relative;
    overflow:hidden;
    padding:54px 0 86px;
    background:linear-gradient(115deg,#1d173e 0%,#352276 58%,#5b3df5 100%);
    color:#fff;
}
body.chcd-bundle-native-page .chcd-bundle-hero:before,
body.chcd-bundle-native-page .chcd-bundle-hero:after{
    content:"";
    position:absolute;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    pointer-events:none;
}
body.chcd-bundle-native-page .chcd-bundle-hero:before{width:260px;height:260px;left:-130px;bottom:-170px}
body.chcd-bundle-native-page .chcd-bundle-hero:after{width:420px;height:420px;right:-120px;top:-180px}
.chcd-bundle-hero__inner{
    position:relative;
    z-index:1;
    width:min(1200px,calc(100% - 40px));
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:54px;
    align-items:center;
}
.chcd-bundle-hero__crumbs{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:0 0 22px;font-size:14px;color:#ded8ff}
.chcd-bundle-hero__crumbs a{color:#fff;text-decoration:none}.chcd-bundle-hero__crumbs a:hover{text-decoration:underline}
.chcd-bundle-hero__badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:7px 12px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(255,255,255,.10);font-size:13px;font-weight:800}
.chcd-bundle-hero h1{max-width:820px;margin:0;color:#fff;font-size:clamp(34px,4.3vw,58px);line-height:1.08;letter-spacing:-.035em}
.chcd-bundle-hero__subtitle{max-width:760px;margin:18px 0 0;color:#e5e1ff;font-size:19px;line-height:1.65}
.chcd-bundle-hero__meta{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:26px;color:#ded8ff;font-size:14px}
.chcd-bundle-hero__meta a{color:#fff;font-weight:800}
.chcd-bundle-hero__image{overflow:hidden;aspect-ratio:16/10;border:1px solid rgba(255,255,255,.28);border-radius:18px;background:rgba(255,255,255,.10);box-shadow:0 22px 55px rgba(0,0,0,.24)}
.chcd-bundle-hero__image img{width:100%;height:100%;display:block;object-fit:cover}
.chcd-bundle-hero__placeholder{height:100%;display:grid;place-items:center;font-size:56px;font-weight:900;color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04))}

/* Hide only the native category row and duplicated heading identified by JavaScript. */
.chcd-bundle-hidden-category{display:none!important}
/* Hide only the duplicated native heading identified by JavaScript. */
.chcd-bundle-native-title-source{display:none!important}
.chcd-bundle-native-heading-block{margin-top:0!important}
.chcd-bundle-native-heading-block:has(> .chcd-bundle-native-title-source){padding-top:0!important}

body.chcd-bundle-native-page .chcd-bundle-native-root{
    width:min(1200px,calc(100% - 40px));
    max-width:none!important;
    margin:-46px auto 64px!important;
    padding-left:0!important;
    padding-right:0!important;
    position:relative;
    z-index:4;
}
body.chcd-bundle-native-page .chcd-bundle-native-root>.tutor-container,
body.chcd-bundle-native-page .chcd-bundle-native-root.tutor-container,
body.chcd-bundle-native-page .chcd-bundle-native-root>.tutor-wrap{
    width:100%!important;
    max-width:none!important;
    padding-left:0!important;
    padding-right:0!important;
}

/* The existing Tutor row remains in place; only its visual grid changes. */
body.chcd-bundle-native-page .chcd-bundle-main-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 380px!important;
    align-items:start!important;
    gap:32px!important;
}
body.chcd-bundle-native-page .chcd-bundle-main-column,
body.chcd-bundle-native-page .chcd-bundle-sidebar-column{
    width:auto!important;
    max-width:none!important;
    flex:initial!important;
    padding-left:0!important;
    padding-right:0!important;
}
body.chcd-bundle-native-page .chcd-bundle-sidebar-column{position:relative}
body.chcd-bundle-native-page .chcd-bundle-purchase-area{
    position:sticky;
    top:24px;
    overflow:hidden;
    border:1px solid var(--chcd-color-border)!important;
    border-radius:var(--chcd-radius-xs)!important;
    background:var(--chcd-color-surface-base)!important;
    box-shadow:var(--chcd-shadow-card)!important;
}
body.admin-bar.chcd-bundle-native-page .chcd-bundle-purchase-area{top:56px}
body.chcd-bundle-native-page .chcd-bundle-primary-media{
    overflow:hidden;
    border:1px solid var(--chcd-color-border)!important;
    border-radius:var(--chcd-radius-xs)!important;
    background:var(--chcd-color-surface-base)!important;
    box-shadow:0 8px 24px rgba(29,31,48,.06)!important;
}
body.chcd-bundle-native-page .chcd-bundle-primary-media img{
    display:block;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:0!important;
}

body.chcd-bundle-native-page .chcd-bundle-native-root :is(.tutor-card,.tutor-course-bundle-overview,.tutor-course-bundle-details,.tutor-course-bundle-courses,.tutor-bundle-course-list,.bundle-course-list,.bundle-course-list-wrapper){
    border-color:var(--chcd-color-border)!important;
}
body.chcd-bundle-native-page .chcd-bundle-native-root :is(h2,h3,h4){color:var(--chcd-color-text-primary);letter-spacing:-.015em}
body.chcd-bundle-native-page .chcd-bundle-native-root h2{font-size:28px;line-height:1.25}
body.chcd-bundle-native-page .chcd-bundle-native-root :is(p,li,.tutor-color-secondary){color:var(--chcd-color-text-secondary)}
body.chcd-bundle-native-page .chcd-bundle-native-root img{border-radius:10px}

body.chcd-bundle-native-page .chcd-bundle-native-root .tutor-btn-primary,
body.chcd-bundle-native-page .chcd-bundle-native-root button.tutor-btn-primary,
body.chcd-bundle-native-page .chcd-bundle-native-root a.tutor-btn-primary{
    border-color:var(--chcd-color-brand)!important;
    background:var(--chcd-color-brand)!important;
    color:#fff!important;
    border-radius:10px!important;
    min-height:50px;
    font-weight:800!important;
    transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
body.chcd-bundle-native-page .chcd-bundle-native-root .tutor-btn-primary:hover{
    border-color:var(--chcd-color-brand-hover)!important;
    background:var(--chcd-color-brand-hover)!important;
    transform:translateY(-1px)
}
body.chcd-bundle-native-page .chcd-bundle-purchase-area form,
body.chcd-bundle-native-page .chcd-bundle-purchase-area .tutor-btn,
body.chcd-bundle-native-page .chcd-bundle-purchase-area button,
body.chcd-bundle-native-page .chcd-bundle-purchase-area input[type=submit]{max-width:100%}
body.chcd-bundle-native-page .chcd-bundle-overview-list{
    margin-top:20px!important;
    padding-top:18px!important;
    border-top:1px solid var(--chcd-color-border)!important;
}
body.chcd-bundle-native-page .chcd-bundle-overview-list li{
    padding-top:8px!important;
    padding-bottom:8px!important;
}

body.chcd-bundle-native-page .chcd-bundle-content-section,
body.chcd-bundle-native-page .chcd-bundle-course-section{
    margin-top:32px!important;
    padding:30px!important;
    border:1px solid var(--chcd-color-border)!important;
    border-radius:var(--chcd-radius-xs)!important;
    background:var(--chcd-color-surface-base)!important;
    box-shadow:0 8px 24px rgba(29,31,48,.05)!important;
}
body.chcd-bundle-native-page .chcd-bundle-course-card{
    overflow:hidden;
    border-color:var(--chcd-color-border)!important;
    border-radius:10px!important;
    background:#fff!important;
    transition:transform .18s ease,box-shadow .18s ease;
}
body.chcd-bundle-native-page .chcd-bundle-course-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(29,31,48,.08)}

/* Desktop keeps all native controls in the Tutor purchase card. */
.chcd-bundle-tools{display:none}

@media(max-width:1024px){
    .chcd-bundle-hero__inner{grid-template-columns:1fr}
    .chcd-bundle-hero__image{max-width:680px}
    body.chcd-bundle-native-page .chcd-bundle-hero{padding-bottom:76px}
    body.chcd-bundle-native-page .chcd-bundle-native-root{margin-top:-38px!important}
    body.chcd-bundle-native-page .chcd-bundle-main-grid{grid-template-columns:1fr!important}
    body.chcd-bundle-native-page .chcd-bundle-sidebar-column{order:-1}
    body.chcd-bundle-native-page .chcd-bundle-purchase-area{position:relative;top:auto;max-width:680px;margin:0 auto}
}
@media(max-width:700px){
    body.chcd-bundle-native-page .chcd-bundle-hero{padding:30px 0 60px}
    .chcd-bundle-hero__inner{width:min(100% - 24px,1200px);gap:28px}
    .chcd-bundle-hero h1{font-size:34px}
    .chcd-bundle-hero__subtitle{font-size:17px}
    .chcd-bundle-hero__meta{display:grid;gap:7px}
    .chcd-bundle-hero__image{aspect-ratio:16/9}
    body.chcd-bundle-native-page .chcd-bundle-native-root{width:min(100% - 24px,1200px);margin-top:-28px!important;margin-bottom:90px!important}
    body.chcd-bundle-native-page .chcd-bundle-content-section,
    body.chcd-bundle-native-page .chcd-bundle-course-section{padding:20px!important;margin-top:22px!important}
    .chcd-bundle-tools{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:9990;
        display:grid;
        grid-template-columns:1fr 1.35fr;
        gap:10px;
        padding:10px 12px calc(10px + env(safe-area-inset-bottom));
        background:rgba(255,255,255,.96);
        border-top:1px solid var(--chcd-color-border);
        box-shadow:0 -8px 24px rgba(29,31,48,.12);
        backdrop-filter:blur(10px)
    }
    .chcd-bundle-tools button{
        width:100%;
        min-height:46px;
        border:0;
        border-radius:10px;
        padding:0 10px;
        background:#fff;
        color:var(--chcd-color-text-primary);
        font-weight:800;
        cursor:pointer
    }
    .chcd-bundle-tools .chcd-bundle-scroll-cta{background:var(--chcd-color-brand);color:#fff}
}