/* =============================================================
   Phương Đông Landing — Premium Design v4
   Minimal: Blue + Red palette, banner hero, soft motion
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* ── Blue ── */
    --blue: #1d4ed8;
    --blue-deep: #1e3a8a;
    --blue-dark: #172554;
    --blue-mid: #3b82f6;
    --blue-light: #60a5fa;
    --blue-pale: #dbeafe;
    --blue-ghost: rgba(29,78,216,.06);

    /* ── Red ── */
    --red: #dc2626;
    --red-deep: #b91c1c;
    --red-light: #f87171;
    --red-pale: #fee2e2;
    --red-ghost: rgba(220,38,38,.06);

    /* ── Neutrals ── */
    --text-heading: #0f172a;
    --text-body: #334155;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    --white: #ffffff;
    --cream: #f8fafc;
    --soft: #f1f5f9;
    --dark: #0f172a;
    --dark-card: #1e293b;

    /* ── Glass ── */
    --glass: rgba(255,255,255,.82);
    --glass-border: rgba(255,255,255,.4);

    /* ── Shadows ── */
    --sh-xs: 0 1px 3px rgba(0,0,0,.04);
    --sh-sm: 0 4px 14px rgba(0,0,0,.05);
    --sh-md: 0 8px 30px rgba(0,0,0,.06);
    --sh-lg: 0 16px 50px rgba(0,0,0,.08);
    --sh-xl: 0 24px 60px rgba(0,0,0,.10);
    --sh-blue: 0 8px 30px rgba(29,78,216,.16);
    --sh-red: 0 8px 30px rgba(220,38,38,.16);

    /* ── Radii (extra round) ── */
    --r-sm: 14px;
    --r-md: 20px;
    --r-lg: 28px;
    --r-xl: 36px;
    --r-2xl: 48px;
    --r-pill: 100px;

    /* ── Easing ── */
    --ease: cubic-bezier(.22,1,.36,1);
    --spring: cubic-bezier(.34,1.56,.64,1);
    --smooth: cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════ RESET ═══════════════════════════════ */
*,*::before,*::after { margin:0;padding:0;box-sizing:border-box; }
html { scroll-behavior:smooth;-webkit-font-smoothing:antialiased; }
body {
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:var(--text-body); background:var(--white);
    overflow-x:hidden; line-height:1.7; font-size:15px;
}
h1,h2,h3,h4,h5,h6 {
    font-family:'Manrope',-apple-system,sans-serif;
    color:var(--text-heading); line-height:1.25; letter-spacing:-.02em;
}
a { text-decoration:none;color:inherit;transition:all .3s var(--smooth); }
img { max-width:100%;height:auto;display:block; }
ul { list-style:none; }
.material-symbols-outlined { vertical-align:middle; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; }
::selection { background:var(--blue-pale);color:var(--blue-deep); }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#cbd5e1;border-radius:10px; }
.container { max-width:1200px;margin:0 auto;padding:0 24px; }

