/* ===================================================================
   ADG — CSS của TRANG CHỦ (chỉ Default.aspx nạp). Mọi class tiền tố hp-.
   Tên class là hợp đồng với Default.aspx.cs (hàm Render* sinh markup) — đọc hàm sinh trước khi sửa.
   Màu/khoảng cách lấy từ tokens.css. Sửa file này xong tăng ?v=N ở Default.aspx.
   =================================================================== */

/* ---------- Thành phần dùng lại trong trang chủ ---------- */
.hp-pill {
    display: inline-block;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: .8125rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    line-height: 1.3;
}
a.hp-pill { transition: transform var(--t-fast), background var(--t-fast); }
a.hp-pill:hover { transform: translateY(-1px); }
.hp-pill-accent { background: var(--c-accent); color: var(--c-white); }
.hp-pill-accent:hover { color: var(--c-white); background: var(--c-accent-dark); }
.hp-pill-light { background: var(--c-primary-mist); color: var(--c-primary-soft); }
.hp-pill-light:hover { color: var(--c-primary); }
.hp-pill-soft { background: var(--c-primary-mist); color: var(--c-primary-soft); }
.hp-pill-outline { border: 1px solid color-mix(in srgb, var(--c-white) 70%, transparent); color: var(--c-white); background: color-mix(in srgb, var(--c-white) 12%, transparent); }
.bg-1{background: url(/Uploads/images/adg/bg-gt.jpg) bottom center / cover no-repeat;background-size: cover;}
.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 25px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.hp-btn:hover { transform: translateY(-2px); }
.hp-btn-accent { background: var(--c-accent); color: var(--c-white); box-shadow: 0 6px 16px color-mix(in srgb, var(--c-accent) 35%, transparent); }
.hp-btn-accent:hover { background: var(--c-accent-dark); color: var(--c-white); }
.hp-btn-sm { padding: 9px 20px; font-size: .875rem; }
.hp-btn-ghost { background: color-mix(in srgb, var(--c-white) 70%, transparent); color: var(--c-primary); border-color: var(--c-line); }
.hp-btn-ghost:hover { background: var(--c-white); color: var(--c-primary-soft); }
.hp-btn-outline { background: transparent; color: var(--c-white); border-color: var(--c-accent); }
.hp-btn-outline:hover { background: var(--c-accent); color: var(--c-white); }
.hp-btn-outline-accent { background: transparent; color: var(--c-accent-dark); border-color: var(--c-accent); }
.hp-btn-outline-accent:hover { background: var(--c-accent); color: var(--c-white); }

.hp-head {display: flex;align-items: flex-end;justify-content: space-between;/* gap: 20px; */margin-bottom: 34px;}
.hp-head h2 {margin: 12px 0 0;font-size: clamp(1.3rem, 2.4vw, 2rem);font-weight: 800;color: var(--c-primary);}
.hp-head-light h2 { color: var(--c-white); }
.hp-head-center { flex-direction: column; align-items: center; text-align: center; }

/* ================================================== 1. HERO ======= */
.hp-hero { position: relative; background: var(--c-primary-mist); }
.hp-hero-swiper { overflow: hidden; }
.hp-slide { position: relative; }
.hp-slide-media, .hp-slide-media img { display: block; width: 100%; }
.hp-slide-media img { aspect-ratio: 2732 / 1000; object-fit: cover; height: auto; }
.hp-slide-link { display: block; }

