/* ============================================================
   HÒA NGỮ ĐƯỜNG — home.css
   Tổ chức theo thứ tự xuất hiện trên trang:
    1.  Màu sắc bổ sung (mở rộng root.css)
    2.  Utility: Reveal animation, Cloud float
    3.  Announcement Ribbon
    4.  Hero Banner (official-hero)
    5.  Chương trình đào tạo nổi bật (training-programs / course slider)
    6.  Sự khác biệt (training-difference)
    7.  Section chung (section, section-title, grid, feature, step, timeline)
    8.  Programs section (nền đỏ)
    9.  Hệ sinh thái Hòa Ngữ Đường - MINDMAP mới
   10.  Khóa học này dành cho ai (who-course)
   11.  Hoạt động lớp học (class-activity)
   12.  Gallery Cô Nga
   13.  CTA / Contact form
   14.  Scroll controls
   15.  Responsive
   16.  Keyframe Animations
   ============================================================ */

/* ============================================================
   2. UTILITY — Reveal animation, cloud decorations
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: 1s;
}
.reveal.active {
    opacity: 1;
    transform: none;
}

.diff-reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: 1s cubic-bezier(.19, 1, .22, 1);
}
.diff-reveal.active {
    opacity: 1;
    transform: none;
}

.activity-reveal {
    opacity: 0;
    transform: translateY(38px);
    transition: 1s cubic-bezier(.19, 1, .22, 1);
}
.activity-reveal.active {
    opacity: 1;
    transform: none;
}

/* Cloud float decorations */
.cloud-float {
    position: absolute;
    z-index: 1;
    opacity: .18;
    font-family: "Noto Serif SC";
    color: var(--gold);
    pointer-events: none;
    animation: cloudMove 11s ease-in-out infinite;
}
.cloud-1 { left: 6%;  top: 22%; font-size: 76px; }
.cloud-2 { right: 8%; top: 30%; font-size: 96px; animation-duration: 14s; }


/* ============================================================
   3. ANNOUNCEMENT RIBBON
   ============================================================ */
.header-announcement {
    position: relative;
    z-index: 5;
    margin-top: 130px;
    background: linear-gradient(90deg, var(--red-dark), var(--red-light), var(--red));
    color: #fff;
    overflow: hidden;
    border-bottom: 1px solid rgba(217, 184, 67, .45);
    box-shadow: 0 14px 34px var(--shadow-red);
    pointer-events: auto;
}

.ribbon-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: ribbonMarquee 26s linear infinite;
    will-change: transform;
}

.ribbon-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    font-weight: 900;
    letter-spacing: .4px;
    white-space: nowrap;
    user-select: none;
}

.ribbon-cn,
.ribbon-cloud {
    font-family: "Noto Serif SC";
    color: var(--gold-light);
    user-select: none;
}
.ribbon-cn    { font-size: 18px; letter-spacing: 2px; }
.ribbon-cloud { opacity: .8; }

.ribbon-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #ffe6a1;
    font-size: 13px;
    user-select: none;
}


/* ============================================================
   4. HERO BANNER
   ============================================================ */
.official-hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 170px 7% 90px;
    background:
            linear-gradient(90deg,
            rgba(255, 248, 236, .92) 0%,
            rgba(255, 248, 236, .78) 42%,
            rgba(255, 248, 236, .34) 100%),
            url('/plugins/Posts/assets/img/banner.jpg') center/cover no-repeat;
}

/* Khung Swiper bao phủ toàn bộ Hero làm hình nền */
.header-announcement .hero-swiper {
    position: relative;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: auto;
    background: var(--gold-pale);
}

.header-announcement .swiper-slide {
    width: 100%;
    height: auto;
}

.header-announcement .swiper-slide picture,
.header-announcement .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: inherit;
    object-position: center;
    display: block;
}

/* Tùy chỉnh dấu chấm tròn phân trang của Swiper trùng màu thương hiệu đỏ Đào */
.header-announcement .swiper-pagination-bullet-active {
    background: var(--red, #8B0F1F) !important;
}
.header-announcement .swiper-pagination {
    bottom: 15px !important;
    z-index: 4;
}

.official-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 28% 42%, rgba(217, 184, 67, .20), transparent 28%),
            radial-gradient(circle at 72% 18%, rgba(139, 15, 31, .10), transparent 25%);
    pointer-events: none;
}

.official-hero::after {
    content: "和语堂";
    position: absolute;
    right: 4%;
    bottom: 4%;
    font-family: "Noto Serif SC";
    font-size: 9vw;
    color: rgba(139, 15, 31, .06);
    letter-spacing: .12em;
    pointer-events: none;
}

/* Hero content */
.hero-premium-content {
    position: relative;
    z-index: 3;
    width: min(760px, 100%);
    animation: heroFadeUp 1.15s ease both;
    will-change: transform;
}

.hero-premium-eyebrow {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(217, 184, 67, .55);
    color: var(--red);
    font-weight: 900;
    box-shadow: 0 16px 45px var(--shadow-red);
}

.hero-premium-title {
    margin: 24px 0 16px;
    font-size: clamp(44px, 6vw, 86px);
    line-height: 1.02;
    color: var(--text-dark);
    letter-spacing: -2px;
}
.hero-premium-title .cn {
    display: block;
    font-family: "Noto Serif SC";
    color: var(--red);
    letter-spacing: .08em;
    text-shadow: 0 8px 35px rgba(139, 15, 31, .13);
}
.hero-premium-title .gold-line {
    display: block;
    color: var(--gold-dark);
    font-size: clamp(32px, 4vw, 56px);
    margin-top: 10px;
}

