/* _content/PteApac.Web/Components/Layout/Footer.razor.rz.scp.css */
.yq-footer[b-5rl61jvc62] {
    background: #FFFBEF !important;
    color: var(--yq-text);
    padding: 5rem 2rem 2rem 2rem;
    font-size: 1rem;
    /*border-top: 1px solid var(--yq-border);*/
}

    .yq-footer a[b-5rl61jvc62] {
        color: var(--yq-text-mid);
        text-decoration: none;
        transition: all 0.2s ease;
    }

        .yq-footer a:hover[b-5rl61jvc62] {
            color: var(--yq-red);
        }

.yq-footer-inner[b-5rl61jvc62] {
    display: grid;
    grid-template-columns: 1.2fr 2.5fr auto;
    gap: 2rem;
    max-width: 1300px;
    margin: 0 auto;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(192, 57, 43, 0.15);
}

.yq-footer-col[b-5rl61jvc62] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.yq-footer-logo-link[b-5rl61jvc62] {
    display: inline-block;
    margin-bottom: 0.2rem;
}

.yq-footer-logo-img[b-5rl61jvc62] {
    height: 55px;
    object-fit: contain;
}

.yq-company-info[b-5rl61jvc62] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.yq-footer-contact-item[b-5rl61jvc62] {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    line-height: 1.6;
    color: var(--yq-text-mid);
}

    .yq-footer-contact-item strong[b-5rl61jvc62] {
        color: var(--yq-text);
    }

.yq-footer-icon[b-5rl61jvc62] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.yq-footer-heading[b-5rl61jvc62] {
    color: var(--yq-text);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 0.8rem 0;
}

.yq-footer-course-list[b-5rl61jvc62] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 2rem;
}

    .yq-footer-course-list li[b-5rl61jvc62] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .yq-footer-course-list li a[b-5rl61jvc62] {
            color: var(--yq-text-mid);
            display: inline-block;
            transition: all 0.2s ease;
        }

            .yq-footer-course-list li a:hover[b-5rl61jvc62] {
                color: var(--yq-red);
                transform: translateX(5px);
            }

.yq-footer-social[b-5rl61jvc62] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.8rem;
}

    .yq-footer-social strong[b-5rl61jvc62] {
        color: var(--yq-text);
        white-space: nowrap;
    }

.yq-social-icons[b-5rl61jvc62] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.8rem;
    justify-content: flex-end;
}

.yq-social-link[b-5rl61jvc62] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(192, 57, 43, 0.08);
    border-radius: 50%;
    color: var(--yq-red);
}

    .yq-social-link:hover[b-5rl61jvc62] {
        background: var(--yq-red);
        color: #fff;
        transform: translateY(-3px);
    }

        .yq-social-link:hover .yq-footer-icon[b-5rl61jvc62] {
            filter: brightness(0) invert(1);
        }

.yq-footer-bottom[b-5rl61jvc62] {
    text-align: center;
    padding-top: 2rem;
    font-size: 0.95rem;
    color: var(--yq-text-mid);
}

@media (max-width: 768px) {
    .yq-footer[b-5rl61jvc62] {
        padding: 3rem 1.5rem 2rem 1.5rem;
    }

    .yq-footer-inner[b-5rl61jvc62] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .yq-footer-course-list[b-5rl61jvc62] {
        grid-template-columns: 1fr;
    }

        .yq-footer-course-list li[b-5rl61jvc62] {
            white-space: normal;
        }

    .yq-footer-social[b-5rl61jvc62] {
        align-items: flex-start;
    }

    .yq-social-icons[b-5rl61jvc62] {
        justify-content: flex-start;
    }

    .yq-footer-bottom[b-5rl61jvc62] {
        padding-top: 0;
    }
}
/* _content/PteApac.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.yq-navbar[b-ebz6db2rae] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: 90px;
    background-color: var(--yq-cream);
    border-bottom: 1px solid rgba(192, 57, 43, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.yq-navbar-left[b-ebz6db2rae],
.yq-navbar-right[b-ebz6db2rae] {
    flex: 1;
}

.yq-navbar-logo-img[b-ebz6db2rae] {
    height: 70px;
    object-fit: contain;
}

.yq-navbar-center[b-ebz6db2rae] {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
    justify-content: center;
}
    /* ============================================================
   ĐỊNH DẠNG MÀU CHỮ MENU (Xuyên qua lớp cách ly của Blazor)
   ============================================================ */
    .yq-navbar-center li[b-ebz6db2rae]  a,
    .navbar-center li[b-ebz6db2rae]  a {
        text-decoration: none !important;
        font-size: 1rem;
        font-weight: 600;
        /* Ép màu đen cho trạng thái mặc định (có important) */
        color: #000000 !important;
        text-transform: uppercase;
        transition: color 0.2s ease;
        letter-spacing: 0.5px;
    }

        /* Khi rê chuột HOẶC khi đang ở trang hiện tại (active) thì chuyển sang màu đỏ */
        .yq-navbar-center li[b-ebz6db2rae]  a:hover,
        .yq-navbar-center li[b-ebz6db2rae]  a.active,
        .navbar-center li[b-ebz6db2rae]  a:hover,
        .navbar-center li[b-ebz6db2rae]  a.active {
            color: var(--yq-red) !important;
            text-decoration: none !important;
        }

.yq-actions-group[b-ebz6db2rae] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
}

.yq-lang-dropdown[b-ebz6db2rae] {
    position: relative;
    display: inline-block;
}

.yq-lang-btn[b-ebz6db2rae] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--yq-text);
    padding: 0.5rem 0;
    font-family: inherit;
}

.yq-flag-icon[b-ebz6db2rae] {
    width: 24px; /* Tăng nhẹ kích thước để nhìn rõ hơn */
    height: 24px; /* Bắt buộc bằng chiều rộng để tạo hình vuông cơ sở */
    object-fit: cover; /* Đảm bảo hình ảnh phủ kín không gian tròn */
    border-radius: 50%; /* Bo tròn hoàn toàn */
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    flex-shrink: 0; /* Ngăn không cho Flexbox bóp méo icon khi thiếu diện tích */
}

.yq-dropdown-arrow[b-ebz6db2rae] {
    transition: transform 0.25s ease;
    color: var(--yq-text-mid);
}

.yq-lang-dropdown:hover .yq-dropdown-arrow[b-ebz6db2rae] {
    transform: rotate(180deg);
}

.yq-lang-content[b-ebz6db2rae] {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    min-width: 140px;
    box-shadow: 0 8px 24px rgba(192, 57, 43, 0.1);
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    transform: translateY(10px);
    z-index: 1001;
    border: 1px solid var(--yq-border);
}

.yq-lang-dropdown:hover .yq-lang-content[b-ebz6db2rae] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.yq-lang-content a[b-ebz6db2rae] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--yq-text);
    padding: 0.75rem 1rem;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease;
}

    .yq-lang-content a:hover[b-ebz6db2rae],
    .yq-lang-content a.active[b-ebz6db2rae] {
        background-color: var(--yq-cream);
        color: var(--yq-red);
    }

.yq-navbar-cta[b-ebz6db2rae] {
    display: inline-block;
    background: var(--yq-red);
    color: #fff !important;
    border-radius: 30px;
    padding: 0.65rem 1.6rem;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

    .yq-navbar-cta:hover[b-ebz6db2rae] {
        background: var(--yq-red-dark);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(192, 57, 43, 0.2);
    }

.yq-navbar-hamburger[b-ebz6db2rae] {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 1rem;
}

    .yq-navbar-hamburger span[b-ebz6db2rae] {
        width: 100%;
        height: 2px;
        background-color: var(--yq-text);
        transition: all 0.3s ease;
    }

@media (max-width: 900px) {
    .yq-navbar[b-ebz6db2rae] {
        padding: 0.75rem 1rem;
    }

    .yq-navbar-hamburger[b-ebz6db2rae] {
        display: flex;
    }

    .yq-navbar-logo-img[b-ebz6db2rae] {
        height: 38px;
    }

    .yq-navbar-lang-switcher[b-ebz6db2rae],
    .yq-navbar-cta[b-ebz6db2rae] {
        display: none;
    }

    .yq-navbar-center[b-ebz6db2rae] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        gap: 0;
        border-top: 1px solid var(--yq-border);
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

        .yq-navbar-center.open[b-ebz6db2rae] {
            max-height: 400px;
        }

        .yq-navbar-center li[b-ebz6db2rae] {
            border-bottom: 1px solid #f5f5f5;
        }

            .yq-navbar-center li[b-ebz6db2rae]  a {
                display: block !important;
                padding: 0.5rem !important;
                width: 100% !important;
                box-sizing: border-box !important;
                /* CANH GIỮA HOẶC CANH PHẢI Ở ĐÂY */
                text-align: center !important; /* Đổi thành "right !important" nếu bạn thực sự muốn canh phải */
            }

    .yq-navbar-hamburger.open span:nth-child(1)[b-ebz6db2rae] {
        transform: translateY(8px) rotate(45deg);
    }

    .yq-navbar-hamburger.open span:nth-child(2)[b-ebz6db2rae] {
        opacity: 0;
    }

    .yq-navbar-hamburger.open span:nth-child(3)[b-ebz6db2rae] {
        transform: translateY(-8px) rotate(-45deg);
    }
}
/* _content/PteApac.Web/Components/Pages/Contact.razor.rz.scp.css */
/* =======================================================
   Contact.razor.css
   Responsive: Mobile (<=768px), Desktop (<=1920px), Ultrawide (>=1921px)
   ======================================================= */

/* --- KHUNG NỀN TRÀN VIỀN --- */
.yq-contact-full-bleed[b-l89zy916bn] {
    width: 100%;
    position: relative;
    background-color: #FCF9F3;
    background-image: url('/images/yueaixue/bg-landscape-contact.webp');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 8rem 0 12rem 0;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}

/* Mặt trời giả (Dự phòng nếu ảnh nền thiếu sáng) */
.yq-contact-glow[b-l89zy916bn] {
    position: absolute;
    top: -50px;
    left: 15%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(235, 130, 130, 0.15) 0%, rgba(252, 249, 243, 0) 60%);
    pointer-events: none;
}