.hp-slide-inner { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.hp-slide-copy { max-width: 640px; pointer-events: auto; }
.hp-slide-eyebrow { margin: 0 0 10px; font-size: clamp(.8125rem, 1.15vw, 1rem); color: var(--c-primary); text-transform: uppercase; letter-spacing: .01em; }
.hp-slide-title { margin: 0 0 12px; font-size: clamp(1.3rem, 2.35vw, 2.1rem); font-weight: 800; line-height: 1.25; color: var(--c-primary); text-transform: uppercase; }
.hp-slide-accent { display: block; color: var(--c-accent); }
.hp-slide-desc { max-width: 470px; margin: 0 0 22px; font-size: clamp(.875rem, 1.15vw, 1.0625rem); color: var(--c-ink); }
.hp-slide-desc p {margin: 0;text-align: justify;}
.hp-slide-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hp-slide .hp-btn-accent { background: color-mix(in srgb, var(--c-accent) 55%, var(--c-white)); color: var(--c-primary); box-shadow: none; }
.hp-slide .hp-btn-accent:hover { background: var(--c-accent); color: var(--c-white); }

.hp-hero:hover .hp-hero-nav { opacity: 1; }
.hp-hero-nav {
    opacity: 0; transition: opacity var(--t), background var(--t-fast), color var(--t-fast);
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 44px; height: 44px; border-radius: 50%; border: 0;
    background: color-mix(in srgb, var(--c-white) 85%, transparent); color: var(--c-primary);
    box-shadow: var(--shadow-sm); cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.hp-hero-nav:hover { background: var(--c-accent); color: var(--c-white); }
.hp-hero-prev { left: 18px; }
.hp-hero-next { right: 18px; }
.hp-hero .hp-hero-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5; text-align: center; }
.hp-hero-dots .swiper-pagination-bullet { width: 10px; height: 10px; border-radius: 50%; background: var(--c-primary); opacity: .35; margin: 0 4px; }
.hp-hero-dots .swiper-pagination-bullet-active { background: var(--c-accent); opacity: 1; }

/* ================================================== 2. TUYỂN HỌC VIÊN */
.hp-enroll { padding: 34px 0 20px; }
.hp-enroll-card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.95fr); gap: 56px; align-items: center;
    padding: 48px 56px;
    border-radius: 28px;
    background: var(--c-primary-soft) center / cover no-repeat;
    color: var(--c-white);
    box-shadow: var(--shadow);
}
.hp-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.hp-enroll-title { margin: 0 0 12px; color: var(--c-white); font-size: clamp(1.6rem, 2.7vw, 2.25rem); font-weight: 700; }
.hp-enroll-desc { margin: 0 0 40px; max-width: 340px; color: color-mix(in srgb, var(--c-white) 92%, transparent); font-size: .9375rem; }
.hp-enroll-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hp-doc {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 26px 16px 24px;
    background: var(--c-white); border-radius: 18px; box-shadow: var(--shadow);
}
.hp-doc-icon { display: block; height: 104px; margin-bottom: 10px; font-size: 3rem; color: var(--c-primary-soft); }
.hp-doc-icon img { height: 100%; width: auto; margin: 0 auto; }
.hp-doc h3 { margin: 0 0 8px; font-size: 1.1875rem; font-weight: 700; color: var(--c-primary); }
.hp-doc p { margin: 0 0 20px; font-size: .875rem; color: var(--c-muted); line-height: 1.5; }
.hp-doc .hp-btn { margin-top: auto; }

/* ================================================== 3. VỀ CHÚNG TÔI */
.hp-about {padding: 40px 0 40px;}
.hp-about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 84px); align-items: center; }
.hp-about-media { position: relative; padding: 0 0 22px 26px; }
.hp-about-media::before {
    content: ""; position: absolute; left: 0; top: 36px; bottom: 0; width: 72%;
    border-left: 2px solid var(--c-primary-soft); border-bottom: 2px solid var(--c-primary-soft);
}
.hp-about-media img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 14px 26px color-mix(in srgb, var(--c-primary) 18%, transparent)); }
.hp-about-copy h2 {margin: 18px 0 8px;font-size: clamp(1.2rem, 2.4vw, 2rem);font-weight: 700;}
.hp-about-tag { margin: 0 0 14px; font-weight: 600; font-style: italic; color: var(--c-accent); font-size: 1.0625rem; }
.hp-about-text p {margin: 0 0 14px;font-size: 16px;color: var(--c-body);font-weight: 500;text-align: justify;}
.hp-ticks { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 12px; }
.hp-ticks li { display: flex; align-items: center; gap: 12px; font-size: .9375rem; color: var(--c-primary); font-weight: 500; }
.hp-ticks i { color: var(--c-primary-soft); font-size: 1.25rem; }

