:root {
    --navy: #082b4c;
    --blue: #0966bd;
    --sky: #eef7ff;
    --gold: #e1ad32;
    --ink: #17283a;
    --muted: #667789
}

body {
    font-family: 'Noto Sans Thai', sans-serif;
    color: var(--ink);
    background: #f7f9fc;
}

.topbar {
    background: #061f36;
    font-size: .82rem
}

.navbar {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 30px rgba(9, 42, 73, .08)
}

.brand-mark {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, var(--blue), #1e91df)
}

.page-hero {

    color: #fff;
    padding: 88px 0;
    background: linear-gradient(120deg, rgba(6, 31, 54, .97), rgba(9, 102, 189, .87)), url('https://images.unsplash.com/photo-1524178232363-1fb2b075b655?auto=format&fit=crop&w=1800&q=85') center/cover
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .85rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 99px;
    background: rgba(255, 255, 255, .1);
    font-size: .8rem;
    letter-spacing: .06em
}

.breadcrumb-box {
    margin-top: -24px;
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 15px;
    padding: 14px 20px;
    box-shadow: 0 12px 35px rgba(9, 42, 73, .12)
}

.section-title small,
.text-brand {
    color: var(--blue) !important;
    font-weight: 700;
    letter-spacing: .08em
}

.section-title h2 {
    color: var(--navy);
    font-weight: 700
}

.filter-card,
.form-card,
.summary-card {
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(9, 42, 73, .08)
}

.course-card {
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(9, 42, 73, .08);
    transition: .28s
}

.course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 46px rgba(9, 42, 73, .15)
}

.course-image {
    height: 235px;
    position: relative;
    overflow: hidden
}

.course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s
}

.course-card:hover img {
    transform: scale(1.04)
}

.course-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(6, 31, 54, .88);
    color: #fff;
    border-radius: 99px;
    padding: .35rem .72rem;
    font-size: .78rem
}

.seat-badge {
    position: absolute;
    right: 16px;
    bottom: 16px;
    background: #fff;
    color: #18804b;
    border-radius: 99px;
    padding: .35rem .72rem;
    font-size: .78rem;
    font-weight: 600
}

.course-card h3 {
    color: var(--navy);
    font-weight: 700
}

.meta {
    font-size: .88rem;
    color: var(--muted)
}

.price {
    color: var(--blue);
    font-size: 1.45rem;
    font-weight: 700
}

.btn-brand {
    color: #fff;
    background: var(--blue);
    border-color: var(--blue);
    border-radius: 99px
}

.btn-brand:hover {
    color: #fff;
    background: var(--navy);
    border-color: var(--navy)
}

.detail-hero {
    min-height: 490px;
    color: #fff;
    display: flex;
    align-items: end;
    background-position: center;
    background-size: cover;
    position: relative
}

.detail-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 24, 42, .96), rgba(4, 24, 42, .45))
}

.detail-hero>* {
    position: relative
}

.info-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .8rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .24);
    font-size: .86rem
}

.icon-box {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--blue);
    background: var(--sky);
    font-size: 1.3rem
}

.sticky-register {
    position: sticky;
    top: 100px
}

.timeline-item {
    position: relative;
    padding-left: 32px;
    padding-bottom: 28px;
    border-left: 2px solid #dce9f5
}

.timeline-item:before {
    content: "";
    position: absolute;
    left: -7px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 5px var(--sky)
}

.stepper {
    display: flex;
    justify-content: center;
    gap: 0
}

.step {
    min-width: 150px;
    text-align: center;
    position: relative;
    color: #91a0ad
}

.step:after {
    content: "";
    position: absolute;
    height: 2px;
    background: #dbe4ec;
    left: 60%;
    right: -40%;
    top: 20px
}

.step:last-child:after {
    display: none
}

.step-circle {
    width: 40px;
    height: 40px;
    margin: auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e6edf3;
    font-weight: 700;
    position: relative;
    z-index: 1
}

.step.active {
    color: var(--blue);
    font-weight: 600
}

.step.active .step-circle {
    color: #fff;
    background: var(--blue)
}

.required:after {
    content: ' *';
    color: #dc3545
}

.form-control,
.form-select {
    border-radius: 12px;
    padding: .72rem .9rem;
    border-color: #d8e1e9
}

.form-control:focus,
.form-select:focus {
    border-color: #70afe8;
    box-shadow: 0 0 0 .22rem rgba(9, 102, 189, .12)
}

.cta {
    color: #fff;
    border-radius: 25px;
    background: linear-gradient(125deg, var(--blue), #07375f)
}

footer {
    background: #061f36;
    color: #c8d5e1
}

@media(max-width:767.98px) {
    .page-hero {
        padding: 65px 0
    }

    .detail-hero {
        min-height: 560px
    }

    .step {
        min-width: 100px;
        font-size: .78rem
    }

    .sticky-register {
        position: static
    }
}