.hero-premium-desc {
    font-size: 19px;
    line-height: 1.85;
    color: var(--text-body);
    max-width: 690px;
    background: rgba(255, 255, 255, .48);
    border-left: 4px solid var(--gold-dark);
    padding: 16px 20px;
    border-radius: 0 18px 18px 0;
    backdrop-filter: blur(6px);
}

.hero-premium-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.hero-premium-badges {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}
.hero-premium-badge {
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(139, 15, 31, .16);
    color: var(--red);
    font-weight: 900;
    box-shadow: 0 16px 35px var(--shadow-red);
}

.hero-premium-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 680px;
    margin-top: 28px;
    color: var(--text-body);
}
.hero-premium-stat {
    background: rgba(255, 255, 255, .74);
    border: 1px solid var(--border-gold);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 18px 45px var(--shadow-red);
    backdrop-filter: blur(8px);
}
.hero-premium-stat strong {
    display: block;
    font-size: 30px;
    color: var(--red);
    font-family: "Noto Serif SC";
}

/* Hero floating side card */
.hero-premium-side {
    position: absolute;
    z-index: 2;
    right: 7%;
    top: 190px;
    width: min(360px, 28vw);
    padding: 28px;
    border-radius: 32px;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(217, 184, 67, .45);
    backdrop-filter: blur(14px);
    box-shadow: 0 35px 90px rgba(59, 7, 16, .13);
    animation: heroFloat 5s ease-in-out infinite;
    will-change: transform;
}
.hero-premium-side h3 {
    margin: 0 0 10px;
    font-family: "Noto Serif SC";
    font-size: 32px;
    color: var(--red);
}
.hero-premium-side p {
    margin: 0 0 18px;
    line-height: 1.7;
    color: var(--text-body);
}

/* QR block */
.hero-premium-qr {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 20px;
    background: rgba(139, 15, 31, .08);
    color: var(--red);
}
.qr-fake {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background:
            linear-gradient(90deg, var(--red) 4px, transparent 4px) 0 0 / 12px 12px,
            linear-gradient(var(--red) 4px, transparent 4px) 0 0 / 12px 12px,
            #fff;
}

/* Petal / cloud decorations */
.cloud-svg {
    position: absolute;
    z-index: 1;
    color: rgba(217, 184, 67, .38);
    animation: cloudDrift 14s ease-in-out infinite;
    pointer-events: none;
}
.cloud-a { left: 4%;  top: 150px; width: 160px; }
.cloud-b { right: 34%; bottom: 95px; width: 220px; animation-duration: 18s; }

.petal {
    position: absolute;
    z-index: 2;
    width: 12px;
    height: 8px;
    border-radius: 12px 12px 12px 0;
    background: #e95542;
    opacity: .75;
    animation: petalFall linear infinite;
}
.petal.p1 { left: 18%; top: 12%; animation-duration: 10s; }
.petal.p2 { left: 54%; top:  8%; animation-duration: 13s; animation-delay: 1s; }
.petal.p3 { left: 72%; top: 18%; animation-duration:  9s; animation-delay: 2s; }
.petal.p4 { left: 84%; top: 10%; animation-duration: 12s; animation-delay: .6s; }

/* Scroll cue inside hero */
.scroll-cue {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    color: var(--red);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 1.5px;
    animation: scrollCue 2s ease-in-out infinite;
}


/* ============================================================
   5. CHƯƠNG TRÌNH ĐÀO TẠO NỔI BẬT — Course Slider
   ============================================================ */
.training-programs {
    position: relative;
    padding: 86px 0 100px;
    background: #fff;
    overflow: hidden;
}

.training-wrap {
    width: min(1480px, 94%);
    margin: auto;
}

.training-title {
    text-align: center;
    margin-bottom: 42px;
}
.training-title h2 {
    font-size: clamp(38px, 4vw, 58px);
    margin: 0;
    color: #1f1f1f;
    font-weight: 900;
}
.training-title .line {
    width: 118px;
    height: 6px;
    border-radius: 999px;
    background: var(--red-light);
    margin: 18px auto 0;
}

/* Slider shell */
.course-slider  { position: relative; overflow: hidden; border-radius: 30px; }
.course-track   { display: flex; transition: transform .8s cubic-bezier(.19, 1, .22, 1); }
.course-slide   { min-width: 100%; position: relative; padding: 0 4px 70px; }

/* Showcase layout */
.program-showcase {
    position: relative;
    display: grid;
    grid-template-columns: .9fr 1.25fr;
    align-items: center;
    min-height: 520px;
}
.program-showcase.reverse { grid-template-columns: 1.25fr .9fr; }

/* Visual side */
.program-visual {
    min-height: 520px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 28px 80px rgba(59, 7, 16, .15);
}
.program-visual-bg {
    position: absolute;
    inset: 0;
    background:
            linear-gradient(135deg, rgba(255, 248, 233, .2), rgba(139, 15, 31, .18)),
            var(--course-bg) center/cover no-repeat;
    transform: scale(1.04);
    transition: 1.2s ease;
}
.program-showcase:hover .program-visual-bg { transform: scale(1.1); }

/* Panel side */
.program-panel {
    position: relative;
    z-index: 4;
    background: #f5f5f5;
    padding: 48px 50px;
    min-height: 330px;
    box-shadow: 18px 0 0 var(--red-mid), 0 24px 70px var(--shadow-red);
}
.program-showcase.reverse .program-panel {
    order: 2;
    box-shadow: -18px 0 0 var(--gold-dark), 0 24px 70px var(--shadow-red);
}
.program-panel h3 {
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.18;
    margin: 0 0 22px;
    color: var(--red-light);
    font-weight: 900;
}
.program-panel p {
    font-size: 17px;
    line-height: 1.8;
    color: #343434;
    margin: 0 0 24px;
}