/* ================================================== 4. SỐ LIỆU ===== */
.hp-stats {padding: 50px 0;background: url(../images/line-solieu.svg) no-repeat center;background-size: contain;}
.hp-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hp-stat {text-align: center;margin-bottom: 60px;}
.hp-stat-icon {display: block;height: 142px;margin-bottom: 4px;font-size: 3.4rem;color: var(--c-primary-soft);}
.hp-stat-icon img { height: 100%; width: auto; margin: 0 auto; }
.hp-stat-num {display: block;font-family: var(--font-display);font-size: clamp(1.9rem, 3vw, 2.5rem);font-weight: 700;line-height: 1.1;color: var(--c-accent);}
.hp-stat-label {display: block;margin-top: 4px;font-size: 18px;color: var(--c-primary);font-weight: 500;}
.hp-stats-grid .hp-stat:nth-child(2), .hp-stats-grid .hp-stat:nth-child(4){margin-top: 60px;margin-bottom: 0;}
/* ================================================== 5+6. NGÀNH ĐÀO TẠO + TẠI SAO CHỌN */
.hp-programs, .hp-whyus {
    background: var(--c-blue-deep) center top / cover no-repeat;
    color: var(--c-white);
}
.hp-programs { padding: 64px 0 76px; }
/* Khối "Tại sao chọn": nền xanh thứ hai, chừa chỗ ở đáy cho thẻ cảm nhận chồng lên */
.hp-whyus { padding: 72px 0 190px; background-position: center bottom; }
.hp-prog-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px; }
.hp-prog { position: relative; background: var(--c-white); border-radius: 16px; overflow: hidden; color: var(--c-body); box-shadow: var(--shadow); }
.hp-prog-1 { grid-column: 1; grid-row: 1; }
.hp-prog-2 { grid-column: 1; grid-row: 2; }
.hp-prog-3 { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }
.hp-prog-1, .hp-prog-2 {display: grid;grid-template-columns: minmax(0, 55%) minmax(0, 1fr);}
.hp-prog-media { overflow: hidden; background: var(--c-primary-mist); }
.hp-prog-media img {width: 100%;height: 280px;min-height: 210px;object-fit: cover;}
.hp-prog-3 .hp-prog-media { flex: 1 1 auto; max-height: 330px; }
.hp-prog-3 .hp-prog-media img {min-height: 100%;}
.hp-prog-body {position: relative;padding: 60px 35px 26px 28px;}
.hp-prog-body:before{content:"";width: 0;height: 0;border-top: 280px solid #ffffff;border-left: 60px solid transparent;display: block;position: absolute;top: 0;right: 100%;}
.hp-prog-3 .hp-prog-body { padding: 0 82px 28px 24px; }
.hp-prog-icon {display: block;width: 85px;height: 85px;margin-bottom: 8px;font-size: 2.2rem;color: var(--c-primary-soft);position: absolute;left: -82px;top: 35px;border-radius: 10px;background: rgba(255, 255, 255, 0.50);padding: 10px;}
.hp-prog-icon img { width: 100%; height: 100%; object-fit: contain; }
.hp-prog-3 .hp-prog-icon {margin-top: -34px;position: relative;padding: 6px;border-radius: 12px;/* background: var(--c-white); */box-shadow: var(--shadow-sm);left: 0px;top: -10px;}
.hp-prog-body h3 {margin: 0 0 20px;font-size: 1.375rem;font-weight: 800;}
.hp-prog-body h3 a {color: #02206A;}
.hp-prog-body h3 a:hover { color: var(--c-primary-soft); }
.hp-prog-body ul {list-style: none;padding: 0;margin: 0;display: grid;gap: 10px;}
.hp-prog-body li {position: relative;padding-left: 16px;font-size: 16px;color: var(--c-body);line-height: 1.45;font-weight: 500;}
.hp-prog-body li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary-soft); }
.hp-prog-go {
    position: absolute; right: 22px; top: 26px;
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-accent); color: var(--c-white); font-size: 1.15rem;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--c-accent) 40%, transparent);
    transition: transform var(--t-fast), background var(--t-fast);
}
.hp-prog-3 .hp-prog-go { top: 16px; }
.hp-prog-go:hover { transform: translateX(4px); background: var(--c-accent-dark); color: var(--c-white); }
.hp-why { margin-top: 0; }
.hp-why-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 40px; align-items: start; margin-bottom: 42px; }
.hp-why-head h2 { margin: 0; color: var(--c-white); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; }
.hp-why-head p { margin: 0; text-align: right; font-size: .9375rem; color: color-mix(in srgb, var(--c-white) 88%, transparent); }
.hp-why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.hp-why-item { text-align: center; }
.hp-why-icon { display: block; height: 118px; margin-bottom: 10px; font-size: 3.6rem; color: var(--c-white); }
.hp-why-icon img { height: 100%; width: auto; margin: 0 auto; }
.hp-why-item h3 {
    display: inline-block; max-width: 100%; margin: 0 0 12px; padding: 7px 16px;
    border-radius: 10px; background: var(--c-accent); color: var(--c-white);
    font-size: .875rem; font-weight: 700; line-height: 1.25;
}
.hp-why-item p { margin: 0 auto; max-width: 280px; font-size: .8125rem; color: color-mix(in srgb, var(--c-white) 88%, transparent); line-height: 1.6; }

