:root {
    --primary: #F33C5A;
    --primary-dark: #C23048;
    --primary-light: #FEE8EB;
    --ink: #241F3D;
    --ink-soft: #55506B;
    --ink-muted: #8B87A3;
    --bg-lavender: #F6F4FB;
    --bg-light-yellow: #fff8ee;
    --bg-white: #FFFFFF;
    --border-color: #E4E0F0;
    --mint-bg: #DCF1EC;
    --mint-text: #0078C0;
    --accent-orange-1: #F6992D;
    --accent-orange-2: #C36C06;
    --accent-teal-1: #37A992;
    --accent-teal-2: #1E7562;
    --accent-gold-1: #FFE060;
    --accent-gold-2: #CCAE36;
    --accent-blue-1: #78D4EB;
    --accent-blue-2: #45A1B8;
    --accent-cyan-brand: #56C9E6;
    --accent-pink-brand: #F33C5A;
    --accent-purple-1: #BD97D9;
    --accent-purple-2: #8E63AE;
    --accent-pink-1: #E17FA0;
    --accent-pink-2: #C34F75;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --shadow-sm: 0 2px 8px rgba(36, 31, 61, 0.06);
    --shadow-md: 0 8px 24px rgba(36, 31, 61, 0.08);
    --shadow-lg: 0 16px 40px rgba(36, 31, 61, 0.12);
    --font-heading: 'Baloo 2','BeVietnamPro',system-ui,sans-serif;
    --font-body: 'BeVietnamPro',system-ui,-apple-system,sans-serif
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background-color: var(--bg-white);
    -webkit-font-smoothing: antialiased
}

.font-heading, h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -.01em
}

p {
    color: var(--ink-soft);
    line-height: 1.7
}

a {
    color: inherit;
    text-decoration: none
}

.section-lavender {
    background-color: var(--bg-light-yellow)
}

.section-white {
    background-color: var(--bg-white)
}

.text-muted-custom {
    color: var(--ink-muted) !important;
    text-align: center;
}

.text-fix-align-center {
    text-align: center !important;
}

.text-soft {
    color: var(--ink-soft) !important
}

.btn-brand {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: .75rem 1.75rem;
    transition: background-color .2s ease,transform .15s ease,box-shadow .2s ease;
    box-shadow: var(--shadow-sm)
}

    .btn-brand:focus, .btn-brand:hover {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: var(--shadow-md)
    }


.btn-brand-outline {
    background-color: #fff;
    border: 1.5px solid var(--border-color);
    color: var(--ink);
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: .65rem 1.4rem;
    transition: border-color .2s ease,background-color .2s ease
}

    .btn-brand-outline:hover {
        border-color: var(--primary);
        background-color: var(--primary-light);
        color: var(--ink)
    }

.btn-dark-pill {
    background-color: var(--primary);
    color: #fff;
    border-radius: var(--radius-pill);
    font-weight: 600;
    padding: .55rem 1.2rem;
    border: none
}

    .btn-dark-pill.active, .btn-dark-pill:hover {
        background-color: var(--primary-dark);
        color: #fff
    }

.navbar-brand-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(145deg,#f66d83,var(--primary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0
}

.navbar-brand-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink)
}

/* [ESK] (19/9/2026) Logo Header/Footer dạng ảnh (Config > tab "Logo Website")
   - thay cho icon + chữ "ESK" mặc định khi Admin đã upload. Chiều rộng tự co
   giãn theo tỉ lệ ảnh gốc (object-fit: contain) thay vì méo ảnh. */
.navbar-brand-logo-img {
    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    flex-shrink: 0
}

/* [ESK] (17/9/2026) SỬA LẠI theo yêu cầu AnhNam: logo Header to hẳn ra
       NHƯNG thanh menu (.navbar) phải giữ nguyên chiều cao py-3 cũ, không bị
       đẩy giãn theo logo - giống kiểu logo tràn ra ngoài thanh menu mỏng
       (tham khảo mẫu Panax). Cách làm: ".navbar-brand-logo-slot" là 1 khung
       CHIỀU CAO CỐ ĐỊNH (đúng bằng khung logo cũ 44px) nằm trong hàng flex
       của .navbar - vì kích thước cố định nên KHÔNG kéo giãn hàng .navbar dù
       logo bên trong to hơn. Ảnh logo thật (.navbar-brand-logo-img) nằm
       "position: absolute" bên trong khung đó, có thể to hơn hẳn khung chứa
       và TRÀN ra ngoài (overflow mặc định là visible, không bị cắt) - căn
       giữa theo chiều dọc bằng top:50%/translateY(-50%) nên tràn đều lên
       trên/xuống dưới thanh menu màu nền. .navbar-brand (thẻ <a> ngoài cùng)
       vẫn giữ z-index cao hơn menu (xem bên dưới) để phần tràn ra luôn hiện
       TRÊN menu/nút giỏ hàng thay vì bị che. */
.site-navbar .navbar-brand-logo-slot {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 44px;
    flex-shrink: 0
}

    .site-navbar .navbar-brand-logo-slot .navbar-brand-logo-img {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 72px;
        width: auto;
        max-width: 130px
    }