/* Meta strip */
/* Meta strip cải tiến sang Flexbox */
.program-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-top: 55px;
    border-top: 3px solid #d6d6d6;
    padding-top: 16px;
    position: relative;
}

.meta-item {
    position: relative;
    flex: 1;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease;
}

.meta-item::before {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #d6d6d6;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
}

.meta-item .meta-val {
    position: absolute;
    top: -52px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    font-size: 15px;
    font-weight: 900;
    color: #666;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.meta-item .meta-lbl {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #666;
    padding-top: 4px;
}

.meta-item.active .meta-lbl {
    color: var(--red-light);
}

.meta-item.active .meta-val {
    opacity: 1;
    visibility: visible;
    top: -48px;
    color: var(--red-light);
}

.meta-item.active::before {
    background: var(--red-light);
    box-shadow: 0 0 0 7px rgba(177, 24, 43, .12);
}

/* Course menu list */
.course-menu { margin-top: 24px; }
.course-menu-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid #ddd;
    color: #222;
    font-size: 21px;
    font-weight: 900;
}
.course-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--red-light); flex: none; }
.course-menu-item:nth-child(2) .course-dot { background: var(--mm-sub1); }
.course-menu-item:nth-child(3) .course-dot { background: var(--gold-dark); }

/* Floating detail card */
.course-detail {
    position: absolute;
    z-index: 5;
    right: 3%;
    bottom: -32px;
    width: min(520px, 46%);
    background: #fff;
    border-radius: 24px;
    padding: 26px;
    border: 1px solid var(--border-gold);
    box-shadow: 0 28px 80px rgba(59, 7, 16, .16);
    animation: floatCard 5s ease-in-out infinite;
}
.program-showcase.reverse .course-detail { left: 3%; right: auto; }

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.detail-box {
    background: var(--cream-deep);
    border-radius: 18px;
    padding: 15px 12px;
    text-align: center;
    border: 1px solid rgba(217, 184, 67, .25);
}
.detail-box strong { display: block; color: var(--red); font-size: 23px; }

.course-features {
    margin: 0;
    padding-left: 20px;
    line-height: 1.8;
    color: #4d3438;
    font-size: 15px;
}

.program-cta {
    display: inline-flex;
    margin-top: 18px;
    padding: 13px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--red), var(--red-mid));
    color: #fff;
    font-weight: 900;
}

.badge-hot {
    display: inline-flex;
    background: var(--gold-pale);
    color: var(--red);
    padding: 9px 15px;
    border-radius: 999px;
    font-weight: 900;
    margin-bottom: 16px;
    border: 1px solid rgba(217, 184, 67, .4);
}

/* Slider nav */
.slider-nav {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-gold);
    border-radius: 999px;
    padding: 10px 16px;
    box-shadow: 0 18px 45px var(--shadow-red);
}
.slider-arrow {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
}
.slider-dots  { display: flex; gap: 8px; }
.slider-dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    border: 0;
    background: #d6c9a0;
    cursor: pointer;
    transition: .3s;
}
.slider-dot.active { width: 34px; background: var(--red); }


/* ============================================================
   6. SỰ KHÁC BIỆT — Training Difference
   ============================================================ */
.training-difference {
    position: relative;
    padding: 92px 7% 96px;
    background: #fff;
    overflow: hidden;
}
.training-difference::before {
    content: "差异";
    position: absolute;
    left: 3%;
    top: 4%;
    font-family: "Noto Serif SC";
    font-size: 12vw;
    color: rgba(139, 15, 31, .035);
    pointer-events: none;
}

.diff-title { text-align: center; margin-bottom: 62px; }
.diff-title h2 {
    margin: 0;
    font-size: clamp(38px, 5vw, 68px);
    color: #454545;
    font-weight: 900;
}
.diff-title h2 span { color: var(--red-light); }
.diff-title p { margin: 16px 0 0; font-size: 20px; color: var(--text-muted); font-weight: 700; }
.diff-subtitle {
    max-width: 980px;
    margin: 18px auto 0;
    line-height: 1.9;
    font-size: 18px;
    color: #666;
    font-weight: 600;
}

.diff-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
    width: min(1450px, 100%);
    margin: 0 auto;
}