/* KHUNG CHỨA NỘI DUNG (BASE DESKTOP <=1920px) */
.yq-contact-container[b-l89zy916bn] {
    width: 100%;
    max-width: 1536px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 4rem;
    margin: 0 auto;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}

/* CỘT TRÁI - TEXT */
.yq-contact-text-col[b-l89zy916bn] {
    flex: 1;
}

    .yq-contact-text-col h1[b-l89zy916bn] {
        font-size: 2.8rem;
        font-weight: 800;
        color: #2C1A0E;
        margin-bottom: 1.5rem;
        line-height: 1.35;
    }

    .yq-contact-text-col p[b-l89zy916bn] {
        font-size: 1.15rem;
        color: #4A3020;
        line-height: 1.8;
        margin: 0;
        text-align: justify;
    }

/* CỘT PHẢI - FORM */
.yq-contact-form-col[b-l89zy916bn] {
    flex: 0.9;
    position: relative;
    padding: 3rem 4rem; /* Tạo khoảng trống xung quanh form để đặt hoa văn góc */
}

/* GÓC TRANG TRÍ KIỂU TRUNG HOA */
.yq-corner[b-l89zy916bn] {
    position: absolute;
    width: 75px;
    height: auto;
    pointer-events: none;
    mix-blend-mode: darken;
    filter: contrast(1.2);
}

.yq-corner-tl[b-l89zy916bn] {
    top: 0;
    left: 0;
}

.yq-corner-tr[b-l89zy916bn] {
    top: 0;
    right: 0;
}

.yq-corner-bl[b-l89zy916bn] {
    bottom: 0;
    left: 0;
}

.yq-corner-br[b-l89zy916bn] {
    bottom: 0;
    right: 0;
}

/* Đảm bảo Form luôn nổi lên trên các góc trang trí */
.yq-contact-form-col h2[b-l89zy916bn],
[b-l89zy916bn] .yq-contact-input,
.yq-contact-checkbox-wrap[b-l89zy916bn],
.yq-contact-submit-btn[b-l89zy916bn],
.yq-alert[b-l89zy916bn] {
    position: relative;
    z-index: 1;
}

.yq-contact-form-col h2[b-l89zy916bn] {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 800;
    color: #2C1A0E;
    margin-bottom: 2.5rem;
}

/* STYLE CÁC Ô INPUT CỦA FORM (SỬ DỤNG ::deep) */
[b-l89zy916bn] .yq-contact-input {
    width: 100%;
    background-color: #F8EFE3;
    border: 1px solid #D1C0B4;
    border-radius: 50px;
    padding: 1.1rem 1.5rem;
    font-size: 1.05rem;
    color: #2C1A0E;
    outline: none;
    margin-bottom: 1.25rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

    [b-l89zy916bn] .yq-contact-input:focus {
        border-color: #B22222;
        background-color: #FFF;
        box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
    }

[b-l89zy916bn] textarea.yq-contact-input {
    border-radius: 20px;
    resize: vertical;
    min-height: 140px;
}

[b-l89zy916bn] .yq-contact-input::placeholder {
    color: #8C7B6D;
}

/* Style Checkbox */
.yq-contact-checkbox-wrap[b-l89zy916bn] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 2rem;
    padding-left: 0.5rem;
}

    .yq-contact-checkbox-wrap input[type="checkbox"][b-l89zy916bn] {
        margin-top: 0.25rem;
        width: 16px;
        height: 16px;
        accent-color: #A32619;
        cursor: pointer;
    }

    .yq-contact-checkbox-wrap label[b-l89zy916bn] {
        font-size: 0.9rem;
        color: #7D7D7D;
        line-height: 1.5;
        cursor: pointer;
        margin: 0;
    }