.site-navbar {
    background-color: #fff;
    border-bottom: 1px solid var(--border-color)
}

    .site-navbar .navbar-brand {
        position: relative;
        z-index: 5;
        margin-right: 1.5rem
    }

    .site-navbar .navbar-collapse, .site-navbar .navbar-nav {
        position: relative;
        z-index: 1
    }

    .site-navbar .nav-link {
        position: relative;
        color: var(--ink-soft);
        /*        font-weight: 600;*/
        padding: .5rem .9rem
    }

        .site-navbar .nav-link::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;
            background-color: var(--primary);
            border-radius: var(--radius-pill);
            transform: scaleX(0);
            transition: transform .2s ease
        }

        .site-navbar .nav-link.active, .site-navbar .nav-link:hover {
            color: var(--ink)
        }

            .site-navbar .nav-link.active::after, .site-navbar .nav-link:hover::after {
                transform: scaleX(1)
            }

    .site-navbar .btn-brand {
        padding: .6rem 1.4rem;
        font-size: .95rem
    }

.navbar-toggler {
    border: none;
    box-shadow: none !important
}

.badge-pill-mint {
    background-color: var(--mint-bg);
    color: var(--mint-text);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .02em;
    border-radius: var(--radius-pill);
    padding: .4rem .9rem;
    display: inline-block
}

.badge-tag {
    border-radius: var(--radius-pill);
    padding: .3rem .75rem;
    font-size: .72rem;
    font-weight: 700;
    color: #fff
}

    .badge-tag.tag-new {
        background-color: #ffda44;
        color: #5c3d00
    }

    .badge-tag.tag-popular {
        background-color: #cfefe6;
        color: var(--mint-text)
    }

    .badge-tag.tag-free {
        background-color: #f4dcf8;
        color: #7a2c8a
    }

    .badge-tag.tag-listened {
        background-color: #fbe0d2;
        color: #a44a1e
    }

    .badge-tag.tag-age {
        background-color: var(--bg-lavender);
        color: var(--ink-soft)
    }

    .badge-tag.tag-sale {
        background-color: var(--primary);
        color: #fff
    }

.lesson-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #fff;
    transition: transform .2s ease,box-shadow .2s ease;
    height: 100%
}

    .lesson-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md)
    }

.lesson-card-cover {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden
}

    .lesson-card-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    /* [ESK] (18/9/2026, theo yêu cầu AnhNam): Màu gradient (.grad-*) + hiệu ứng
       phủ màu (mix-blend-mode) CHỈ dùng khi CHƯA có ảnh thật (ảnh mặc định
       default.png) - để ảnh mặc định trông như 1 icon minh hoạ hoà cùng màu nền.
       Khi ĐÃ có ảnh thật do người dùng upload, ảnh phải hiển thị ĐÚNG màu gốc,
       không bị phủ màu - class .is-placeholder chỉ được gắn ở View khi
       CoverImageUrl rỗng (xem Views/Shared/_LessonCardPartial.cshtml). */
    .lesson-card-cover.is-placeholder img {
        mix-blend-mode: overlay;
        opacity: .55
    }

    .lesson-card-cover .badge-tag {
        position: absolute;
        top: .85rem;
        left: .85rem
    }

.grad-orange {
    background: linear-gradient(135deg,var(--accent-orange-1),var(--accent-orange-2))
}

.grad-teal {
    background: linear-gradient(135deg,var(--accent-teal-1),var(--accent-teal-2))
}

.grad-gold {
    background: linear-gradient(135deg,var(--accent-gold-1),var(--accent-gold-2))
}

.grad-blue {
    background: linear-gradient(135deg,var(--accent-blue-1),var(--accent-blue-2))
}

.grad-purple {
    background: linear-gradient(135deg,var(--accent-purple-1),var(--accent-purple-2))
}

.grad-pink {
    background: linear-gradient(135deg,var(--accent-pink-1),var(--accent-pink-2))
}

.grad-circle {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255,255,255,.18)
}

.lesson-card-body {
    padding: 1.1rem 1.25rem 1.3rem
}

.lesson-card-category {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: .25rem
}

.lesson-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: .4rem;
    color: var(--ink)
}

.lesson-card-meta {
    font-size: .85rem;
    color: var(--ink-muted)
}

.feature-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--primary-light);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem
}

.testimonial-card {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    height: 100%
}

.star-rating {
    color: #f6b94d;
    letter-spacing: 2px;
    font-size: .95rem
}

/* [ESK] (27/9/2026, theo yêu cầu AnhNam) Khối "Phụ huynh nói gì" - nút
   Next/Prev + chấm tròn (indicators) của carousel testimonial. Bootstrap
   mặc định đặt carousel-control-prev/next "position:absolute", full chiều
   cao, đè lên giữa nội dung slide (hợp với slide toàn ảnh như HomeSlider,
   không hợp với slide chứa card chữ) - nên dùng nút tự viết (button riêng,
   vẫn giữ data-bs-target/data-bs-slide[-to] để JS carousel có sẵn của
   Bootstrap tự nhận, không cần thêm JS) đặt tĩnh dưới carousel-inner. */
.testimonials-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem
}

.testimonials-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: #fff;
    color: var(--ink);
    font-size: 1.1rem;
    padding: 0
}

    .testimonials-nav-btn:hover {
        background-color: var(--primary-light);
        border-color: var(--primary-light);
        color: var(--primary)
    }