.diff-card {
    text-align: center;
    padding: 34px 22px;
    border-radius: 28px;
    background: linear-gradient(180deg, #fff, #fffaf0);
    border: 1px solid rgba(217, 184, 67, .22);
    box-shadow: 0 20px 60px var(--shadow-red);
    transition: .42s cubic-bezier(.19, 1, .22, 1);
}
.diff-card:hover { transform: translateY(-12px); box-shadow: 0 30px 80px rgba(59, 7, 16, .14); }
/* Stagger transition delays */
.diff-card:nth-child(2) { transition-delay: .08s; }
.diff-card:nth-child(3) { transition-delay: .16s; }
.diff-card:nth-child(4) { transition-delay: .24s; }

.diff-icon {
    width: 112px;
    height: 112px;
    margin: 0 auto 26px;
    display: grid;
    place-items: center;
    border-radius: 34px;
    background: linear-gradient(135deg, var(--gold-pale), #fff);
    border: 1px solid rgba(217, 184, 67, .35);
    font-size: 54px;
    box-shadow: 0 18px 40px rgba(217, 184, 67, .17);
}
.diff-card h3 { font-size: 24px; line-height: 1.45; margin: 0 0 18px; color: #454545; font-weight: 900; }
.diff-card h3 span { color: var(--red-light); }
.diff-card p { font-size: 17px; line-height: 1.75; color: var(--text-muted); font-weight: 600; margin: 0; }

/* Opportunity boxes */
.opportunity-box {
    width: min(1180px, 100%);
    margin: 58px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
}
.opp-item {
    padding: 24px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--red), var(--red-mid));
    color: #fff;
    box-shadow: 0 22px 60px rgba(139, 15, 31, .18);
    position: relative;
    overflow: hidden;
}
.opp-item::after {
    content: "";
    position: absolute;
    right: -40px; top: -40px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(217, 184, 67, .24);
}
.opp-item strong { display: block; font-size: 22px; color: var(--gold-light); margin-bottom: 10px; }
.opp-item p { margin: 0; line-height: 1.7; color: rgba(255, 255, 255, .88); }


/* ============================================================
   7. SECTION CHUNG — section, feature, step, timeline, eyebrow
   ============================================================ */
.section { padding: 90px 7%; }

.section-title {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 50px;
}
.section-title h2 {
    font-size: clamp(34px, 4vw, 54px);
    margin: 12px 0;
    color: var(--text-dark);
}

.eyebrow {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid rgba(215, 170, 69, .5);
    border-radius: 999px;
    background: rgba(255, 248, 233, .7);
    color: var(--red);
    font-weight: 700;
    font-size: 13px;
}

/* Feature grid (3 cols) */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.feature {
    padding: 28px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(215, 170, 69, .22);
    box-shadow: 0 20px 55px var(--shadow-red);
    transition: .35s;
    position: relative;
    overflow: hidden;
}
.feature:hover { transform: translateY(-8px); }
.feature h3 { font-size: 22px; margin: 20px 0 10px; color: var(--red); }
.feature p  { line-height: 1.7; color: #65464a; }

.icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--red), var(--red-mid));
    color: #fff;
    font-size: 24px;
    box-shadow: 0 15px 35px rgba(139, 15, 31, .25);
}
.icon i { font-size: 22px; }

/* Learning timeline (4 steps) */
.timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.step {
    padding: 24px;
    border-radius: 24px;
    background: var(--cream-deep);
    border: 1px solid rgba(215, 170, 69, .3);
}
.step b {
    display: block;
    font-size: 32px;
    color: var(--gold);
    font-family: "Noto Serif SC";
}