/* Nút Submit */
.yq-contact-submit-btn[b-l89zy916bn] {
    background-color: #B22222;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 0.85rem 4.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    display: block;
    margin: 0 auto;
}

    .yq-contact-submit-btn:hover:not(:disabled)[b-l89zy916bn] {
        background-color: #8a231b;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(163, 38, 25, 0.3);
    }

    .yq-contact-submit-btn:disabled[b-l89zy916bn] {
        background-color: #c4a19e;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Thông báo */
.yq-alert[b-l89zy916bn] {
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.yq-alert-error[b-l89zy916bn] {
    background-color: #FDF3F2;
    color: #C0392B;
    border: 1px solid #F5C6C2;
}

.yq-alert-success[b-l89zy916bn] {
    background-color: #F2F8F2;
    color: #2E7D32;
    border: 1px solid #C8E6C9;
    text-align: center;
}

/* ====================================================
   MÀN HÌNH SIÊU RỘNG ULTRAWIDE (>= 1921px)
   ==================================================== */
@media (min-width: 1921px) {
    .yq-contact-container[b-l89zy916bn] {
        max-width: 85%;
        padding-left: 0;
        padding-right: 0;
        gap: 8rem;
    }

    .yq-contact-text-col h1[b-l89zy916bn] {
        font-size: 3.5rem;
    }

    .yq-contact-text-col p[b-l89zy916bn] {
        font-size: 1.3rem;
    }

    .yq-contact-form-col[b-l89zy916bn] {
        padding: 4rem 5rem;
    }

    [b-l89zy916bn] .yq-contact-input {
        padding: 1.2rem 1.8rem;
        font-size: 1.15rem;
    }

    .yq-contact-submit-btn[b-l89zy916bn] {
        font-size: 1.25rem;
        padding: 1rem 5rem;
    }
}

/* =======================================================
   RESPONSIVE CHO MOBILE (<= 768px)
   ======================================================= */
@media (max-width: 768px) {
    .yq-contact-full-bleed[b-l89zy916bn] {
        padding: 4rem 1rem 8rem 1rem;
        background-position: 80% top;
    }

    .yq-contact-glow[b-l89zy916bn] {
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 100vw;
        height: 500px;
    }

    .yq-contact-container[b-l89zy916bn] {
        flex-direction: column;
        gap: 2.5rem;
        margin-top: 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .yq-contact-text-col h1[b-l89zy916bn] {
        font-size: 2rem;
        text-align: center;
    }

    .yq-contact-text-col p[b-l89zy916bn] {
        text-align: justify;
        text-align-last: center;
        font-size: 1rem;
        line-height: 1.6;
    }

    .yq-contact-form-col[b-l89zy916bn] {
        padding: 0;
        width: 100%;
    }

    .yq-corner[b-l89zy916bn] {
        display: none; /* Ẩn hoa văn vì mobile không đủ chỗ */
    }
}
/* _content/PteApac.Web/Components/Pages/Courses.razor.rz.scp.css */
/* ============================================================
   Courses.razor.css
   Responsive: Mobile (<=768px), Tablet (<=1024px), Desktop (<=1920px), Ultrawide (>=1921px)
   ============================================================ */

.yq-course-detail-page[b-gw42b03hr1] {
    background-color: var(--yq-cream);
    width: 100%;
}

.yq-bg-light[b-gw42b03hr1] {
    background-color: #FEF6EF; /* Màu nền đan xen */
}

/* Container chung của trang khóa học, xóa max-width cũ */
.container[b-gw42b03hr1] {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* 1. VÌ SAO BẠN NÊN HỌC */
.yq-reasons-section[b-gw42b03hr1] {
    padding: 5rem 0;
    background-color: #FEF6EF;
}

.yq-section-title[b-gw42b03hr1] {
    text-align: center;
}

.yq-reasons-grid[b-gw42b03hr1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin-top: 3rem;
    width: 100%;
    max-width: 1536px; /* Thay thành 85% nếu muốn dùng % cho cả màn nhỏ hơn 1920px */
    margin-left: auto;
    margin-right: auto;
    padding: 0 4%;
    box-sizing: border-box;
}

/* ĐỊNH DẠNG LẠI THẺ (CARD) CHỨA NỘI DUNG */
.yq-reason-card[b-gw42b03hr1] {
    background: #fff;
    padding: 2.5rem;
    border: 2px dashed rgba(192, 57, 43, 0.2);
    border-radius: 20px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .yq-reason-card:hover[b-gw42b03hr1] {
        background-color: #fff;
        border-style: solid;
        border-color: var(--yq-red);
        box-shadow: 0 10px 30px rgba(192, 57, 43, 0.08);
        transform: translateY(-5px);
    }

.yq-reason-icon[b-gw42b03hr1] {
    position: static;
    transform: none;
    background: transparent;
    padding: 0;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
}

    .yq-reason-icon img[b-gw42b03hr1] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.yq-reason-card:hover .yq-reason-icon[b-gw42b03hr1] {
    background: transparent;
}

.yq-reason-card h4[b-gw42b03hr1] {
    font-size: 1.35rem;
    color: var(--yq-text);
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.yq-reason-card p[b-gw42b03hr1] {
    font-size: 1rem;
    color: var(--yq-text-mid);
    line-height: 1.6;
    margin: 0;
}

/* 2. PHƯƠNG PHÁP HỌC (ZIGZAG) */
.yq-features-section[b-gw42b03hr1] {
    padding: 5rem 0;
    background: #FFFBEF;
}

.yq-features-container[b-gw42b03hr1] {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 4%;
    box-sizing: border-box;
}

.yq-feature-item[b-gw42b03hr1] {
    display: flex;
    align-items: center;
    gap: 4rem;
}

    .yq-feature-item.yq-feature-reverse[b-gw42b03hr1] {
        flex-direction: row-reverse;
    }

.yq-feature-icon[b-gw42b03hr1] {
    flex: 0 0 350px;
    display: flex;
    justify-content: center;
}

    .yq-feature-icon img[b-gw42b03hr1] {
        width: 100%;
        object-fit: contain;
    }

.yq-feature-text[b-gw42b03hr1] {
    flex: 1;
}

    .yq-feature-text h3[b-gw42b03hr1] {
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--yq-text);
        margin-bottom: 1rem;
    }

    .yq-feature-text p[b-gw42b03hr1] {
        font-size: 1.1rem;
        color: var(--yq-text-mid);
        line-height: 1.7;
        margin: 0;
    }

/* 3. LỘ TRÌNH HỌC */
.yq-roadmap-section[b-gw42b03hr1] {
    background-color: #FEF6EF;
    padding: 5rem 0;
}

.yq-roadmap-layout[b-gw42b03hr1] {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 5rem;
    align-items: flex-start;
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 4%;
    box-sizing: border-box;
}

.yq-roadmap-left[b-gw42b03hr1] {
    position: sticky;
    top: 120px;
    padding-right: 1.5rem;
}

    .yq-roadmap-left h2[b-gw42b03hr1] {
        font-size: 2.6rem;
        font-weight: 800;
        color: var(--yq-text);
        margin-bottom: 1.5rem;
        line-height: 1.2;
    }

    .yq-roadmap-left p[b-gw42b03hr1] {
        font-size: 1.15rem;
        color: var(--yq-text-mid);
        line-height: 1.7;
        margin-bottom: 2rem;
    }

    .yq-roadmap-left .yq-btn-primary[b-gw42b03hr1] {
        border-radius: 30px;
        padding: 0.8rem 2.5rem;
        background: #B12821;
        color: #ECCDAD;
    }

.yq-roadmap-right[b-gw42b03hr1] {
    position: relative;
    padding-left: 1rem;
}

.yq-timeline[b-gw42b03hr1] {
    position: relative;
}

    .yq-timeline[b-gw42b03hr1]::before {
        content: '';
        position: absolute;
        top: 15px;
        bottom: 15px;
        left: 170px;
        width: 2px;
        background-color: #E2E2E2;
    }

.yq-timeline-item[b-gw42b03hr1] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 3.5rem;
    position: relative;
}

    .yq-timeline-item:last-child[b-gw42b03hr1] {
        margin-bottom: 0;
    }

.yq-timeline-badge-wrap[b-gw42b03hr1] {
    flex: 0 0 150px;
    padding-top: 3px;
    text-align: right;
    padding-right: 20px;
    z-index: 2;
}

.yq-timeline-badge[b-gw42b03hr1] {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--yq-text);
    background: #fff;
    border: 1.5px solid var(--yq-text);
    padding: 0.4rem 1.2rem;
    border-radius: 30px;
    white-space: nowrap;
}

.yq-timeline-dot-wrap[b-gw42b03hr1] {
    position: absolute;
    left: 166px;
    top: 12px;
    z-index: 3;
}

.yq-timeline-dot[b-gw42b03hr1] {
    width: 10px;
    height: 10px;
    background-color: #fff;
    border: 2px solid #C0392B;
    border-radius: 50%;
    box-shadow: 0 0 0 6px #fff;
}

.yq-timeline-content[b-gw42b03hr1] {
    padding-left: 40px;
    flex: 1;
}

    .yq-timeline-content h4[b-gw42b03hr1] {
        font-size: 1.35rem;
        color: var(--yq-text);
        font-weight: 800;
        margin: 0 0 0.5rem 0;
    }

    .yq-timeline-content p[b-gw42b03hr1] {
        font-size: 1.1rem;
        color: var(--yq-text-mid);
        line-height: 1.6;
        margin: 0;
    }

/* ============================================================
   4. HỌC VIÊN NÓI GÌ (Testimonials)
   ============================================================ */
.yq-testimonials-section[b-gw42b03hr1] {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: #FFFBEF;
}

    .yq-testimonials-section .yq-section-title[b-gw42b03hr1] {
        color: black;
    }

        .yq-testimonials-section .yq-section-title .yq-highlight[b-gw42b03hr1] {
            color: #B12821;
        }

.yq-carousel-wrapper[b-gw42b03hr1] {
    position: relative;
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 4%;
    box-sizing: border-box;
}

.yq-testimonials-grid[b-gw42b03hr1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
}

.yq-testimonial-card[b-gw42b03hr1] {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.5rem 2.5rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: fit-content;
}

    .yq-testimonial-card:hover[b-gw42b03hr1] {
        box-shadow: none !important;
        transform: none !important;
    }

.yq-quote-icon[b-gw42b03hr1] {
    width: 36px;
    height: auto;
    margin-bottom: 0.5rem;
    object-fit: contain;
}

.yq-stars[b-gw42b03hr1] {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.yq-quote[b-gw42b03hr1] {
    font-size: 1.05rem;
    color: var(--yq-text-mid);
    line-height: 1.7;
    font-style: normal;
    margin-bottom: 1rem;
    flex-grow: 0;
}

.yq-reviewer[b-gw42b03hr1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: none;
    padding-top: 0rem;
}

    .yq-reviewer img[b-gw42b03hr1] {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
    }

.yq-reviewer-info[b-gw42b03hr1] {
    display: flex;
    flex-direction: column;
}

    .yq-reviewer-info strong[b-gw42b03hr1] {
        font-size: 1.1rem;
        color: var(--yq-text);
        font-weight: 700;
    }

    .yq-reviewer-info span[b-gw42b03hr1] {
        font-size: 0.9rem;
        color: var(--yq-text-mid);
    }

/* Nút Slider - chỉnh sang vị trí 2 bên lề padding */
.yq-carousel-btn[b-gw42b03hr1] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1.5px solid #ccc;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1rem;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.2s ease;
}

    .yq-carousel-btn:hover[b-gw42b03hr1] {
        background: var(--yq-red);
        color: #fff;
        border-color: var(--yq-red);
    }

.yq-carousel-btn--prev[b-gw42b03hr1] {
    left: 1%;
}

.yq-carousel-btn--next[b-gw42b03hr1] {
    right: 1%;
}

/* ============================================================
   5. CÁC KHÓA HỌC (Courses)
   ============================================================ */
.yq-similar-courses-section[b-gw42b03hr1] {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: #FEF6EF;
}

    .yq-similar-courses-section .yq-section-title[b-gw42b03hr1] {
        color: black;
    }

.yq-highlight[b-gw42b03hr1] {
    color: #B12821;
}

/* Container dùng chung từ shared-components */

.yq-course-card[b-gw42b03hr1] {
    background: #fff;
    border: 1px solid var(--yq-border);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .yq-course-card:hover[b-gw42b03hr1] {
        box-shadow: 0 12px 35px rgba(192, 57, 43, 0.1);
        transform: translateY(-5px);
    }

.yq-course-img[b-gw42b03hr1] {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
}

.yq-course-content[b-gw42b03hr1] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

    .yq-course-content h3[b-gw42b03hr1] {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--yq-text);
        margin-bottom: 0.8rem;
    }

    .yq-course-content p[b-gw42b03hr1] {
        font-size: 1.05rem;
        color: var(--yq-text-mid);
        line-height: 1.6;
        margin-bottom: 1.5rem;
        flex-grow: 1;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.yq-course-actions[b-gw42b03hr1] {
    display: flex;
    gap: 1rem;
    margin-top: auto;
}

    .yq-course-actions a[b-gw42b03hr1] {
        flex: 1;
        text-align: center;
        padding: 0.6rem 0;
        border-radius: 30px;
        font-weight: 600;
        font-size: 0.95rem;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .yq-course-actions .yq-btn-outline[b-gw42b03hr1] {
        border: 1.5px solid #D48847;
        color: #D48847;
        background-color: transparent;
    }

        .yq-course-actions .yq-btn-outline:hover[b-gw42b03hr1] {
            background-color: #D48847;
            color: #fff;
        }

    .yq-course-actions .yq-btn-primary[b-gw42b03hr1] {
        background-color: #922216;
        color: #fff;
        border: 1.5px solid #922216;
    }

        .yq-course-actions .yq-btn-primary:hover[b-gw42b03hr1] {
            background-color: #b02a1b;
        }

/* RESPONSIVE */
/* ============================================================
   MÀN HÌNH LỚN ULTRAWIDE (>= 1921px) 2k = 2560*1440
   ============================================================ */
@media (min-width: 1921px) {
    /* Đổi max-width sang 85% để bung siêu rộng giống trang chủ */
    .yq-reasons-grid[b-gw42b03hr1],
    .yq-features-container[b-gw42b03hr1],
    .yq-roadmap-layout[b-gw42b03hr1],
    .yq-carousel-wrapper[b-gw42b03hr1] {
        max-width: 85%;
        padding-left: 0;
        padding-right: 0;
    }

    .yq-reasons-grid[b-gw42b03hr1] {
        gap: 5rem;
    }

    .yq-reason-card[b-gw42b03hr1] {
        padding: 3rem 5rem;
    }

    .yq-reason-icon[b-gw42b03hr1] {
        width: 85px;
        height: 85px;
        margin-bottom: 2rem;
    }

    .yq-reason-card h4[b-gw42b03hr1] {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .yq-reason-card p[b-gw42b03hr1] {
        font-size: 1.15rem;
        line-height: 1.7;
    }

    .yq-features-container[b-gw42b03hr1] {
        gap: 8rem;
    }

    .yq-feature-icon[b-gw42b03hr1] {
        flex: 0 0 500px;
    }

    .yq-feature-text h3[b-gw42b03hr1] {
        font-size: 2rem;
    }

    .yq-feature-text p[b-gw42b03hr1] {
        font-size: 1.25rem;
        line-height: 1.8;
    }

    .yq-roadmap-layout[b-gw42b03hr1] {
        gap: 8rem;
    }

    .yq-testimonials-grid[b-gw42b03hr1] {
        gap: 5rem;
    }

    .yq-testimonial-quote[b-gw42b03hr1] {
        font-size: 1.15rem;
    }

    .yq-course-content h3[b-gw42b03hr1] {
        font-size: 1.6rem;
        margin-bottom: 1.2rem;
    }

    .yq-course-content p[b-gw42b03hr1] {
        font-size: 1.15rem;
        line-height: 1.7;
    }

    .yq-course-actions a[b-gw42b03hr1] {
        font-size: 1.1rem;
        padding: 0.8rem 0;
    }
}

/* ============================================================
   MÀN HÌNH TABLET TIÊU CHUẨN (<= 1024px) 
   ============================================================ */
@media (max-width: 1024px) {
    .yq-roadmap-layout[b-gw42b03hr1] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .yq-roadmap-left[b-gw42b03hr1] {
        text-align: center;
        position: static;
    }
}

/* ============================================================
   MÀN HÌNH MOBILE (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Trả lề về mặc định mobile */
    .yq-reasons-grid[b-gw42b03hr1],
    .yq-features-container[b-gw42b03hr1],
    .yq-roadmap-layout[b-gw42b03hr1],
    .yq-carousel-wrapper[b-gw42b03hr1] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* 1. Vì Sao Bạn Nên Học */
    .yq-reasons-grid[b-gw42b03hr1] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .yq-reason-card[b-gw42b03hr1] {
        padding: 1.5rem;
    }

    .yq-reason-icon[b-gw42b03hr1] {
        width: 55px;
        height: 55px;
        margin-bottom: 1rem;
    }

    .yq-reason-card h4[b-gw42b03hr1] {
        font-size: 1.2rem;
    }

    /* 2. Phương Pháp Học (Zigzag) */
    .yq-features-container[b-gw42b03hr1] {
        gap: 3rem;
    }

    .yq-feature-item[b-gw42b03hr1],
    .yq-feature-item.yq-feature-reverse[b-gw42b03hr1] {
        flex-direction: column !important;
        text-align: center;
        gap: 1rem;
    }

    .yq-feature-icon[b-gw42b03hr1] {
        flex: 0 0 auto;
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }

    .yq-feature-text h3[b-gw42b03hr1] {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }

    .yq-feature-text p[b-gw42b03hr1] {
        font-size: 1rem;
    }

    /* 3. Lộ Trình Học (Roadmap) */
    .yq-roadmap-layout[b-gw42b03hr1] {
        gap: 1.5rem;
    }

    .yq-roadmap-left[b-gw42b03hr1] {
        display: contents; /* Phá vỡ lớp bọc để sắp xếp lại thứ tự các phần tử con */
    }

        .yq-roadmap-left h2[b-gw42b03hr1] {
            font-size: 1.8rem;
            text-align: center;
            order: 1; /* Tiêu đề lên vị trí số 1 */
            margin-bottom: 0;
        }

        .yq-roadmap-left p[b-gw42b03hr1] {
            font-size: 1rem;
            text-align: center;
            margin-bottom: 1rem;
            order: 2; /* Đoạn mô tả ở vị trí số 2 */
        }

    .yq-roadmap-right[b-gw42b03hr1] {
        order: 3; /* Trục thời gian (Timeline) ở vị trí số 3 */
    }

    .yq-roadmap-left .yq-btn-primary[b-gw42b03hr1] {
        display: block;
        width: 100%;
        box-sizing: border-box;
        order: 4; /* Ép nút đăng ký nằm dưới cùng */
        margin-top: 1rem;
        text-align: center;
    }

    /* Trục thời gian: Giữ cấu trúc hàng ngang (Trái - Giữa - Phải) */
    .yq-timeline[b-gw42b03hr1]::before {
        left: 95px; /* Dịch trục kẻ dọc sang mốc 95px */
    }

    .yq-timeline-item[b-gw42b03hr1] {
        flex-direction: row;
        align-items: flex-start;
        margin-bottom: 2rem;
    }

    .yq-timeline-badge-wrap[b-gw42b03hr1] {
        flex: 0 0 90px; /* Khóa cứng chiều rộng của Badge bên trái */
        padding: 0;
        text-align: right;
        margin-bottom: 0;
    }

    .yq-timeline-badge[b-gw42b03hr1] {
        font-size: 0.75rem; /* Thu nhỏ chữ */
        padding: 0.1rem 0.3rem;
        white-space: normal; /* Cho phép rớt dòng nếu chữ quá dài */
    }

    .yq-timeline-dot-wrap[b-gw42b03hr1] {
        left: 89px; /* Căn giữa dấu chấm đỏ lên trục 95px */
        top: 5px;
    }

    .yq-timeline-content[b-gw42b03hr1] {
        padding-left: 15px;
    }

        .yq-timeline-content h4[b-gw42b03hr1] {
            font-size: 1.1rem;
            margin-bottom: 0.3rem;
        }

        .yq-timeline-content p[b-gw42b03hr1] {
            font-size: 0.95rem;
        }

    /* 4 & 5. Vuốt Ngang (Horizontal Scroll) cho Đánh Giá và Khóa Học */
    .yq-carousel-wrapper[b-gw42b03hr1] {
        margin: 0 -1rem; /* Kéo khung tràn sát ra hai mép màn hình điện thoại */
        width: auto;
    }

    .yq-carousel-btn[b-gw42b03hr1] {
        display: none; /* Ẩn nút mũi tên bấm vì đã có thể vuốt bằng tay */
    }

    .yq-testimonials-grid[b-gw42b03hr1],
    .yq-courses-grid[b-gw42b03hr1] {
        display: flex !important; /* Ghi đè cấu trúc Grid tĩnh */
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding: 0 1rem 1.5rem 1rem; /* Chừa lề an toàn ở 2 đầu */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .yq-testimonials-grid[b-gw42b03hr1]::-webkit-scrollbar,
        .yq-courses-grid[b-gw42b03hr1]::-webkit-scrollbar {
            display: none;
        }

    .yq-testimonial-card[b-gw42b03hr1],
    .yq-course-card[b-gw42b03hr1] {
        flex: 0 0 85%; /* Mỗi thẻ chiếm 85% chiều rộng, lộ ra 15% của thẻ tiếp theo */
        scroll-snap-align: start; /* Khóa vị trí nam châm khi vuốt */
    }

    .yq-testimonial-card[b-gw42b03hr1] {
        padding: 1.2rem;
    }

    .yq-course-content[b-gw42b03hr1] {
        padding: 1.2rem;
    }

        .yq-course-content h3[b-gw42b03hr1] {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }

        .yq-course-content p[b-gw42b03hr1] {
            font-size: 0.95rem;
            margin-bottom: 1rem;
        }

    .yq-course-actions a[b-gw42b03hr1] {
        padding: 0.6rem 0;
        font-size: 0.9rem;
    }
}
/* _content/PteApac.Web/Components/Pages/Home.razor.rz.scp.css */
/* ============================================================
   Home.razor.css
   Responsive: Mobile (<=768px), Desktop (<=1920px), Ultrawide (>=1921px)
   ============================================================ */

/* ── 1. ĐỒNG BỘ HÓA KHUNG CHỨA (CONTAINER) CHO DESKTOP (<= 1920px) ── */
/* Mở rộng max-width lên 1536px giúp màn 1920px hiển thị không bị bó hẹp ở giữa */
.yq-dacquyen-grid[b-bx9cl4jwch],
.yq-courses-section .yq-courses-grid[b-bx9cl4jwch],
.yq-twocol[b-bx9cl4jwch],
.yq-teachers-wrapper[b-bx9cl4jwch],
.yq-partners-grid[b-bx9cl4jwch],
.yq-facilities-grid[b-bx9cl4jwch],
.yq-press-grid[b-bx9cl4jwch] {
    width: 100%;
    /*max-width: 1536px;*/
    max-width: 85%;
    margin: 0 auto;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}

.yq-taisao-infographic[b-bx9cl4jwch],
.yq-taisao-desc[b-bx9cl4jwch],
.yq-partners-desc[b-bx9cl4jwch],
.yq-facilities-desc[b-bx9cl4jwch] {
    padding: 0 4%;
    /*max-width: 1100px;*/
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
}

/* ── 2. ĐẶC QUYỀN ── */
.yq-dacquyen-section[b-bx9cl4jwch] {
    background: #fff;
}

.yq-dacquyen-grid[b-bx9cl4jwch] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    align-items: start;
}

.yq-dacquyen-item[b-bx9cl4jwch] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    gap: 1rem;
}

.yq-dq-icon[b-bx9cl4jwch] {
    font-size: 2.5rem;
    background: var(--yq-cream);
    border-radius: 50%;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--yq-border);
}

    .yq-dq-icon img[b-bx9cl4jwch] {
        max-width: 60%;
        max-height: 60%;
        object-fit: contain;
    }

.yq-dacquyen-item p[b-bx9cl4jwch] {
    font-size: 1.1rem;
    color: var(--yq-text-mid);
    line-height: 1.5;
    margin: 0;
}

/* ── 3. CHƯƠNG TRÌNH HỌC ── */
.yq-courses-section[b-bx9cl4jwch] {
    background: #FFFBEF;
}

    /* Ghi đè 3 cột ở file shared-components.css thành 2 cột cho riêng trang chủ */
    .yq-courses-section .yq-courses-grid[b-bx9cl4jwch] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }

/* ── 4 & 5. DU HỌC & TRẠI HÈ ── */
.yq-duhoc-section[b-bx9cl4jwch] {
    background: #fff;
}

.yq-traihe-section[b-bx9cl4jwch] {
    background: var(--yq-cream);
}

.yq-twocol[b-bx9cl4jwch] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.yq-twocol--reverse[b-bx9cl4jwch] {
    direction: rtl;
}

    .yq-twocol--reverse > *[b-bx9cl4jwch] {
        direction: ltr;
    }

.yq-twocol-img img[b-bx9cl4jwch] {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    max-height: 480px;
    box-shadow: var(--yq-shadow);
}

.yq-twocol-text p[b-bx9cl4jwch] {
    font-size: 1.15rem;
    color: var(--yq-text-mid);
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

/* ── 6. GƯƠNG MẶT XUẤT SẮC (GIẢNG VIÊN/HỌC VIÊN) ── */
.yq-teachers-section[b-bx9cl4jwch] {
    background: #fff;
}

.yq-teachers-wrapper[b-bx9cl4jwch] {
    position: relative;
}

.yq-teachers-grid[b-bx9cl4jwch] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.yq-teacher-card[b-bx9cl4jwch] {
    text-align: center;
    background: #fff;
    border: 1px solid var(--yq-border);
    border-radius: 20px;
    padding: 0 0 1.5rem 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .yq-teacher-card:hover[b-bx9cl4jwch] {
        box-shadow: 0 15px 35px rgba(192, 57, 43, 0.12);
        transform: translateY(-5px);
        border-color: var(--yq-red);
    }

.yq-teacher-photo[b-bx9cl4jwch] {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto 1.25rem 0;
    border-radius: 0;
    overflow: hidden;
    border: 3px solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .yq-teacher-photo img[b-bx9cl4jwch] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        transition: transform 0.4s ease;
    }

.yq-teacher-card:hover .yq-teacher-photo[b-bx9cl4jwch] {
    border-radius: 50%;
    transform: scale(0.85);
    border-color: var(--yq-red);
}

    .yq-teacher-card:hover .yq-teacher-photo img[b-bx9cl4jwch] {
        transform: scale(1.15);
    }

.yq-teacher-card h3[b-bx9cl4jwch] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0D0C07;
    margin: 0 1rem 0.5rem 1rem;
    transition: color 0.3s ease;
}

.yq-teacher-card:hover h3[b-bx9cl4jwch] {
    color: var(--yq-red);
}

.yq-teacher-card p[b-bx9cl4jwch] {
    font-size: 1.05rem;
    color: var(--yq-text-mid);
    line-height: 1.6;
    margin: 0 1.5rem;
}

/* Ẩn nút mũi tên ở màn hình PC */
.yq-teachers-carousel-nav[b-bx9cl4jwch] {
    display: none;
}

/* ── 7. TẠI SAO CHỌN ── */
.yq-taisao-section[b-bx9cl4jwch] {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.yq-taisao-infographic[b-bx9cl4jwch] {
    text-align: center;
    margin-bottom: 1.5rem;
}

    .yq-taisao-infographic img[b-bx9cl4jwch] {
        width: 100%;
        border-radius: 16px;
    }

.yq-taisao-desc[b-bx9cl4jwch] {
    text-align: center;
    font-size: 1.15rem;
    color: var(--yq-text-mid);
    line-height: 1.8;
}

/* ── 8. ĐỐI TÁC ── */
.yq-partners-section[b-bx9cl4jwch] {
    background: #fff;
}

.yq-partners-desc[b-bx9cl4jwch] {
    text-align: center;
    margin-top: -1rem;
    margin-bottom: 2.5rem;
    font-size: 1.15rem;
    color: var(--yq-text-mid);
    line-height: 1.7;
}

.yq-partners-grid[b-bx9cl4jwch] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    align-items: stretch;
}

.yq-partner-card[b-bx9cl4jwch] {
    background: #fff;
    border: 1.5px solid var(--yq-border);
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .yq-partner-card:hover[b-bx9cl4jwch] {
        box-shadow: 0 15px 35px rgba(192, 57, 43, 0.12);
        transform: translateY(-5px);
        border-color: var(--yq-red);
    }

.yq-partner-logo[b-bx9cl4jwch] {
    width: 150px;
    height: 70px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .yq-partner-logo img[b-bx9cl4jwch] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.yq-partner-desc[b-bx9cl4jwch] {
    font-size: 1.05rem;
    color: var(--yq-text-mid);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.yq-partners-grid .yq-partner-card:nth-child(1) .yq-partner-features[b-bx9cl4jwch] {
    background-color: #FFEEF8;
}

.yq-partners-grid .yq-partner-card:nth-child(2) .yq-partner-features[b-bx9cl4jwch] {
    background-color: #FEEEFF;
}

.yq-partners-grid .yq-partner-card:nth-child(3) .yq-partner-features[b-bx9cl4jwch] {
    background-color: #FFEAEB;
}

.yq-partner-features[b-bx9cl4jwch] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-radius: 8px;
    padding: 1rem;
    text-align: left;
    margin-top: auto;
}

.yq-feature-icon-wrapper[b-bx9cl4jwch] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

    .yq-feature-icon-wrapper img[b-bx9cl4jwch] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.yq-feature-text-list[b-bx9cl4jwch] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

    .yq-feature-text-list span[b-bx9cl4jwch] {
        font-size: 1rem;
        color: var(--yq-text-mid);
        line-height: 1.3;
    }

/* ── 9. KHÔNG GIAN HỌC TẬP ── */
.yq-facilities-section[b-bx9cl4jwch] {
    background: var(--yq-cream);
    text-align: center;
}

.yq-facilities-subtitle[b-bx9cl4jwch] {
    text-align: center;
    color: var(--yq-red);
    font-size: 1.4rem;
    font-weight: 700;
    margin: -1.5rem 0 0.5rem;
    letter-spacing: 0.5px;
}

.yq-facilities-desc[b-bx9cl4jwch] {
    margin-bottom: 2.5rem;
    font-size: 1.1rem;
    color: var(--yq-text-mid);
    line-height: 1.7;
}

.yq-facilities-grid[b-bx9cl4jwch] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
}

.yq-facility-item[b-bx9cl4jwch] {
    grid-column: span 2; /* 3 ảnh ở hàng dưới (6/2 = 3) */
    background: #FFFBEF;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    transition: box-shadow 0.2s ease;
    text-align: left;
}

    /* Ép 2 ảnh đầu tiên (hoặc có class wide) chiếm 3 cột -> 2 ảnh ở hàng trên */
    .yq-facility-item:nth-child(1)[b-bx9cl4jwch],
    .yq-facility-item:nth-child(2)[b-bx9cl4jwch],
    .yq-facility-item.yq-facility-item--wide[b-bx9cl4jwch] {
        grid-column: span 3;
    }

    .yq-facility-item:hover[b-bx9cl4jwch] {
        box-shadow: var(--yq-shadow);
    }

    .yq-facility-item img[b-bx9cl4jwch] {
        width: 100%;
        height: 240px; /* Chiều cao cho 3 ảnh nhỏ hàng dưới */
        object-fit: cover;
        display: block;
    }

    /* Tăng chiều cao cho 2 ảnh lớn hàng trên */
    .yq-facility-item:nth-child(1) img[b-bx9cl4jwch],
    .yq-facility-item:nth-child(2) img[b-bx9cl4jwch],
    .yq-facility-item.yq-facility-item--wide img[b-bx9cl4jwch] {
        height: 340px;
    }

.yq-facility-caption[b-bx9cl4jwch] {
    padding: 1.2rem 1.5rem;
    text-align: center;
}

    .yq-facility-caption h4[b-bx9cl4jwch] {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--yq-text);
        margin-bottom: 0.4rem;
        letter-spacing: 0.5px;
    }

    .yq-facility-caption p[b-bx9cl4jwch] {
        font-size: 1.05rem;
        color: var(--yq-text-mid);
        line-height: 1.5;
        margin: 0;
    }

/* ── 11. TRUYỀN THÔNG BÁO CHÍ ── */
.yq-press-section[b-bx9cl4jwch] {
    background: var(--yq-cream);
}

.yq-press-grid[b-bx9cl4jwch] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.yq-press-card[b-bx9cl4jwch] {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid var(--yq-border);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
}

    .yq-press-card:hover[b-bx9cl4jwch] {
        box-shadow: var(--yq-shadow);
    }

.yq-press-img[b-bx9cl4jwch] {
    height: 180px;
    background: linear-gradient(135deg, var(--yq-cream-2) 0%, var(--yq-cream) 100%);
    overflow: hidden;
}

    .yq-press-img img[b-bx9cl4jwch] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.yq-press-logo-img[b-bx9cl4jwch] {
    padding: 1rem 1.2rem 0.5rem;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    .yq-press-logo-img img[b-bx9cl4jwch] {
        max-height: 100%;
        max-width: 130px;
        object-fit: contain;
    }

.yq-press-card h4[b-bx9cl4jwch] {
    font-size: 1.15rem;
    font-weight: 700;
    padding: 0 1.2rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    color: var(--yq-text);
}

.yq-press-card > p[b-bx9cl4jwch] {
    font-size: 1rem;
    color: var(--yq-text-mid);
    padding: 0 1.2rem;
    line-height: 1.6;
    flex: 1;
}

.yq-btn-press[b-bx9cl4jwch] {
    display: block;
    margin: 1rem 1.2rem 1.2rem;
    border: 1.5px solid var(--yq-yellow);
    background: rgba(245, 215, 110, 0.15);
    color: var(--yq-text);
    border-radius: 8px;
    padding: 0.5rem;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.2s ease;
}

    .yq-btn-press:hover[b-bx9cl4jwch] {
        background: var(--yq-yellow);
    }

.yq-press-cta[b-bx9cl4jwch] {
    text-align: center;
}


/* ============================================================
   RESPONSIVE MOBILE (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Trả padding về mặc định cho mobile */
    .yq-dacquyen-grid[b-bx9cl4jwch],
    .yq-courses-section .yq-courses-grid[b-bx9cl4jwch],
    .yq-twocol[b-bx9cl4jwch],
    .yq-teachers-wrapper[b-bx9cl4jwch],
    .yq-partners-grid[b-bx9cl4jwch],
    .yq-facilities-grid[b-bx9cl4jwch],
    .yq-press-grid[b-bx9cl4jwch] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* ĐẶC QUYỀN */
    .yq-dacquyen-grid[b-bx9cl4jwch] {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 1rem;
    }

    .yq-dacquyen-item:nth-child(1)[b-bx9cl4jwch],
    .yq-dacquyen-item:nth-child(2)[b-bx9cl4jwch] {
        grid-column: span 3;
    }

    .yq-dacquyen-item:nth-child(3)[b-bx9cl4jwch],
    .yq-dacquyen-item:nth-child(4)[b-bx9cl4jwch],
    .yq-dacquyen-item:nth-child(5)[b-bx9cl4jwch] {
        grid-column: span 2;
    }

    .yq-dacquyen-grid .yq-dq-icon[b-bx9cl4jwch] {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
    }

    .yq-dacquyen-grid .yq-dacquyen-item p[b-bx9cl4jwch] {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    /* CHƯƠNG TRÌNH HỌC */
    .yq-courses-section .yq-courses-grid[b-bx9cl4jwch] {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }

    .yq-course-card[b-bx9cl4jwch] {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        gap: 1rem;
        background: #FFFBEF;
        border-radius: 16px;
        padding: 1.2rem;
        border: 1px solid var(--yq-border);
    }

    .yq-course-info[b-bx9cl4jwch] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .yq-course-title[b-bx9cl4jwch] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .yq-title-icon-wrapper[b-bx9cl4jwch] {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .yq-title-icon-wrapper img[b-bx9cl4jwch] {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

    .yq-course-title h3[b-bx9cl4jwch] {
        font-size: 1.1rem;
        font-weight: 700;
        margin: 0;
        line-height: 1.3;
    }

    .yq-course-info p[b-bx9cl4jwch] {
        font-size: 0.85rem;
        line-height: 1.45;
        margin: 0;
    }

    .yq-course-visual[b-bx9cl4jwch] {
        flex: 0 0 110px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
    }

    .yq-course-img[b-bx9cl4jwch] {
        width: 110px;
        height: 110px;
        border-radius: 12px;
        overflow: hidden;
    }

        .yq-course-img img[b-bx9cl4jwch] {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .yq-btn-course[b-bx9cl4jwch] {
        display: inline-block;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        background: #FDF4F5;
        color: var(--yq-red);
        font-size: 0.8rem;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        border: 1px solid rgba(192, 57, 43, 0.2);
        width: 100%;
    }

    /* DU HỌC & TRẠI HÈ */
    .yq-twocol[b-bx9cl4jwch] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .yq-twocol--reverse[b-bx9cl4jwch] {
        display: flex !important;
        flex-direction: column;
        gap: 1.5rem;
    }

        .yq-twocol--reverse .yq-twocol-img[b-bx9cl4jwch] {
            order: 1;
            width: 100%;
        }

        .yq-twocol--reverse .yq-twocol-text[b-bx9cl4jwch] {
            order: 2;
        }

    /* ĐỐI TÁC, KHÔNG GIAN HỌC TẬP */
    .yq-partners-grid[b-bx9cl4jwch],
    .yq-facilities-grid[b-bx9cl4jwch] {
        grid-template-columns: 1fr;
    }

    .yq-facility-item img[b-bx9cl4jwch] {
        height: 200px;
    }

    .yq-facility-caption[b-bx9cl4jwch] {
        padding: 1rem;
    }

    /* GIẢNG VIÊN & TRUYỀN THÔNG (Vuốt ngang) */
    .yq-teachers-grid[b-bx9cl4jwch],
    .yq-press-grid[b-bx9cl4jwch] {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 1rem;
        gap: 1.2rem;
        margin: 0 -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

        .yq-teachers-grid[b-bx9cl4jwch]::-webkit-scrollbar,
        .yq-press-grid[b-bx9cl4jwch]::-webkit-scrollbar {
            display: none;
        }

    .yq-teacher-card[b-bx9cl4jwch],
    .yq-press-card[b-bx9cl4jwch] {
        flex: 0 0 85%;
        scroll-snap-align: center;
        height: auto;
    }

    .yq-teachers-carousel-nav[b-bx9cl4jwch] {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 0.5rem;
    }

        .yq-teachers-carousel-nav button[b-bx9cl4jwch] {
            background-color: transparent;
            border: 1.5px solid var(--yq-red);
            color: var(--yq-red);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
        }
}

/* ============================================================
   RESPONSIVE ULTRAWIDE PC (>= 1921px)
   ============================================================ */
@media (min-width: 1921px) {
    /* Đổi max-width sang dạng % để bung theo tỷ lệ siêu rộng */
    .yq-dacquyen-grid[b-bx9cl4jwch],
    .yq-courses-section .yq-courses-grid[b-bx9cl4jwch],
    .yq-twocol[b-bx9cl4jwch],
    .yq-teachers-wrapper[b-bx9cl4jwch],
    .yq-partners-grid[b-bx9cl4jwch],
    .yq-facilities-grid[b-bx9cl4jwch],
    .yq-press-grid[b-bx9cl4jwch] {
        max-width: 85%;
        padding-left: 0;
        padding-right: 0;
    }

    .yq-dacquyen-grid[b-bx9cl4jwch] {
        gap: 3rem;
    }

    .yq-dq-icon[b-bx9cl4jwch] {
        width: 110px;
        height: 110px;
    }

    .yq-dacquyen-item p[b-bx9cl4jwch] {
        font-size: 1.2rem;
    }

    .yq-courses-section .yq-courses-grid[b-bx9cl4jwch] {
        gap: 3.5rem;
    }

    .yq-twocol[b-bx9cl4jwch] {
        gap: 6rem;
    }

    .yq-twocol-img img[b-bx9cl4jwch] {
        max-height: 650px;
    }

    .yq-twocol-text p[b-bx9cl4jwch] {
        font-size: 1.3rem;
        line-height: 1.9;
    }

    .yq-teachers-grid[b-bx9cl4jwch] {
        gap: 4rem;
    }

    .yq-teacher-card h3[b-bx9cl4jwch] {
        font-size: 1.6rem;
    }

    .yq-teacher-card p[b-bx9cl4jwch] {
        font-size: 1.2rem;
    }

    .yq-taisao-infographic[b-bx9cl4jwch] {
        max-width: 80%;
    }

    .yq-taisao-desc[b-bx9cl4jwch] {
        max-width: 75%;
        font-size: 1.3rem;
    }

    .yq-partners-grid[b-bx9cl4jwch] {
        gap: 3.5rem;
    }

    .yq-partner-card[b-bx9cl4jwch] {
        padding: 3rem;
    }

    .yq-partner-desc[b-bx9cl4jwch] {
        font-size: 1.2rem;
    }

    .yq-feature-text-list span[b-bx9cl4jwch] {
        font-size: 1.15rem;
    }

    .yq-facilities-grid[b-bx9cl4jwch] {
        gap: 3rem;
    }

    .yq-facility-item img[b-bx9cl4jwch] {
        height: 450px;
    }

    .yq-facility-caption h4[b-bx9cl4jwch] {
        font-size: 1.4rem;
    }

    .yq-facility-caption p[b-bx9cl4jwch] {
        font-size: 1.15rem;
    }

    .yq-press-card h4[b-bx9cl4jwch] {
        font-size: 1.3rem;
    }

    .yq-press-card > p[b-bx9cl4jwch] {
        font-size: 1.15rem;
    }
}
/* _content/PteApac.Web/Components/Pages/News.razor.rz.scp.css */
/* =======================================================
   News.razor.css
   Responsive: Mobile (<=768px), Desktop (<=1920px), Ultrawide (>=1921px)
   ======================================================= */

/* --- WRAPPER CHÍNH --- */
.yq-full-bleed[b-8h7kmotxac] {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #FDF9F4; /* Màu nền kem be nhạt bao phủ toàn trang */
    background-image: url('/images/yueaixue/bg-landscape-contact.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    overflow-x: hidden;
}

/* --- TRANG TRÍ NỀN (BACKGROUND DECOR) --- */
.yq-hero-glow[b-8h7kmotxac] {
    position: absolute;
    top: -80px;
    left: 15%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(250, 195, 185, 0.7) 0%, rgba(253, 249, 244, 0) 65%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.yq-bg-decor-left[b-8h7kmotxac],
.yq-bg-decor-right[b-8h7kmotxac] {
    display: none !important;
}

/* --- KHUNG CHỨA NỘI DUNG CHUNG --- */
.yq-news-container[b-8h7kmotxac] {
    width: 100%;
    max-width: 1536px; /* Chuẩn mới cho màn hình <=1920px */
    margin: 0 auto;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.yq-hero-padding[b-8h7kmotxac] {
    padding: 5rem 0 4rem 0;
    text-align: center;
    max-width: 900px; /* Khống chế độ rộng của block chữ trên desktop */
    margin: 0 auto;
}

.yq-hero-title[b-8h7kmotxac] {
    font-size: 2.8rem;
    font-weight: 800;
    color: #2C1A0E;
    margin-bottom: 1.2rem;
}

.yq-hero-desc[b-8h7kmotxac] {
    font-size: 1.15rem;
    color: #5A473D;
    line-height: 1.8;
    margin: 0;
}

.yq-group-margin[b-8h7kmotxac] {
    margin-bottom: 4.5rem;
}

.yq-group-header[b-8h7kmotxac] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

    .yq-group-header h2[b-8h7kmotxac] {
        font-size: 1.8rem;
        font-weight: 800;
        color: #2C1A0E;
        margin: 0;
    }

.yq-mock-btn-more[b-8h7kmotxac] {
    background-color: #A92D23;
    color: #fff;
    padding: 0.5rem 1.6rem;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: background-color 0.2s, transform 0.2s;
}

    .yq-mock-btn-more:hover[b-8h7kmotxac] {
        background-color: #8a231b;
        color: #fff;
        transform: scale(1.05);
    }

/* LƯỚI CARD BÀI VIẾT */
.yq-custom-grid-row[b-8h7kmotxac] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2.5rem; /* Tăng khoảng cách card cho màn PC */
}

.yq-mock-card[b-8h7kmotxac] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background-color: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

    .yq-mock-card:hover[b-8h7kmotxac] {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    }

.yq-card-content[b-8h7kmotxac] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    padding: 1.8rem;
}

    .yq-card-content h3[b-8h7kmotxac] {
        font-size: 1.15rem;
        font-weight: 700;
        color: #2C1A0E;
        line-height: 1.6;
        margin: 0;
    }

/* =======================================================
   RESPONSIVE MÀN HÌNH SIÊU RỘNG (>= 1921px)
   ======================================================= */
@media (min-width: 1921px) {
    .yq-news-container[b-8h7kmotxac] {
        max-width: 85% !important; /* Dùng tỷ lệ % để bung vô cực giống Home */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .yq-custom-grid-row[b-8h7kmotxac] {
        gap: 3.5rem !important;
    }

    .yq-hero-glow[b-8h7kmotxac] {
        width: 1000px;
        height: 1000px;
        top: -150px;
    }

    .yq-hero-padding[b-8h7kmotxac] {
        max-width: 1100px; /* Nới rộng text hero thêm 1 chút */
    }

    .yq-hero-title[b-8h7kmotxac] {
        font-size: 3.5rem;
    }

    .yq-hero-desc[b-8h7kmotxac] {
        font-size: 1.3rem;
    }

    .yq-group-header h2[b-8h7kmotxac] {
        font-size: 2.2rem;
    }

    .yq-card-content[b-8h7kmotxac] {
        padding: 2.5rem 2rem;
    }

        .yq-card-content h3[b-8h7kmotxac] {
            font-size: 1.3rem;
            line-height: 1.7;
        }

    .yq-mock-btn-more[b-8h7kmotxac] {
        padding: 0.6rem 2rem;
        font-size: 1.1rem;
    }
}

/* =======================================================
   RESPONSIVE MOBILE (<= 768px)
   ======================================================= */
@media (max-width: 768px) {
    .yq-full-bleed[b-8h7kmotxac] {
        background-position: center top;
    }

    .yq-news-container[b-8h7kmotxac] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* 1. Thu gọn Hero Section */
    .yq-hero-title[b-8h7kmotxac] {
        font-size: 1.6rem;
        margin-bottom: 0.6rem;
        line-height: 1.3;
    }

    .yq-hero-desc[b-8h7kmotxac] {
        font-size: 0.85rem;
        line-height: 1.5;
        text-align: justify;
        text-align-last: center;
    }

    .yq-hero-padding[b-8h7kmotxac] {
        padding: 2rem 0 1.5rem 0;
    }

    /* 2. Khoảng cách giữa các danh mục */
    .yq-group-margin[b-8h7kmotxac] {
        margin-bottom: 2rem;
    }

    .yq-group-header[b-8h7kmotxac] {
        margin-bottom: 0.8rem;
    }

        .yq-group-header h2[b-8h7kmotxac] {
            font-size: 1.25rem;
        }

    .yq-mock-btn-more[b-8h7kmotxac] {
        padding: 0.3rem 0.9rem;
        font-size: 0.75rem;
    }

    /* 3. Chỉnh vệt sáng hồng */
    .yq-hero-glow[b-8h7kmotxac] {
        width: 450px;
        height: 450px;
        top: -100px;
        left: -50px;
    }

    /* 4. SLIDER VUỐT NGANG (CAROUSEL) */
    .yq-custom-grid-row[b-8h7kmotxac] {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 1rem !important;
        padding-bottom: 1.5rem !important;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

        .yq-custom-grid-row[b-8h7kmotxac]::-webkit-scrollbar {
            display: none;
        }

        .yq-custom-grid-row > div[b-8h7kmotxac] {
            flex: 0 0 85% !important; /* Chiếm 85% chiều ngang để lộ một phần của card tiếp theo */
            width: auto !important;
            scroll-snap-align: start !important;
        }

    /* 5. Tinh chỉnh Card */
    .yq-mock-card[b-8h7kmotxac] {
        border-radius: 16px;
    }

    .yq-card-content[b-8h7kmotxac] {
        padding: 1.2rem;
    }

        .yq-card-content h3[b-8h7kmotxac] {
            font-size: 1rem;
            line-height: 1.45;
        }
}
/* _content/PteApac.Web/Components/Shared/CtaEbook.razor.rz.scp.css */
/* ── 12. CTA E-BOOK ── */
.yq-ebook-section[b-4794i93ct4] {
    background: url('/images/yueaixue/bg-landscape.webp') center bottom/cover no-repeat;
    background-color: var(--yq-cream-2);
    padding: 4rem 2rem 0 2rem;
    position: relative;
    overflow: hidden;
}

.yq-ebook-inner[b-4794i93ct4] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 1150px; /* Chỉnh lại max-width */
    margin: 0 auto;
    gap: 3rem;
    padding: 0 1.5rem; /* Thêm dòng này */
}

.yq-ebook-girl[b-4794i93ct4] {
    flex: 1; /* Đặt bằng 1 để chia đều 50% với form */

    margin-bottom: -5px;
    display: flex;
    justify-content: flex-end; /* Căn giữa ảnh nhân vật trong phần không gian 50% của nó */
    align-items: flex-end; /* Đảm bảo ảnh luôn sát đáy */

    padding-right: 1rem;
}

    .yq-ebook-girl img[b-4794i93ct4] {
        width: 100%;
        max-width: 350px; /* max-width cho riêng ảnh để nó không bị phóng quá to trên màn lớn, giữ nguyên tỷ lệ */
        display: block;
        object-fit: contain;
    }

.yq-ebook-form-box[b-4794i93ct4] {
    flex: 1;
    background: transparent;
    padding: 3rem 2.5rem;
    margin-bottom: 3rem;
    box-shadow: none;
    position: relative;
    border: none;
}

.yq-corner[b-4794i93ct4] {
    position: absolute;
    width: 65px;
    height: auto;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.95;
    z-index: 3;
}

.yq-corner-tl[b-4794i93ct4] {
    top: 0;
    left: 0;
}

.yq-corner-tr[b-4794i93ct4] {
    top: 0;
    right: 0;
}

.yq-corner-bl[b-4794i93ct4] {
    bottom: 0;
    left: 0;
}

.yq-corner-br[b-4794i93ct4] {
    bottom: 0;
    right: 0;
}

.yq-ebook-text-center[b-4794i93ct4] {
    text-align: center;
    margin-bottom: 2rem;
}

    .yq-ebook-text-center h2[b-4794i93ct4] {
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--yq-text);
        margin-bottom: 0.8rem;
        line-height: 1.4;
    }

    .yq-ebook-text-center p[b-4794i93ct4] {
        color: var(--yq-text-mid);
        line-height: 1.6;
        font-size: 1.1rem;
    }

.yq-form-row[b-4794i93ct4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.yq-input-pill[b-4794i93ct4] {
    background: #FCF9F2;
    border: 1px solid #E6D9C8;
    border-radius: 30px;
    padding: 1rem 1.4rem;
    font-size: 1rem;
    width: 100%;
    color: var(--yq-text);
    outline: none;
    transition: all 0.2s ease;
}

    .yq-input-pill:focus[b-4794i93ct4] {
        border-color: var(--yq-red);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
    }

.yq-select[b-4794i93ct4] {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23888" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
}

.yq-consent-box[b-4794i93ct4] {
    margin: 1.5rem 0;
}

    .yq-consent-box p[b-4794i93ct4] {
        font-size: 0.9rem;
        color: #666;
        line-height: 1.5;
        margin-bottom: 0.6rem;
        text-align: left;
    }

.yq-checkbox[b-4794i93ct4] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--yq-text);
    margin: 0.6rem 0;
    cursor: pointer;
    text-align: left;
    line-height: 1.4;
}

    .yq-checkbox input[b-4794i93ct4] {
        margin-top: 0.25rem;
    }

@media (max-width: 900px) {
    .yq-ebook-inner[b-4794i93ct4] {
        flex-direction: column;
        align-items: center;
    }

    .yq-ebook-girl[b-4794i93ct4] {
        display: none;
    }

    .yq-ebook-form-box[b-4794i93ct4] {
        margin-bottom: 2rem;
        padding: 2.5rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .yq-ebook-inner[b-4794i93ct4] {
        width: 100%;
    }

    .yq-ebook-form-box[b-4794i93ct4] {
        width: 100%;
        padding: 2rem 1rem;
    }

        .yq-ebook-form-box .yq-btn-primary[b-4794i93ct4] {
            width: 100%;
            display: block;
            margin-top: 0.5rem;
            background: #B12821;
            color: #ECCDAD;
        }

    .yq-form-row[b-4794i93ct4] {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .yq-ebook-text-center h2[b-4794i93ct4] {
        font-size: 1.5rem;
    }

    .yq-ebook-text-center p[b-4794i93ct4] {
        font-size: 1rem;
    }
}

@media (min-width: 1921px) {
    .yq-ebook-inner[b-4794i93ct4] {
        max-width: 85%;
        gap: 5rem;
        /* Đảm bảo căn chỉnh từ dưới đáy lên */
        align-items: flex-end;
    }

    .yq-ebook-girl[b-4794i93ct4] {
        max-width: none;
        /* Thêm margin-bottom để "nhấc" nhẹ phần ảnh lên nếu cần, hoặc để 0 để sát viền */
        margin-bottom: 0;
    }

        .yq-ebook-girl img[b-4794i93ct4] {
            /* Chỉnh tỷ lệ ảnh chiếm một phần không gian so với độ cao tổng thể */
            width: 100%;
            max-width: 650px; /* Giới hạn độ to của ảnh để đảm bảo thấp hơn form */
            display: block;
            object-fit: contain;
        }

    .yq-ebook-form-box[b-4794i93ct4] {
        /* Tăng thêm khoảng không (padding) cho form để làm nó đồ sộ / cao hơn */
        padding: 4rem 3.5rem;
        margin-bottom: 4rem; /* Nâng khoảng cách dưới để đẩy form lên cao hơn so với đáy ảnh */
    }

    .yq-ebook-text-center h2[b-4794i93ct4] {
        font-size: 2.8rem; /* Tăng nhẹ cỡ chữ để lấp đầy không gian form */
        margin-bottom: 1.2rem;
    }

    .yq-ebook-text-center p[b-4794i93ct4] {
        font-size: 1.3rem;
        margin-bottom: 2rem;
    }

    /* Làm to các trường nhập liệu trong form để tương xứng với tỷ lệ */
    .yq-input-pill[b-4794i93ct4] {
        padding: 1.2rem 1.6rem;
        font-size: 1.15rem;
    }

    .yq-btn-full[b-4794i93ct4] {
        padding: 1.1rem !important;
        font-size: 1.2rem !important;
    }
}
/* _content/PteApac.Web/Components/Shared/HeroBanner.razor.rz.scp.css */
.yq-hero[b-v6c5x7xe5n] {
    position: relative;
    background: url('/images/yueaixue/bg-hero-landscape.webp') center bottom/cover no-repeat;
    background-color: var(--yq-cream-2);
    padding: 8rem 2rem 0 2rem;
    min-height: 650px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.yq-hero-container[b-v6c5x7xe5n] {
    display: flex;
    align-items: flex-end;
    max-width: 1150px; /* Chỉnh lại max-width */
    margin: 0 auto;
    width: 100%;
    gap: 2rem;
    padding: 0 1.5rem; /* Thêm dòng này */
}

.yq-hero-left[b-v6c5x7xe5n] {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    align-self: flex-end;
    margin-bottom: -5px;
    z-index: 2;
}

.yq-hero-students[b-v6c5x7xe5n] {
    width: 100%;
    max-width: 500px;
    display: block;
}

.yq-hero-right[b-v6c5x7xe5n] {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    align-self: stretch;
    padding-bottom: 7rem;
    z-index: 2;
    gap: 0.85rem;
}

.yq-hero-title[b-v6c5x7xe5n] {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--yq-text);
    line-height: 1.25;
    text-align: center;
    margin: 0;
}

    .yq-hero-title .yq-highlight[b-v6c5x7xe5n] {
        font-size: inherit;
        color: var(--yq-red);
        display: block;
        margin-bottom: 0.2rem;
    }

.yq-hero-desc[b-v6c5x7xe5n] {
    font-size: 1.05rem;
    color: var(--yq-text-mid);
    line-height: 1.6;
    text-align: center;
    max-width: 85%;
    margin: 0;
}

.yq-hero-actions[b-v6c5x7xe5n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.yq-btn-primary.yq-btn-hero[b-v6c5x7xe5n],
.yq-btn-outline-hero[b-v6c5x7xe5n] {
    background-color: #F4CB9A !important;
    color: var(--yq-text) !important;
    border: 1.5px solid #F4CB9A !important;
    padding: 0.6rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
}

    .yq-btn-primary.yq-btn-hero:hover[b-v6c5x7xe5n],
    .yq-btn-outline-hero:hover[b-v6c5x7xe5n] {
        background-color: var(--yq-red) !important;
        border-color: var(--yq-red) !important;
        color: #fff !important;
    }

.yq-hero-stats[b-v6c5x7xe5n] {
    position: absolute;
    right: 0;
    bottom: 2rem;
    background: #FDF4D9;
    border: 1.5px solid var(--yq-yellow);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(192, 57, 43, 0.15);
    padding: 0.5rem 1.2rem;
    z-index: 10;
    min-width: 130px;
}

.yq-stat-list[b-v6c5x7xe5n] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.yq-stat-item[b-v6c5x7xe5n] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.yq-stat-icon[b-v6c5x7xe5n] {
    width: 32px;
    height: 32px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

    .yq-stat-icon img[b-v6c5x7xe5n] {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

.yq-stat-text[b-v6c5x7xe5n] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

    .yq-stat-text strong[b-v6c5x7xe5n] {
        font-size: 1.05rem;
        color: var(--yq-red);
        font-weight: 800;
        line-height: 1;
        margin-bottom: 0.1rem;
    }

    .yq-stat-text span[b-v6c5x7xe5n] {
        font-size: 0.8rem;
        color: var(--yq-text);
        font-weight: 600;
    }

/*=========MOBLIE (<768px)=================*/
@media (max-width: 768px) {
    .yq-hero[b-v6c5x7xe5n] {
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        margin-top: -2rem !important;
        position: relative;
        padding-top: 2rem;
        padding-bottom: 18rem;
    }

        .yq-hero.show-img-mobile[b-v6c5x7xe5n] {
            padding-bottom: 0 !important;
        }

    .yq-hero-container[b-v6c5x7xe5n] {
        flex-direction: column-reverse;
        text-align: center;
        gap: 1rem;
    }

    /* --- ĐOẠN XỬ LÝ HIỂN THỊ ẢNH SINH VIÊN TRÊN MOBILE --- */

    /* 1. Mặc định ẩn ảnh (cho các trang không bật cờ) */
    .yq-hero .yq-hero-left[b-v6c5x7xe5n] {
        display: none !important;
    }

    /* 2. Chỉ hiện ảnh khi component HeroBanner được bật cờ ShowImageOnMobile */
    .yq-hero.show-img-mobile .yq-hero-left[b-v6c5x7xe5n] {
        display: flex !important;
        justify-content: center;
        width: 100%;
        align-items: flex-end; /* ép ảnh xuống viền dưới */
        margin-top: 1rem;
        margin-bottom: 0;
    }

    .yq-hero.show-img-mobile .yq-hero-students[b-v6c5x7xe5n] {
        max-width: 280px; /* Điều chỉnh độ rộng của ảnh sinh viên cho cân đối trên mobile */
        margin: 0 auto;
        display: block;
    }

    /* ---------------------------------------------------- */

    .yq-hero-right[b-v6c5x7xe5n] {
        position: static;
        padding-bottom: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .yq-hero-title[b-v6c5x7xe5n] {
        font-size: 1.7rem;
        font-weight: 800;
        color: var(--yq-text);
        line-height: 1.2;
        text-align: center;
        margin: 0;
    }

        .yq-hero-title .yq-highlight[b-v6c5x7xe5n] {
            font-size: inherit;
            color: var(--yq-red);
            display: block;
            margin-bottom: -0.2rem;
        }

        .yq-hero-title br[b-v6c5x7xe5n] {
            display: none;
        }

    .yq-hero-desc[b-v6c5x7xe5n] {
        font-size: 1.05rem;
        margin-bottom: 1.5rem;
    }

    .yq-hero-actions[b-v6c5x7xe5n] {
        flex-direction: column;
        gap: 0.8rem;
        width: 100%;
    }

    .yq-btn-hero[b-v6c5x7xe5n], .yq-btn-outline-hero[b-v6c5x7xe5n] {
        width: 100%;
        box-sizing: border-box;
        display: block;
        text-align: center;
    }

    .yq-hero-stats[b-v6c5x7xe5n] {
        position: absolute;
        bottom: 1.5rem;
        left: 1rem;
        right: 1rem;
        width: auto;
        margin-top: 0;
        padding: 1.2rem 0.5rem;
        border-radius: 12px;
        background: #FDF4D9;
        border: 1px solid var(--yq-yellow);
        box-shadow: 0 6px 20px rgba(192, 57, 43, 0.1);
        transform: none !important;
        z-index: 10;
    }

    .yq-stat-list[b-v6c5x7xe5n] {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0;
    }

    .yq-stat-item[b-v6c5x7xe5n] {
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        position: relative;
        padding: 0 0.2rem;
    }

        .yq-stat-item:not(:last-child)[b-v6c5x7xe5n]::after {
            content: '';
            position: absolute;
            right: 0;
            top: 15%;
            height: 70%;
            width: 1px;
            background-color: rgba(192, 57, 43, 0.15);
        }

    .yq-stat-icon[b-v6c5x7xe5n] {
        width: 32px;
        height: 32px;
    }

        .yq-stat-icon img[b-v6c5x7xe5n] {
            width: 18px;
            height: 18px;
        }

    .yq-stat-text[b-v6c5x7xe5n] {
        align-items: center;
        text-align: center;
    }

        .yq-stat-text strong[b-v6c5x7xe5n] {
            font-size: 1rem;
            margin-bottom: 0.15rem;
        }

        .yq-stat-text span[b-v6c5x7xe5n] {
            font-size: 0.75rem;
            white-space: normal;
            line-height: 1.3;
        }
}
/*==========================================*/

@media (min-width: 1921px) {
    .yq-hero-container[b-v6c5x7xe5n] {
        max-width: 90%;
        gap: 6rem;
    }

    .yq-hero-students[b-v6c5x7xe5n] {
        max-width: 38vw;
    }

    .yq-hero-title[b-v6c5x7xe5n] {
        font-size: 2.8rem;
    }

    .yq-hero-desc[b-v6c5x7xe5n] {
        font-size: 1.25rem;
        max-width: 85%;
    }

    .yq-btn-primary.yq-btn-hero[b-v6c5x7xe5n],
    .yq-btn-outline-hero[b-v6c5x7xe5n] {
        padding: 0.9rem 2.2rem !important;
        font-size: 1.1rem !important;
    }

    .yq-hero-stats[b-v6c5x7xe5n] {
        padding: 0.8rem 1.8rem;
        bottom: 3.5rem;
    }
}