/* [FIX] (28/9/2026, theo yêu cầu AnhNam) Đã bỏ cụm chấm tròn phân trang
   (.testimonials-carousel-dots/.testimonials-dot + override
   .carousel-indicators scope #testimonialsCarousel) khỏi
   Views/Shared/Components/Testimonials/Default.cshtml - chỉ còn 2 nút
   Prev/Next (.testimonials-nav-btn ở trên). Dọn theo đúng thay đổi đó,
   không còn nơi nào tham chiếu tới các rule đã xóa. */

.panel-dark {
    background-color: var(--ink);
    color: #fff;
    border-radius: var(--radius-lg)
}

    .panel-dark .text-soft-on-dark {
        color: #b7b3cc
    }

.icon-btn-dark {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none
}

.icon-btn-primary {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none
}

    .icon-btn-primary:hover {
        background-color: var(--primary-dark)
    }

.progress-thin {
    position: relative;
    height: 6px;
    border-radius: var(--radius-pill);
    background-color: rgba(255,255,255,.15);
    overflow: hidden;
    cursor: pointer;
    touch-action: none
}

    /* Vệt mờ thể hiện mốc xa nhất đã nghe tới. Được phép kéo thanh tiến
       trình lùi về bên trái (nghe lại) trong phạm vi vệt này, nhưng không
       kéo vượt quá nó sang phải được (tránh tua nhảy cóc qua đoạn chưa
       nghe) - giới hạn thật sự xử lý ở lesson-player.js, vệt này chỉ để
       người dùng nhìn thấy rõ giới hạn đó nằm ở đâu. */
    .progress-thin .bar-heard {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: rgba(243,60,90,.35);
        border-radius: var(--radius-pill)
    }

    .progress-thin .bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: var(--primary);
        border-radius: var(--radius-pill)
    }

/* Footer - nâng cấp "sịn" sang nền gradient hồng thương hiệu, cùng ngôn
   ngữ thiết kế với box "Liên hệ trực tiếp" (Contact) và box CTA trang chủ:
   gradient chéo + 2 khối tròn mờ trang trí + shadow nâng khối, thay cho
   viền mỏng border-top cũ (bỏ luôn class border-top ở thẻ <footer>, đổi
   sang box-shadow cho sang hơn). Toàn bộ chữ/icon trong footer đổi sang
   trắng/trắng-mờ để đủ tương phản trên nền hồng đậm. */
.site-footer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: var(--shadow-lg)
}

    .site-footer::before,
    .site-footer::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background-color: rgba(255,255,255,.08);
        pointer-events: none
    }

    .site-footer::before {
        width: 340px;
        height: 340px;
        top: -180px;
        right: -100px
    }

    .site-footer::after {
        width: 220px;
        height: 220px;
        bottom: -130px;
        left: 8%
    }

    .site-footer > .container {
        position: relative;
        z-index: 1
    }

    .site-footer .navbar-brand-logo {
        background: #fff;
        color: var(--primary)
    }

    .site-footer .navbar-brand-name {
        color: #fff
    }

    /* [ESK] Nền footer là gradient xanh đậm - logo ảnh cần 1 nền sáng phía
       sau mới đủ tương phản để nhìn rõ (khác icon cũ đã tự có nền tròn gradient
       hồng/xanh ở .navbar-brand-logo, không cần nền phụ). */
    .site-footer .navbar-brand-logo-img {
        max-width: 160px;
        background: #fff;
        border-radius: 8px;
        padding: 4px 10px;
        height: 80px;
    }

    .site-footer h6 {
        font-family: var(--font-body);
        font-weight: 700;
        font-size: .85rem;
        color: #fff;
        margin-bottom: 1rem
    }

    .site-footer a.footer-link {
        color: rgba(255,255,255,.75);
        font-size: .92rem;
        display: block;
        margin-bottom: .6rem;
        transition: color .15s ease
    }

        .site-footer a.footer-link:hover {
            color: #fff
        }

    .site-footer .footer-links-mobile a {
        color: rgba(255,255,255,.75)
    }

        .site-footer .footer-links-mobile a:hover {
            color: #fff
        }

.footer-desc {
    color: rgba(255,255,255,.8);
    font-size: .92rem;
    max-width: 320px
}

.site-footer .social-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.15);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    margin-right: .5rem;
    transition: background-color .15s ease, color .15s ease, transform .15s ease
}

    .site-footer .social-circle:hover {
        background-color: #fff;
        color: var(--primary);
        transform: translateY(-2px)
    }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.65);
    font-size: .85rem
}

.footer-links-mobile {
    display: none
}

@media (max-width:767.98px) {
    .footer-cols-desktop {
        display: none
    }

    .footer-links-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem 1.25rem;
        margin-bottom: .75rem
    }

        .footer-links-mobile a {
            font-size: .92rem
        }
}

.section-eyebrow {
    margin-bottom: .9rem
}

.section-title {
    font-size: 2rem;
    margin-bottom: .5rem;
    text-align: center;
}

.page-hero-title {
    font-size: 2.5rem;
    text-align: center;
}

@media (max-width:767.98px) {
    .section-title {
        font-size: 1.5rem
    }

    .page-hero-title {
        font-size: 1.7rem
    }
}

.rounded-lg-custom {
    border-radius: var(--radius-lg) !important
}

.rounded-md-custom {
    border-radius: var(--radius-md) !important
}