/* ---------- Bảng giá (nằm trong nền xanh của khối ngành, trên "Tại sao chọn") ---------- */
/* Bảng giá: nền SÁNG riêng giữa hai khối xanh để trang có nhịp sáng/tối */
.hp-pricing { padding: 72px 0 76px; background: var(--c-bg-soft); }
.hp-pricing .hp-head { margin-bottom: 30px; }
/* Thanh chuyển hạng mục (JS bật lớp .is-tabs; chưa có JS thì bảng hiện đủ ba hạng mục nối nhau) */
.hp-price-tabs { display: none; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.hp-price.is-tabs .hp-price-tabs, .is-tabs .hp-price-tabs { display: flex; }
.hp-price-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border: 1.5px solid var(--c-line);
    border-radius: var(--radius-pill);
    background: var(--c-white);
    color: var(--c-primary);
    font-family: var(--font-base);
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.hp-price-tab i { color: var(--c-accent); }
.hp-price-tab:hover { border-color: var(--c-primary-soft); }
.hp-price-tab.is-active { background: var(--c-primary-soft); border-color: var(--c-primary-soft); color: var(--c-white); }
.hp-price-tab.is-active i { color: var(--c-white); }
.is-tabs .hp-price-table tbody { display: none; }
.is-tabs .hp-price-table tbody.is-active { display: table-row-group; }
.is-tabs .hp-price-group { display: none; }

.hp-price-card { background: var(--c-white); border-radius: 18px; overflow: hidden; border: 1px solid var(--c-line); box-shadow: var(--shadow); }
.hp-price-table { width: 100%; border-collapse: collapse; color: var(--c-body); font-size: .9375rem; }
.hp-price-table thead th {
    padding: 15px 20px; background: var(--c-primary); color: var(--c-white);
    font-family: var(--font-display); font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; text-align: left;
}
.hp-price-table td {padding: 14px 20px;border-top: 1px solid var(--c-line-soft);line-height: 1.5;color: #282727;}
.hp-price-table tbody tr:not(.hp-price-group):hover td { background: var(--c-bg-soft); }
.hp-price-group th {
    padding: 13px 20px; background: var(--c-primary-mist); color: var(--c-primary-soft); text-align: left;
    font-family: var(--font-display); font-size: 1rem; font-weight: 800; text-transform: uppercase; border-top: 1px solid var(--c-line);
}
.hp-price-table td:nth-child(1){background-color: #00b9bb;}
.hp-price-table td:last-child{text-align: center;}
.hp-price-table thead th:last-child{text-align: center;}
.hp-price-group th i { margin-right: 8px; color: var(--c-accent); }
.hp-price-group th a { color: inherit; }
.hp-price-name { width: 28%; font-weight: 600; }
.hp-price-name a { color: var(--c-primary); }
.hp-price-name a:hover { color: var(--c-accent-dark); }
.hp-price-fee { width: 19%; }
.hp-price-fee .post-price { display: flex; flex-direction: column; gap: 2px; }
.hp-price-fee strong {color: var(--c-accent-dark);font-family: var(--font-display);font-weight: 600;}
.hp-price-fee strong.is-contact { color: var(--c-primary-soft); }
.hp-price-fee small { color: var(--c-muted); font-size: .75rem; }
.hp-price-fee em { font-style: normal; color: var(--c-muted); font-size: .8125rem; }
.hp-price-note { margin: 16px 0 0; text-align: center; font-size: .875rem; color: var(--c-muted); }

/* ================================================== 7. CẢM NHẬN ==== */
.hp-voices { position: relative; z-index: 2; margin-top: -118px; }
.hp-voice-card {
    position: relative; text-align: center;
    padding: 36px clamp(56px, 8vw, 110px) 40px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--c-white) 55%, var(--c-primary-mist) 100%);
    box-shadow: var(--shadow-lg);
}
.hp-voice-card h2 { margin: 0 0 22px; font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 800; color: var(--c-primary-soft); }
.hp-voice-swiper { overflow: hidden; }
.hp-voice-swiper blockquote { margin: 0 auto 22px; max-width: 760px; font-size: 1.0625rem; line-height: 1.8; color: var(--c-body); border: 0; padding: 0; }
.hp-voice-name { margin: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--c-accent); }
.hp-voice-role { margin: 2px 0 0; font-size: .9375rem; color: var(--c-muted); }
.hp-voice-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: 0; background: transparent; color: var(--c-primary-soft);
    font-size: 1.6rem; cursor: pointer; transition: color var(--t-fast), transform var(--t-fast);
}
.hp-voice-nav:hover { color: var(--c-accent); }
.hp-voice-nav.swiper-button-disabled, .hp-voice-nav.is-idle { opacity: .45; cursor: default; }
.hp-voice-prev { left: 28px; }
.hp-voice-next { right: 28px; }

