/* /App_Themes/all/allcss/qi-ngonngu.css */
/* =====================================================================================================
   KHAY CHỌN NGÔN NGỮ CÓ CỜ (dịch tự động Google) — dùng cho MỌI trang, MỌI giao diện.
   HTML: `Support/QiNgonNgu.cs` · xử lý: `js/Googledich.js`.
   🔴 TỆP RIÊNG, nạp ở `_MasterAll` (layout gốc của toàn hệ) — trước đây khối này nằm trong
   `qi-home-rp.css` mà tệp đó CHỈ trang …rp nạp ⇒ mọi trang KHÔNG-rp hiện khay trần trụi, cờ xếp
   dọc phá vỡ bố cục (user báo 2026-08-06: "các giao diện không rp đang bị vỡ giao diện").
   ===================================================================================================== */
.qi-ngonngu { position: relative; display: inline-block; vertical-align: middle; line-height: normal; }

.qi-ngonngu-nut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /*  CAO BẰNG Ô TÌM KIẾM cùng dải cho cân (user 2026-08-06) — đo được ô tìm kiếm 32px, nút cũ 26px. */
    height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 13.5px;
    line-height: 30px;
    cursor: pointer;
    white-space: nowrap;
}

.qi-ngonngu-nut:hover { border-color: var(--mau-md, #004ccb); }

.qi-ngonngu-co {
    width: 21px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
    object-fit: cover;
    flex: 0 0 auto;
}

.qi-ngonngu-mui {
    width: 0;
    height: 0;
    margin-left: 2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #666;
    flex: 0 0 auto;
}

.qi-ngonngu-khay {
    display: none;
    position: absolute;
    z-index: 1200;
    top: calc(100% + 4px);
    right: 0;
    min-width: 168px;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

.qi-ngonngu.mo .qi-ngonngu-khay { display: block; }

.qi-ngonngu-khay li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    color: #333;
    font-size: 13.5px;
    line-height: 20px;
    cursor: pointer;
    white-space: nowrap;
}

.qi-ngonngu-khay li:hover { background: #f2f5f9; }
.qi-ngonngu-khay li.dang-chon { background: #eef3fb; font-weight: 600; }

.qi-ngonngu-khay li img {
    width: 21px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
    object-fit: cover;
    flex: 0 0 auto;
}

/* Vỏ điện thoại: gọn hơn cho vừa dải chữ chạy */
/* Vỏ điện thoại: dải chữ chạy thấp hơn nên giữ nút gọn 26px */
.qi-ngonngu--mb .qi-ngonngu-nut { height: 26px; font-size: 12.5px; padding: 0 8px; line-height: 24px; }
.qi-ngonngu--mb .qi-ngonngu-ten { max-width: 74px; overflow: hidden; text-overflow: ellipsis; }

/* Khay dịch của Google luôn ẩn — người đọc dùng khay ở trên */
#google_translate_element { position: fixed; bottom: 0; left: 0; width: 0; height: 0; overflow: hidden; }

/* /App_Themes/all/allcss/qi-landing-nn.css */
/* ============================================================================
   qi-landing-nn.css — MẪU GIAO DIỆN MỚI "gdnn1": trang chủ kiểu LANDING PAGE
   cho TRUNG TÂM NGOẠI NGỮ (QIWEB2027).

   Nguyên tắc:
   1. TOÀN BỘ luật nằm trong phạm vi ".qinn" — không rò sang 46 mẫu cũ, không phụ
      thuộc Bootstrap (trang vẫn nạp BS4 ở _MasterAll cho các khối dùng chung).
   2. TỰ RESPONSIVE bằng grid auto-fit + clamp(): một địa chỉ cho điện thoại,
      máy tính bảng và máy tính — không có bản mb/tab riêng.
   3. Màu chính lấy từ SiteConfig.ColorSite (biến --nn-main đặt inline trên .qinn),
      các sắc độ còn lại suy ra bằng color-mix() nên đổi 1 giá trị là đổi cả trang.
   ============================================================================ */

.qinn {
    --nn-main: #0b63e5;
    --nn-main-d: color-mix(in srgb, var(--nn-main) 72%, #000);
    --nn-main-l: color-mix(in srgb, var(--nn-main) 12%, #fff);
    --nn-main-l2: color-mix(in srgb, var(--nn-main) 6%, #fff);
    --nn-cta: #ff7a1a;
    --nn-cta-d: #ef6a06;
    --nn-ink: #131a26;
    --nn-ink-2: #46536b;
    --nn-vien: #e4e9f2;
    --nn-nen: #f6f8fc;
    --nn-trang: #fff;
    --nn-bo: 16px;
    --nn-bo-s: 10px;
    --nn-bong: 0 1px 2px rgba(19, 26, 38, .06), 0 8px 24px rgba(19, 26, 38, .07);
    --nn-bong-2: 0 12px 36px rgba(19, 26, 38, .14);
    --nn-font: 'Be Vietnam Pro', 'Segoe UI', Roboto, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --nn-rong: 1180px;

    font-family: var(--nn-font);
    color: var(--nn-ink);
    background: var(--nn-trang);
    /* 🔴 "clip" chứ KHÔNG phải "hidden": panel menu khổ hẹp nằm ngoài mép phải (translateX 100%)
       sẽ sinh thanh cuộn ngang nếu không cắt. Dùng "hidden" thì phần tử này thành khung cuộn,
       kéo theo header position:sticky mất tác dụng; "clip" cắt mà không tạo khung cuộn. */
    overflow-x: clip;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---- reset gọn trong phạm vi mẫu (gỡ ảnh hưởng của Bootstrap/skin cũ) ---- */
.qinn *, .qinn *::before, .qinn *::after { box-sizing: border-box; }
.qinn img { max-width: 100%; display: block; }
.qinn h1, .qinn h2, .qinn h3, .qinn h4 { margin: 0 0 10px; font-weight: 800; line-height: 1.25; color: inherit; letter-spacing: -.01em; }
.qinn p { margin: 0 0 10px; }
.qinn ul { list-style: none; margin: 0; padding: 0; }
.qinn a { color: inherit; text-decoration: none; transition: color .18s ease; }
.qinn a:hover { color: var(--nn-main); text-decoration: none; }
.qinn button { font-family: inherit; }
.qinn i.fas, .qinn i.fab { font-style: normal; }

.qinn-wrap { width: 100%; max-width: var(--nn-rong); margin: 0 auto; padding: 0 16px; }

/* ============================ NÚT ============================ */
.qinn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
    font-weight: 700; font-size: 15px; cursor: pointer; text-align: center;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.qinn-btn:hover { transform: translateY(-2px); }
/* 🔴 Khai kèm `a.` / `button.`: luật reset `.qinn a { color: inherit }` (0,1,1) thắng `.qinn-btn-cta`
   (0,1,0) nên nút dạng thẻ <a> đặt trên nền TRẮNG sẽ lấy màu chữ đen — chìm trên nền cam.
   (Cùng lỗi đã đo được ở nút "Xem thử" của kho giao diện.) */
.qinn a.qinn-btn-cta, .qinn button.qinn-btn-cta, .qinn .qinn-btn-cta {
    background: linear-gradient(135deg, var(--nn-cta), var(--nn-cta-d)); color: #fff;
    box-shadow: 0 8px 20px rgba(255, 122, 26, .32);
}
.qinn a.qinn-btn-cta:hover, .qinn button.qinn-btn-cta:hover { color: #fff; box-shadow: 0 12px 26px rgba(255, 122, 26, .42); }
.qinn a.qinn-btn-vien, .qinn button.qinn-btn-vien { color: var(--nn-main); }
.qinn-btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .5); }
.qinn-btn-ghost:hover { background: #fff; color: var(--nn-main-d); }
.qinn-btn-vien { background: var(--nn-trang); color: var(--nn-main); border-color: var(--nn-main); }
.qinn-btn-vien:hover { background: var(--nn-main); color: #fff; }
.qinn-btn-rong { width: 100%; }

/* ============================ THANH TRÊN ============================ */
.qinn-topbar { background: var(--nn-main-d); color: rgba(255, 255, 255, .92); font-size: 13.5px; }
.qinn-topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; flex-wrap: wrap; }
.qinn-topbar-info { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.qinn-tb-item { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .92); }
.qinn-tb-item:hover { color: #fff; }
.qinn-tb-item i { opacity: .8; }
.qinn-topbar-right { display: flex; align-items: center; gap: 10px; }
.qinn-tb-hotline { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: #fff; }
/* 🔴 Khai kèm `a.` vì `.qinn a { color: inherit }` (0,1,1) thắng `.qinn-tb-mxh` (0,1,0) — không có nó
   thì icon lấy màu chữ thừa kế, đặt trên nền thương hiệu sẽ chìm (TikTok nền đen là mất hẳn). */
.qinn a.qinn-tb-mxh, .qinn .qinn-tb-mxh {
    width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .16); color: #fff; font-size: 12px;
    transition: filter .16s ease, transform .16s ease;
}
.qinn a.qinn-tb-mxh:hover { color: #fff; filter: brightness(1.14); transform: translateY(-1px); }

/* ---------------------------------------------------------------------------
   MÀU THƯƠNG HIỆU của từng mạng (user chốt 2026-08-10). Thanh trên có nền đậm nên
   viền sáng mảnh giúp icon tách khỏi nền mà vẫn giữ đúng màu nhận diện.
   Instagram không có màu phẳng ⇒ dùng dải chuyển màu đặc trưng của họ.
   --------------------------------------------------------------------------- */
/* ⚠️ Cùng mức specificity với luật gốc `.qinn a.qinn-tb-mxh` (0,2,1) thì màu thương hiệu mới thắng. */
.qinn a.qinn-mxh--fb { background: #1877f2; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.qinn a.qinn-mxh--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.qinn a.qinn-mxh--li { background: #0a66c2; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.qinn a.qinn-mxh--tt { background: #010101; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.qinn a.qinn-mxh--yt { background: #ff0000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.qinn a.qinn-mxh--gg { background: #ea4335; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
/* TikTok vẽ bằng SVG — canh cỡ khớp icon phông của thanh trên */
.qinn-svg { width: 12px; height: 12px; display: block; }

/* ============================ HEADER ============================ */
.qinn-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--nn-vien); transition: box-shadow .2s ease; }
.qinn-header.da-cuon { box-shadow: 0 6px 20px rgba(19, 26, 38, .1); }
.qinn-header-in { display: flex; align-items: center; gap: 16px; min-height: 68px; }

.qinn-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; flex: 0 1 auto; min-width: 0; }
.qinn-logo img { height: 46px; width: auto; object-fit: contain; }
.qinn-logo-txt { font-size: 15px; line-height: 1.25; color: var(--nn-main-d); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.qinn-menu { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
/* Cho phép xuống hàng: tên chuyên mục của đơn vị dài ngắn khác nhau, không ép một hàng
   thì thanh menu không bao giờ đẩy trang tràn ngang. */
.qinn-menu-ul { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.qinn-menu-ul > li { position: relative; }
.qinn-menu-ul > li > a {
    display: block; padding: 10px 12px; font-weight: 600; font-size: 15px; color: var(--nn-ink-2); border-radius: 8px; white-space: nowrap;
}
.qinn-menu-ul > li > a:hover, .qinn-menu-ul > li.dang-mo > a { color: var(--nn-main); background: var(--nn-main-l2); }
.qinn-menu-ul > li.has-sub > a::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }

.qinn-sub {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; background: #fff; border: 1px solid var(--nn-vien);
    border-radius: var(--nn-bo-s); box-shadow: var(--nn-bong); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 5;
}
.qinn-menu-ul > li:hover > .qinn-sub, .qinn-menu-ul > li:focus-within > .qinn-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.qinn-sub li a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; color: var(--nn-ink-2); }
.qinn-sub li a:hover { background: var(--nn-main-l2); color: var(--nn-main); }
.qinn-menu-cta { padding: 10px 18px; font-size: 14.5px; }

/* ---- Ô tìm kiếm: nút kính lúp + thanh bung xuống dưới thanh tiêu đề ---- */
.qinn-tim-nut {
    width: 40px; height: 40px; flex: 0 0 40px; margin-left: 10px; border-radius: 50%;
    border: 1px solid var(--nn-vien); background: #fff; color: var(--nn-ink-2); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 15px; order: 3;
}
.qinn-tim-nut:hover, .qinn-tim-nut[aria-expanded="true"] { border-color: var(--nn-main); color: var(--nn-main); background: var(--nn-main-l2); }

.qinn-tim {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 69; display: none;
    background: #fff; border-top: 1px solid var(--nn-vien); box-shadow: 0 18px 34px rgba(19, 26, 38, .16);
}
.qinn-tim.dang-mo { display: block; animation: qinn-buong .22s ease; }
.qinn-tim-in {
    width: 100%; max-width: var(--nn-rong); margin: 0 auto; padding: 14px 16px;
    display: flex; align-items: center; gap: 10px;
}
.qinn-tim-in > i { color: var(--nn-main); font-size: 16px; flex: 0 0 auto; }
.qinn-tim-in input {
    flex: 1; min-width: 0; height: 44px; padding: 0 14px; font-size: 15.5px; font-family: inherit;
    color: var(--nn-ink); background: #fff; border: 1px solid var(--nn-vien); border-radius: var(--nn-bo-s);
}
.qinn-tim-in input:focus { outline: none; border-color: var(--nn-main); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nn-main) 18%, transparent); }
.qinn-tim-in .qinn-btn { flex: 0 0 auto; padding: 11px 20px; }
.qinn-tim-dong { width: 40px; height: 40px; flex: 0 0 40px; border: 0; background: transparent; color: var(--nn-ink-2); font-size: 17px; cursor: pointer; border-radius: 50%; }
.qinn-tim-dong:hover { background: var(--nn-nen); color: var(--nn-ink); }

.qinn-burger { display: none; margin-left: 0; order: 4; width: 44px; height: 44px; border: 1px solid var(--nn-vien); background: #fff; border-radius: 12px; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 4px; cursor: pointer; }
.qinn-burger span { display: block; width: 20px; height: 2px; background: var(--nn-ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.qinn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.qinn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.qinn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================ HERO ============================ */
.qinn-hero {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, var(--nn-main) 0%, var(--nn-main-d) 62%, color-mix(in srgb, var(--nn-main-d) 70%, #000) 100%);
    padding: clamp(36px, 6vw, 72px) 0 clamp(44px, 7vw, 84px);
}
.qinn-hero::before, .qinn-hero::after {
    content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none;
}
.qinn-hero::before { width: 420px; height: 420px; right: -120px; top: -140px; }
.qinn-hero::after { width: 300px; height: 300px; left: -110px; bottom: -150px; background: rgba(255, 255, 255, .06); }
.qinn-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 48px); align-items: center; }

.qinn-chip { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); font-size: 13px; font-weight: 700; letter-spacing: .02em; margin-bottom: 14px; }
.qinn-hero-h1 { font-size: clamp(28px, 4.4vw, 46px); font-weight: 800; margin-bottom: 14px; text-shadow: 0 2px 12px rgba(0, 0, 0, .18); }
.qinn-hero-sapo { font-size: clamp(15px, 1.5vw, 17.5px); color: rgba(255, 255, 255, .92); max-width: 620px; margin-bottom: 22px; }
.qinn-hero-nut { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }

.qinn-hero-so { display: flex; flex-wrap: wrap; gap: 12px; }
.qinn-hero-so li {
    flex: 1 1 130px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--nn-bo); padding: 14px 16px; backdrop-filter: blur(4px);
}
.qinn-hero-so strong { display: block; font-size: clamp(22px, 3vw, 30px); font-weight: 800; line-height: 1.1; }
.qinn-hero-so span { font-size: 13.5px; color: rgba(255, 255, 255, .85); }

/* trình chiếu tin tiêu điểm ở hero */
.qinn-hero-slide { position: relative; }
.qinn-slide-khung { position: relative; border-radius: calc(var(--nn-bo) + 6px); overflow: hidden; box-shadow: var(--nn-bong-2); background: rgba(255, 255, 255, .1); aspect-ratio: 16 / 10; }
.qinn-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease; color: #fff; }
.qinn-slide.dang-hien { opacity: 1; visibility: visible; }
.qinn-slide img { width: 100%; height: 100%; object-fit: cover; }
.qinn-slide-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 18px 16px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78)); }
.qinn-slide-cap h2 { font-size: clamp(16px, 1.8vw, 19px); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qinn-slide-cap p { font-size: 13.5px; color: rgba(255, 255, 255, .86); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qinn-slide-cham { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.qinn-slide-cham button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .42); cursor: pointer; transition: width .2s ease, background .2s ease; }
.qinn-slide-cham button.dang-chon { width: 26px; border-radius: 999px; background: #fff; }

/* ============================ KHUNG SECTION ============================ */
.qinn-sec { padding: clamp(36px, 5.5vw, 68px) 0; }
.qinn-sec-nen { background: var(--nn-nen); }
.qinn-sec-dau { text-align: center; max-width: 760px; margin: 0 auto clamp(24px, 3vw, 40px); }
.qinn-sec-nhan { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--nn-main); background: var(--nn-main-l); padding: 5px 14px; border-radius: 999px; margin-bottom: 12px; }
.qinn-sec-h2 { font-size: clamp(23px, 3.2vw, 34px); margin-bottom: 10px; }
.qinn-sec-mo { color: var(--nn-ink-2); font-size: 15.5px; margin: 0; }
.qinn-sec-chan { display: flex; justify-content: center; margin-top: 26px; }

/* ============================ LƯỚI THẺ ============================ */
.qinn-luoi { display: grid; gap: 20px; }
.qinn-luoi-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.qinn-luoi-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.qinn-luoi-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.qinn-the { background: var(--nn-trang); border: 1px solid var(--nn-vien); border-radius: var(--nn-bo); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.qinn-the:hover { transform: translateY(-4px); box-shadow: var(--nn-bong); border-color: color-mix(in srgb, var(--nn-main) 35%, var(--nn-vien)); }
.qinn-the-anh { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--nn-nen); }
.qinn-the-anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.qinn-the:hover .qinn-the-anh img { transform: scale(1.05); }
.qinn-the-than { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.qinn-the-than h3 { font-size: 16.5px; font-weight: 700; margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qinn-the-than p { font-size: 14.5px; color: var(--nn-ink-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qinn-the-ngay { margin-top: auto; font-size: 13px; color: #7a879e; }

.qinn-the-ngang { flex-direction: row; align-items: stretch; }
.qinn-the-ngang .qinn-the-anh { flex: 0 0 40%; max-width: 40%; aspect-ratio: auto; }
.qinn-the-ngang .qinn-the-than { padding: 14px 16px; }

/* ============================ TAB KHOÁ HỌC ============================ */
.qinn-tab-nut { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.qinn-tab-b {
    padding: 10px 18px; border-radius: 999px; border: 1px solid var(--nn-vien); background: #fff; color: var(--nn-ink-2);
    font-weight: 600; font-size: 14.5px; cursor: pointer; transition: all .16s ease;
}
.qinn-tab-b:hover { border-color: var(--nn-main); color: var(--nn-main); }
.qinn-tab-b.dang-chon { background: var(--nn-main); border-color: var(--nn-main); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--nn-main) 32%, transparent); }
.qinn-tab-o { display: none; }
.qinn-tab-o.dang-hien { display: block; animation: qinn-hien .3s ease; }
@keyframes qinn-hien { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================ KHỐI GIỚI THIỆU 2 CỘT ============================ */
.qinn-doi { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 42px); align-items: center; margin-bottom: 34px; }
.qinn-doi:last-child { margin-bottom: 0; }
.qinn-doi-dao .qinn-doi-txt { order: 2; }
.qinn-doi-txt h3 { font-size: clamp(19px, 2.2vw, 24px); position: relative; padding-bottom: 12px; margin-bottom: 14px; }
.qinn-doi-txt h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 4px; border-radius: 4px; background: var(--nn-cta); }
.qinn-doi-anh img { width: 100%; border-radius: var(--nn-bo); box-shadow: var(--nn-bong); }
.qinn-noidung { color: var(--nn-ink-2); font-size: 15.5px; }
.qinn-noidung img { border-radius: var(--nn-bo-s); margin: 10px 0; height: auto; }
.qinn-noidung p { margin-bottom: 10px; }
.qinn-noidung table { max-width: 100%; }

/* ============================ BĂNG TRƯỢT NGANG ============================ */
.qinn-truot { position: relative; }
.qinn-truot-in {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; scrollbar-width: thin;
}
.qinn-truot-in > * { scroll-snap-align: start; }
.qinn-truot-nut {
    position: absolute; top: 42%; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--nn-vien);
    background: #fff; color: var(--nn-ink); box-shadow: var(--nn-bong); cursor: pointer; display: none; z-index: 2;
}
.qinn-truot-nut:hover { background: var(--nn-main); color: #fff; border-color: var(--nn-main); }
.qinn-truot-nut.truoc { left: -14px; }
.qinn-truot-nut.sau { right: -14px; }

.qinn-tt, .qinn-hv { margin: 0; background: #fff; border: 1px solid var(--nn-vien); border-radius: var(--nn-bo); padding: 20px; text-align: center; }
.qinn-tt img { width: 132px; height: 132px; object-fit: cover; border-radius: 50%; margin: 0 auto 14px; box-shadow: 0 6px 18px rgba(19, 26, 38, .12); }
.qinn-tt h3, .qinn-hv h3 { font-size: 16.5px; margin-bottom: 6px; }
.qinn-tt p, .qinn-hv p { font-size: 14.5px; color: var(--nn-ink-2); margin: 0; }
.qinn-hv { text-align: left; display: grid; grid-template-columns: 78px 1fr; gap: 16px; align-items: center; }
.qinn-hv img { width: 78px; height: 78px; object-fit: cover; border-radius: 50%; }
.qinn-hv figcaption { min-width: 0; }

/* ============================ GIẢNG VIÊN ============================ */
.qinn-gv { background: #fff; border: 1px solid var(--nn-vien); border-radius: var(--nn-bo); padding: 20px 16px; text-align: center; transition: transform .18s ease, box-shadow .18s ease; }
.qinn-gv:hover { transform: translateY(-4px); box-shadow: var(--nn-bong); }
.qinn-gv-anh { width: 108px; height: 108px; margin: 0 auto 14px; border-radius: 50%; overflow: hidden; border: 3px solid var(--nn-main-l); }
.qinn-gv-anh img { width: 100%; height: 100%; object-fit: cover; }
.qinn-gv h3 { font-size: 16px; margin-bottom: 4px; }
.qinn-gv p { font-size: 14px; color: var(--nn-ink-2); margin: 0; }

/* ============================ TIN + THÔNG BÁO ============================ */
.qinn-tin-2cot { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.qinn-tb { background: #fff; border: 1px solid var(--nn-vien); border-radius: var(--nn-bo); padding: 20px; }
.qinn-tb-dau { font-size: 17px; padding-bottom: 12px; border-bottom: 2px solid var(--nn-main-l); margin-bottom: 8px; }
.qinn-tb ul li { padding: 11px 0; border-bottom: 1px dashed var(--nn-vien); }
.qinn-tb ul li:last-child { border-bottom: 0; }
.qinn-tb ul li a { font-size: 14.8px; font-weight: 600; display: block; }
.qinn-tb ul li span { display: block; font-size: 12.5px; color: #7a879e; margin-top: 3px; }
.qinn-tb > .qinn-btn { margin-top: 14px; width: 100%; }

/* ============================ THƯ VIỆN ẢNH + VIDEO ============================ */
.qinn-anh-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.qinn-anh-o { position: relative; display: block; border-radius: var(--nn-bo-s); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--nn-bong); }
.qinn-anh-o img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.qinn-anh-o:hover img { transform: scale(1.07); }
.qinn-anh-o span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; color: #fff; font-size: 13.5px; font-weight: 600; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75)); }
.qinn-video { margin-top: 20px; }
.qinn-vid { position: relative; display: block; border-radius: var(--nn-bo-s); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--nn-bong); }
.qinn-vid img { width: 100%; height: 100%; object-fit: cover; }
.qinn-vid i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--nn-main); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.qinn-vid span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; color: #fff; font-size: 13.5px; font-weight: 600; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75)); }

/* ============================ ĐĂNG KÝ ============================ */
.qinn-sec-dk { background: linear-gradient(135deg, var(--nn-main-d), var(--nn-main)); color: #fff; }
.qinn-dk-in { display: grid; grid-template-columns: 1fr minmax(320px, 460px); gap: clamp(24px, 4vw, 48px); align-items: start; }
.qinn-dk-txt h2 { font-size: clamp(23px, 3.2vw, 32px); }
.qinn-dk-txt > p { color: rgba(255, 255, 255, .9); max-width: 520px; }
.qinn-dk-lh { margin: 20px 0; display: grid; gap: 12px; }
.qinn-dk-lh li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, .95); }
.qinn-dk-lh li i { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.qinn-dk-lh li a { color: #fff; font-weight: 600; }
.qinn-bando { border-radius: var(--nn-bo); overflow: hidden; box-shadow: var(--nn-bong-2); background: rgba(255, 255, 255, .1); }
.qinn-bando iframe { width: 100%; height: 260px; border: 0; display: block; }

.qinn-dk-form { background: #fff; color: var(--nn-ink); border-radius: calc(var(--nn-bo) + 4px); padding: clamp(20px, 3vw, 28px); box-shadow: var(--nn-bong-2); }
.qinn-o { margin-bottom: 14px; }
.qinn-o label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--nn-ink-2); }
.qinn-o label b { color: #e5484d; }
.qinn-o input, .qinn-o select, .qinn-o textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--nn-vien); border-radius: var(--nn-bo-s);
    font-size: 15px; font-family: inherit; color: var(--nn-ink); background: #fff; transition: border-color .16s ease, box-shadow .16s ease;
}
.qinn-o input:focus, .qinn-o select:focus, .qinn-o textarea:focus {
    outline: none; border-color: var(--nn-main); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nn-main) 18%, transparent);
}
.qinn-o textarea { resize: vertical; min-height: 84px; }
.qinn-hang { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qinn-captcha-hang { display: flex; align-items: center; gap: 10px; }
.qinn-captcha-hang img { height: 44px; border-radius: var(--nn-bo-s); border: 1px solid var(--nn-vien); }
.qinn-captcha-hang input { flex: 1; }
.qinn-lam-moi { width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--nn-bo-s); border: 1px solid var(--nn-vien); background: #fff; color: var(--nn-ink-2); cursor: pointer; }
.qinn-lam-moi:hover { border-color: var(--nn-main); color: var(--nn-main); }
.qinn-bao { padding: 12px 14px; border-radius: var(--nn-bo-s); font-size: 14.5px; font-weight: 600; margin-bottom: 14px; }
.qinn-bao.ok { background: #e7f7ed; color: #14713a; border: 1px solid #b7e6c8; }
.qinn-bao.loi { background: #fdeceb; color: #b42318; border: 1px solid #f5c6c2; }
.qinn-dk-tat { text-align: center; }
.qinn-dk-tat h3 { font-size: 19px; }
.qinn-dk-tat p { color: var(--nn-ink-2); font-size: 15px; margin-bottom: 18px; }
.qinn-dk-tat .qinn-btn { margin-bottom: 10px; }

/* ============================ CHÂN TRANG ============================ */
.qinn-footer { background: #0f1626; color: rgba(255, 255, 255, .78); padding-top: clamp(32px, 4vw, 48px); }
.qinn-footer-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; padding-bottom: 30px; }
.qinn-ft-cot h3 { color: #fff; font-size: 16px; margin-bottom: 14px; }
.qinn-ft-cot ul { display: grid; gap: 9px; font-size: 14.5px; }
.qinn-ft-cot a:hover { color: #fff; }
.qinn-ft-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.qinn-ft-logo img { height: 52px; width: auto; background: #fff; border-radius: 10px; padding: 4px; }
.qinn-ft-logo span { color: #fff; font-weight: 800; font-size: 16px; }
.qinn-ft-day { border-top: 1px solid rgba(255, 255, 255, .12); padding: 14px 0; font-size: 13.5px; }
.qinn-ft-day-in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qinn-ft-day a { color: #fff; font-weight: 600; }

/* ============================ NÚT NỔI ============================ */
.qinn-noi { position: fixed; right: 16px; bottom: 84px; z-index: 60; display: grid; gap: 10px; }
.qinn-noi-nut {
    width: 46px; height: 46px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: var(--nn-bong-2); cursor: pointer; font-size: 16px;
}
.qinn-noi-goi { background: linear-gradient(135deg, var(--nn-cta), var(--nn-cta-d)); animation: qinn-rung 2.4s ease-in-out infinite; }
.qinn-noi-goi:hover { color: #fff; }
.qinn-noi-len { background: var(--nn-main); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
.qinn-noi-len.hien { opacity: 1; visibility: visible; }
@keyframes qinn-rung { 0%, 88%, 100% { transform: none; } 91% { transform: rotate(-12deg); } 94% { transform: rotate(12deg); } 97% { transform: rotate(-8deg); } }

/* ============================ HIỆU ỨNG XUẤT HIỆN ============================
   JS gắn class .qinn-an cho từng khối rồi gỡ khi khối lọt vào màn hình.
   Không có JS thì không có class ⇒ nội dung vẫn hiện đầy đủ. */
.qinn-an { opacity: 0; transform: translateY(18px); }
.qinn-hien-dan { transition: opacity .5s ease, transform .5s ease; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .qinn-an { opacity: 1; transform: none; }
    .qinn *, .qinn *::before, .qinn *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Khổ máy tính hẹp (1200–1365px): bóp nhẹ thanh menu để nó vừa MỘT hàng cùng logo và nút
   "Đăng ký học" — tên chuyên mục tiếng Việt dài, để nguyên cỡ chữ là menu xuống hai hàng. */
/* 1200–1439px: chỉ giữ MỘT mục chuyên mục trên thanh ngang. Khi người đọc bật dịch tự động
   (Anh · Đức · Nga…), nhãn dài hơn tiếng Việt khá nhiều — đo được thanh menu nhảy từ 44px lên 90px
   (hai hàng). Bỏ bớt một mục là đủ để mọi thứ tiếng vẫn nằm gọn một hàng; panel ở khổ hẹp và chân
   trang vẫn liệt kê đầy đủ chuyên mục. */
@media (min-width: 1200px) and (max-width: 1439px) {
    .qinn-menu-ul > li.qinn-mc ~ li.qinn-mc { display: none; }
}

@media (max-width: 1365px) {
    .qinn-menu { gap: 10px; }
    .qinn-menu-ul > li > a { padding: 9px 8px; font-size: 14.2px; }
    .qinn-menu-cta { padding: 9px 14px; font-size: 14px; }
    .qinn-logo img { height: 40px; }
    .qinn-logo-txt { font-size: 14px; max-width: 240px; }
}

/* ============================================================================
   MÁY TÍNH BẢNG (≤ 1024px)
   ============================================================================ */
@media (max-width: 1024px) {
    .qinn-hero-in { grid-template-columns: 1fr; }
    .qinn-hero-slide { max-width: 680px; width: 100%; }
    .qinn-tin-2cot { grid-template-columns: 1fr; }
    .qinn-dk-in { grid-template-columns: 1fr; }
    .qinn-footer-in { grid-template-columns: 1fr 1fr; }
    .qinn-truot-nut { display: block; }
    .qinn-truot-nut.truoc { left: 2px; }
    .qinn-truot-nut.sau { right: 2px; }
}

/* ============================================================================
   MENU GỘP LẠI (≤ 1199px) — panel trượt từ phải.
   Gộp sớm (1199 chứ không phải 991) vì tên chuyên mục tiếng Việt khá dài: ở khổ
   1024–1199px thanh ngang đầy đủ sẽ chen chỗ với logo và nút "Đăng ký học".
   ============================================================================ */
@media (max-width: 1199px) {
    .qinn-burger { display: flex; margin-left: 10px; }
    /* Không còn menu ngang để đẩy hai nút sang phải nữa ⇒ nút kính lúp nhận việc đó. */
    .qinn-tim-nut { margin-left: auto; }
    /* 🔴 Panel BUÔNG XUỐNG dưới thanh tiêu đề, KHÔNG trượt từ mép phải: panel trượt phải phải nằm
       ngoài mép phải khi đóng, mà phần tử position:fixed nằm ngoài mép vẫn làm trang có thanh cuộn
       ngang trên Chrome (đo được 340px) — và không cắt được bằng overflow của thẻ cha vì fixed
       thoát khỏi mọi khung cắt. Buông xuống thì luôn nằm trong bề ngang màn hình. */
    .qinn-menu {
        position: absolute; top: 100%; left: 0; right: 0; background: #fff; z-index: 70;
        flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 18px;
        /* dvh: xem chú thích ở qi-menu-mb-nn.css — 100vh làm đáy khay lọt ra ngoài vùng nhìn thấy
           khi thanh địa chỉ của trình duyệt điện thoại đang hiện, kéo không tới mục cuối. */
        max-height: calc(100vh - 100%); max-height: calc(100dvh - 100%);
        overflow-y: auto; margin-left: 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--nn-vien); box-shadow: 0 18px 34px rgba(19, 26, 38, .16); display: none;
    }
    .qinn-menu.dang-mo { display: flex; animation: qinn-buong .22s ease; }
    @keyframes qinn-buong { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
    .qinn-menu-ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .qinn-menu-ul > li > a { padding: 13px 12px; font-size: 16px; border-bottom: 1px solid var(--nn-vien); border-radius: 0; }
    .qinn-menu-ul > li.has-sub > a::after { float: right; margin-top: 8px; }
    .qinn-sub {
        position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0;
        border-left: 2px solid var(--nn-main-l); border-radius: 0; padding: 2px 0 6px 12px; display: none;
    }
    .qinn-menu-ul > li.dang-mo > .qinn-sub { display: block; }
    .qinn-menu-cta { margin-top: 18px; }
    .qinn-nen-mo { position: fixed; inset: 0; background: rgba(15, 22, 38, .45); z-index: 65; opacity: 0; transition: opacity .26s ease; }
    .qinn-nen-mo.dang-mo { opacity: 1; }
}

/* ============================================================================
   ĐIỆN THOẠI (≤ 640px)
   ============================================================================ */
@media (max-width: 640px) {
    .qinn { font-size: 15.5px; }
    .qinn-topbar-info { display: none; }
    .qinn-topbar-in { justify-content: center; }
    .qinn-logo img { height: 40px; }
    .qinn-logo-txt { font-size: 13.5px; -webkit-line-clamp: 2; }
    .qinn-header-in { min-height: 60px; }

    .qinn-hero { padding-top: 28px; }
    .qinn-hero-nut { gap: 10px; }
    .qinn-hero-nut .qinn-btn { flex: 1 1 100%; }
    .qinn-hero-so li { flex: 1 1 calc(33.333% - 8px); padding: 12px 10px; text-align: center; }

    .qinn-doi { grid-template-columns: 1fr; }
    .qinn-doi-dao .qinn-doi-txt { order: 0; }
    .qinn-the-ngang { flex-direction: column; }
    .qinn-the-ngang .qinn-the-anh { flex: none; max-width: 100%; aspect-ratio: 16 / 10; }
    .qinn-hang { grid-template-columns: 1fr; }
    .qinn-hv { grid-template-columns: 64px 1fr; gap: 12px; }
    .qinn-hv img { width: 64px; height: 64px; }
    /* Thanh tìm kiếm xuống hai hàng: ô nhập chiếm trọn hàng trên (ở một hàng chỉ còn ~150px),
       nút "Tìm kiếm" và nút đóng nằm hàng dưới. */
    .qinn-tim-in { flex-wrap: wrap; padding: 12px 16px; }
    .qinn-tim-in > i { display: none; }
    .qinn-tim-in input { flex: 1 1 100%; order: 1; }
    .qinn-tim-in .qinn-btn { flex: 1 1 auto; order: 2; }
    .qinn-tim-dong { order: 3; }

    .qinn-footer-in { grid-template-columns: 1fr; gap: 22px; }
    .qinn-ft-day-in { justify-content: center; text-align: center; }
    .qinn-noi { right: 12px; bottom: 72px; }
}

/* ============================================================================
   KHAY CHỌN NGÔN NGỮ (dùng chung toàn hệ — HTML ở Support/QiNgonNgu.cs,
   xử lý ở js/Googledich.js). Landing chỉ khoác lại kiểu dáng cho hợp thanh trên
   nền tối; TUYỆT ĐỐI không ẩn `#google_translate_element` bằng display:none —
   widget Google phải nằm trong DOM thì việc đổi ngôn ngữ mới chạy (qi-ngonngu.css
   đã giấu nó bằng khung 0×0).
   ============================================================================ */
.qinn .qi-ngonngu--nn .qi-ngonngu-nut {
    height: 28px; padding: 0 10px; line-height: 26px; font-size: 13px;
    background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); color: #fff;
}
.qinn .qi-ngonngu--nn .qi-ngonngu-nut:hover { background: #fff; color: var(--nn-main-d); border-color: #fff; }
.qinn .qi-ngonngu--nn .qi-ngonngu-nut:hover .qi-ngonngu-mui { border-top-color: var(--nn-main-d); }
.qinn .qi-ngonngu--nn .qi-ngonngu-mui { border-top-color: currentColor; }
.qinn .qi-ngonngu--nn .qi-ngonngu-ten { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qinn .qi-ngonngu--nn .qi-ngonngu-khay { border-radius: var(--nn-bo-s); box-shadow: var(--nn-bong-2); }
/* Nút cờ sang trang tiếng Anh biên tập tay (đơn vị bật IsHasEnglishPage). */
.qinn-tb-eng img { height: 18px; width: auto; border-radius: 2px; }

/* /App_Themes/all/allcss/qi-landing-cap.css */
/* ============================================================================
   qi-landing-cap.css — KHO LANDING PAGE THEO CẤP HỌC (mẫu gdlp*, 2026-08-15).

   LỚP PHỦ trên qi-landing-nn.css: bố cục, lưới, thẻ tin, nút… đã có sẵn ở tệp
   kia (bộ khung của mẫu gdnn1 đã chạy thật); tệp này chỉ lo phần LÀM KHÁC NHAU
   giữa bảy cấp học:

     ① khối "Điểm nổi bật của cấp học" (.qilp-nb) — khối riêng của kho này;
     ② sắc thái nền / viền / bo góc theo từng cấp (.qilp--mn, .qilp--th…);
     ③ hình khối hero: mầm non + tiểu học mềm mại, THPT + du học vuông vắn.

   🔴 KHÔNG đặt lại --nn-main và --nn-cta ở đây: hai biến đó do trang đặt INLINE
   (màu của chính đơn vị, không có thì lấy màu mặc định của cấp học trong
   QiCapHoc.cs) — khai lại trong tệp này cũng vô ích vì inline style luôn thắng.

   Thứ tự nạp: qi-landing-nn.css → qi-landing-cap.css (xem _LandingCapHead.cshtml).
   ============================================================================ */

/* ============================ ĐIỂM NỔI BẬT CỦA CẤP HỌC ============================ */
/* Bốn ô mô tả đặc trưng của cấp học (chương trình GDPT 2018, học 2 buổi/ngày,
   nuôi dưỡng - chăm sóc - giáo dục…). Tự co từ 4 cột → 2 → 1 bằng auto-fit,
   không cần điểm ngắt riêng. */
.qinn .qilp-nb-luoi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(14px, 2vw, 22px);
}

.qinn .qilp-nb-o {
    background: var(--nn-trang);
    border: 1px solid var(--nn-vien);
    border-radius: var(--nn-bo);
    padding: clamp(18px, 2.4vw, 26px);
    box-shadow: var(--nn-bong);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.qinn .qilp-nb-o:hover {
    transform: translateY(-3px);
    box-shadow: var(--nn-bong-2);
    border-color: color-mix(in srgb, var(--nn-main) 35%, #fff);
}

.qinn .qilp-nb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: calc(var(--nn-bo) - 4px);
    background: var(--nn-main-l);
    color: var(--nn-main);
    font-size: 21px;
}

.qinn .qilp-nb-o h3 { font-size: 17px; margin-bottom: 6px; }
.qinn .qilp-nb-o p { font-size: 14.5px; color: var(--nn-ink-2); margin: 0; }

/* Khối nổi bật đứng NGAY SAU hero thì kéo lên cho khe hở hẹp lại (đo ở 1265px: khoảng cách
   hero → thẻ đầu tiên còn 157px thay vì 203px) — chỉ ở khổ rộng, khổ hẹp giữ nguyên dòng chảy dọc.
   Cấp nào xếp khối khác lên đầu (ví dụ trung tâm ngoại ngữ mở bằng khối khoá học) thì luật này
   không khớp và tự bỏ qua. */
@media (min-width: 900px) {
    .qinn .qinn-hero + .qilp-nb { margin-top: calc(-1 * clamp(24px, 4vw, 46px)); }
    .qinn .qinn-hero + .qilp-nb .qinn-wrap { position: relative; z-index: 2; }
}

/* ============================ SẮC THÁI TỪNG CẤP HỌC ============================ */

/* ---------------------------- MẦM NON ---------------------------- */
/* Mềm mại nhất: bo góc lớn, nền ngả hồng ấm, ô biểu tượng bo tròn hẳn. */
.qilp--mn {
    --nn-nen: #fff5f9;
    --nn-vien: #f7dce8;
    --nn-bo-s: 16px;
}
.qilp--mn .qilp-nb-icon { border-radius: 50%; }
.qilp--mn .qinn-hero::before { width: 480px; height: 480px; background: rgba(255, 255, 255, .12); }
.qilp--mn .qinn-the, .qilp--mn .qinn-gv, .qilp--mn .qinn-tt, .qilp--mn .qinn-hv { border-radius: var(--nn-bo); }
.qilp--mn .qinn-sec-nhan { letter-spacing: .04em; }

/* ---------------------------- TIỂU HỌC ---------------------------- */
.qilp--th {
    --nn-nen: #f2fbf5;
    --nn-vien: #d8ecdf;
    --nn-bo-s: 14px;
}
.qilp--th .qilp-nb-icon { border-radius: 50%; }
.qilp--th .qinn-hero::after { background: rgba(255, 255, 255, .1); }

/* ---------------------------- THCS ---------------------------- */
.qilp--thcs {
    --nn-nen: #f5f5ff;
    --nn-vien: #e0e0f5;
}

/* ---------------------------- THPT ---------------------------- */
/* Nghiêm túc, học thuật: bo góc nhỏ, nền xám xanh trung tính, tiêu đề khối gạch
   chân bằng vạch màu chủ đạo thay cho chữ nhãn bay bướm. */
.qilp--thpt {
    --nn-nen: #f4f6fa;
    --nn-vien: #dde3ed;
    --nn-bo-s: 8px;
}
.qilp--thpt .qinn-sec-h2 { position: relative; padding-bottom: 12px; }
.qilp--thpt .qinn-sec-h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 68px;
    height: 3px;
    border-radius: 2px;
    background: var(--nn-main);
}
.qilp--thpt .qinn-hero::before, .qilp--thpt .qinn-hero::after { border-radius: 24px; }

/* ---------------------------- GDTX - GDNN ---------------------------- */
.qilp--gdtx {
    --nn-nen: #f1faf8;
    --nn-vien: #d5eae6;
    --nn-bo-s: 8px;
}
.qilp--gdtx .qinn-hero::before, .qilp--gdtx .qinn-hero::after { border-radius: 30px; }

/* ---------------------------- TRUNG TÂM NGOẠI NGỮ ---------------------------- */
.qilp--nn {
    --nn-nen: #f4f7ff;
    --nn-vien: #dde5f7;
}

/* ---------------------------- TRUNG TÂM DU HỌC ---------------------------- */
/* Trầm và sang: nền ngả xám lạnh, ô biểu tượng nền tối chữ vàng cho hợp bảng màu
   navy + gold, hero cắt vát thay cho hai khối tròn. */
.qilp--dh {
    --nn-nen: #f5f7fa;
    --nn-vien: #dfe4ec;
    --nn-bo-s: 6px;
}
.qilp--dh .qilp-nb-icon {
    background: color-mix(in srgb, var(--nn-main) 92%, #000);
    color: var(--nn-cta);
}
.qilp--dh .qinn-hero::before {
    border-radius: 0;
    width: 520px;
    height: 520px;
    transform: rotate(28deg);
    right: -190px;
    top: -220px;
}
.qilp--dh .qinn-hero::after {
    border-radius: 0;
    width: 340px;
    height: 340px;
    transform: rotate(28deg);
    left: -150px;
    bottom: -190px;
}

/* ============================ VÙNG BẤM 44px ============================ */
/* Đo tại khổ 440px: nút tìm kiếm trên thanh điều hướng chỉ 40×40 — dưới mức 44px tối thiểu cho
   ngón tay (chuẩn đã chốt cho mọi trang điện thoại của hệ). Nới trong phạm vi .qilp để KHÔNG
   đụng ba mẫu landing đời trước (gdnn1/2/3) đang dùng chung qi-landing-nn.css. */
.qinn.qilp .qinn-tim-nut { width: 44px; height: 44px; }

/* ============================ ĐIỆN THOẠI ============================ */
/* Lề 10px là mốc chuẩn của mọi trang mobile trong hệ (user chốt) — bộ khung
   qi-landing-nn.css đang để 16px cho khổ rộng, siết lại ở khổ hẹp. */
@media (max-width: 575px) {
    .qinn .qilp-nb-o { padding: 16px; }
    .qinn .qilp-nb-icon { width: 44px; height: 44px; font-size: 18px; margin-bottom: 10px; }
    .qinn .qilp-nb-o h3 { font-size: 16px; }
}