.shadow-brand-sm {
    box-shadow: var(--shadow-sm)
}

.shadow-brand-md {
    box-shadow: var(--shadow-md)
}

.shadow-brand-lg {
    box-shadow: var(--shadow-lg)
}

.border-brand {
    border: 1px solid var(--border-color) !important
}

.form-control-brand {
    background-color: var(--bg-lavender);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: .7rem 1rem;
    color: var(--ink)
}

    .form-control-brand:focus {
        background-color: #fff;
        border-color: var(--primary);
        box-shadow: 0 0 0 .2rem rgba(243,60,90,.15)
    }

label.form-label-brand {
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: .4rem
}

/* [ESK] To hơn bản gốc (64px -> 120px) theo yêu cầu 17/9/2026 - avatar đội
   ngũ giờ ưu tiên hiển thị ẢNH THẬT (.avatar-photo, xem WFHomePage/About.cshtml),
   .avatar-initial chỉ còn là fallback (chữ cái + nền gradient) khi chưa có ảnh -
   2 class dùng chung kích thước để đồng bộ khi đổi qua lại. */
.avatar-initial,
.avatar-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%
}

.avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 2rem
}

.avatar-photo {
    display: inline-block;
    object-fit: cover
}

.accordion-brand .accordion-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md) !important;
    margin-bottom: 1rem;
    overflow: hidden
}

.accordion-brand .accordion-button {
    font-weight: 700;
    color: var(--ink);
    background-color: #fff;
    padding: 1.15rem 1.5rem
}

    .accordion-brand .accordion-button:not(.collapsed) {
        background-color: #fff;
        color: var(--ink);
        box-shadow: none
    }

    .accordion-brand .accordion-button:focus {
        box-shadow: none;
        border-color: var(--border-color)
    }

    .accordion-brand .accordion-button::after {
        flex-shrink: 0
    }

.accordion-brand .accordion-body {
    padding: 0 1.5rem 1.25rem;
    color: var(--ink-soft)
}

.filter-chip {
    height: 40px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background-color: #fff;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: .9rem;
    padding: .5rem 1.1rem;
    transition: all .15s ease
}

    .filter-chip:hover {
        border-color: var(--primary);
        color: var(--ink)
    }

    .filter-chip.active {
        background-color: var(--primary);
        border-color: var(--primary);
        color: #fff
    }

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--primary-light);
    color: var(--primary);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.track-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-sm);
    color: var(--ink)
}

    .track-row.playing {
        background-color: var(--primary-light)
    }

    .track-row .track-index {
        color: var(--ink-muted);
        font-weight: 700;
        width: 1.2rem
    }

    .track-row .track-title {
        font-weight: 700
    }

    .track-row .track-sub {
        color: var(--ink-muted);
        font-weight: 400
    }

    .track-row .track-time {
        color: var(--ink-muted);
        font-size: .9rem
    }

.track-play-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

/* Khối "Nghe thử" ở trang chủ - chỉ thêm 1 vệt tiến trình mỏng cho dòng
   đang phát (xử lý ở trial-player.js). Scope riêng vào .trial-tracks-card
   (không sửa .track-row gốc) để không ảnh hưởng danh sách track ở trang chi
   tiết bài học, vốn dùng chung class .track-row nhưng không có vệt này. */
.trial-tracks-card .track-row {
    position: relative
}

.trial-tracks-card .track-row-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    width: 0%;
    background-color: var(--primary);
    border-radius: 0 0 3px 3px;
    transition: width .1s linear
}

/* Icon play/pause hiển thị RÕ NGAY từ đầu cho mọi dòng thay vì số thứ tự
   (số thứ tự đã bỏ khỏi HTML) - nhiều phụ huynh/ông bà không rành công
   nghệ, nhìn số thường không đoán ra là bấm được. Dòng đang phát tô đậm
   màu (nền hồng đặc, icon trắng) để phân biệt rõ với các dòng còn lại
   (nền hồng nhạt, icon hồng) - vẫn luôn là hình nút tròn dễ nhận biết chứ
   không phải chữ số trơn. */
.trial-tracks-card .track-play-dot {
    width: 32px;
    height: 32px;
    background-color: var(--primary-light);
    color: var(--primary);
    box-shadow: var(--shadow-sm)
}

.trial-tracks-card .track-row.playing .track-play-dot {
    background-color: var(--primary);
    color: #fff
}

.news-cover {
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative
}

    .news-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    /* [ESK] (18/9/2026): xem ghi chú tương tự ở .lesson-card-cover.is-placeholder
       phía trên - chỉ phủ màu khi CHƯA có ảnh thật (MainImageUrl rỗng, xem
       Views/WFNewsListPage/Index.cshtml). */
    .news-cover.is-placeholder img {
        mix-blend-mode: overlay;
        opacity: .5
    }

.news-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
    height: 100%;
    transition: transform .2s ease,box-shadow .2s ease
}

    .news-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md)
    }

.news-card-body {
    padding: 1.25rem 1.4rem 1.5rem
}

.news-date {
    font-size: .85rem;
    color: var(--ink-muted);
    margin-bottom: .35rem
}

.news-title {
    font-weight: 700;
    margin-bottom: .4rem
}

.news-excerpt {
    font-size: .92rem;
    color: var(--ink-soft)
}