/* Testimonial */
.testimonial {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 34px;
    align-items: center;
    background: #fff;
    border-radius: 34px;
    padding: 40px;
    box-shadow: 0 25px 80px var(--shadow-red);
}
.avatar {
    min-height: 360px;
    border-radius: 28px;
    background: linear-gradient(135deg, #f5d37f, var(--red));
    position: relative;
    overflow: hidden;
}
.avatar::after {
    content: "师";
    position: absolute;
    font-family: "Noto Serif SC";
    font-size: 220px;
    color: rgba(255, 255, 255, .18);
    right: 15px;
    bottom: -45px;
}

/* Featured courses block */
.featured-courses         { padding: 70px 7%; background: #fff; }
.featured-courses .section-title { text-align: center; margin-bottom: 40px; }
.featured-courses .section-title h2 { font-size: 42px; color: var(--red); margin: 0; }
.featured-courses .section-title p  { color: var(--text-muted); }

.course-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.course-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
    border: 1px solid #f0e2a8;
}
.course-header { padding: 24px; background: linear-gradient(135deg, var(--red), var(--red-mid)); color: #fff; }
.course-body   { padding: 24px; }
.course-price  { font-size: 34px; font-weight: 800; color: var(--gold-dark); }
.course-tags   { display: flex; gap: 10px; flex-wrap: wrap; margin: 15px 0; }
.course-tags span {
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff7d6;
    color: var(--red);
    font-weight: 700;
}
.course-btn {
    display: inline-block;
    margin-top: 18px;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    text-decoration: none;
}

/* Hero original (giữ tương thích) */
.hero {
    min-height: 100vh;
    padding: 180px 7% 80px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 55px;
    align-items: center;
    position: relative;
    overflow: hidden;
    background:
            radial-gradient(circle at 85% 20%, rgba(215, 170, 69, .25), transparent 30%),
            radial-gradient(circle at 10% 10%, rgba(139, 15, 31, .16), transparent 32%);
}
.hero::before {
    content: "和 语 堂";
    position: absolute;
    font-family: "Noto Serif SC";
    font-size: 13vw;
    color: rgba(139, 15, 31, .05);
    left: -2%;
    top: 20%;
    letter-spacing: .08em;
    white-space: nowrap;
    animation: float 8s ease-in-out infinite;
}
h1 { font-size: clamp(42px, 6vw, 78px); line-height: 1.05; margin: 22px 0 18px; color: var(--text-dark); letter-spacing: -2px; }
.gold  { color: var(--gold); font-family: "Noto Serif SC"; }
.lead  { font-size: 19px; line-height: 1.75; color: #5a3b3f; max-width: 650px; }
.hero-actions { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.stat  { padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(215, 170, 69, .28); box-shadow: 0 14px 40px var(--shadow-red); }
.stat b { display: block; font-size: 25px; color: var(--red); }

.palace { position: relative; min-height: 560px; display: grid; place-items: center; }
.moon   { width: 430px; height: 430px; border-radius: 50%; background: radial-gradient(circle, #ffe9a9, var(--gold)); box-shadow: 0 40px 90px rgba(215, 170, 69, .35); animation: pulse 5s ease-in-out infinite; }
.card-orient {
    position: absolute;
    width: 76%;
    min-height: 390px;
    padding: 34px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 248, 233, .78));
    border: 1px solid rgba(215, 170, 69, .45);
    box-shadow: 0 30px 90px rgba(59, 7, 16, .20);
    backdrop-filter: blur(14px);
    animation: rise 1.1s ease both;
}
.lantern {
    position: absolute;
    width: 76px; height: 102px;
    border-radius: 42px;
    background: linear-gradient(90deg, #9b1022, #f14646, #9b1022);
    top: 40px; right: 55px;
    box-shadow: 0 0 40px rgba(244, 70, 70, .35);
    animation: swing 3.4s ease-in-out infinite;
    transform-origin: top;
}
.lantern::after {
    content: "福";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--gold-light);
    font-family: "Noto Serif SC";
    font-size: 34px;
}
.course-pill {
    display: inline-flex;
    margin: 7px;
    padding: 11px 15px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(139, 15, 31, .15);
    font-weight: 700;
    color: var(--red);
}

/* Header gold line */
.header::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}


/* ============================================================
   8. PROGRAMS — nền đỏ
   ============================================================ */
.programs {
    background: linear-gradient(135deg, var(--text-dark), var(--red));
    color: #fff;
    position: relative;
    overflow: hidden;
}
.programs::before {
    content: "学";
    position: absolute;
    font-family: "Noto Serif SC";
    font-size: 38vw;
    color: rgba(255, 255, 255, .04);
    right: -5%;
    top: -12%;
}
.programs h2,
.programs .eyebrow { color: #fff; }

.program-card {
    padding: 28px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(12px);
}
.program-card h3 { font-size: 24px; color: var(--gold-light); }


/* ============================================================
   9. HỆ SINH THÁI HÒA NGỮ ĐƯỜNG
   ============================================================ */

/* ---- Wrapper ---- */
.ecosystem-section {
    position: relative;
    padding: 96px 7% 108px;
    background: var(--cream);          /* #fff8e9 — nền kem đồng bộ site */
    overflow: hidden;
}

/* Chữ Hán decor nền */
.eco-decor-cn {
    position: absolute;
    right: -1%;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Noto Serif SC";
    font-size: 22vw;
    color: rgba(139, 15, 31, .04);
    pointer-events: none;
    line-height: 1;
    letter-spacing: .05em;
    user-select: none;
}

/* Gradient gold glow top-left */
.ecosystem-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 0% 0%, rgba(217, 184, 67, .12), transparent 48%);
    pointer-events: none;
}

/* ---- Section header ---- */
.eco-header {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 64px;
}
.eco-header h2 {
    font-size: clamp(36px, 4.2vw, 62px);
    font-weight: 900;
    color: var(--text-dark);
    margin: 14px 0 16px;
    line-height: 1.08;
    letter-spacing: -1px;
}
.eco-header h2 span {
    color: var(--red-light);
}
.eco-header p {
    max-width: 760px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.85;
    color: var(--text-muted);
    font-weight: 500;
}

/* ---- Main body: 2-column layout ---- */
.eco-body {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 52px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
}

/* ================================================================
   CỘT TRÁI — Tầm nhìn chiến lược
   ================================================================ */
.eco-vision {
    position: relative;
}

.eco-vision-heading {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 32px;
}
.eco-vision-cn {
    font-family: "Noto Serif SC";
    font-size: 72px;
    line-height: 1;
    color: var(--red);
    opacity: .18;
    flex: none;
    margin-top: -6px;
}
.eco-vision-kicker {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--red);
    opacity: .65;
    margin-bottom: 6px;
}
.eco-vision-heading h3 {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.2;
}

/* Vision list items */
.eco-vision-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.eco-vision-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(217, 184, 67, .22);
    transition: background .22s;
}
.eco-vision-item:last-child { border-bottom: none; }

/* Dot icon */
.eco-vdot {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 16px;
    flex: none;
    margin-top: 2px;
}
.eco-vdot--red    { background: rgba(139, 15,  31, .10); color: var(--red);      }
.eco-vdot--gold   { background: rgba(217, 184, 67, .18); color: var(--gold-dark); }
.eco-vdot--green  { background: rgba(39,  174, 96, .12); color: #27ae60;         }
.eco-vdot--purple { background: rgba(155, 89, 182, .12); color: #9b59b6;         }

.eco-vision-item strong {
    display: block;
    font-size: 15px;
    font-weight: 900;
    color: var(--text-dark);
    margin-bottom: 5px;
    line-height: 1.3;
}
.eco-vision-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-muted);
}

/* ================================================================
   CỘT PHẢI — 4 mảng hoạt động chính
   ================================================================ */
.eco-activities {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.eco-act-heading {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--red);
    opacity: .55;
    margin-bottom: 4px;
}

.eco-act-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Individual activity card */
.eco-act-card {
    padding: 26px 22px 22px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(217, 184, 67, .22);
    box-shadow: 0 16px 48px rgba(59, 7, 16, .07);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .3s cubic-bezier(.19, 1, .22, 1), box-shadow .3s;
    position: relative;
    overflow: hidden;
}
/* Accent stripe on top */
.eco-act--pink   { border-top: 3px solid var(--mm-pink);   }
.eco-act--purple { border-top: 3px solid var(--mm-purple);  }
.eco-act--green  { border-top: 3px solid var(--mm-green);   }
.eco-act--orange { border-top: 3px solid var(--mm-orange);  }

.eco-act-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 26px 70px rgba(59, 7, 16, .12);
}

/* Top row: icon + tag */
.eco-act-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.eco-act-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 20px;
}
.eco-act--pink   .eco-act-icon { background: rgba(233, 72, 112, .10); color: var(--mm-pink);   }
.eco-act--purple .eco-act-icon { background: rgba(155, 89, 182, .10); color: var(--mm-purple); }
.eco-act--green  .eco-act-icon { background: rgba(39, 174,  96, .10); color: var(--mm-green);  }
.eco-act--orange .eco-act-icon { background: rgba(230, 126,  34, .10); color: var(--mm-orange); }

