/* ==========================================================================
   Courses Page Dedicated Styles (Responsive & Modern Design)
   Matching Figma Design — Used exclusively on /courses page
   ========================================================================== */

:root {
    --theme-primary: #0137de;
    --theme-primary-hover: #012cb3;
}

/* Main Container Wrapper */
.courses-page-wrapper {
    background-color: #f8fafc;
    background-image: url("/images/bg-course.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #1e293b;
    padding-bottom: 3rem;
    width: 100%;
    letter-spacing: 1px !important;
}

.courses-page-wrapper * {
    letter-spacing: 1px !important;
}

@media (max-width: 768px) {
    .courses-page-wrapper {
        background-size: cover;
        background-attachment: scroll;
    }
}

/* --------------------------------------------------------------------------
   1. Banner Section (Constrained Container & Rounded Corners like Figma)
   -------------------------------------------------------------------------- */
.courses-page-wrapper .container-fluid:first-of-type {
    max-width: 1290px !important;
    margin: 0 auto 1rem auto !important;
    padding: 1rem 0.5rem !important;
}

.courses-page-wrapper .m-widget19__pic,
.courses-page-wrapper .c-div-sm,
.courses-page-wrapper .c-img-cover {
    border-radius: 16px !important;
    overflow: hidden !important;
    max-height: 320px !important;
    object-fit: cover !important;
}

/* --------------------------------------------------------------------------
   2. Main Navigation Tabs (คอร์สทั้งหมด / คอร์ส Career)
   -------------------------------------------------------------------------- */
.courses-page-wrapper .filter__page_course {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 1.5rem auto 1.5rem auto !important;
    padding: 0 1rem !important;
    list-style: none !important;
    max-width: 1290px !important;
}

.courses-page-wrapper .filter__page_course li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.95rem 2.75rem !important;
    border-radius: 14px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    flex: 1 1 0 !important;
    max-width: 580px !important;
    margin: 0 !important;
}

.courses-page-wrapper .filter__page_course li img {
    width: 24px !important;
    height: 24px !important;
    margin-right: 10px !important;
    object-fit: contain !important;
}

.courses-page-wrapper .filter__page_course li h1,
.courses-page-wrapper .filter__page_course li h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: 1px !important;
}

.courses-page-wrapper .filter__page_course li.active {
    background: var(--theme-primary, #0137de) !important;
    border-color: var(--theme-primary, #0137de) !important;
    box-shadow: 0 6px 16px rgba(1, 55, 222, 0.25) !important;
}

.courses-page-wrapper .filter__page_course li.active h1,
.courses-page-wrapper .filter__page_course li.active h2 {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   3. Sub Filter Tabs (Matching 4 tabs in Figma - NO BOTTOM BORDER)
   -------------------------------------------------------------------------- */
.courses-page-wrapper .filter-course-all-nds {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px 40px !important;
    margin: 1rem auto 1.5rem auto !important;
    padding: 0 1rem 0.5rem 1rem !important;
    list-style: none !important;
    border-bottom: none !important;
    /* REMOVED BOTTOM BORDER */
    max-width: 1290px !important;
}

.courses-page-wrapper .filter-course-all-nds li {
    margin: 0 !important;
    padding: 0 !important;
}

.courses-page-wrapper .filter-course-all-nds li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0.6rem 0.85rem !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    text-decoration: none !important;
    position: relative !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    letter-spacing: 1px !important;
    line-height: 1.3 !important;
}

.courses-page-wrapper .filter-course-all-nds li a i,
.courses-page-wrapper .filter-course-all-nds li a svg,
.courses-page-wrapper .filter-course-all-nds li a img {
    font-size: 1.15rem !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    position: relative !important;
    top: 1px !important;
    /* ปรับระดับความสูงลงมาเล็กน้อยให้อยู่กึ่งกลางพอดีกับข้อความ */
    line-height: 1 !important;
}

.courses-page-wrapper .filter-course-all-nds li a::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--theme-primary, #0137de);
    border-radius: 3px 3px 0 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.courses-page-wrapper .filter-course-all-nds li.active a {
    color: var(--theme-primary, #0137de) !important;
}

.courses-page-wrapper .filter-course-all-nds li.active a::after {
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   4. Category & Search Card Box Container (Exact 100% Figma Match)
   -------------------------------------------------------------------------- */
.courses-page-wrapper .courses-page-filter-card {
    max-width: 1290px !important;
    margin: auto;
    background: #ffffff !important;
    padding: 0.25rem 0 !important;
}

.courses-page-wrapper .courses-page-filter-card .row {
    border: 1.5px solid #e2e8f0 !important;
    align-items: stretch !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    padding: 10px 0;
    border-radius: 16px !important;
    margin: 0 0.5rem;
}

.courses-page-wrapper .filter-card-left-section,
.courses-page-wrapper .filter-card-right-section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.courses-page-wrapper .filter-card-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    text-align: left !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: 1px !important;
}

/* Vertical Separator Line between Category & Search */
@media (min-width: 992px) {
    .courses-page-wrapper .filter-card-left-section {
        border-right: 1.5px solid #e2e8f0 !important;
    }
}

/* Force OwlCarousel stage to align to the LEFT side under 'หมวดหมู่' title */
.courses-page-wrapper #course-cate.owl-carousel,
.courses-page-wrapper #career-cate.owl-carousel {
    padding: 0 !important;
    position: relative !important;
    width: 100% !important;
}

.courses-page-wrapper #course-cate .owl-stage,
.courses-page-wrapper #career-cate .owl-stage {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
}

.courses-page-wrapper #course-cate .owl-item,
.courses-page-wrapper #career-cate .owl-item {
    float: left !important;
    margin-right: 4px !important;
    width: auto !important;
}