.article-cover {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16/9;
    position: relative
}

    .article-cover img {
        width: 100%;
        height: 100%;
        object-fit: none;
    }

    /* [ESK] (18/9/2026): xem ghi chú tương tự ở .lesson-card-cover.is-placeholder
       phía trên - chỉ phủ màu khi CHƯA có ảnh thật (CoverImageUrl/MainImageUrl
       rỗng, xem Views/WFLessonDetailPage/Index.cshtml và
       Views/WFNewsDetailPage/Index.cshtml). */
    .article-cover.is-placeholder img {
        mix-blend-mode: overlay;
        opacity: .5
    }

.team-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #fff;
    padding: 2rem 1.5rem;
    text-align: center
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1.5rem
}

    .contact-info-item .icon-btn-dark {
        flex-shrink: 0
    }

.back-link {
    font-weight: 600;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    gap: .4rem
}

    .back-link:hover {
        color: var(--primary)
    }

.hero-art {
    position: relative;
    height: 380px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0 auto
}

.hero-art-blob {
    position: absolute;
    border-radius: 50%;
    z-index: 0
}

    .hero-art-blob.blob-blue {
        width: 220px;
        height: 220px;
        background-color: var(--accent-blue-1);
        opacity: .35;
        top: 0;
        left: 6%
    }

    .hero-art-blob.blob-pink {
        width: 170px;
        height: 170px;
        background-color: var(--primary);
        opacity: .16;
        bottom: 6px;
        right: 4%
    }

    .hero-art-blob.blob-mint {
        width: 120px;
        height: 120px;
        background-color: var(--mint-text);
        opacity: .18;
        bottom: 46px;
        left: -4px
    }

.hero-art img {
    position: relative;
    object-fit: contain
}

/* [ESK] (27/9/2026) Gộp 3 ảnh nhân vật rời (hero-char-left/center/right) thành
   1 ảnh DUY NHẤT bao trọn khối .hero-art - xem WFHomePage/Index.cshtml. */
.hero-art .hero-char-image {
    height: 100%;
    width: 100%;
    z-index: 2
}

@media (max-width:991.98px) {
    .hero-art {
        height: 300px
    }
}

@media (max-width:575.98px) {
    .hero-art {
        height: 250px
    }
}

/* "Vì sao chọn ESK?" - 4 thẻ tint đứng trên nền .section-lavender
   (--bg-lavender, rất nhạt) nên trước đây màu nền thẻ cũng nhạt gần bằng,
   bị nền trang "nuốt" mất, nhìn phẳng/mờ. Đậm màu nền thẻ lên 1 chút cho
   tách bạch rõ với nền trang + thêm bóng đổ và hiệu ứng nhấc nhẹ khi hover
   (đồng bộ với .lesson-card/.news-card/.book-card đang có sẵn ở nơi khác),
   thay vì chỉ dựa vào mỗi màu để tạo phân cách. */
.feature-tint-card {
    border-radius: var(--radius-md);
    padding: 1.6rem 1.4rem;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease
}

    .feature-tint-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md)
    }

    .feature-tint-card .feature-tint-icon {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-sm);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.1rem;
        margin-bottom: 1rem;
        box-shadow: 0 6px 14px rgba(36,31,61,.14);
        transition: transform .2s ease
    }

    .feature-tint-card:hover .feature-tint-icon {
        transform: scale(1.08)
    }

    .feature-tint-card h5 {
        font-size: 1rem;
        margin-bottom: .4rem
    }

    .feature-tint-card p {
        font-size: .88rem;
        margin-bottom: 0
    }

    .feature-tint-card.tint-orange {
        background-color: #fbe2bf
    }

        .feature-tint-card.tint-orange .feature-tint-icon {
            background-color: var(--accent-orange-1)
        }

    .feature-tint-card.tint-blue {
        background-color: #d2ecf5
    }

        .feature-tint-card.tint-blue .feature-tint-icon {
            background-color: var(--accent-blue-2)
        }

    .feature-tint-card.tint-mint {
        background-color: #cbeee4
    }

        .feature-tint-card.tint-mint .feature-tint-icon {
            background-color: var(--mint-text)
        }

    .feature-tint-card.tint-pink {
        background-color: #fbd7de
    }

        .feature-tint-card.tint-pink .feature-tint-icon {
            background-color: var(--primary)
        }

.gallery-avatar-img {
    height: 180px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 1rem;
    display: block
}

.btn-outline-light-brand {
    background-color: transparent;
    border: 1.5px solid rgba(255,255,255,.35);
    color: #fff;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: .65rem 1.4rem;
    transition: background-color .2s ease,border-color .2s ease
}

    .btn-outline-light-brand:hover {
        background-color: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.6);
        color: #fff
    }

/* ===== Module "Mua sách" - trang Danh sách sách ===== */
.book-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #fff;
    transition: transform .2s ease,box-shadow .2s ease
}

    .book-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md)
    }

.book-card-cover {
    background-color: var(--bg-lavender);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem
}

    .book-card-cover img {
        max-height: 260px;
        width: auto;
        max-width: 100%;
        border-radius: 6px;
        box-shadow: var(--shadow-md)
    }

.book-card-body {
    padding: 1.1rem 1.4rem 1.5rem
}

.book-card-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: .5rem;
    color: var(--ink)
}