/* ═══════════════════════════════ BUTTONS ═══════════════════════════════ */
.btn {
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 34px; border-radius:var(--r-pill);
    font-family:'Manrope',sans-serif; font-weight:700;font-size:.92rem;
    border:none; cursor:pointer; transition:all .4s var(--spring);
    white-space:nowrap; position:relative; overflow:hidden;
}
.btn::after {
    content:''; position:absolute; inset:0; opacity:0;
    background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);
    transition:opacity .3s;
}
.btn:hover::after { opacity:1; }
.btn .material-symbols-outlined { font-size:20px; }
.btn-blue {
    background:linear-gradient(135deg,var(--blue),var(--blue-deep));
    color:#fff; box-shadow:var(--sh-blue);
}
.btn-blue:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 14px 40px rgba(29,78,216,.28); }
.btn-red {
    background:linear-gradient(135deg,var(--red),var(--red-deep));
    color:#fff; box-shadow:var(--sh-red);
}
.btn-red:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 14px 40px rgba(220,38,38,.28); }
.btn-white { background:#fff;color:var(--blue-deep);box-shadow:var(--sh-md); }
.btn-white:hover { transform:translateY(-3px);box-shadow:var(--sh-lg); }
.btn-outline {
    background:transparent; color:var(--blue); border:2px solid var(--blue-pale);
}
.btn-outline:hover { background:var(--blue-pale); }

/* ═══════════════════════════════ SECTION HELPERS ═══════════════════════════════ */
.section-badge {
    display:inline-flex;align-items:center;gap:6px;
    font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;
    padding:8px 22px;border-radius:var(--r-pill);margin-bottom:16px;
}
.section-badge.blue { background:var(--blue-pale);color:var(--blue-deep); }
.section-badge.red { background:var(--red-pale);color:var(--red-deep); }
.section-badge.white { background:rgba(255,255,255,.15);color:#fff; }
.section-badge .material-symbols-outlined { font-size:16px;font-variation-settings:'FILL' 1; }
.section-title {
    font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:800;margin-bottom:14px;
}
.section-subtitle { font-size:1.05rem;color:var(--text-muted);max-width:560px; }
.section-header-center { text-align:center;margin-bottom:52px; }
.section-header-center .section-subtitle { margin:0 auto; }

/* ═══════════════════════════════ TOP BAR ═══════════════════════════════ */
.top-bar {
    background:linear-gradient(135deg,var(--dark),var(--dark-card));
    color:rgba(255,255,255,.8);font-size:.78rem;padding:8px 0;
}
.top-bar-inner { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; }
.top-bar-left { display:flex;align-items:center;gap:20px;flex-wrap:wrap; }
.top-bar-item { display:flex;align-items:center;gap:5px;color:rgba(255,255,255,.7);transition:color .2s; }
.top-bar-item:hover { color:#fff; }
.top-bar-item .material-symbols-outlined { font-size:15px;color:var(--blue-light); }
.top-bar-right { display:flex;align-items:center;gap:16px; }

/* ═══════════════════════════════ NAVIGATION ═══════════════════════════════ */
.main-nav {
    position:sticky;top:0;z-index:1000;
    background:var(--glass);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--glass-border);
    transition:all .4s var(--ease);
}
.main-nav.scrolled { box-shadow:var(--sh-md);background:rgba(255,255,255,.95); }
.nav-inner { display:flex;justify-content:space-between;align-items:center;height:72px; }
.nav-logo { display:flex;align-items:center;gap:12px; }
.nav-logo img { height:44px;width:44px;object-fit:contain;border-radius:var(--r-sm); }
.nav-logo-text { font-family:'Manrope',sans-serif;font-weight:800;font-size:.82rem;line-height:1.2;color:var(--text-heading); }
.nav-logo-text span { color:var(--blue); }
.nav-center { display:flex;align-items:center;gap:4px; }
.nav-center li { display:contents; }
.nav-center a {
    font-weight:600;font-size:.85rem;color:var(--text-body);
    padding:9px 16px;border-radius:var(--r-pill);transition:all .25s var(--smooth);
}
.nav-center a:hover { color:var(--blue);background:var(--blue-ghost); }
.nav-center a.active { color:var(--blue);background:var(--blue-pale); }
.nav-right { display:flex;align-items:center;gap:16px; }
.nav-phone { display:flex;align-items:center;gap:8px; }
.nav-phone-icon {
    width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--red-pale);color:var(--red-deep);
    transition:all .3s var(--spring);
}
.nav-phone:hover .nav-phone-icon { transform:scale(1.1);box-shadow:var(--sh-red); }
.nav-phone-icon .material-symbols-outlined { font-size:18px;font-variation-settings:'FILL' 1,'wght' 600; }
.nav-phone-text { font-size:.72rem;color:var(--text-muted);line-height:1.2; }
.nav-phone-text strong { display:block;font-size:.88rem;color:var(--red);font-family:'Manrope',sans-serif; }
.hamburger { display:none;flex-direction:column;cursor:pointer;gap:5px;padding:10px;border:none;background:none;border-radius:var(--r-sm); }
.hamburger span { display:block;width:22px;height:2px;background:var(--text-heading);border-radius:2px;transition:.3s; }
.mobile-menu {
    display:none;position:fixed;top:72px;right:-320px;width:300px;
    height:calc(100vh - 72px);background:var(--glass);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    z-index:999;padding:24px;transition:right .4s var(--ease);
    flex-direction:column;gap:4px;
    box-shadow:-8px 0 30px rgba(0,0,0,.08);border-left:1px solid var(--glass-border);
}
.mobile-menu.active { right:0; }
.mobile-menu a { display:block;padding:14px 16px;font-weight:600;font-size:.92rem;color:var(--text-body);border-radius:var(--r-sm);transition:.2s; }
.mobile-menu a:hover { background:var(--blue-ghost);color:var(--blue); }

/* ═══════════════════════════════ HERO — FULL BANNER IMAGE ═══════════════════════════════ */
.hero-banner {
    position:relative;
    overflow:hidden;
}
.hero-banner a { display:block; }
.hero-banner img {
    width:100%;display:block;
    transition:transform .6s var(--ease);
}
.hero-banner:hover img { transform:scale(1.015); }

/* ═══════════════════════════════ STATS ═══════════════════════════════ */
.stats-section {
    padding:56px 0; background:var(--white);
    position:relative; overflow:hidden;
}
.stats-section::before {
    content:'';position:absolute;top:0;left:0;right:0;height:100%;
    background:linear-gradient(180deg,var(--blue-ghost),transparent 60%);
    pointer-events:none;
}
.stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:2; }
.stat-card {
    text-align:center;padding:28px 16px;background:var(--white);
    border-radius:var(--r-lg);box-shadow:var(--sh-sm);
    transition:all .5s var(--spring);border:1px solid rgba(0,0,0,.03);
    position:relative;overflow:hidden;
}
.stat-card::before {
    content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
    width:40px;height:3px;border-radius:3px;
    background:linear-gradient(90deg,var(--blue),var(--blue-light));
    opacity:0;transition:all .4s var(--ease);
}
.stat-card:hover { transform:translateY(-8px);box-shadow:var(--sh-lg); }
.stat-card:hover::before { opacity:1;width:60px; }
.stat-card .stat-icon {
    width:56px;height:56px;border-radius:var(--r-md);margin:0 auto 14px;
    display:flex;align-items:center;justify-content:center;
    background:var(--blue-pale);color:var(--blue);
    transition:all .4s var(--spring);
}
.stat-card:hover .stat-icon { transform:scale(1.1) rotate(-5deg);box-shadow:var(--sh-blue); }
.stat-card .stat-icon .material-symbols-outlined { font-size:26px;font-variation-settings:'FILL' 1,'wght' 600; }
.stat-card .stat-number {
    font-family:'Manrope',sans-serif;font-size:2.2rem;font-weight:900;
    background:linear-gradient(135deg,var(--blue),var(--blue-light));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    line-height:1;margin-bottom:6px;
}
.stat-card .stat-text { font-size:.85rem;color:var(--text-muted);font-weight:600; }