/* ================================================== 8. HOẠT ĐỘNG === */
/* Lưới 5 cột tràn viền, căn giữa theo chiều dọc; tỷ lệ cột lấy từ mockup 1366: 195 · 265 · 390 · 265 · 195 */
.hp-activity { padding: 70px 0 64px; overflow: hidden; }
.hp-activity .hp-head { margin-bottom: 40px; }
.hp-mosaic {
    display: grid; grid-template-columns: 195fr 265fr 390fr 265fr 195fr; gap: 13px; align-items: center;
    width: 100%;
}
.hp-mosaic-col { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.hp-mosaic-item { display: block; overflow: hidden; background: var(--c-primary-mist); }
.hp-mosaic-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.hp-mosaic-item:hover img { transform: scale(1.05); }
.hp-mosaic-c1 .hp-mosaic-item, .hp-mosaic-c5 .hp-mosaic-item { aspect-ratio: 195 / 253; }
.hp-mosaic-c2 .hp-mosaic-item, .hp-mosaic-c4 .hp-mosaic-item { aspect-ratio: 265 / 190; }
.hp-mosaic-c3 .hp-mosaic-item { aspect-ratio: 390 / 507; }
.hp-mosaic-flat { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 13px; }
.hp-mosaic-flat .hp-mosaic-item { aspect-ratio: 4 / 3; }
.hp-activity .container.text-center { margin-top: 36px; }

/* ================================================== 9. TIN TỨC ===== */
.hp-news {padding: 30px 0 80px;}
.hp-news-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.hp-news-lead-img { display: block; overflow: hidden; border-radius: 12px; margin-bottom: 18px; }
.hp-news-lead-img img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; transition: transform .5s var(--ease); }
.hp-news-lead-img:hover img { transform: scale(1.03); }
.hp-badge { display: inline-block; margin-bottom: 8px; padding: 3px 11px; border-radius: var(--radius-pill); background: var(--c-accent); color: var(--c-white); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.hp-news-lead h3 { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); font-size: 1.375rem; font-weight: 600; font-family: var(--font-base); }
.hp-news-lead h3 a, .hp-news-item h3 a { color: var(--c-primary); }
.hp-news-lead h3 a:hover, .hp-news-item h3 a:hover { color: var(--c-accent-dark); }
.hp-news-lead p { margin: 0; font-size: .9375rem; color: var(--c-muted); line-height: 1.7; }
.hp-news-list { display: grid; gap: 0; }
.hp-news-item { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 18px; padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px dashed var(--c-line); }
.hp-news-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.hp-news-thumb { display: block; overflow: hidden; border-radius: 10px; align-self: start; }
.hp-news-thumb img { width: 100%; aspect-ratio: 218 / 130; object-fit: cover; transition: transform .5s var(--ease); }
.hp-news-thumb:hover img { transform: scale(1.05); }
.hp-news-item h3 { margin: 0 0 6px; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; font-family: var(--font-base); }
.hp-news-meta { display: flex; gap: 18px; margin: 0 0 8px; font-size: .8125rem; color: var(--c-muted); }
.hp-news-meta i { color: var(--c-accent); margin-right: 4px; }
.hp-news-sum { margin: 0; font-size: .875rem; color: var(--c-muted); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ================================================== RESPONSIVE ===== */
@media (max-width: 1199.98px) {
    .hp-enroll-card { padding: 36px 28px 36px 36px; }
    .hp-prog-body { padding-right: 70px; }
    .hp-prog-body h3 { font-size: 1.2rem; }
}

@media (max-width: 991.98px) {
    .hp-enroll-card {grid-template-columns: 1fr;padding: 30px 15px;}
    .hp-enroll-desc {margin-bottom: 22px;text-align: justify;}
    .hp-about-grid { grid-template-columns: 1fr; }
    .hp-about-media {max-width: 520px;margin: 0 auto;}
    .hp-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
    .hp-prog-grid { grid-template-columns: 1fr; }
    .hp-prog-1, .hp-prog-2, .hp-prog-3 { grid-column: 1; grid-row: auto; }
    .hp-why-head { grid-template-columns: 1fr; gap: 14px; }
    .hp-why-head p { text-align: left; }
    .hp-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
    .hp-news-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    /* Hero: ảnh trên, chữ dưới (ảnh nền có nửa trái trống để chừa chỗ cho chữ — ở màn hẹp chữ không đủ chỗ) */
    .hp-slide.is-text .hp-slide-media img { aspect-ratio: auto; height: 250px; object-position: 76% center; }
    .hp-slide.is-image .hp-slide-media img { aspect-ratio: auto; height: 200px; }
    .hp-slide-inner { position: static; padding: 18px 0 44px; background: var(--c-primary-mist); }
    .hp-slide-copy {max-width: none;padding-top: 20px;padding-bottom: 20px;}
    .hp-hero-nav { display: none; }
    /* chấm tròn nằm cuối vùng ảnh (cao 250px / 200px), không đè lên nút */
    .hp-hero .hp-hero-dots { bottom: auto; top: 232px; }

    .hp-enroll-docs { grid-template-columns: 1fr; }
    .hp-doc {flex-direction: row;flex-wrap: wrap;text-align: left;align-items: center;gap: 4px 14px;padding: 10px 15px;}
    .hp-doc-icon { height: 70px; margin: 0; flex: 0 0 70px; }
    .hp-doc h3, .hp-doc p { flex: 1 1 calc(100% - 100px); margin: 0; }
    .hp-doc .hp-btn { margin: 10px 0 0 84px; }

    .hp-programs { padding: 48px 0 56px; }
    .hp-whyus { padding: 52px 0 150px; }
    .hp-head {flex-direction: column;align-items: flex-start;gap: 15px;}
    .hp-head-center { align-items: center; }
    .hp-prog-1, .hp-prog-2 { grid-template-columns: 1fr; }
    .hp-prog-media img {m;min-height: 200px;max-height: 280px;}
    .hp-prog-body {padding: 18px 40px 22px 20px;}
    .hp-prog-icon {margin-top: 0;left: 10px;top: -70px;}
    .hp-prog-go { top: 18px; right: 18px; }
    .hp-prog-3 .hp-prog-body { padding-right: 76px; }

    .hp-pricing { padding: 52px 0 56px; }
    .is-tabs .hp-price-table tbody.is-active { display: block; }
    .hp-price-tab { padding: 9px 16px; font-size: .8125rem; }
    .hp-price-table, .hp-price-table tbody, .hp-price-table tr, .hp-price-table td, .hp-price-table th { display: block; width: 100%; }
    .hp-price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .hp-price-table td {display: grid;grid-template-columns: 112px minmax(0, 1fr);gap: 10px;padding: 6px 10px;border-top: 0;align-items: center;font-size: 13px;}
    .hp-price-table td::before {content: attr(data-label);font-size: 10px;font-weight: 800;text-transform: uppercase;color: #004779;}
    .hp-price-table tbody tr:not(.hp-price-group) { padding: 8px 0; border-top: 1px solid var(--c-line); }
    .hp-price-name, .hp-price-fee { width: 100%; }
    .hp-voices { margin-top: -100px; }
    .hp-voice-card { padding: 28px 22px 66px; }
    .hp-voice-nav { top: auto; bottom: 14px; transform: none; font-size: 1.4rem; }
    .hp-voice-prev { left: 22px; }
    .hp-voice-next { right: 22px; }

    .hp-activity {padding: 30px 0;}
    .hp-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px; }
    .hp-mosaic-c3 { grid-column: 1 / -1; grid-row: 1; }
    .hp-mosaic-c1, .hp-mosaic-c5 { justify-content: center; }
    .hp-mosaic-c1 .hp-mosaic-item, .hp-mosaic-c5 .hp-mosaic-item {aspect-ratio: 2/3;}
    .hp-news-item { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
    .hp-news-sum { -webkit-line-clamp: 2; }
}

@media (max-width: 575.98px) {
    .hp-why-grid {
    gap: 10px;
}
    .hp-stats-grid { gap: 22px 10px; }
    .hp-stat-icon { height: 84px; }
    .hp-slide-eyebrow{
        font-size: 12px;
        font-weight: 600;
    }
    .hp-slide-title{
    line-height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-btn, .hp-prog-go, .hp-news-lead-img img, .hp-news-thumb img { transition: none; }
}