.book-card-desc {
    font-size: .92rem;
    color: var(--ink-soft);
    margin-bottom: .9rem
}

.book-card-price {
    font-weight: 800;
    color: var(--primary);
    font-size: 1.3rem
}

.book-price-original {
    color: var(--ink-muted);
    text-decoration: line-through;
    font-weight: 400;
    font-size: .9rem
}

/* ===== Module "Mua sách" - trang Chi tiết sách ===== */
.book-detail-cover {
    background-color: var(--bg-lavender);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    min-height: 360px
}

    .book-detail-cover img {
        max-height: 420px;
        width: auto;
        max-width: 100%;
        border-radius: 8px;
        box-shadow: var(--shadow-lg)
    }

.book-detail-price {
    font-weight: 800;
    color: var(--primary);
    font-size: 1.6rem
}

/* [ESK][FIX] (20/9/2026, theo yêu cầu AnhNam): thanh ảnh nhỏ (thumbnail) +
   nút chuyển ảnh cho trang Chi tiết sách - khôi phục tính năng "list ảnh sản
   phẩm" đã có ở bản gốc Panax (Views/WFProductDetailPage/Index.cshtml dùng
   class ".thumbnail-item"/".thumb-nav-btn" riêng, kích thước/màu theo giao
   diện Panax cũ) nhưng viết lại class MỚI theo đúng ngôn ngữ thiết kế ESK
   (bo góc var(--radius-md), viền var(--border-color), nhấn màu
   var(--primary) khi active) thay vì tái dùng nguyên class cũ. */
.book-gallery-thumbs-wrap {
    max-width: 100%
}

.book-gallery-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bg-lavender);
    color: var(--ink);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color .15s ease
}

    .book-gallery-nav-btn:hover {
        background-color: var(--primary-light);
        color: var(--primary)
    }

.book-gallery-thumbs {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 2px
}

.book-gallery-thumb {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    background-color: var(--bg-lavender);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease
}

    .book-gallery-thumb:hover {
        border-color: var(--primary-light)
    }

    .book-gallery-thumb.active {
        border-color: var(--primary)
    }

    .book-gallery-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

/* ===== Module "Mua sách" - trang Thanh toán ===== */
.payment-method-box {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color .15s ease,background-color .15s ease
}

    .payment-method-box:hover {
        border-color: var(--primary)
    }

    .payment-method-box.active {
        border-color: var(--primary);
        background-color: var(--primary-light)
    }

/* ===== Module "Mua sách" - nút CTA "Đặt sách" ở Trang chủ =====
   Thay .btn-brand-outline (nền trắng, mờ nhạt trên nền lavender) bằng nền
   xanh ngọc (--mint-text) - tươi sáng, hợp không khí web sách thiếu nhi hơn
   màu đen/tối, đồng thời "bắt cặp" màu với badge mint ("Sách nói tiếng Anh
   cho bé mầm non") ngay phía trên, tạo bộ đôi hồng (nút chính) + xanh ngọc
   (nút phụ) hài hòa. */
.btn-teal-solid {
    background-color: var(--mint-text);
    border-color: var(--mint-text);
    color: #fff;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: .75rem 1.75rem;
    transition: background-color .2s ease,transform .15s ease,box-shadow .2s ease;
    box-shadow: var(--shadow-sm)
}

    .btn-teal-solid:focus, .btn-teal-solid:hover {
        background-color: #0066B1;
        border-color: #0066B1;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: var(--shadow-md)
    }

/* ===== Trang Liên hệ (/lien-he/) - đổi màu nền box "Liên hệ trực tiếp"
   từ nền tối .panel-dark sang hồng thương hiệu ESK (--accent-pink-brand,
   trùng --primary). Nền hồng đủ đậm nên giữ nguyên tông chữ/icon trắng
   như .panel-dark gốc (chỉ đổi nền) để đảm bảo độ tương phản dễ đọc -
   giống hệt cách .btn-brand đang dùng chữ trắng trên nền hồng này ở
   toàn site. .icon-btn-dark không cần override riêng vì mặc định của
   nó (nền trắng mờ 10% + icon trắng) đã hợp với nền hồng. ===== */
.panel-dark.panel-brand-blue {
    background: linear-gradient(135deg, var(--accent-pink-brand), var(--primary-dark));
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg)
}

/* 2 khối tròn mờ trang trí, gợi lại đúng ngôn ngữ hero-art-blob ở trang
       chủ - cho khối nền hồng đỡ "phẳng", có chiều sâu hơn mà không rối. */
.panel-brand-blue::before,
.panel-brand-blue::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    background-color: rgba(255,255,255,.08);
    pointer-events: none
}

.panel-brand-blue::before {
    width: 240px;
    height: 240px;
    top: -90px;
    right: -70px
}

.panel-brand-blue::after {
    width: 150px;
    height: 150px;
    bottom: -60px;
    left: -40px;
    background-color: rgba(255,255,255,.06)
}

.panel-brand-blue > * {
    position: relative;
    z-index: 1
}

.panel-brand-blue h5 {
    color: #fff
}

.panel-brand-blue .contact-card-heading-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0
}

.panel-brand-blue .icon-btn-dark {
    width: 46px;
    height: 46px;
    background-color: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22)
}