.eco-act-tag {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    padding: 4px 10px;
    border-radius: 999px;
}
.eco-act--pink   .eco-act-tag { background: rgba(233, 72, 112, .10); color: var(--mm-pink);   }
.eco-act--purple .eco-act-tag { background: rgba(155, 89, 182, .10); color: var(--mm-purple); }
.eco-act--green  .eco-act-tag { background: rgba(39, 174,  96, .10); color: var(--mm-green);  }
.eco-act--orange .eco-act-tag { background: rgba(230, 126,  34, .10); color: var(--mm-orange); }

.eco-act-card h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.3;
}
.eco-act-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-muted);
    flex: 1;
}

/* Card link */
.eco-act-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 900;
    color: var(--red);
    text-decoration: none;
    margin-top: 2px;
    transition: gap .2s;
}
.eco-act-link:hover { gap: 10px; }
.eco-act-link i { font-size: 11px; }

/* ---- Expand button (B2C) ---- */
.eco-act-expand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(233, 72, 112, .28);
    background: rgba(233, 72, 112, .07);
    color: var(--mm-pink);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: background .22s, border-color .22s;
    margin-top: 2px;
}
.eco-act-expand:hover {
    background: rgba(233, 72, 112, .13);
    border-color: rgba(233, 72, 112, .45);
}
.eco-expand-icon {
    font-size: 11px;
    transition: transform .3s cubic-bezier(.19, 1, .22, 1);
}
.eco-act-expand[aria-expanded="true"] .eco-expand-icon {
    transform: rotate(180deg);
}

/* ---- Sub-panel (B2C courses) ---- */
.eco-sub-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .42s cubic-bezier(.19, 1, .22, 1), opacity .32s ease;
}
.eco-sub-panel.open {
    max-height: 260px;
    opacity: 1;
}

.eco-sub-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-dark);
    text-decoration: none;
    transition: transform .18s, background .18s;
    border: 1px solid transparent;
}
.eco-sub-item:hover { transform: translateX(4px); }
.eco-sub-item--teal {
    background: rgba(86, 183, 173, .09);
    border-color: rgba(86, 183, 173, .22);
}
.eco-sub-item--pink {
    background: rgba(233, 72, 112, .09);
    border-color: rgba(233, 72, 112, .22);
}
.eco-sub-item--red {
    background: rgba(231, 76, 60, .09);
    border-color: rgba(231, 76, 60, .22);
}
.eco-sub-item--teal:hover { background: rgba(86, 183, 173, .16); }
.eco-sub-item--pink:hover { background: rgba(233, 72, 112, .16); }
.eco-sub-item--red:hover  { background: rgba(231,  76, 60, .16); }

.eco-sub-item > i:first-child { font-size: 13px; opacity: .75; }
.eco-sub-item > span { flex: 1; }
.eco-sub-arrow {
    font-size: 10px;
    opacity: .4;
    transition: opacity .18s, transform .18s;
}
.eco-sub-item:hover .eco-sub-arrow { opacity: .8; transform: translateX(3px); }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1100px) {
    .eco-body        { grid-template-columns: 1fr; gap: 40px; }
    .eco-act-cards   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .eco-act-cards   { grid-template-columns: 1fr; }
    .eco-vision-cn   { display: none; }
}


/* ============================================================
   10. KHÓA HỌC DÀNH CHO AI — who-course
   ============================================================ */