/* Category Pill Item Button Styling */
.courses-page-wrapper .btn-cate-gories,
.courses-page-wrapper .sub_cate {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.4rem 1rem !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: var(--theme-primary, #0137de) !important;
    background-color: #ffffff !important;
    border: 1.5px solid var(--theme-primary, #0137de) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    height: 40px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    width: auto !important;
    letter-spacing: 1px !important;
}

.courses-page-wrapper .btn-cate-gories.active,
.courses-page-wrapper .sub_cate.active {
    background-color: var(--theme-primary, #0137de) !important;
    color: #ffffff !important;
    border-color: var(--theme-primary, #0137de) !important;
    box-shadow: 0 4px 12px rgba(1, 55, 222, 0.2) !important;
}

/* Search Box & Action Buttons Layout */
.courses-page-wrapper .search-action-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

@media (max-width: 575.98px) {
    .courses-page-wrapper .search-action-wrapper {
        flex-wrap: wrap !important;
    }

    .courses-page-wrapper .search-action-wrapper .custom-search-input,
    .courses-page-wrapper .search-action-wrapper #text_search_in_cate {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    .courses-page-wrapper .search-action-wrapper .custom-search-btn,
    .courses-page-wrapper .search-action-wrapper #btn_search_in_cate,
    .courses-page-wrapper .search-action-wrapper .custom-filter-btn,
    .courses-page-wrapper .search-action-wrapper #btn_clear_in_cate {
        flex: 1 1 auto !important;
    }
}

.courses-page-wrapper .custom-search-input,
.courses-page-wrapper #text_search_in_cate {
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 0.6rem 1.25rem !important;
    font-size: 16px !important;
    height: 48px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    letter-spacing: 1px !important;
}

.courses-page-wrapper .custom-search-input::placeholder,
.courses-page-wrapper #text_search_in_cate::placeholder {
    color: #94a3b8 !important;
    font-size: 1.15rem !important;
    letter-spacing: 1px !important;
}

.courses-page-wrapper .custom-search-btn,
.courses-page-wrapper #btn_search_in_cate {
    background-color: var(--theme-primary, #0137de) !important;
    border-color: var(--theme-primary, #0137de) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 0.6rem 1.5rem !important;
    height: 48px !important;
    box-shadow: 0 2px 6px rgba(1, 55, 222, 0.2) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    letter-spacing: 1px !important;
}

.courses-page-wrapper .custom-filter-btn,
.courses-page-wrapper #btn_clear_in_cate {
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #000000 !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 0.6rem 1.5rem !important;
    height: 48px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    transition: all 0.2s ease !important;
    letter-spacing: 1px !important;
}

.courses-page-wrapper .custom-filter-btn:hover,
.courses-page-wrapper #btn_clear_in_cate:hover {
    background-color: var(--theme-primary-hover, #012cb3) !important;
    border-color: var(--theme-primary-hover, #012cb3) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(1, 55, 222, 0.28) !important;
}

.courses-page-wrapper .coursesNumber {
    display: none !important;
}

/* --------------------------------------------------------------------------
   5. Main Course Content Grid Area (Centered Max Width 1240px)
   -------------------------------------------------------------------------- */
.courses-page-wrapper #div_content_course,
.courses-page-wrapper #div_content_course_career,
.courses-page-wrapper .targetDiv {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    width: 100% !important;
}

.courses-page-wrapper #div_content_course .row,
.courses-page-wrapper #div_content_course_career .row,
.courses-page-wrapper .targetDiv .row {
    justify-content: flex-start !important;
}

/* Course Section Headings with Icon and Bold Titles */
.courses-page-wrapper .icon-course-all,
.courses-page-wrapper .head_text_tab img,
.courses-page-wrapper .targetDiv img.icon-course-all {
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

.courses-page-wrapper .head_text_tab {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.courses-page-wrapper .head_text_tab .d-flex.align-items-center {
    align-items: center !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.courses-page-wrapper .head_text_tab h1,
.courses-page-wrapper .head_text_tab h2,
.courses-page-wrapper .targetDiv .head_text_tab h1,
.courses-page-wrapper .targetDiv .head_text_tab h2,
.courses-page-wrapper .targetDiv h1,
.courses-page-wrapper .targetDiv h2,
.courses-page-wrapper h2,
.head_text_tab h1,
.head_text_tab h2,
.head_text_tab .d-flex.align-items-center h2,
.icon-course-all+h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    -webkit-font-smoothing: antialiased;
    color: #000000 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.courses-page-wrapper .targetDiv hr,
.courses-page-wrapper hr {
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
}

@media (max-width: 768px) {

    .courses-page-wrapper .head_text_tab h1,
    .courses-page-wrapper .head_text_tab h2,
    .courses-page-wrapper .targetDiv .head_text_tab h1,
    .courses-page-wrapper .targetDiv .head_text_tab h2,
    .courses-page-wrapper .targetDiv h1,
    .courses-page-wrapper .targetDiv h2,
    .courses-page-wrapper h2,
    .head_text_tab h1,
    .head_text_tab h2,
    .head_text_tab .d-flex.align-items-center h2,
    .icon-course-all+h2 {
        font-size: 20px !important;
    }
}

/* Card Body Layout */
.clearfix.iproduct.m-portlet.m-portlet--bordered-semi.m-portlet--rounded-force.product {
    border-radius: 10px !important;
}

.courses-page-wrapper .box-course .m-portlet__body.course,
.courses-page-wrapper .box-course .m-portlet {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    border-radius: 24px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}

.courses-page-wrapper .box-course .m-portlet:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
    border-color: #cbd5e1 !important;
}

/* Ensure Image Link is Always First at the Top */
.courses-page-wrapper .box-course a:has(img.fixed-img-course),
.courses-page-wrapper .box-course>.m-portlet>.m-portlet__body>a:first-of-type,
.courses-page-wrapper .box-course img.fixed-img-course {
    order: -2 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

.courses-page-wrapper .box-course img.fixed-img-course {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    top: 0 !important;
    transform: none !important;
}

.courses-page-wrapper .box-course .m-portlet__head-caption {
    display: none !important;
}

.courses-page-wrapper .box-course .m-widget19 {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.courses-page-wrapper .box-course .m-widget19__content {
    order: 1 !important;
    padding: 0.75rem 0.85rem 0.35rem 0.85rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 155px !important;
}

.courses-page-wrapper .box-course h3.truncate,
.courses-page-wrapper .box-course p.truncate {
    margin-bottom: 0.35rem !important;
    height: auto !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
}

.courses-page-wrapper .box-course .fz-name-course,
.courses-page-wrapper .box-course .truncate a,
.courses-page-wrapper .fz-name-course,
.courses-page-wrapper a.fz-name-course,
a.fz-name-course,
.fz-name-course {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    line-height: 1.35 !important;
    min-height: 2.7em !important;
    max-height: 2.7em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    text-decoration: none !important;
    margin-bottom: 2px !important;
    letter-spacing: 1px !important;
}

/* Header with Site Logo and Course Title - Vertically Centered & Tight Spacing */
.courses-page-wrapper .box-course .d-flex.align-items-start.mb-2 {
    align-items: center !important;
    margin-bottom: 0.35rem !important;
}

.courses-page-wrapper .box-course .site-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
}

.courses-page-wrapper .box-course .site-logo .logo-partner {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.courses-page-wrapper .box-course .det-course {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    margin-bottom: 0.35rem !important;
}

.courses-page-wrapper .box-course .det-course-w {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.courses-page-wrapper .box-course .m-widget19__body,
.courses-page-wrapper .box-course .m-widget19__body * {
    font-size: 18px !important;
}

.courses-page-wrapper .box-course .truncate_line_2,
.courses-page-wrapper .box-course span.truncate_line_2,
.courses-page-wrapper span.truncate_line_2,
span.truncate_line_2,
.truncate_line_2 {
    font-size: 16px !important;
    color: #475569 !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    min-height: 2.8em !important;
    height: 2.8em !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    /* letter-spacing: 1px !important; */
}

.courses-page-wrapper .box-course p.text-truncate,
.courses-page-wrapper .box-course p.truncate {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 3px !important;
}

.courses-page-wrapper .box-course p.text-truncate a,
.courses-page-wrapper .box-course p.truncate a,
.courses-page-wrapper .box-course .m-widget19__body a,
.courses-page-wrapper .box-course .m-widget19__body p a {
    font-size: 18px !important;
    color: #777777 !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
}

.courses-page-wrapper .box-course .m-widget19__body a span,
.courses-page-wrapper .box-course .m-widget19__body p a span {
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Course Card Custom Icons (Calendar, Folders, User) */
.courses-page-wrapper .box-course .course-card-icon,
.courses-page-wrapper .course-card-icon,
.course-card-icon {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.courses-page-wrapper .box-course .course-date-expired-text,
.courses-page-wrapper .box-course .course-count-text,
.courses-page-wrapper .box-course .text-muted,
.course-date-expired-text,
.course-count-text {
    font-size: 16px !important;
    color: #475569 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

.courses-page-wrapper .box-course .logo-partner {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.courses-page-wrapper .box-course .m-widget19__action {
    order: 2 !important;
    margin-top: auto !important;
    padding: 0.2rem 0.85rem 0.65rem 0.85rem !important;
    width: 100% !important;
    min-height: 95px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

.courses-page-wrapper .box-course .m-widget19__action .row>div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    margin-bottom: 0.75rem !important;
}

.courses-page-wrapper .box-course .stars-container {
    font-size: 1rem !important;
    letter-spacing: 2px !important;
}

.courses-page-wrapper .box-course .score-rating span {
    font-size: 1rem !important;
    color: #000000 !important;
}

/* ==========================================================================
   Action Buttons (Separated, Rounded Corners +2px, Full width for single)
   Strictly scoped to .courses-page-wrapper to never affect Home page
   ========================================================================== */
.btn-preview {
    border-radius: 12px !important;
}

.courses-page-wrapper .m-widget19__action .btn-preview {
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    padding: 0 0.75rem !important;
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #000000 !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
}

.courses-page-wrapper .m-widget19__action .btn-preview:hover {
    background-color: var(--theme-primary, #0137de) !important;
    border-color: var(--theme-primary, #0137de) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(1, 55, 222, 0.28) !important;
}

/* Action button row layout */
.courses-page-wrapper .m-widget19__action .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* When 2 buttons (col-md-9 + col-md-3) exist */
.courses-page-wrapper .m-widget19__action .col-md-9,
.courses-page-wrapper .m-widget19__action .col-9 {
    padding-left: 0 !important;
    padding-right: 6px !important;
}

.courses-page-wrapper .m-widget19__action .col-md-3,
.courses-page-wrapper .m-widget19__action .col-3 {
    padding-left: 6px !important;
    padding-right: 0 !important;
}

.courses-page-wrapper .m-widget19__action .col-md-9 .btn-preview,
.courses-page-wrapper .m-widget19__action .col-9 .btn-preview {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 14px !important;
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #000000 !important;
    transition: all 0.2s ease !important;
}

.courses-page-wrapper .m-widget19__action .col-md-9 .btn-preview:hover,
.courses-page-wrapper .m-widget19__action .col-9 .btn-preview:hover {
    background-color: var(--theme-primary, #0137de) !important;
    border-color: var(--theme-primary, #0137de) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(1, 55, 222, 0.28) !important;
}

/* Dedicated Course Detail Button Class */
.btn-course-detail,
.courses-page-wrapper .btn-course-detail,
.courses-page-wrapper .m-widget19__action .btn-course-detail,
.courses-page-wrapper .m-widget19__action .col-md-9 .btn-course-detail,
.courses-page-wrapper .m-widget19__action .col-9 .btn-course-detail,
.courses-page-wrapper .m-widget19__action .col-md-12 .btn-course-detail,
.courses-page-wrapper .m-widget19__action .col-12 .btn-course-detail {
    width: 100% !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 14px !important;
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #000000 !important;
    text-decoration: none !important;
    padding: 0 0.75rem !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    cursor: pointer !important;
    font-size: 16px !important;
}

.btn-course-detail:hover,
.btn-course-detail:focus,
.btn-course-detail:active,
.courses-page-wrapper .btn-course-detail:hover,
.courses-page-wrapper .m-widget19__action .btn-course-detail:hover,
.courses-page-wrapper .m-widget19__action .col-md-9 .btn-course-detail:hover,
.courses-page-wrapper .m-widget19__action .col-9 .btn-course-detail:hover,
.courses-page-wrapper .m-widget19__action .col-md-12 .btn-course-detail:hover,
.courses-page-wrapper .m-widget19__action .col-12 .btn-course-detail:hover {
    background-color: var(--theme-primary, #0137de) !important;
    border-color: var(--theme-primary, #0137de) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(1, 55, 222, 0.28) !important;
    text-decoration: none !important;
}

.btn-course-detail p,
.courses-page-wrapper .btn-course-detail p,
.courses-page-wrapper .m-widget19__action .btn-course-detail p {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000000 !important;
    line-height: 1 !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    transition: color 0.2s ease !important;
}

.btn-course-detail:hover p,
.courses-page-wrapper .btn-course-detail:hover p,
.courses-page-wrapper .m-widget19__action .btn-course-detail:hover p {
    color: #ffffff !important;
}

.courses-page-wrapper .m-widget19__action .col-md-3 .btn-preview,
.courses-page-wrapper .m-widget19__action .col-3 .btn-preview,
.courses-page-wrapper .m-widget19__action .col-md-3 .btn-course-detail,
.courses-page-wrapper .m-widget19__action .col-3 .btn-course-detail {
    width: 100% !important;
    height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    border-radius: 14px !important;
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #000000 !important;
    transition: all 0.2s ease !important;
}

.courses-page-wrapper .m-widget19__action .col-md-3 .btn-preview:hover,
.courses-page-wrapper .m-widget19__action .col-3 .btn-preview:hover,
.courses-page-wrapper .m-widget19__action .col-md-3 .btn-course-detail:hover,
.courses-page-wrapper .m-widget19__action .col-3 .btn-course-detail:hover {
    background-color: var(--theme-primary, #0137de) !important;
    border-color: var(--theme-primary, #0137de) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(1, 55, 222, 0.28) !important;
}

.courses-page-wrapper .m-widget19__action .col-md-3 .btn-preview i,
.courses-page-wrapper .m-widget19__action .col-3 .btn-preview i,
.courses-page-wrapper .m-widget19__action .btn-preview i,
.courses-page-wrapper .m-widget19__action .btn-course-detail i,
.courses-page-wrapper .m-widget19__action .col-md-3 .btn-preview svg,
.courses-page-wrapper .m-widget19__action .col-3 .btn-preview svg,
.courses-page-wrapper .m-widget19__action .btn-preview svg,
.courses-page-wrapper .m-widget19__action .btn-course-detail svg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    color: #000000 !important;
    transition: color 0.2s ease !important;
}

.courses-page-wrapper .m-widget19__action .col-md-3 .btn-preview:hover i,
.courses-page-wrapper .m-widget19__action .col-3 .btn-preview:hover i,
.courses-page-wrapper .m-widget19__action .btn-preview:hover i,
.courses-page-wrapper .m-widget19__action .btn-course-detail:hover i,
.courses-page-wrapper .m-widget19__action .col-md-3 .btn-preview:hover svg,
.courses-page-wrapper .m-widget19__action .col-3 .btn-preview:hover svg,
.courses-page-wrapper .m-widget19__action .btn-preview:hover svg,
.courses-page-wrapper .m-widget19__action .btn-course-detail:hover svg {
    color: #ffffff !important;
}

.courses-page-wrapper .m-widget19__action .btn-preview .fa-shopping-cart,
.courses-page-wrapper .m-widget19__action .btn-preview .icon-shopping-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding-bottom: 0.5rem !important;
    /* pb-2 */
}

.courses-page-wrapper .m-widget19__action .btn-preview .fa-plus {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding-bottom: 0.25rem !important;
    /* pb-1 */
}

/* Single button (col-md-12) stretches 100% */
.courses-page-wrapper .m-widget19__action .col-md-12,
.courses-page-wrapper .m-widget19__action .col-12 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.courses-page-wrapper .m-widget19__action .col-md-12 .btn-preview,
.courses-page-wrapper .m-widget19__action .col-12 .btn-preview {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 14px !important;
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #000000 !important;
    transition: all 0.2s ease !important;
}

.courses-page-wrapper .m-widget19__action .col-md-12 .btn-preview:hover,
.courses-page-wrapper .m-widget19__action .col-12 .btn-preview:hover {
    background-color: var(--theme-primary, #0137de) !important;
    border-color: var(--theme-primary, #0137de) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(1, 55, 222, 0.28) !important;
}

/* Allow Bootstrap 4 Grid Classes to govern responsiveness with card gaps */
.courses-page-wrapper .box-course {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 24px !important;
}

/* Precise Centered Strikethrough for Discount Price (14px) */
.courses-page-wrapper .discount-mn,
.discount-mn {
    font-size: 14px !important;
    line-height: 1.2 !important;
    color: #ef4444 !important;
    display: inline-block !important;
    position: relative !important;
    text-decoration: none !important;
    text-align: left !important;
    margin-right: auto !important;
}

.courses-page-wrapper .discount-mn::after,
.discount-mn::after {
    content: "" !important;
    position: absolute !important;
    width: 100% !important;
    height: 1.5px !important;
    background: #ef4444 !important;
    top: 62% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

/* Green Price (20px) */
.courses-page-wrapper .box-course .font-s30,
.courses-page-wrapper .box-course .text-success.font-s30,
.courses-page-wrapper .font-s30 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-left: auto !important;
    text-align: right !important;
}

.courses-page-wrapper .box-course .m-widget19__action .d-flex.align-items-baseline {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
}

/* --------------------------------------------------------------------------
   Referral Section Typography & Spacing Fix
   -------------------------------------------------------------------------- */
.sec-ref--text h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    line-height: 1.3 !important;
    margin-top: 8px !important;
    margin-bottom: 6px !important;
    letter-spacing: 1px;
}

.sec-ref--text p {
    font-size: 18px !important;
    color: #000000 !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
    letter-spacing: 1px;
}

a.fz-name-course,
.fz-name-course {
    font-size: 18px !important;
    letter-spacing: 1px !important;
}

/* --------------------------------------------------------------------------
   Global 1px Letter Spacing & Theme Hover Styles for Courses Page
   -------------------------------------------------------------------------- */
.courses-page-wrapper,
.courses-page-wrapper h1,
.courses-page-wrapper h2,
.courses-page-wrapper h3,
.courses-page-wrapper h4,
.courses-page-wrapper h5,
.courses-page-wrapper h6,
.courses-page-wrapper p,
.courses-page-wrapper span,
.courses-page-wrapper a,
.courses-page-wrapper button,
.courses-page-wrapper input,
.courses-page-wrapper label,
.courses-page-wrapper div {
    letter-spacing: 1px !important;
}

/* Dynamic theme hover states */
.courses-page-wrapper .btn-preview:hover,
.courses-page-wrapper .btn-preview.active,
.courses-page-wrapper .btn-preview:active,
.courses-page-wrapper .btn-preview:focus,
.courses-page-wrapper .m-widget19__action a.btn-preview:hover,
.courses-page-wrapper .m-widget19__action button.btn-preview:hover,
.courses-page-wrapper .btn.m-btn--hover-brand:hover,
.courses-page-wrapper .btn.m-btn--hover-brand.active,
.courses-page-wrapper .btn.m-btn--hover-brand:active,
.courses-page-wrapper .btn.m-btn--hover-brand:focus,
.courses-page-wrapper .show>.btn.m-btn--hover-brand.dropdown-toggle {
    background-color: var(--theme-primary, #0137de) !important;
    border-color: var(--theme-primary, #0137de) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(1, 55, 222, 0.28) !important;
}