.panel-brand-blue .text-soft-on-dark {
    color: var(--primary-light);
    transition: color .15s ease
}

    .panel-brand-blue .text-soft-on-dark:hover {
        color: #fff
    }

.panel-brand-blue .social-link-row {
    display: flex;
    gap: .6rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.18)
}

.panel-brand-blue .social-link {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.14);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background-color .2s ease, transform .2s ease
}

    .panel-brand-blue .social-link:hover {
        background-color: rgba(255,255,255,.28);
        color: #fff;
        transform: translateY(-3px)
    }

/* ===== Trang chủ - box CTA "Sẵn sàng cho bé bắt đầu?" - đổi nền tối
   .panel-dark sang xanh cyan thương hiệu ESK (--accent-cyan-brand,
   #56C9E6, lấy từ banner nhận diện). Nền này khá sáng nên đổi chữ, icon,
   nút "Liên hệ tư vấn" sang tông tối (--ink) để đảm bảo độ tương phản dễ
   đọc - ngược với .panel-brand-blue (nền hồng đậm, vẫn giữ chữ trắng vì
   đủ tối). Nút "Đặt sách ngay" (.btn-brand) không cần đổi vì đã là nền
   hồng đậm + chữ trắng, tương phản tốt sẵn trên nền xanh này. ===== */
.panel-dark.panel-brand-light {
    background: linear-gradient(135deg, var(--accent-cyan-brand), var(--accent-blue-2));
    color: var(--ink);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg)
}

/* 2 khối tròn mờ trang trí (cùng ngôn ngữ với .panel-brand-blue ở trang
       Liên hệ) - dùng tông trắng vì nền ở đây sáng, tạo hiệu ứng bong bóng/
       ánh sáng nhẹ thay vì mảng xanh phẳng lì. */
.panel-brand-light::before,
.panel-brand-light::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    background-color: rgba(255,255,255,.25);
    pointer-events: none
}

.panel-brand-light::before {
    width: 260px;
    height: 260px;
    top: -110px;
    left: -60px
}

.panel-brand-light::after {
    width: 170px;
    height: 170px;
    bottom: -80px;
    right: -50px;
    background-color: rgba(255,255,255,.15)
}

.panel-brand-light > * {
    position: relative;
    z-index: 1
}

.panel-brand-light .text-soft-on-dark {
    color: var(--ink-soft)
}

.panel-brand-light .icon-btn-dark {
    background-color: rgba(255,255,255,.4);
    border: 1px solid rgba(36,31,61,.12);
    color: var(--ink)
}

.panel-brand-light .btn-outline-light-brand {
    border-color: rgba(36,31,61,.35);
    color: var(--ink);
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease
}

    .panel-brand-light .btn-outline-light-brand:hover {
        background-color: rgba(255,255,255,.5);
        border-color: var(--ink);
        color: var(--ink);
        transform: translateY(-2px)
    }

.panel-brand-light-divider {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(36,31,61,.15)
}

/* Popover âm lượng - icon loa nằm ngay trong hàng nút chính của player (5
   nút: Lặp, Lùi, Play, Tới, Loa), không chiếm thêm chỗ khi không dùng tới.
   Nhấp/chạm ngắn vào icon loa = tắt/bật tiếng ngay (xử lý ở lesson-player.js).
   Desktop: rê chuột qua để hiện thanh trượt (thuần CSS, chỉ áp dụng cho thiết
   bị có chuột thật qua @media hover/pointer - tránh hover "dính" trên mobile
   sau khi chạm). Mobile: nhấn giữ ~450ms (xử lý bằng JS) mới hiện, tránh che
   mất icon khi chỉ chạm nhẹ để tắt/bật tiếng.

   .player-volume-wrap có thêm padding-top + margin-top âm bằng nhau (10px):
   không đổi vị trí hiển thị của nút loa trong hàng nút (margin âm kéo lại),
   nhưng "nới" vùng có thể hover của .player-volume-wrap lên cao thêm 10px -
   đúng bằng khoảng trống phía trên nút mà popover đang chừa ra. Nếu không có
   phần đệm này, khoảng trống đó không thuộc phần tử nào cả nên khi rê chuột
   từ nút đi lên popover sẽ có 1 khoảnh khắc chuột không hover vào đâu hết,
   khiến popover bị ẩn ngay trước khi chuột kịp chạm tới (thanh trượt "biến
   mất" khi vừa đưa chuột lên). */
.player-volume-wrap {
    position: relative;
    display: inline-flex;
    padding-top: 10px;
    margin-top: -10px
}

.player-volume-popover {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 44px;
    height: 130px;
    padding: 14px 0;
    border-radius: var(--radius-lg);
    background-color: #2a2340;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 20
}

    .player-volume-popover::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #2a2340
    }

@media (hover: hover) and (pointer: fine) {
    .player-volume-wrap:hover .player-volume-popover {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0)
    }
}

.player-volume-wrap.is-open .player-volume-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0)
}

/* Thanh trượt dọc: input[type=range] gốc luôn nằm ngang, xoay -90deg rồi để
   .player-volume-popover (overflow:hidden) cắt gọn lại theo đúng khung dọc -
   trình duyệt vẫn nhận tương tác (kéo/click) đúng theo vị trí đã xoay trên
   màn hình nên không ảnh hưởng thao tác. Phải viết riêng từng pseudo-element
   theo prefix trình duyệt (không gộp chung 1 selector) vì gặp 1 pseudo lạ
   trong danh sách gộp sẽ khiến cả rule bị trình duyệt bỏ qua hết. */