.who-course-section {
    padding: 100px 7%;
    background: linear-gradient(180deg, #fff, #f8f5ef);
}
.who-course-wrap {
    display: grid;
    grid-template-columns: 42% 58%;
    gap: 50px;
    align-items: start;
    max-width: 1500px;
    margin: auto;
}
.who-left img {
    width: 100%;
    border-radius: 40px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .12);
}
.who-badge {
    margin-top: -60px;
    margin-left: 40px;
    background: #fff;
    padding: 25px;
    border-radius: 24px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, .1);
    font-size: 28px;
    font-weight: 800;
    color: #444;
    position: relative;
    max-width: 520px;
}
.who-title h2 { font-size: 64px; margin: 0 0 10px; }
.who-title span { color: var(--red-mid); }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.who-item .num {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--red-mid);
    color: #fff;
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    margin-bottom: 15px;
}
.who-item h3 { margin: 0 0 10px; color: #333; }
.who-item p  { line-height: 1.8; color: var(--text-muted); }


/* ============================================================
   11. HOẠT ĐỘNG LỚP HỌC — class-activity
   ============================================================ */
.class-activity-section {
    position: relative;
    padding: 100px 7%;
    background: linear-gradient(180deg, #fff, #faf8f3);
    overflow: hidden;
}
.class-activity-section::before {
    content: "课堂";
    position: absolute;
    right: 4%; top: 3%;
    font-family: "Noto Serif SC";
    font-size: 13vw;
    color: rgba(139, 15, 31, .035);
    pointer-events: none;
}

.class-activity-header { position: relative; z-index: 2; text-align: center; margin-bottom: 48px; }
.class-activity-header h2 { font-size: clamp(40px, 5vw, 68px); color: #444; margin: 0 0 12px; font-weight: 900; }
.class-activity-header h2 span { color: var(--red-light); }
.class-activity-header p { max-width: 980px; margin: auto; color: var(--text-muted); line-height: 1.9; font-size: 18px; font-weight: 600; }

/* Stats counters */
.activity-counter {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto 50px;
}
.activity-counter-item {
    text-align: center;
    padding: 22px 16px;
    background: #fff;
    border: 1px solid rgba(217, 184, 67, .28);
    border-radius: 24px;
    box-shadow: 0 18px 45px var(--shadow-red);
}
.activity-counter-item strong { display: block; font-size: 36px; color: var(--red); font-family: "Noto Serif SC"; }
.activity-counter-item span  { color: #555; font-weight: 800; }

/* Filter tabs */
.activity-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 auto 36px;
    position: relative;
    z-index: 3;
}
.activity-tab {
    border: 1px solid rgba(139, 15, 31, .18);
    background: #fff;
    color: var(--red);
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
    transition: .25s;
}
.activity-tab.active,
.activity-tab:hover {
    background: linear-gradient(135deg, var(--red), var(--red-mid));
    color: #fff;
    transform: translateY(-2px);
}

/* Carousel */
.activity-carousel { position: relative; z-index: 2; max-width: 1500px; margin: auto; overflow: hidden; border-radius: 30px; }
.activity-track    { display: flex; transition: transform .75s cubic-bezier(.19, 1, .22, 1); }
.activity-slide    { min-width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 8px 6px 78px; }

/* Cards */
.activity-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(59, 7, 16, .10);
    border: 1px solid rgba(217, 184, 67, .18);
    cursor: pointer;
    isolation: isolate;
}
/*.activity-card.large { grid-row: span 2; }*/
.activity-card img {
    width: 100%; height: 300px; object-fit: cover; display: block;
    transition: transform .65s cubic-bezier(.19, 1, .22, 1), filter .45s;
}
/*.activity-card.large img { height: 624px; }*/
.activity-card:hover img { transform: scale(1.09); filter: saturate(1.12) contrast(1.04); }

.activity-overlay {
    position: absolute;
    inset: auto 0 0;
    padding: 22px;
    background: linear-gradient(180deg, transparent, rgba(59, 7, 16, .86));
    color: #fff;
    transform: translateY(18px);
    opacity: 0;
    transition: .38s;
}
.activity-card:hover .activity-overlay { transform: none; opacity: 1; }
.activity-overlay strong { display: block; color: var(--gold-light); margin-bottom: 6px; font-size: 18px; }

/* Carousel nav */
.activity-nav {
    position: absolute;
    left: 50%; bottom: 10px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border-gold);
    box-shadow: 0 18px 45px var(--shadow-red);
}
.activity-arrow { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--red); color: #fff; font-size: 22px; cursor: pointer; font-weight: 900; }
.activity-dots  { display: flex; gap: 8px; }
.activity-dot {
    width: 11px; height: 11px;
    border-radius: 999px; border: 0;
    background: #d6c9a0; cursor: pointer; transition: .3s;
}
.activity-dot.active { width: 34px; background: var(--red); }

/* Lightbox */
.activity-lightbox {
    position: fixed; inset: 0; z-index: 2000;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(20, 8, 10, .86);
    backdrop-filter: blur(10px);
    padding: 30px;
}
.activity-lightbox.show     { display: flex; }
.activity-lightbox img      { max-width: min(1100px, 94vw); max-height: 82vh; border-radius: 24px; box-shadow: 0 35px 100px rgba(0, 0, 0, .45); }
.activity-lightbox-close    { position: absolute; right: 28px; top: 24px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--red); font-size: 26px; cursor: pointer; }


/* ============================================================
   12. GALLERY CÔ NGA
   ============================================================ */
.nga-gallery-section { padding: 90px 7%; background: linear-gradient(180deg, #fff, #faf7ef); }
.nga-gallery-title { text-align: center; margin-bottom: 40px; }
.nga-gallery-title h2 { font-size: 48px; color: var(--red); margin: 0; }
.nga-gallery-title p  { max-width: 900px; margin: 15px auto; color: var(--text-muted); line-height: 1.8; }

.nga-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1400px;
    margin: auto;
}
.nga-gallery-card     { background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .08); }
.nga-gallery-card img { width: 100%; display: block; height: 520px; object-fit: cover; }
.nga-gallery-content  { padding: 24px; }
.nga-gallery-content h3 { margin: 0 0 12px; color: var(--red); }


/* ============================================================
   13. CTA / CONTACT FORM
   ============================================================ */
.cta {
    padding: 90px 7%;
    text-align: center;
    background:
            linear-gradient(rgba(59, 7, 16, .86), rgba(59, 7, 16, .86)),
            radial-gradient(circle at center, var(--gold), transparent 55%);
    color: #fff;
}
.cta-title { font-size: 48px; margin: 16px 0; }

.form {
    max-width: 880px;
    margin: 35px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 12px;
}
input, select {
    height: 54px;
    border: 0;
    border-radius: 16px;
    padding: 0 16px;
    font-family: inherit;
}


/* ============================================================
   14. SCROLL CONTROLS
   ============================================================ */
.scroll-cue {
    min-width: 118px;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: rgba(255, 255, 255, .42) !important;
    border: 1px solid rgba(217, 184, 67, .55) !important;
    color: var(--red) !important;
    box-shadow: 0 18px 45px rgba(59, 7, 16, .16);
    backdrop-filter: blur(14px);
    cursor: pointer !important;
    transition: .35s ease;
    animation: scrollCuePulse 1.8s ease-in-out infinite !important;
}
.scroll-cue::before { content: "\f8cc"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 15px; }
.scroll-cue:hover   { transform: translateX(-50%) translateY(-4px) !important; background: rgba(255, 255, 255, .72) !important; box-shadow: 0 26px 65px rgba(59, 7, 16, .22); }
.scroll-cue.hide    { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(18px) !important; }