/* ═══════════════════════════════ BANNER STRIP ═══════════════════════════════ */
.banner-strip {
    padding:28px 0;background:var(--cream);
}
.banner-strip a {
    display:block;border-radius:var(--r-xl);overflow:hidden;
    box-shadow:var(--sh-md);transition:all .5s var(--spring);
}
.banner-strip a:hover { transform:scale(1.008);box-shadow:var(--sh-xl); }
.banner-strip img { width:100%;display:block; }

/* ═══════════════════════════════ HỖ TRỢ HỌC PHÍ ═══════════════════════════════ */
.promo-section { padding:90px 0;background:var(--cream); }
.hocphi-highlight {
    background:linear-gradient(135deg,var(--blue-deep),var(--blue));
    color:#fff;padding:24px 32px;border-radius:var(--r-lg);
    margin-top:32px;
}
.hocphi-headline { display:flex;align-items:center;gap:12px; }
.hocphi-headline h3 { font-size:1.15rem;margin:0;color:#fff;font-weight:800; }
.hocphi-headline .material-symbols-outlined { font-size:28px;font-variation-settings:'FILL' 1;color:#fff; }
.text-red { color:var(--red-light);font-weight:900; }

.hocphi-grid {
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.hocphi-card {
    background:var(--white);border-radius:var(--r-lg);padding:28px;
    box-shadow:var(--sh-sm);border:1px solid rgba(0,0,0,.04);
    transition:all .5s var(--spring);position:relative;overflow:hidden;
}
.hocphi-card::before {
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,var(--blue),var(--red));border-radius:var(--r-lg) var(--r-lg) 0 0;
    opacity:0;transition:opacity .3s;
}
.hocphi-card:hover { transform:translateY(-6px);box-shadow:var(--sh-lg); }
.hocphi-card:hover::before { opacity:1; }
.hocphi-card-header {
    display:flex;align-items:center;gap:10px;margin-bottom:14px;
    padding-bottom:12px;border-bottom:2px solid var(--cream);
}
.hocphi-card-header .material-symbols-outlined {
    font-size:28px;color:var(--blue);font-variation-settings:'FILL' 1,'wght' 600;
    background:var(--blue-pale);padding:8px;border-radius:var(--r-sm);
}
.hocphi-card-header h4 { font-size:1.05rem;font-weight:800;color:var(--text-heading);margin:0; }
.hocphi-card ul { list-style:none;padding:0;margin:0; }
.hocphi-card li {
    font-size:.84rem;color:var(--text-body);line-height:1.6;
    padding:8px 0;border-bottom:1px solid rgba(0,0,0,.04);
    padding-left:16px;position:relative;
}
.hocphi-card li::before {
    content:'';position:absolute;left:0;top:14px;
    width:6px;height:6px;border-radius:50%;background:var(--blue-mid);
}
.hocphi-card li:last-child { border-bottom:none; }

/* Chính sách khác */
.hocphi-other h3 {
    font-size:1.2rem;font-weight:800;color:var(--text-heading);
    display:flex;align-items:center;gap:8px;margin-bottom:20px;
}
.hocphi-other h3 .material-symbols-outlined { color:var(--red);font-variation-settings:'FILL' 1; }
.hocphi-other-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.hocphi-other-card {
    background:var(--white);padding:28px;border-radius:var(--r-lg);
    box-shadow:var(--sh-sm);border:1px solid rgba(0,0,0,.04);
    text-align:center;transition:all .4s var(--spring);
}
.hocphi-other-card:hover { transform:translateY(-6px);box-shadow:var(--sh-lg); }
.hocphi-percent {
    font-family:'Manrope',sans-serif;font-size:2.8rem;font-weight:900;
    background:linear-gradient(135deg,var(--red),var(--red-deep));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    margin-bottom:12px;
}
.hocphi-percent.special {
    background:none;-webkit-text-fill-color:unset;
}
.hocphi-percent.special .material-symbols-outlined {
    font-size:2.8rem;color:var(--red);font-variation-settings:'FILL' 1;
}
.hocphi-other-card p { font-size:.88rem;color:var(--text-body);line-height:1.7;text-align:left; }

/* Hình ảnh sinh viên trong phần ưu đãi */
.student-photos { 
    display:grid;grid-template-columns:repeat(3, 1fr);gap:20px; 
}
.student-photo-item { 
    position:relative;border-radius:var(--r-lg);overflow:hidden;
    box-shadow:var(--sh-sm);aspect-ratio:4/3;
    transition:transform .4s var(--spring), box-shadow .4s var(--ease); 
}
.student-photo-item:hover { 
    transform:translateY(-6px);box-shadow:var(--sh-md); 
}
.student-photo-item img { 
    width:100%;height:100%;object-fit:cover;
    transition:transform .5s var(--ease);
}
.student-photo-item:hover img { 
    transform:scale(1.05); 
}
.student-photo-caption { 
    position:absolute;bottom:0;left:0;right:0;padding:24px 16px 16px;
    background:linear-gradient(180deg,transparent 0%,rgba(15,23,42,.85) 100%);
    color:#fff;display:flex;align-items:center;gap:8px;
    font-weight:700;font-size:.9rem;
}
.student-photo-caption .material-symbols-outlined { 
    font-size:20px;color:var(--blue-light);font-variation-settings:'FILL' 1; 
}

/* ═══════════════════════════════ CTA BANNER ═══════════════════════════════ */
.cta-banner {
    padding:60px 0;position:relative;overflow:hidden;
    background:linear-gradient(135deg,var(--blue-deep),var(--blue),var(--blue-mid));
}
.cta-banner::before {
    content:'';position:absolute;top:-60%;right:-10%;width:600px;height:600px;
    background:rgba(255,255,255,.04);border-radius:50%;
}
.cta-banner::after {
    content:'';position:absolute;bottom:-40%;left:-5%;width:400px;height:400px;
    background:rgba(255,255,255,.03);border-radius:50%;
}
.cta-banner-inner { position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:40px; }
.cta-banner-text { flex:1; }
.cta-banner h2 { color:#fff;font-size:clamp(1.4rem,2.5vw,2rem);font-weight:800; }
.cta-banner h2 span { color:var(--red-light); }
.cta-banner p { color:rgba(255,255,255,.7);font-size:.95rem;margin-top:4px; }
.cta-banner-img {
    flex-shrink:0;width:260px;height:260px;border-radius:var(--r-2xl);overflow:hidden;
    box-shadow:0 16px 50px rgba(0,0,0,.25);border:4px solid rgba(255,255,255,.2);
    position:relative;
}
.cta-banner-img img {
    width:100%;height:100%;object-fit:cover;
    transition:transform .6s var(--ease);
}
.cta-banner-img:hover img { transform:scale(1.08); }

/* ═══════════════════════════════ GALLERY ═══════════════════════════════ */
.gallery-section { padding:90px 0;background:var(--cream); }
.gallery-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:220px;
    gap:16px;
}
.gallery-item {
    position:relative;overflow:hidden;border-radius:var(--r-lg);
    cursor:pointer;box-shadow:var(--sh-sm);
    transition:all .5s var(--spring);
}
.gallery-item:hover { transform:translateY(-6px);box-shadow:var(--sh-xl); }
.gallery-item img {
    width:100%;height:100%;object-fit:cover;
    transition:transform .7s var(--ease);
}
.gallery-item:hover img { transform:scale(1.1); }
.gallery-item-tall { grid-row:span 2; }
.gallery-item-wide { grid-column:span 2; }
.gallery-overlay {
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 40%,rgba(15,23,42,.75) 100%);
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:24px;color:#fff;
    opacity:0;transition:opacity .4s var(--ease);
}
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay .material-symbols-outlined {
    font-size:28px;margin-bottom:8px;
    font-variation-settings:'FILL' 1,'wght' 600;
    color:var(--blue-light);
}
.gallery-overlay p {
    font-family:'Manrope',sans-serif;font-weight:700;font-size:.95rem;
    margin:0;
}

/* ═══════════════════════════════ TOP NHỮNG LỢI THẾ ═══════════════════════════════ */
.why-section { padding:90px 0;background:var(--white); }
.loithe-grid {
    display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px;
}
.loithe-card {
    background:var(--cream);padding:32px;border-radius:var(--r-lg);
    border:1px solid rgba(0,0,0,.04);transition:all .5s var(--spring);
    position:relative;overflow:hidden;
}
.loithe-card:hover { transform:translateY(-6px);box-shadow:var(--sh-lg);background:var(--white); }
.loithe-card:nth-child(5) { grid-column:span 2; }
.loithe-icon {
    width:56px;height:56px;border-radius:var(--r-md);
    display:flex;align-items:center;justify-content:center;
    background:var(--blue-pale);color:var(--blue);margin-bottom:16px;
    transition:all .4s var(--spring);
}
.loithe-card:hover .loithe-icon { transform:scale(1.1) rotate(-5deg);box-shadow:var(--sh-blue); }
.loithe-icon .material-symbols-outlined { font-size:26px;font-variation-settings:'FILL' 1,'wght' 600; }
.loithe-card h4 { font-size:1.05rem;font-weight:800;color:var(--text-heading);margin-bottom:12px; }
.loithe-card p { font-size:.88rem;color:var(--text-body);line-height:1.7;margin-bottom:8px; }
.loithe-card ul { list-style:none;padding:0;margin:8px 0 0; }
.loithe-card li {
    font-size:.86rem;color:var(--text-body);line-height:1.6;
    padding:6px 0 6px 20px;position:relative;
}
.loithe-card li::before {
    content:'✓';position:absolute;left:0;color:var(--blue);font-weight:800;
}


/* ═══════════════════════════════ REGISTER CTA (replaces form) ═══════════════════════════════ */
.register-section { padding:90px 0;background:var(--cream); }
.register-cta-card {
    display:flex;gap:40px;align-items:center;
    background:var(--white);border-radius:var(--r-2xl);
    box-shadow:var(--sh-lg);padding:48px;
    border:1px solid rgba(0,0,0,.04);position:relative;overflow:hidden;
}
.register-cta-card::before {
    content:'';position:absolute;top:0;left:0;right:0;height:5px;
    background:linear-gradient(90deg,var(--blue),var(--blue-light),var(--red),var(--red-light));
    border-radius:var(--r-2xl) var(--r-2xl) 0 0;
}
.register-cta-content { flex:1; }
.register-cta-content .section-title { margin-bottom:8px; }
.register-cta-buttons { display:flex;gap:16px;flex-wrap:wrap;margin-bottom:32px; }
.register-contact-row {
    display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.rc-item {
    display:flex;align-items:center;gap:10px;
    padding:12px 16px;background:var(--cream);border-radius:var(--r-sm);
    transition:all .3s var(--spring);border:1px solid transparent;
}
.rc-item:hover { background:var(--white);border-color:var(--blue-pale);transform:translateX(4px);box-shadow:var(--sh-sm); }
.rc-item .material-symbols-outlined { font-size:20px;color:var(--blue);flex-shrink:0;font-variation-settings:'FILL' 1; }
.rc-item small { display:block;font-size:.68rem;color:var(--text-light);text-transform:uppercase;font-weight:700;letter-spacing:.5px; }
.rc-item strong { display:block;font-size:.85rem;color:var(--text-heading);font-family:'Manrope',sans-serif; }
.register-cta-qr {
    flex-shrink:0;text-align:center;
}
.register-cta-qr img {
    width:140px;height:140px;border-radius:var(--r-md);object-fit:cover;
    box-shadow:var(--sh-sm);margin-bottom:10px;
}
.register-cta-qr p { font-size:.78rem;color:var(--text-muted);line-height:1.4; }

/* ═══════════════════════════════ FLOATING CONTACT BUTTONS ═══════════════════════════════ */
.floating-contacts {
    position:fixed;bottom:28px;left:28px;z-index:1000;
    display:flex;flex-direction:column;gap:12px;
}
.fc-btn {
    width:52px;height:52px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:#fff;box-shadow:var(--sh-md);
    transition:all .4s var(--spring);cursor:pointer;
}
.fc-btn:hover { transform:scale(1.15);box-shadow:var(--sh-xl); }
.fc-phone { background:linear-gradient(135deg,var(--blue),var(--blue-deep)); }
.fc-zalo { background:linear-gradient(135deg,#0068ff,#0050cc); }
.fc-btn .material-symbols-outlined { font-size:24px;font-variation-settings:'FILL' 1,'wght' 600; }

/* ═══════════════════════════════ BUTTON ANIMATIONS ═══════════════════════════════ */

/* Pulse Glow — for main CTA buttons */
.btn-cta-glow { animation:cta-glow 2.5s ease-in-out infinite; }
@keyframes cta-glow {
    0%,100% { box-shadow:0 8px 25px rgba(220,38,38,.3); }
    50% { box-shadow:0 8px 45px rgba(220,38,38,.55),0 0 20px rgba(220,38,38,.2); }
}

/* Ripple on click */
.btn-ripple { position:relative;overflow:hidden; }
.btn-ripple .ripple-wave {
    position:absolute;border-radius:50%;
    background:rgba(255,255,255,.35);
    transform:scale(0);animation:ripple-anim .6s ease-out forwards;
    pointer-events:none;
}
@keyframes ripple-anim {
    to { transform:scale(4);opacity:0; }
}

/* Bounce attention — for floating buttons */
.btn-bounce { animation:bounce-attention 3s ease-in-out infinite; }
@keyframes bounce-attention {
    0%,20%,50%,80%,100% { transform:translateY(0); }
    40% { transform:translateY(-8px); }
    60% { transform:translateY(-4px); }
}
.btn-bounce:hover { animation:none; }

/* Heartbeat pulse — for phone icons */
.btn-pulse { animation:heartbeat 2s ease-in-out infinite; }
@keyframes heartbeat {
    0%,100% { transform:scale(1); }
    14% { transform:scale(1.12); }
    28% { transform:scale(1); }
    42% { transform:scale(1.08); }
    56% { transform:scale(1); }
}

/* Shimmer sweep — for large CTA */
.btn-lg {
    padding:18px 42px;font-size:1rem;
    background-size:200% auto;
    position:relative;
}
.btn-lg::before {
    content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
    transition:left .5s;
}
.btn-lg:hover::before { left:100%; }

/* ═══════════════════════════════ PROGRAMS — 3 COL (near footer) ═══════════════════════════════ */
.programs-section { padding:80px 0;background:var(--white); }
.programs-columns { display:grid;grid-template-columns:repeat(3,1fr);gap:36px; }
.program-col {
    background:var(--cream);border-radius:var(--r-lg);padding:28px;
    border:1px solid rgba(0,0,0,.03);transition:all .5s var(--spring);
}
.program-col:hover { box-shadow:var(--sh-md);transform:translateY(-4px); }
.program-col h4 {
    font-size:.92rem;font-weight:700;color:var(--blue-deep);margin-bottom:18px;
    padding-bottom:12px;border-bottom:2px solid var(--blue-pale);
    display:flex;align-items:center;gap:8px;
}
.program-col h4 .material-symbols-outlined { font-size:20px;color:var(--blue);font-variation-settings:'FILL' 1; }
.program-col ul li {
    display:flex;align-items:flex-start;gap:10px;
    padding:8px 0;font-size:.85rem;color:var(--text-body);
    border-bottom:1px solid rgba(0,0,0,.04);transition:all .25s;
}
.program-col ul li:last-child { border-bottom:none; }
.program-col ul li:hover { padding-left:6px;color:var(--blue); }
.program-col ul li .material-symbols-outlined {
    font-size:16px;color:var(--blue);flex-shrink:0;margin-top:3px;
    font-variation-settings:'FILL' 1,'wght' 600;
}

/* ═══════════════════════════════ FOOTER ═══════════════════════════════ */
.site-footer { background:var(--dark);color:rgba(255,255,255,.7);padding:64px 0 0; }
.footer-grid { display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px; }
.footer-col h4 { color:#fff;font-size:.95rem;font-weight:700;margin-bottom:18px;position:relative;padding-bottom:12px; }
.footer-col h4::after {
    content:'';position:absolute;bottom:0;left:0;width:32px;height:3px;
    background:linear-gradient(90deg,var(--blue-light),var(--red-light));border-radius:2px;
}
.footer-col p,.footer-col li { font-size:.85rem;line-height:1.8;color:rgba(255,255,255,.5); }
.footer-col a { color:rgba(255,255,255,.5);transition:.2s; }
.footer-col a:hover { color:#fff;padding-left:4px; }
.footer-contact-item { display:flex;gap:10px;align-items:flex-start;margin-bottom:12px; }
.footer-contact-item .material-symbols-outlined { font-size:18px;color:var(--blue-light);margin-top:2px; }
.footer-bottom {
    margin-top:48px;padding:18px 0;
    background:linear-gradient(135deg,var(--red-deep),var(--red));
    border-top:1px solid rgba(255,255,255,.08);
}
.footer-bottom-inner { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px; }
.footer-bottom p { font-size:.82rem;color:rgba(255,255,255,.85);font-weight:600; }
.footer-bottom-links a { color:rgba(255,255,255,.75);font-size:.82rem;margin-left:20px;transition:.2s; }
.footer-bottom-links a:hover { color:#fff; }

/* ═══════════════════════════════ FLOATING CTA ═══════════════════════════════ */
.floating-cta { position:fixed;bottom:28px;right:28px;z-index:1000; }
.floating-cta a {
    display:flex;align-items:center;gap:8px;
    padding:14px 28px;border-radius:var(--r-pill);
    font-weight:700;font-size:.88rem;color:#fff;
    background:linear-gradient(135deg,var(--red),var(--red-deep));
    box-shadow:0 8px 30px rgba(220,38,38,.32);
    transition:all .4s var(--spring);font-family:'Manrope',sans-serif;
}
.floating-cta a:hover { transform:translateY(-4px) scale(1.05);box-shadow:0 14px 40px rgba(220,38,38,.4); }
.floating-cta .material-symbols-outlined { color:#fff; }

/* ═══════════════════════════════ WAVE SEPARATOR ═══════════════════════════════ */
.wave-sep { position:relative;height:80px;overflow:hidden; }
.wave-sep.white { background:var(--cream); }
.wave-sep.white svg path { fill:var(--white); }
.wave-sep.cream { background:var(--white); }
.wave-sep.cream svg path { fill:var(--cream); }
.wave-sep.blue { background:transparent; }
.wave-sep.blue svg path { fill:var(--cream); }
.wave-sep svg { position:absolute;bottom:0;left:0;width:100%;height:100%; }

/* ═══════════════════════════════ ANIMATIONS ═══════════════════════════════ */
@keyframes fadeInUp { from{opacity:0;transform:translateY(35px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeInLeft { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes float-subtle { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes pulse-glow {
    0%,100%{box-shadow:0 8px 25px rgba(220,38,38,.25)}
    50%{box-shadow:0 8px 40px rgba(220,38,38,.45)}
}
@keyframes shimmer {
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
}

/* ── Scroll reveal ── */
.reveal { opacity:0;transform:translateY(35px);transition:all .8s var(--ease); }
.reveal.visible { opacity:1;transform:translateY(0); }
.reveal-left { opacity:0;transform:translateX(-40px);transition:all .8s var(--ease); }
.reveal-left.visible { opacity:1;transform:translateX(0); }
.reveal-right { opacity:0;transform:translateX(40px);transition:all .8s var(--ease); }
.reveal-right.visible { opacity:1;transform:translateX(0); }
.reveal-scale { opacity:0;transform:scale(.92);transition:all .8s var(--ease); }
.reveal-scale.visible { opacity:1;transform:scale(1); }
.reveal-stagger > .reveal-child { opacity:0;transform:translateY(25px);transition:all .6s var(--ease); }
.reveal-stagger.visible > .reveal-child { opacity:1;transform:translateY(0); }
.reveal-stagger.visible > .reveal-child:nth-child(1) { transition-delay:0s; }
.reveal-stagger.visible > .reveal-child:nth-child(2) { transition-delay:.1s; }
.reveal-stagger.visible > .reveal-child:nth-child(3) { transition-delay:.2s; }
.reveal-stagger.visible > .reveal-child:nth-child(4) { transition-delay:.3s; }
.reveal-stagger.visible > .reveal-child:nth-child(5) { transition-delay:.4s; }
.reveal-stagger.visible > .reveal-child:nth-child(6) { transition-delay:.5s; }
.reveal-stagger.visible > .reveal-child:nth-child(7) { transition-delay:.6s; }

/* ═══════════════════════════════ RESPONSIVE ═══════════════════════════════ */
@media (max-width:1024px) {
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .programs-columns { grid-template-columns:1fr 1fr; }
    .hocphi-grid { grid-template-columns:1fr 1fr; }
    .hocphi-other-grid { grid-template-columns:1fr; }
    .student-photos { grid-template-columns:1fr; }
    .loithe-grid { grid-template-columns:1fr; }
    .loithe-card:nth-child(5) { grid-column:span 1; }
    .register-cta-card { flex-direction:column; }
    .register-contact-row { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .cta-banner-inner { flex-direction:column;text-align:center; }
    .cta-banner-img { width:200px;height:200px; }
    .gallery-grid { grid-template-columns:repeat(2,1fr);grid-auto-rows:200px; }
    .gallery-item-wide { grid-column:span 1; }
    .nav-phone { display:none; }
}
@media (max-width:768px) {
    .nav-center { display:none; }
    .hamburger { display:flex; }
    .mobile-menu { display:flex; }
    .programs-columns { grid-template-columns:1fr; }
    .hocphi-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr;gap:28px; }
    .footer-bottom-inner { flex-direction:column;text-align:center; }
    .top-bar-inner { justify-content:center;text-align:center; }
    .top-bar-right { display:none; }
    .cta-banner-img { width:180px;height:180px; }
    .gallery-grid { grid-auto-rows:180px; }
    .floating-cta { bottom:16px;right:16px; }
    .floating-cta a { padding:12px 20px;font-size:.82rem; }
    .floating-contacts { bottom:16px;left:16px; }
    .fc-btn { width:44px;height:44px; }
    .register-cta-card { padding:28px; }
    .register-cta-buttons { flex-direction:column; }
    .btn-lg { padding:14px 28px;font-size:.88rem; }
    .wave-sep { height:50px; }
}
@media (max-width:480px) {
    .stats-grid { grid-template-columns:1fr; }
    .program-col { padding:20px; }
    .register-cta-card { padding:20px; }
    .hocphi-highlight { padding:18px 20px; }
    .hocphi-card { padding:20px; }
    .cta-banner-img { width:150px;height:150px; }
    .gallery-grid { grid-template-columns:1fr;grid-auto-rows:240px; }
    .gallery-item-tall { grid-row:span 1; }
}