#playerVolumeRange {
    width: 90px;
    height: 4px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    transform: rotate(-90deg);
    cursor: pointer
}

    #playerVolumeRange::-webkit-slider-runnable-track {
        height: 4px;
        border-radius: var(--radius-pill);
        background-color: rgba(255,255,255,.25)
    }

    #playerVolumeRange::-moz-range-track {
        height: 4px;
        border-radius: var(--radius-pill);
        background-color: rgba(255,255,255,.25)
    }

    #playerVolumeRange::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-top: -6px;
        background-color: var(--primary)
    }

    #playerVolumeRange::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: var(--primary);
        border: none
    }

    #playerVolumeRange:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 .2rem rgba(243,60,90,.35)
    }

/* Layout trang Chi tiết bài học - dùng CSS Grid thay cho .row/.col-lg-* của
   Bootstrap, vì cần đổi vị trí khối player so với 2 khối còn lại (giới
   thiệu bài học và danh sách bài nghe) khác nhau giữa mobile/desktop, mà
   "order" của flex/grid chỉ đổi được thứ tự giữa các phần tử con TRỰC TIẾP
   cùng 1 cha - không đổi được xuyên qua nhiều cấp lồng. Nên tách thành 3
   khối lớn ngang hàng (intro / player / list) rồi định vị bằng
   grid-template-areas thay vì đánh order cho từng mảnh nhỏ bên trong.
   Mobile: intro -> player -> list (thứ tự quen thuộc của app nghe nhạc -
   xem thông tin bài học, thấy player ngay, rồi mới tới danh sách).
   Desktop (>=lg, khớp breakpoint lg của Bootstrap): quay lại bố cục 2 cột
   như cũ - intro + list bên trái xếp chồng, player làm sidebar bên phải
   (sticky), trải dài qua cả 2 hàng grid. */
.lesson-detail-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    grid-template-areas:
        "intro"
        "player"
        "list"
}

.grid-intro {
    grid-area: intro
}

.grid-player {
    grid-area: player
}

.grid-list {
    grid-area: list
}

@media (min-width: 992px) {
    .lesson-detail-grid {
        grid-template-columns: 2fr 1fr;
        grid-template-areas:
            "intro  player"
            "list   player"
    }
}

/* [ESK] (18/9/2026) Ảnh minh hoạ Khối Hero trang Giới thiệu
   (AboutPageContent.HeroImageUrl, upload qua Backend "Nội dung Giới thiệu" >
   Khối Hero) - chỉ hiển thị cột ảnh bên phải khi Admin đã upload ảnh (xem
   WFHomePage/About.cshtml). Tái dùng .hero-art-blob ở Trang chủ làm khối trang
   trí nền, không dùng lại .hero-art vì class đó có CSS canh riêng cho 3 ảnh nhân
   vật chồng nhau (char-left/center/right), ở đây chỉ có 1 ảnh duy nhất. */
.about-hero-art {
    position: relative;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto
}

    .about-hero-art .about-hero-image {
        position: relative;
        z-index: 1;
        max-height: 100%;
        max-width: 100%;
        object-fit: contain
    }

@media (max-width:991.98px) {
    .about-hero-art {
        height: 300px
    }
}

@media (max-width:575.98px) {
    .about-hero-art {
        height: 250px
    }
}

/* [ESK] (18/9/2026) Khối "Khối giới thiệu chi tiết" (AboutPageContent.
   StoryParagraph1/2) nay soạn bằng CKEditor (HTML) thay vì text thường - style
   cơ bản cho các thẻ con render ra từ CKEditor (p/ul/ol/img/a). Chữ p mặc định
   đã có sẵn color/line-height từ selector `p` chung ở đầu file - ở đây chỉ
   thêm margin/spacing và các thẻ không có style mặc định (ul/ol/img/a). Viết
   riêng (không dùng chung .post-body bên Panax cũ) vì _LayoutFront.cshtml của ESK
   không kéo theo wwwroot/wf_style/home.min.css. */
.about-rich-content p {
    margin-bottom: 1rem
}

    .about-rich-content p:last-child {
        margin-bottom: 0
    }

.about-rich-content ul,
.about-rich-content ol {
    margin-bottom: 1rem;
    padding-left: 1.25rem;
    color: var(--ink-soft)
}

.about-rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    display: block;
    margin: .5rem auto
}

.about-rich-content a {
    color: var(--primary);
    text-decoration: underline
}

/* [ESK] (17/9/2026) Căn giữa tự động MỌI ảnh được chèn qua CKEditor trên các
   trang Frontend dùng _LayoutFront.cshtml (About, Tin tức, Sách...) - đánh dấu
   bằng class dùng chung .cke-content trên thẻ bọc ngoài cùng của vùng render
   Html.Raw(...) nội dung CKEditor. Trang nào đã có style riêng (vd
   .about-rich-content img ở trên) thì không cần gắn thêm class này. Các trang
   dùng _LayoutFrontDetail.cshtml (không kéo theo file này) xem rule tương ứng ở
   wwwroot/wf_style/home.css và home.min.css. */
.cke-content img {
    display: block;
    margin-left: auto;
    margin-right: auto
}