.scroll-top-btn {
    position: fixed;
    z-index: 999;
    right: 24px; bottom: 24px;
    width: 54px; height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(217, 184, 67, .55);
    background: linear-gradient(135deg, var(--red), var(--red-mid));
    color: var(--gold-light);
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 18px 45px rgba(59, 7, 16, .25);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
    transition: .35s ease;
}
.scroll-top-btn.show  { opacity: 1; pointer-events: auto; transform: none; }
.scroll-top-btn:hover { transform: translateY(-5px); box-shadow: 0 26px 65px rgba(59, 7, 16, .32); }


/* ============================================================
   15. RESPONSIVE
   ============================================================ */

/* ≤ 1100px */
@media (max-width: 1100px) {
    .official-hero { padding-top: 155px; min-height: auto; }
    .hero-premium-side { position: relative; right: auto; top: auto; width: 100%; margin-top: 30px; }
    .official-hero     { display: block; }
    .diff-grid         { grid-template-columns: repeat(2, 1fr); }
    .opportunity-box   { grid-template-columns: 1fr; }
    .ecosystem-section      { padding: 70px 5% 80px; }
    .eco-vision-inner       { grid-template-columns: auto 1fr; }
    .eco-vision-stats       { display: none; }
    .eco-cards              { grid-template-columns: repeat(2, 1fr); }
    .activity-slide    { grid-template-columns: repeat(3, 1fr); }
    /*.activity-card.large { grid-row: auto; }*/
    /*.activity-card.large img, .activity-card img { height: 280px; }*/
    .header-announcement { margin-top: 114px; }
}

/* ≤ 1050px */
@media (max-width: 1050px) {
    .program-showcase,
    .program-showcase.reverse { grid-template-columns: 1fr; }
    .program-showcase.reverse .program-panel { order: 0; }
    .program-visual { min-height: 360px; }
    .course-detail,
    .program-showcase.reverse .course-detail { position: relative; width: 100%; left: auto; right: auto; bottom: auto; margin-top: 20px; }
}

/* ≤ 1000px */
@media (max-width: 1000px) {
    .who-course-wrap, .who-grid { grid-template-columns: 1fr; }
    .who-title h2 { font-size: 42px; }
}

/* ≤ 900px */
@media (max-width: 900px) {
    .official-hero   { padding: 145px 6% 70px; background-position: center; }
    .hero            { padding-top: 150px; grid-template-columns: 1fr; }
    .hero-premium-actions .btn { width: 100%; }
    .hero-premium-stats { grid-template-columns: 1fr; }
    .hero-premium-title { letter-spacing: -1px; }
    .testimonial, .hero { grid-template-columns: 1fr; }
    .grid, .timeline    { grid-template-columns: 1fr; }
    .form               { grid-template-columns: 1fr; }
    .stats              { grid-template-columns: 1fr; }
    .testimonial        { padding: 26px; }
    .testimonial h2,
    .cta h2             { font-size: clamp(30px, 8vw, 42px) !important; }
    .moon               { width: 320px; height: 320px; }
    .card-orient        { width: 92%; }
    .activity-counter   { grid-template-columns: repeat(2, 1fr); }
    .activity-slide     { grid-template-columns: repeat(2, 1fr); }
    .ribbon-item        { padding: 10px 20px; font-size: 13px; }
    .header-announcement .official-hero { padding-top: 55px !important; }
    .nga-gallery-grid   { grid-template-columns: 1fr; }
    .nga-gallery-card img { height: auto; }
    .course-grid        { grid-template-columns: 1fr; }
}

/* ≤ 760px */
@media (max-width: 760px) {
    .program-panel { padding: 34px 24px; }
    .program-meta  { grid-template-columns: repeat(2, 1fr); row-gap: 25px; }
    .detail-grid   { grid-template-columns: 1fr; }
    .course-menu-item { font-size: 17px; }
}

/* ≤ 700px */
@media (max-width: 700px) {
    .footer-grid   { grid-template-columns: 1fr; }
    .diff-grid     { grid-template-columns: 1fr; }
    .diff-title h2 { font-size: 38px; }
    .eco-cards              { grid-template-columns: 1fr; }
    .eco-vision-inner       { grid-template-columns: 1fr; gap: 18px; }
    .eco-vision-cn          { display: none; }
}

/* ≤ 600px */
@media (max-width: 600px) {
    .activity-counter { grid-template-columns: 1fr; }
    .activity-slide   { grid-template-columns: 1fr; }
    .activity-card img { height: auto; }
}


/* ============================================================
   16. KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes float        { 50% { transform: translateY(20px); } }
@keyframes pulse        { 50% { transform: scale(1.04); } }
@keyframes swing        { 50% { transform: rotate(7deg); } }
@keyframes rise         { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: none; } }
@keyframes cloudMove    { 50% { transform: translateY(22px) translateX(16px); } }
@keyframes heroFadeUp   { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes heroFloat    { 50% { transform: translateY(18px); } }
@keyframes cloudDrift   { 50% { transform: translateX(32px) translateY(12px); } }
@keyframes petalFall    { 0% { transform: translateY(-20px) rotate(0); } 100% { transform: translateY(780px) translateX(-90px) rotate(360deg); } }
@keyframes scrollCue    { 50% { transform: translateX(-50%) translateY(10px); } }
@keyframes floatCard    { 50% { transform: translateY(-14px); } }
@keyframes ribbonMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scrollCuePulse {
    0%, 100% { box-shadow: 0 18px 45px rgba(59, 7, 16, .16); }
    50%       { box-shadow: 0 18px 55px rgba(217, 184, 67, .42); }
}