* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    width: 100%;
    min-width: 320px;
    overflow-x: clip;
}

html, body {
    max-width: 100vw;
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navbar */
.navbar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: none;
    border-bottom: none;
}

/* Navbar solid cho các trang không có hero ảnh nền */
.navbar-solid {
    background: #ffffff;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.navbar-solid .logo-text {
    background: linear-gradient(135deg, #667eea 0%, #22c55e 55%, #111 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.navbar-solid .nav-menu a,
.navbar-solid .nav-menu a:visited {
    color: #1a1a2e !important;
    -webkit-text-fill-color: #1a1a2e !important;
    text-shadow: none;
}

.navbar-solid .nav-menu a:hover {
    color: #0288d1 !important;
    -webkit-text-fill-color: #0288d1 !important;
}

.navbar-solid .btn-nav-login {
    color: #1a1a2e !important;
    border-color: rgba(0,0,0,0.25) !important;
}

.navbar-solid .nav-hamburger span {
    background: #1a1a2e;
}

.navbar-solid .nav-hamburger {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.15);
}

/* Navbar khi scroll xuống (trang chủ) */
.navbar-scrolled {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease;
}

.navbar-scrolled .navbar-search-bar {
    display: none;
}

/* Chữ menu đổi tối khi scroll */
.navbar-scrolled .nav-menu {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.1);
}

.navbar-scrolled .nav-menu a {
    color: #1a1a2e !important;
    -webkit-text-fill-color: #1a1a2e !important;
    text-shadow: none;
}

.navbar-scrolled .nav-menu a:hover {
    background: rgba(0,0,0,0.08) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #0288d1 !important;
    -webkit-text-fill-color: #0288d1 !important;
}

.navbar-scrolled .logo-text {
    background: linear-gradient(135deg, #667eea 0%, #22c55e 55%, #111 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.navbar-scrolled .btn-nav-login {
    color: #1a1a2e !important;
    border-color: rgba(0,0,0,0.3) !important;
}

.navbar-scrolled .btn-nav-login:hover {
    background: rgba(0,0,0,0.08) !important;
}

.navbar-scrolled .logo {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.1);
}

.navbar .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 64px;
    position: relative;
    z-index: 2;
}

.navbar-search-bar {
    display: flex;
    justify-content: center;
    padding: 0.6rem 1.5rem 0.8rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    position: relative;
    z-index: 1;
}

.navbar-search-bar .hero-search {
    width: 100%;
    max-width: 560px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
}

/* Search dropdown */
.search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% - 0.4rem);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: 560px;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(102,126,234,0.15);
    z-index: 100;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.search-dropdown.open {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(4px);
    pointer-events: all;
}

.search-dropdown-section {
    padding: 1rem 1.2rem 0.5rem;
}

.search-dropdown-section + .search-dropdown-section {
    border-top: 1px solid #f0f0f0;
}

.search-dropdown-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Chip style for popular */
.search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #f0f4ff;
    color: #667eea;
    border: 1px solid #d0d8ff;
    border-radius: 50px;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}

.search-chip:hover {
    background: #667eea;
    color: #fff;
    border-color: #667eea;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102,126,234,0.3);
}

/* List style for quick access */
.search-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.65rem 0.8rem;
    color: #333;
    text-decoration: none;
    font-size: 0.92rem;
    border-radius: 12px;
    transition: all 0.15s;
    margin-bottom: 0.2rem;
}

.search-item:hover {
    background: #f0f4ff;
    color: #667eea;
    transform: translateX(4px);
}

.search-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.search-item-icon.blue   { background: #e8edff; }
.search-item-icon.orange { background: #fff3e0; }
.search-item-icon.green  { background: #e8f5e9; }

.search-item-text { flex: 1; }
.search-item-text strong { display: block; font-weight: 600; font-size: 0.9rem; }
.search-item-text span { font-size: 0.78rem; color: #999; }

.search-item-arrow {
    color: #ccc;
    font-size: 0.8rem;
    transition: color 0.15s;
}

.search-item:hover .search-item-arrow { color: #667eea; }

.search-dropdown-footer {
    padding: 0.7rem 1.2rem;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #aaa;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: flex-end;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 0.4rem;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 0.25rem 0.7rem 0.25rem 0.3rem;
    border-radius: 50px;
    transition: background 0.2s;
    width: fit-content;
}

.logo:hover {
    background: rgba(255,255,255,0.25);
}

.logo-img {
    height: 48px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.logo:hover .logo-img { transform: scale(1.05); }

.logo-text {
    font-size: 1.7rem;
    font-weight: 900;
    background: linear-gradient(135deg, #667eea 0%, #22c55e 55%, #111 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
    filter: drop-shadow(0 1px 8px rgba(102,126,234,0.3));
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50px;
    padding: 0.3rem 0.5rem;
}

.navbar-solid .nav-menu {
    background: rgba(0,0,0,0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0,0,0,0.1);
}

.nav-menu li { position: relative; }

.nav-menu a {
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    padding: 0.4rem 1.1rem;
    border-radius: 50px;
    position: relative;
    transition: all 0.2s ease;
    display: block;
    background: rgba(255,255,255,0.0);
    border: 1px solid transparent;
    white-space: nowrap;
    text-shadow: none;
}

.nav-menu a:not(.btn-primary):not(.btn-nav-register):not(.btn-nav-login):hover {
    color: #fff;
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.25);
}

/* Đăng nhập button */
.btn-nav-login {
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,0.5) !important;
    border-radius: 20px !important;
    padding: 0.4rem 1.1rem !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}

.btn-nav-login:hover {
    background: rgba(255,255,255,0.2) !important;
    border-color: #fff !important;
}

/* Đăng ký button */
.btn-nav-register {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border-radius: 20px !important;
    padding: 0.45rem 1.2rem !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    box-shadow: 0 3px 14px rgba(102,126,234,0.35) !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    display: block !important;
}

.btn-nav-register:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 20px rgba(102,126,234,0.45) !important;
    opacity: 0.92 !important;
}


/* Buttons */
.btn-primary {
    background: #3498db;
    color: white;
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s;
}

.btn-primary:hover {
    background: #2980b9;
}

.btn-secondary {
    background: transparent;
    color: #3498db;
    padding: 0.7rem 1.5rem;
    border: 2px solid #3498db;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
}

.btn-secondary:hover {
    background: #3498db;
    color: white;
}

.btn-full {
    width: 100%;
}

.btn-back {
    background: #95a5a6;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 1rem;
}

/* Hero Section */
.hero {
    background: url('c97693f2-41ea-4b3e-b0a9-c16bcda2a53b.png') center center / cover no-repeat;
    color: white;
    width: 100%;
    height: 100dvh;
    min-height: 100svh;
    position: relative;
    background-color: #0d1b4b;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(10,20,80,0.08) 0%, rgba(30,10,60,0.06) 100%);
    z-index: 0;
}

.hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}

.hero-badge {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.5rem 1.4rem;
    border-radius: 50px;
}

.hero-title {
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    font-weight: 900;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 2px 30px rgba(0,0,0,0.5);
    margin: 0;
    letter-spacing: -1px;
}

.hero-title-top {
    color: #FFD700;
    -webkit-text-fill-color: #FFD700;
    font-size: clamp(3.2rem, 7vw, 6.5rem);
    font-weight: 900;
    text-shadow: 0 2px 20px rgba(255,215,0,0.4);
    display: inline;
}

.hero-title span,
#typewriterText {
    display: inline;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: clamp(2.2rem, 5vw, 5rem);
    white-space: nowrap;
}

.typewriter-cursor {
    display: inline-block;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: clamp(2.2rem, 5vw, 5rem);
    font-weight: 900;
    animation: blink-cursor 0.7s step-end infinite;
    margin-left: 2px;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.hero-title-line1 { color: #fff; }
.hero-title-line2 { color: #f9a825; }

.hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.88);
    font-weight: 400;
    letter-spacing: 0.3px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 0.6rem 1.6rem;
    border-radius: 50px;
    margin: 0;
}

.subtitle-brand {
    font-weight: 800;
    -webkit-text-fill-color: unset;
    background: none;
}

.sb-edu {
    font-weight: 800;
    background: linear-gradient(135deg, #00c853, #0288d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sb-pass {
    font-weight: 800;
    background: linear-gradient(135deg, #0288d1, #1a1a2e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-search {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 50px;
    padding: 0.45rem 0.45rem 0.45rem 1.2rem;
    width: 100%;
    max-width: 580px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    gap: 0.5rem;
}

.hero-search .search-icon { font-size: 1.1rem; flex-shrink: 0; }

.hero-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.98rem;
    color: #333;
    background: transparent;
    min-width: 0;
}

.hero-search .search-btn {
    background: linear-gradient(135deg, #1565c0, #42a5f5);
    color: white;
    border-radius: 40px;
    padding: 0.55rem 1.3rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.hero-search .search-btn:hover { opacity: 0.88; }

.hero-cta-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-btn-primary {
    background: #f9a825;
    color: #1a1a2e;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.75rem 1.8rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(249,168,37,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(249,168,37,0.5);
}

.hero-btn-secondary {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255,255,255,0.4);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.75rem 1.8rem;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.2s;
}

.hero-btn-secondary:hover { background: rgba(255,255,255,0.25); }

.hero-features {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50px;
    padding: 0.7rem 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 2;
    white-space: nowrap;
}

.hero-feature-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.3rem 0.9rem;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.2s;
}

.hero-feature-item:last-child { border-right: none; }

.hero-feature-item:hover { background: rgba(255,255,255,0.18); }

@media (max-width: 768px) {
    .hero-title { font-size: 2.4rem; letter-spacing: -0.5px; }
    .hero-title span { font-size: 2.8rem; }
    .hero-inner { padding: 5rem 1rem 3rem; }
    .hero-features { bottom: 1rem; padding: 0.6rem 0.8rem; }
    .hero-feature-item { font-size: 0.8rem; padding: 0.25rem 0.6rem; border-right: none; border-bottom: none; flex: unset; }
    .hero-btn-primary, .hero-btn-secondary { font-size: 0.9rem; padding: 0.65rem 1.3rem; }
}

/* Ecosystem Section */
.ecosystem-section {
    background: linear-gradient(160deg, #0a0e1a 0%, #0d1b2e 50%, #0a1628 100%);
    position: relative;
    overflow: hidden;
}

.ecosystem-section::before {
    content: '';
    position: absolute;
    top: -200px; left: 50%;
    transform: translateX(-50%);
    width: 900px; height: 900px;
    background: radial-gradient(circle, rgba(2,136,209,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.eco-sticky-wrap {
    padding: 5rem 0 0;
}

.eco-header-sticky {
    text-align: center;
    margin-bottom: 3.5rem;
    padding: 0 1.5rem;
}

.ecosystem-header {
    text-align: center;
    margin-bottom: 3rem;
}

.eco-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(2,136,209,0.2), rgba(0,200,83,0.2));
    border: 1px solid rgba(2,136,209,0.5);
    color: #64d8ff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.45rem 1.3rem;
    border-radius: 50px;
    margin-bottom: 1.2rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(2,136,209,0.2);
}

.eco-header-sticky h2,
.ecosystem-header h2 {
    font-size: 3.2rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 0.8rem;
    letter-spacing: 2px;
    background: none;
    -webkit-text-fill-color: #fff;
    text-shadow: 0 0 40px rgba(2,136,209,0.3);
}

.eco-title-brand {
    background: linear-gradient(135deg, #00c6ff, #00e676, #0288d1);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: eco-brand-shine 3s linear infinite;
}

@keyframes eco-brand-shine {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.ecosystem-subtitle {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.5);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

.eco-header-stats {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-top: 2rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 60px;
    padding: 0.6rem 2rem;
    backdrop-filter: blur(10px);
}

.eco-hstat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.5rem;
}

.eco-hstat-num {
    font-size: 1.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #00c6ff, #00e676);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.eco-hstat-lbl {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.eco-hstat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.12);
}

/* Stacking cards - scene pattern */
.eco-stack-container {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.eco-card-scene {
    height: 100vh;
    display: flex;
    align-items: flex-start;
    padding-top: 100px;
}

.eco-stack-card {
    position: sticky;
    top: 100px;
    border-radius: 24px;
    padding: 2.8rem 3.2rem;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.07);
    min-height: 200px;
    width: 100%;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.eco-stack-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.12);
}

.eco-card-scene:nth-child(1) .eco-stack-card { z-index: 1; }
.eco-card-scene:nth-child(2) .eco-stack-card { z-index: 2; }
.eco-card-scene:nth-child(3) .eco-stack-card { z-index: 3; }
.eco-card-scene:nth-child(4) .eco-stack-card { z-index: 4; }
.eco-card-scene:nth-child(5) .eco-stack-card { z-index: 5; }
.eco-card-scene:nth-child(6) .eco-stack-card { z-index: 6; }

/* Colors - dark premium */
.eco-blue   { background: linear-gradient(135deg, #0d47a1 0%, #1565c0 60%, #1976d2 100%); }
.eco-purple { background: linear-gradient(135deg, #00695c 0%, #00897b 60%, #26a69a 100%); }
.eco-orange { background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 60%, #388e3c 100%); }
.eco-green  { background: linear-gradient(135deg, #01579b 0%, #0277bd 60%, #0288d1 100%); }
.eco-teal   { background: linear-gradient(135deg, #006064 0%, #00838f 60%, #00acc1 100%); }
.eco-navy   { background: linear-gradient(135deg, #0d1b3e 0%, #1565c0 60%, #0288d1 100%); }

.eco-card-bg-icon {
    position: absolute;
    right: 2rem;
    bottom: -8px;
    font-size: 7rem;
    opacity: 0.08;
    pointer-events: none;
    line-height: 1;
}

.eco-card-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    position: relative;
    z-index: 1;
}

.eco-card-icon-wrap {
    font-size: 3.5rem;
    flex-shrink: 0;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

.eco-card-text { flex: 1; }

.eco-stack-card h3 {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 800;
    margin: 0 0 0.45rem;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.eco-stack-card p {
    color: rgba(255,255,255,0.75);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
}

.eco-card-link {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    background: rgba(255,255,255,0.15);
    padding: 0.55rem 1.3rem;
    border-radius: 50px;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.25);
    transition: all 0.25s ease;
    letter-spacing: 0.03em;
    backdrop-filter: blur(6px);
}

.eco-card-link:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.5);
    transform: scale(1.04);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.eco-card-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

.eco-feat-tag {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 0.22rem 0.7rem;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
}

.eco-feat-tag:first-child {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.45);
}

.eco-feat-tag:hover {
    background: rgba(255,255,255,0.25);
}

.eco-card-coming { opacity: 0.85; }

.coming-soon-badge {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.45rem 1.1rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.05em;
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
    50%       { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}

@media (max-width: 600px) {
    .eco-stack-card { flex-direction: column; gap: 1rem; padding: 1.8rem; }
    .eco-card-content { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .ecosystem-header h2 { font-size: 2rem; }
    .eco-header-sticky h2 { font-size: 2rem; }
}

.hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
}

.hero-text {
    flex: 1;
    max-width: 600px;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
}

.btn-cta {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-radius: 15px;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.btn-cta-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-cta-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.btn-cta-secondary {
    background: white;
    color: #667eea;
    border: 2px solid #667eea;
}

.btn-cta-secondary:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    background: #f8f9fa;
}

.btn-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.btn-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.btn-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.btn-subtitle {
    font-size: 0.9rem;
    opacity: 0.9;
}

.btn-cta-secondary .btn-subtitle {
    color: #777;
}


.hero-mascot {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mascot-img {
    width: 600px;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Benefits Section */
.benefits {
    padding: 6rem 0;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    position: relative;
    overflow: hidden;
}
/* Orbs nền */
.benefits::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79,70,229,.35) 0%, transparent 70%);
    top: -150px; left: -100px;
    pointer-events: none;
}
.benefits::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168,85,247,.3) 0%, transparent 70%);
    bottom: -100px; right: -80px;
    pointer-events: none;
}

.benefits-header {
    text-align: center;
    margin-bottom: 3.5rem;
    position: relative;
    z-index: 1;
}

.benefits-badge {
    display: inline-block;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    color: #c4b5fd;
    font-size: .8rem;
    font-weight: 700;
    padding: .45rem 1.3rem;
    border-radius: 50px;
    margin-bottom: 1.1rem;
    letter-spacing: .4px;
    border: 1px solid rgba(196,181,253,.3);
}

.benefits h2,
.benefits-header h2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    color: #fff;
    margin-bottom: .6rem;
    text-shadow: 0 2px 20px rgba(79,70,229,.4);
}

.benefits-sub {
    font-size: 1rem;
    color: rgba(255,255,255,.6);
    margin: 0;
}

.benefits-brand {
    background: linear-gradient(135deg, #a78bfa, #f0abfc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.benefit-card {
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 2rem 1.8rem 1.8rem;
    border-radius: 24px;
    text-align: left;
    border: 1px solid rgba(255,255,255,.12);
    position: relative;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.22,.68,0,1.2), box-shadow .3s, border-color .3s;
    opacity: 0;
    translate: 0 40px;
}
/* Gradient border glow khi hover */
.benefit-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(167,139,250,0), rgba(167,139,250,.5), rgba(240,171,252,0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.benefit-card:hover::before { opacity: 1; }

.benefit-card.visible {
    opacity: 1;
    translate: 0 0;
    transition: opacity .6s ease, translate .6s ease, transform .3s cubic-bezier(.22,.68,0,1.2), box-shadow .3s, border-color .3s;
}

.benefit-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(79,70,229,.3), 0 0 0 1px rgba(167,139,250,.2);
    border-color: rgba(167,139,250,.3);
}

/* Số thứ tự */
.benefit-num {
    position: absolute;
    top: 1.2rem; right: 1.4rem;
    font-size: .72rem;
    font-weight: 800;
    color: rgba(196,181,253,.5);
    letter-spacing: .5px;
}

/* Icon */
.benefit-icon-wrap {
    width: 62px; height: 62px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem;
    margin-bottom: 1.1rem;
    position: relative;
}
/* Glow dưới icon */
.benefit-icon-wrap::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 10px;
    border-radius: 50%;
    filter: blur(6px);
    opacity: .5;
    background: inherit;
}

.benefit-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #e9d5ff;
    margin-bottom: .5rem;
}

.benefit-card p {
    font-size: .87rem;
    color: rgba(255,255,255,.6);
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 900px) { .benefit-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) {
    .benefit-grid { grid-template-columns: 1fr; gap: 1rem; }
    .benefit-card { padding: 1.5rem; }
    .benefits { padding: 4rem 0; }
}

/* Subjects Section */
.subjects {
    padding: 4rem 0 2rem;
    overflow: hidden;
}

.subjects h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
}

/* Marquee wrapper */
.subjects-marquee-wrap {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Fade edges */
.subjects-marquee-wrap::before,
.subjects-marquee-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.subjects-marquee-wrap::before {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
}
.subjects-marquee-wrap::after {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
}

.subjects-marquee {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: marquee-scroll 28s linear infinite;
    padding: 0.5rem 0;
}

.subjects-marquee:hover { animation-play-state: paused; }

@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.subject-card {
    color: white;
    padding: 1.4rem 1.8rem;
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.25s, box-shadow 0.25s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    min-width: 130px;
    position: relative;
    overflow: hidden;
}

.subject-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.08);
    opacity: 0;
    transition: opacity 0.25s;
    border-radius: 20px;
}

.subject-card:hover::before { opacity: 1; }

.subject-card:hover {
    transform: translateY(-8px) scale(1.04);
}

/* Màu riêng từng môn */
.subject-card:nth-child(12n+1)  { background: linear-gradient(135deg, #667eea, #764ba2); box-shadow: 0 6px 20px rgba(102,126,234,0.4); }
.subject-card:nth-child(12n+2)  { background: linear-gradient(135deg, #f093fb, #f5576c); box-shadow: 0 6px 20px rgba(245,87,108,0.4); }
.subject-card:nth-child(12n+3)  { background: linear-gradient(135deg, #4facfe, #00f2fe); box-shadow: 0 6px 20px rgba(79,172,254,0.4); }
.subject-card:nth-child(12n+4)  { background: linear-gradient(135deg, #43e97b, #38f9d7); box-shadow: 0 6px 20px rgba(67,233,123,0.4); }
.subject-card:nth-child(12n+5)  { background: linear-gradient(135deg, #fa709a, #fee140); box-shadow: 0 6px 20px rgba(250,112,154,0.4); }
.subject-card:nth-child(12n+6)  { background: linear-gradient(135deg, #a18cd1, #fbc2eb); box-shadow: 0 6px 20px rgba(161,140,209,0.4); }
.subject-card:nth-child(12n+7)  { background: linear-gradient(135deg, #ffecd2, #fcb69f); box-shadow: 0 6px 20px rgba(252,182,159,0.4); color: #5a3e2b; }
.subject-card:nth-child(12n+8)  { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); box-shadow: 0 6px 20px rgba(161,196,253,0.4); color: #1a3a5c; }
.subject-card:nth-child(12n+9)  { background: linear-gradient(135deg, #fd7043, #ff8a65); box-shadow: 0 6px 20px rgba(253,112,67,0.4); }
.subject-card:nth-child(12n+10) { background: linear-gradient(135deg, #11998e, #38ef7d); box-shadow: 0 6px 20px rgba(17,153,142,0.4); }
.subject-card:nth-child(12n+11) { background: linear-gradient(135deg, #6a11cb, #2575fc); box-shadow: 0 6px 20px rgba(106,17,203,0.4); }
.subject-card:nth-child(12n+12) { background: linear-gradient(135deg, #f7971e, #ffd200); box-shadow: 0 6px 20px rgba(247,151,30,0.4); color: #4a3000; }

.subject-icon {
    font-size: 2.4rem;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
    line-height: 1;
}

.subject-card span {
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}


/* Latest Materials */
.latest-materials {
    padding: 4rem 0;
    background: #f8f9fa;
}

.latest-materials h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2rem;
}

.material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
}

.material-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #f0f0f0;
}

.material-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    backdrop-filter: blur(10px);
}

.badge-paid {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.badge-free {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.material-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.material-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.material-card:hover img {
    transform: scale(1.05);
}

.material-card-content {
    padding: 1.8rem;
}

.material-card h3 {
    margin-bottom: 0.8rem;
    font-size: 1.15rem;
    line-height: 1.4;
    color: #2c3e50;
    min-height: 2.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.material-card p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.material-meta {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    font-size: 0.85rem;
    color: #666;
    flex-wrap: wrap;
}

.material-meta span {
    background: #f8f9fa;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-weight: 500;
}

.material-price {
    font-size: 1.4rem;
    color: #e74c3c;
    font-weight: 700;
    margin: 1.2rem 0;
    text-align: center;
    padding: 0.5rem;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
    border-radius: 10px;
}

.material-actions {
    display: flex;
    gap: 0.8rem;
}

.material-actions button {
    flex: 1;
    padding: 0.75rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

/* Page Header */
.page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem 0;
    text-align: center;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

/* Materials Section */
.materials-section {
    padding: 3rem 0;
}

/* Empty State */
.empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-bottom: 2rem;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
    animation: floatEmpty 3s ease-in-out infinite;
}

@keyframes floatEmpty {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

.empty-state-text {
    font-size: 1.3rem;
    color: #6c757d;
    font-weight: 500;
    margin: 0;
}

.filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.filters input,
.filters select {
    padding: 0.7rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    flex: 1;
    min-width: 200px;
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

/* Auth nav wrapper — navbar trên trang đăng nhập/đăng ký */
.auth-nav-wrap {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(102,126,234,0.3);
}

.auth-nav-wrap .navbar {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
}

/* ============================================
   AUTH — PREMIUM REDESIGN
   ============================================ */
.auth-section {
    min-height: 100vh;
    background: #080f1a;
    display: flex;
    align-items: center;
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

/* Animated background orbs */
.auth-section::before {
    content: '';
    position: absolute;
    top: -20%; left: -10%;
    width: 55vw; height: 55vw;
    background: radial-gradient(circle, rgba(2,136,209,0.13) 0%, transparent 60%);
    border-radius: 50%;
    animation: authOrb1 8s ease-in-out infinite alternate;
    pointer-events: none;
}

.auth-section::after {
    content: '';
    position: absolute;
    bottom: -20%; right: -10%;
    width: 50vw; height: 50vw;
    background: radial-gradient(circle, rgba(0,200,83,0.1) 0%, transparent 60%);
    border-radius: 50%;
    animation: authOrb2 10s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes authOrb1 {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(5%,8%) scale(1.1); }
}
@keyframes authOrb2 {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(-5%,-6%) scale(1.08); }
}

/* Grid dots background */
.auth-section .container {
    position: relative;
    z-index: 2;
}

.auth-wrap {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 0;
    max-width: 920px;
    margin: 0 auto;
    width: 100%;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
    position: relative;
    z-index: 1;
    animation: authFadeUp 0.7s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes authFadeUp {
    from { opacity: 0; transform: translateY(32px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Left panel ── */
.auth-panel-left {
    background: linear-gradient(160deg, #0d47a1 0%, #0288d1 45%, #00897b 100%);
    padding: 3.5rem 2.8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    min-height: 520px;
}

/* Decorative circles */
.auth-panel-left::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 320px; height: 320px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
}
.auth-panel-left::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 260px; height: 260px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
}

.apl-top { position: relative; z-index: 1; }

.apl-logo {
    width: 140px; height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3));
    margin-bottom: 1.2rem;
    display: block;
}

.apl-brand {
    font-size: 2.2rem;
    font-weight: 900;
    color: white;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.apl-slogan {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
    font-style: italic;
    margin-bottom: 2rem;
}

.apl-features {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    position: relative;
    z-index: 1;
}

.apl-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255,255,255,0.92);
    font-size: 0.86rem;
    font-weight: 500;
}

.apl-feature-icon {
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.apl-brand-box {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.55);
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 50px;
    padding: 0.45rem 1.2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
}

.apl-brand-box .apl-brand {
    color: #fff;
}


    position: relative;
    z-index: 1;
    align-self: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

.apl-mascot {
    width: 130px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,0.3));
    animation: floatMascot 3.5s ease-in-out infinite;
}

/* ── Right panel ── */
.auth-panel-right {
    background: #0d1b2a;
    padding: 3.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* Subtle grid texture */
.auth-panel-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.auth-panel-right h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #e8f4fd;
    margin-bottom: 0.35rem;
    position: relative;
}

.auth-panel-right .auth-subtitle {
    font-size: 0.84rem;
    color: #4a6070;
    margin-bottom: 2rem;
    position: relative;
}

/* Floating label inputs */
.auth-panel-right .form-group {
    margin-bottom: 1.15rem;
    position: relative;
}

.auth-panel-right label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #607d8b;
    margin-bottom: 0.45rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    position: relative;
}

.auth-panel-right input[type="email"],
.auth-panel-right input[type="password"],
.auth-panel-right input[type="text"] {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0.8rem 1.1rem;
    color: #e3f2fd;
    font-size: 0.93rem;
    transition: all 0.25s ease;
    outline: none;
    box-sizing: border-box;
    position: relative;
}

.auth-panel-right input::placeholder { color: #2a3f52; }

.auth-panel-right input:focus {
    border-color: #0288d1;
    background: rgba(2,136,209,0.07);
    box-shadow: 0 0 0 4px rgba(2,136,209,0.1), 0 2px 12px rgba(2,136,209,0.08);
}

.auth-panel-right input:not(:placeholder-shown):not(:focus) {
    border-color: rgba(0,200,83,0.3);
    background: rgba(0,200,83,0.04);
}

.auth-panel-right .helper-text {
    font-size: 0.7rem;
    color: #2a3f52;
    display: block;
    margin-top: 0.3rem;
}

/* Submit button */
.auth-panel-right .btn-primary.btn-full {
    width: 100%;
    padding: 0.9rem;
    background: linear-gradient(135deg, #0288d1 0%, #0277bd 50%, #00897b 100%);
    background-size: 200% 200%;
    border: none;
    border-radius: 14px;
    color: white;
    font-size: 0.96rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 6px 24px rgba(2,136,209,0.35);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

.auth-panel-right .btn-primary.btn-full::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.auth-panel-right .btn-primary.btn-full:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(2,136,209,0.45);
}

.auth-panel-right .btn-primary.btn-full:hover::after { opacity: 1; }
.auth-panel-right .btn-primary.btn-full:active { transform: translateY(0); }

/* Auth link */
.auth-panel-right .auth-link {
    text-align: center;
    font-size: 0.84rem;
    color: #3d5a6e;
    margin-top: 1.4rem;
    position: relative;
}

.auth-panel-right .auth-link a {
    color: #42a5f5;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s;
}

.auth-panel-right .auth-link a:hover { color: #90caf9; }

.auth-panel-right .forgot-password {
    color: #42a5f5;
    font-size: 0.8rem;
    transition: color 0.2s;
}
.auth-panel-right .forgot-password:hover { color: #90caf9; }

/* Checkbox */
.auth-panel-right .form-group.checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.auth-panel-right .form-group.checkbox label {
    text-transform: none;
    font-size: 0.82rem;
    color: #4a6070;
    margin: 0;
    letter-spacing: 0;
    font-weight: 500;
}

/* Password wrapper */
.auth-panel-right .password-wrapper input {
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: #e3f2fd;
}

.auth-panel-right .password-wrapper input:focus {
    border-color: #0288d1;
    background: rgba(2,136,209,0.07);
    box-shadow: 0 0 0 4px rgba(2,136,209,0.1);
}

.auth-panel-right .toggle-password {
    color: #37474f;
    transition: color 0.2s;
}
.auth-panel-right .toggle-password:hover { color: #90caf9; }

/* Divider with text */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    position: relative;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.07);
}

.auth-divider span {
    font-size: 0.72rem;
    color: #2a3f52;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* ── Old auth-box — keep for modal fallback ── */
.auth-box {
    max-width: 450px;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: 10px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    position: relative;
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-mascot {
    position: absolute;
    top: -60px;
    right: -60px;
    z-index: 10;
}

.auth-mascot-img {
    width: 180px;
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
    animation: floatMascot 3s ease-in-out infinite;
}

@keyframes floatMascot {
    0%, 100% { transform: translateY(0px) rotate(-5deg); }
    50%       { transform: translateY(-10px) rotate(5deg); }
}

.auth-logo-container {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo {
    display: block;
    width: 120px;
    height: auto;
    margin: 0 auto 1rem;
    object-fit: contain;
}

.auth-slogan {
    color: #7f8c8d;
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 0.5rem;
}

.auth-box h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #2c3e50;
}

/* Responsive auth */
@media (max-width: 680px) {
    .auth-wrap { grid-template-columns: 1fr; border-radius: 16px; }
    .auth-panel-left { padding: 2rem; flex-direction: row; flex-wrap: wrap; gap: 1rem; }
    .apl-mascot { display: none; }
    .apl-features { display: none; }
    .auth-panel-right { padding: 2rem 1.5rem; }
}

.error-message {
    background: #fee;
    border: 1px solid #fcc;
    color: #c33;
    padding: 0.8rem;
    border-radius: 5px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    animation: shake 0.5s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.error-text {
    color: #e74c3c;
    font-size: 0.85rem;
    display: block;
    margin-top: 0.3rem;
    min-height: 1.2rem;
}

.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input {
    flex: 1;
    padding-right: 3rem;
}

.toggle-password {
    position: absolute;
    right: 0.8rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.3rem;
    transition: transform 0.2s;
}

.toggle-password:hover {
    transform: scale(1.1);
}

.forgot-password {
    display: inline-block;
    margin-top: 0.5rem;
    color: #3498db;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s;
}

.forgot-password:hover {
    color: #2980b9;
    text-decoration: underline;
}

.btn-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn-full:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-group input::placeholder {
    color: #bdc3c7;
    font-size: 0.95rem;
}

.helper-text {
    display: block;
    font-size: 0.8rem;
    color: #7f8c8d;
    margin-top: 0.3rem;
    font-style: italic;
}

.demo-account {
    background: linear-gradient(135deg, #e8f4f8 0%, #f0f8ff 100%);
    border: 2px dashed #3498db;
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
    text-align: center;
}

.demo-title {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
}

.demo-info {
    background: white;
    padding: 0.8rem;
    border-radius: 5px;
    margin-bottom: 0.8rem;
}

.demo-info p {
    margin: 0.3rem 0;
    font-size: 0.9rem;
    color: #34495e;
}

.btn-demo {
    background: #3498db;
    color: white;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-demo:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}

.form-group.checkbox {
    display: flex;
    align-items: center;
}

.form-group.checkbox input {
    width: auto;
    margin-right: 0.5rem;
}

.auth-link {
    text-align: center;
    margin-top: 1.5rem;
}

.auth-link a {
    color: #3498db;
    text-decoration: none;
}

/* Exam Section */
.exam-section {
    padding: 3rem 0;
    min-height: calc(100vh - 200px);
}

.subjects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.exams-grid {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.exam-card {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.3s;
}

.exam-card:hover {
    transform: translateX(5px);
}

.exam-test {
    background: white;
    padding: 2rem;
    border-radius: 10px;
}

.exam-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #eee;
}

.timer {
    font-size: 1.2rem;
    color: #e74c3c;
    font-weight: bold;
}

.question {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.question h3 {
    margin-bottom: 1rem;
}

.options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.options label {
    padding: 0.7rem;
    background: white;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.options label:hover {
    background: #e8f4f8;
}

.options input {
    margin-right: 0.5rem;
}

/* Exam Result */
.exam-result {
    background: white;
    padding: 2rem;
    border-radius: 10px;
}

.result-summary {
    text-align: center;
    margin-bottom: 3rem;
}

.score {
    font-size: 3rem;
    color: #27ae60;
    font-weight: bold;
    margin-bottom: 1rem;
}

.details {
    font-size: 1.2rem;
    color: #666;
}

.answer-review {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border-radius: 10px;
}

.answer-review.correct {
    background: #d4edda;
    border-left: 4px solid #28a745;
}

.answer-review.incorrect {
    background: #f8d7da;
    border-left: 4px solid #dc3545;
}

/* CTA Register Section */
.cta-register-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0d1f2d 0%, #0a2a1a 50%, #0d1f2d 100%);
    position: relative;
    overflow: hidden;
}

.cta-register-bg-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cta-circle-1 {
    width: 500px; height: 500px;
    top: -200px; left: -150px;
    background: radial-gradient(circle, rgba(2,136,209,0.18) 0%, transparent 70%);
}

.cta-circle-2 {
    width: 400px; height: 400px;
    bottom: -150px; right: -100px;
    background: radial-gradient(circle, rgba(0,200,83,0.18) 0%, transparent 70%);
}

.cta-register-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.cta-register-badge {
    display: inline-block;
    background: rgba(0,200,83,0.15);
    border: 1px solid rgba(0,200,83,0.4);
    color: #69f0ae;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 1.2rem;
}

.cta-register-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 1rem;
}

.cta-brand {
    background: linear-gradient(135deg, #0288d1, #00c853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cta-register-desc {
    color: rgba(255,255,255,0.72);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.4rem;
    max-width: 520px;
}

.cta-register-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.cta-register-perks span {
    color: #b2dfdb;
    font-size: 0.9rem;
    font-weight: 600;
}

.cta-register-btns {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.cta-btn-main {
    background: linear-gradient(135deg, #0288d1, #00c853);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.85rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(2,136,209,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.cta-btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(2,136,209,0.55);
    color: white;
}

.cta-btn-sub {
    color: rgba(255,255,255,0.65);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.cta-btn-sub:hover { color: #fff; }

/* Right: stat cards */
.cta-register-right {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.cta-register-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 1.5rem 1.2rem;
    text-align: center;
    backdrop-filter: blur(8px);
    transition: background 0.2s, transform 0.2s;
}

.cta-register-card:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-4px);
}

.cta-card-icon { font-size: 1.8rem; margin-bottom: 0.5rem; }

.cta-card-stat {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, #0288d1, #00c853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.cta-card-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    margin-top: 0.3rem;
}

@media (max-width: 900px) {
    .cta-register-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .cta-register-right {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .cta-register-section { padding: 3.5rem 0; }
    .cta-register-right { grid-template-columns: 1fr 1fr; }
    .cta-register-perks { flex-direction: column; gap: 0.4rem; }
}

/* Support Section - Redesigned */
.support-section {
    background: linear-gradient(160deg, #0d1f2d 0%, #0a2a1a 50%, #0d1f2d 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.support-section::before {
    content: '';
    position: absolute;
    top: -150px; left: -150px;
    width: 450px; height: 450px;
    background: radial-gradient(circle, rgba(2,136,209,0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.support-section::after {
    content: '';
    position: absolute;
    bottom: -100px; right: -100px;
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(0,200,83,0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.support-wrapper {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Right Side - QR */
.support-left {
    position: sticky;
    top: 100px;
}

.qr-container {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(12px);
    text-align: center;
}

.qr-label-top {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.2rem;
    letter-spacing: 0.3px;
}

.qr-box {
    position: relative;
    text-align: center;
    margin-bottom: 1.5rem;
}

.qr-image {
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.qr-scan-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00c853, transparent);
    animation: scan 2s ease-in-out infinite;
    z-index: 2;
}

@keyframes scan {
    0%, 100% { top: 0; opacity: 0; }
    50%       { top: 100%; opacity: 1; }
}

.transfer-note {
    background: rgba(255,255,255,0.08);
    border-left: 3px solid #00c853;
    padding: 1rem 1.2rem;
    border-radius: 12px;
    text-align: left;
}

.note-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #69f0ae;
    margin-bottom: 0.4rem;
}

.note-content {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.4rem;
    font-family: 'Courier New', monospace;
    background: rgba(255,255,255,0.08);
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
}

.note-example {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    font-style: italic;
}

.note-example em {
    color: #69f0ae;
    font-weight: 600;
}

/* Left Side - Content */
.support-right {
    color: white;
}

.support-thank-badge {
    display: inline-block;
    background: rgba(255,215,0,0.15);
    border: 1px solid rgba(255,215,0,0.35);
    color: #ffd54f;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 1.2rem;
}

.support-right h2 {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 900;
    line-height: 1.25;
    margin-bottom: 1.4rem;
    color: #fff;
}

.support-brand {
    background: linear-gradient(135deg, #0288d1, #00c853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.support-description {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    color: rgba(255,255,255,0.72);
}

.support-highlight {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.4rem 0 2rem;
    padding: 1.1rem 1.4rem;
    background: rgba(255,215,0,0.08);
    border-radius: 14px;
    border: 1px solid rgba(255,215,0,0.2);
    color: #ffd54f;
    line-height: 1.6;
}

/* Stats row */
.support-stats-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.support-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.support-stat-num {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, #0288d1, #00c853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.support-stat-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
}

.support-stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.15);
}

.support-features { display: none; }
.support-icon     { display: none; }

@media (max-width: 900px) {
    .support-wrapper {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .support-left { position: static; }
    .qr-image { max-width: 200px; }
}

@media (max-width: 480px) {
    .support-section { padding: 3.5rem 0; }
    .support-stats-row { gap: 1rem; }
    .support-stat-num { font-size: 1.4rem; }
}

/* Community Section */
.community-section {
    padding: 5rem 0;
    background: linear-gradient(160deg, #0d1f2d 0%, #0a2a1a 50%, #0d1f2d 100%);
    position: relative;
    overflow: hidden;
}

.community-bg-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cb1 {
    width: 450px; height: 450px;
    top: -180px; left: -120px;
    background: radial-gradient(circle, rgba(0,200,83,0.15) 0%, transparent 70%);
}

.cb2 {
    width: 350px; height: 350px;
    bottom: -120px; right: -80px;
    background: radial-gradient(circle, rgba(2,136,209,0.15) 0%, transparent 70%);
}

.community-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.community-badge {
    display: inline-block;
    background: rgba(0,200,83,0.15);
    border: 1px solid rgba(0,200,83,0.35);
    color: #69f0ae;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 1.2rem;
}

.community-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 1rem;
}

.community-brand {
    background: linear-gradient(135deg, #0288d1, #00c853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.community-desc {
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.8rem;
}

.community-perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.community-perk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    font-weight: 600;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
}

.community-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #0288d1, #00c853);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.85rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(0,200,83,0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.community-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(0,200,83,0.5);
    color: white;
}

.community-btn-icon { font-size: 1.2rem; }

/* Right: mock chat card */
.community-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    padding: 1.5rem;
    backdrop-filter: blur(12px);
}

.community-card-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.community-card-avatar {
    font-size: 2rem;
    width: 48px; height: 48px;
    background: linear-gradient(135deg, #0288d1, #00c853);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.community-card-name {
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
}

.community-card-status {
    font-size: 0.78rem;
    color: #69f0ae;
    margin-top: 2px;
}

.community-messages {
    height: 260px;
    overflow: hidden;
    position: relative;
    margin-bottom: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    justify-content: flex-end;
    padding: 0.4rem 0;
}

.community-msg-feed { display: none; }

.community-msg {
    display: flex;
    align-items: flex-end;
    gap: 0.55rem;
    flex-shrink: 0;
}

.msg-avatar {
    font-size: 1.3rem;
    flex-shrink: 0;
    line-height: 1;
}

.msg-bubble {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.88);
    font-size: 0.86rem;
    padding: 0.55rem 0.9rem;
    border-radius: 16px 16px 16px 4px;
    line-height: 1.45;
    max-width: 100%;
    word-break: break-word;
}

/* Typing indicator bubble */
.msg-typing .msg-bubble {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.08);
    padding: 0.55rem 1rem;
}

.typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 16px;
}

.typing-dots span {
    width: 6px; height: 6px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    animation: typingBounce 1.2s ease infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%,60%,100% { transform: translateY(0); opacity: 0.5; }
    30%          { transform: translateY(-5px); opacity: 1; }
}

.msg-name {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 2px;
    padding-left: 0.3rem;
}

.msg-avatar {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.msg-bubble {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.88);
    font-size: 0.88rem;
    padding: 0.6rem 1rem;
    border-radius: 16px 16px 16px 4px;
    line-height: 1.5;
}

.community-join-btn {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #0288d1, #00c853);
    color: white;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.75rem;
    border-radius: 14px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.community-join-btn:hover { opacity: 0.88; color: white; }

@media (max-width: 900px) {
    .community-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .community-perks { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .community-section { padding: 3.5rem 0; }
    .community-perks { grid-template-columns: 1fr; }
}

/* Review / Feedback Section */
.review-section {
    padding: 5rem 0;
    background: linear-gradient(160deg, #f0fffe 0%, #e8f4ff 50%, #f5fdf7 100%);
    position: relative;
    overflow: hidden;
}

.review-bg-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.review-blob-1 {
    width: 400px; height: 400px;
    top: -150px; right: -100px;
    background: radial-gradient(circle, rgba(2,136,209,0.1) 0%, transparent 70%);
}

.review-blob-2 {
    width: 300px; height: 300px;
    bottom: -100px; left: -80px;
    background: radial-gradient(circle, rgba(0,200,83,0.1) 0%, transparent 70%);
}

.review-header {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
}

.review-badge {
    display: inline-block;
    background: linear-gradient(135deg, #0288d122, #00c85322);
    border: 1px solid #0288d144;
    color: #0288d1;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 0.8rem;
}

.review-title {
    font-size: 2.4rem;
    font-weight: 900;
    color: #1a2a3a;
    margin-bottom: 0.6rem;
}

.review-subtitle {
    color: #6c757d;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.review-trust-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: white;
    border: 1px solid rgba(2,136,209,0.15);
    border-radius: 50px;
    padding: 0.5rem 1.4rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a2a3a;
    box-shadow: 0 2px 12px rgba(2,136,209,0.08);
}

.review-trust-dot {
    color: #0288d1;
    font-size: 1.1rem;
    line-height: 1;
}

.review-inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.review-form-wrap {
    background: white;
    border-radius: 24px;
    box-shadow: 0 8px 40px rgba(2,136,209,0.12), 0 0 0 1px rgba(2,136,209,0.08);
    overflow: hidden;
    padding: 0.5rem;
}

.review-form-wrap iframe {
    display: block;
    border-radius: 20px;
    min-height: 820px;
}

.review-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1rem 1.2rem;
    margin: 0.5rem 0.5rem 0.5rem;
    background: linear-gradient(135deg, #e3f2fd, #e8f5e9);
    border-radius: 14px;
    border: 1px solid rgba(2,136,209,0.15);
}

.review-consent-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.review-consent p {
    font-size: 0.83rem;
    color: #4a6a82;
    line-height: 1.55;
    margin: 0;
    font-style: italic;
}

@media (max-width: 768px) {
    .review-section { padding: 3.5rem 0; }
    .review-title { font-size: 1.8rem; }
    .review-form-wrap iframe { min-height: 900px; }
}

/* Footer */
footer {
    background: #2c3e50;
    color: white;
    padding: 2rem 0;
    margin-top: 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.footer-logo {
    width: 100px;
    height: auto;
    object-fit: contain;
    display: block;
}

.footer-description {
    max-width: 300px;
}

.footer-description h4 {
    margin-bottom: 0.5rem;
    color: #3498db;
}

.footer-description p {
    font-size: 0.9rem;
    color: #95a5a6;
    line-height: 1.5;
}

.footer-center {
    text-align: center;
    flex: 1;
}

.footer-contact-col {
    text-align: center;
    flex: 1;
}

.footer-contact-col h4 {
    color: #3498db;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}

.footer-contact-col p {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: #95a5a6;
}

.footer-contact-col a {
    color: #667eea;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-col a:hover {
    color: #764ba2;
    text-decoration: underline;
}

.footer-right {
    text-align: right;
    flex: 1;
}

.footer-tagline {
    font-style: italic;
    color: #95a5a6;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.footer-description-text {
    color: #95a5a6;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    color: #95a5a6;
    font-size: 0.9rem;
    margin: 0;
    font-style: italic;
}

.footer-thank-you {
    margin-top: 1rem !important;
    color: #b0b8c1 !important;
    font-size: 0.85rem !important;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1rem;
    text-align: center;
}

.footer-link {
    color: #667eea;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #764ba2;
    text-decoration: underline;
}

/* Payment Modal */
.payment-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 20px;
}

.payment-modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 15px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.close-modal {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    font-size: 2rem;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    transition: color 0.3s;
}

.close-modal:hover {
    color: #333;
}

.payment-modal-content h2 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 1.5rem;
}

.payment-info {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    text-align: center;
}

.payment-info h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.payment-price {
    font-size: 1.5rem;
    color: #e74c3c;
    font-weight: bold;
}

.payment-qr {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.payment-qr h3 {
    margin-bottom: 1rem;
    color: #2c3e50;
    font-size: 1.5rem;
    font-weight: 700;
}

.qr-code {
    width: 250px;
    height: 250px;
    margin: 1rem auto;
    border: 3px solid #3498db;
    border-radius: 10px;
    padding: 10px;
    background: white;
}

.bank-info {
    text-align: left;
    background: white;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    line-height: 1.8;
}

.payment-instructions {
    background: #e8f4f8;
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.payment-instructions h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.payment-instructions ol {
    margin-left: 1.5rem;
    line-height: 2;
}

.payment-instructions ol li {
    margin-bottom: 0.5rem;
}

.zalo-link {
    color: #0068ff;
    font-size: 1.1rem;
}

.btn-zalo {
    display: block;
    margin: 1.5rem auto 0;
    text-align: center;
    background: #0068ff;
    max-width: 250px;
}

.btn-zalo:hover {
    background: #0052cc;
}

.payment-code-section {
    background: #fff3cd;
    padding: 1.5rem;
    border-radius: 10px;
    border: 2px solid #ffc107;
}

.payment-code-section h3 {
    color: #856404;
    margin-bottom: 1rem;
    text-align: center;
}

.payment-code-section input {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid #ffc107;
    border-radius: 5px;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.payment-code-section button {
    width: 100%;
}

/* Account Section */
.account-section {
    padding: 3rem 0;
    min-height: calc(100vh - 200px);
}

.account-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2rem;
    border-radius: 15px;
    color: white;
    margin-bottom: 2rem;
}

.account-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: white;
    padding: 0.2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: relative;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.avatar-edit-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #3498db;
    border: 3px solid white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s;
}

.avatar-edit-btn:hover {
    background: #2980b9;
    transform: scale(1.1);
}

.account-info h1 {
    margin: 0;
    font-size: 2rem;
}

.account-info p {
    margin: 0.5rem 0 0;
    opacity: 0.9;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.account-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s;
}

.account-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1.5rem;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    margin: 0;
    color: white;
    font-weight: 600;
}

.btn-edit {
    background: white;
    color: #667eea;
    border: 2px solid white;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-edit:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-body {
    padding: 1.5rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: #7f8c8d;
}

.info-value {
    color: #2c3e50;
}

.balance-card .card-body {
    text-align: center;
}

.balance-amount {
    font-size: 3rem;
    font-weight: bold;
    color: #27ae60;
    margin: 1rem 0 2rem;
}

.stats-card .card-body {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    padding: 2rem 1rem;
}

.stat-item {
    text-align: center;
    flex: 1;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 15px;
    transition: all 0.3s;
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #000000;
    font-size: 0.95rem;
    font-weight: 600;
}

.account-section-full {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 2rem;
    margin-bottom: 2rem;
}

.section-header {
    margin-bottom: 1.5rem;
}

.section-header h2 {
    color: #2c3e50;
    margin: 0;
}

.empty-message {
    text-align: center;
    color: #95a5a6;
    padding: 2rem;
    font-style: italic;
}

.purchased-materials,
.exam-history,
.recharge-history {
    display: grid;
    gap: 1rem;
}

.material-item,
.exam-item,
.recharge-item {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #3498db;
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.item-title {
    font-weight: 600;
    color: #2c3e50;
}

.item-date {
    color: #7f8c8d;
    font-size: 0.9rem;
}

.item-info {
    color: #7f8c8d;
    font-size: 0.9rem;
}

.item-price {
    color: #27ae60;
    font-weight: 600;
}

.item-score {
    color: #e74c3c;
    font-weight: 600;
    font-size: 1.2rem;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 15px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.recharge-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.recharge-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.recharge-btn:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}

.avatar-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.avatar-option {
    text-align: center;
    cursor: pointer;
    padding: 1rem;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    transition: all 0.3s;
}

.avatar-option:hover {
    border-color: #3498db;
    background: #f8f9fa;
    transform: translateY(-5px);
}

.avatar-option img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 0.5rem;
    object-fit: cover;
}

.avatar-option p {
    margin: 0;
    font-size: 0.85rem;
    color: #7f8c8d;
}

@media (max-width: 768px) {
    .avatar-options {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .hero-content {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-text {
        max-width: 100%;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons a {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
    
    .mascot-img {
        width: 320px;
        margin-top: 2rem;
    }
    
    .navbar .container {
        flex-direction: row;
        gap: 1rem;
    }
    
    .logo-text {
        display: none;
    }
    
    .logo-img {
        height: 45px;
    }
    
    .nav-menu {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }
    
    .filters {
        flex-direction: column;
    }
    
    .payment-modal-content {
        padding: 1.5rem;
        margin: 10px;
    }
    
    .qr-code {
        width: 200px;
        height: 200px;
    }
    
    .close-modal {
        right: 1rem;
        top: 1rem;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-left {
        flex-direction: column;
    }
    
    .footer-right {
        text-align: center;
    }
    
    .footer-logo {
        width: 80px;
    }
    
    .auth-mascot {
        top: -40px;
        right: -30px;
    }
    
    .auth-mascot-img {
        width: 120px;
    }
    
    .auth-logo {
        width: 100px;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .mascot-img {
        width: 450px;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
}

/* Story Page Styles */
.story-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: calc(100vh - 80px);
    position: relative;
    overflow: hidden;
}

.story-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
    opacity: 0.3;
}

.story-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.story-mascot {
    width: 300px;
    height: 300px;
    object-fit: contain;
    animation: float 3s ease-in-out infinite;
    display: block;
    margin: 0 auto 2rem;
}

.story-header h1 {
    color: white;
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    letter-spacing: 2px;
}

.story-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 1.3rem;
    font-style: italic;
}

.story-content {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.story-intro {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 15px;
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
}

.intro-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.story-intro p {
    font-size: 1.2rem;
    line-height: 1.8;
    margin: 0;
}

.story-card {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 15px;
    margin-bottom: 2rem;
    border-left: 5px solid #667eea;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
}

.story-card:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.2);
}

.card-number {
    position: absolute;
    top: -15px;
    left: 20px;
    background: #667eea;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.story-card h3 {
    color: #667eea;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.story-card p {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: justify;
    margin: 0;
}

.story-vision {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 2.5rem;
    border-radius: 15px;
    margin: 3rem 0;
}

.story-vision h3 {
    color: #667eea;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;
}

.story-vision > p {
    text-align: center;
    color: #555;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.vision-item {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.vision-item:hover {
    transform: translateY(-5px);
}

.vision-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.vision-item h4 {
    color: #667eea;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.vision-item p {
    color: #777;
    font-size: 0.95rem;
    margin: 0;
}

.story-mission {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2.5rem;
    border-radius: 15px;
    text-align: center;
    margin: 2rem 0;
}

.mission-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.story-mission h3 {
    color: white;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.story-mission p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0;
}

.story-closing {
    margin-top: 3rem;
    text-align: center;
}

.closing-quote {
    position: relative;
    background: #f8f9fa;
    padding: 2.5rem;
    border-radius: 15px;
    margin-bottom: 1.5rem;
}

.quote-mark {
    font-size: 4rem;
    color: #667eea;
    opacity: 0.3;
    font-family: Georgia, serif;
    line-height: 0;
}

.closing-quote p {
    color: #555;
    font-size: 1.2rem;
    line-height: 1.8;
    font-style: italic;
    margin: 1rem 0;
}

.closing-signature {
    text-align: right;
    color: #667eea;
    font-size: 1.1rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .story-mascot {
        width: 200px;
        height: 200px;
    }
    
    .story-header h1 {
        font-size: 2rem;
    }
    
    .story-content {
        padding: 2rem 1.5rem;
    }
    
    .vision-grid {
        grid-template-columns: 1fr;
    }
    
    .story-card {
        padding: 1.5rem;
    }
}


.footer-link {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-link:hover {
    color: white;
    text-decoration: underline;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* About EduPass Section — Redesigned */
.about-edupass {
    padding: 6rem 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Decorative blobs */
.about-edupass::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(2,136,209,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.about-edupass::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(0,200,83,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.about-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}

.about-badge {
    display: inline-block;
    background: linear-gradient(135deg, #0288d122, #00c85322);
    border: 1px solid #0288d144;
    color: #0288d1;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.about-header h2 {
    color: #1a2a3a;
    font-size: 2.8rem;
    font-weight: 900;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

.about-title-brand {
    background: linear-gradient(135deg, #0288d1, #00c853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-header-sub {
    color: #6c757d;
    font-size: 1.05rem;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

.header-underline {
    display: none;
}

/* Main layout */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Left: visual */
.about-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Outer ring */
.image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #0288d1 0%, #00c853 100%);
    padding: 4px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ringRotate 8s linear infinite;
}

@keyframes ringRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Inner circle */
.image-wrapper::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 20px 60px rgba(2,136,209,0.2);
}

.image-wrapper img {
    position: relative;
    z-index: 1;
    width: 110%;
    height: 110%;
    object-fit: contain;
    animation: floatAbout 4s ease-in-out infinite;
    filter: drop-shadow(0 12px 32px rgba(2,136,209,0.25));
}

@keyframes floatAbout {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-14px); }
}

/* Floating stat badges */
.about-stat-badge {
    position: absolute;
    background: white;
    border-radius: 16px;
    padding: 0.7rem 1.1rem;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a2a3a;
    z-index: 2;
    white-space: nowrap;
    animation: badgeFloat 3s ease-in-out infinite;
}

.about-stat-badge:nth-child(2) { top: 10%; right: -10%; animation-delay: 0s; }
.about-stat-badge:nth-child(3) { bottom: 15%; left: -8%; animation-delay: 1.5s; }
.about-stat-badge--bottom      { bottom: -6% !important; left: 50% !important; transform: translateX(-50%); animation-delay: 0.8s; }

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

.about-stat-badge .badge-icon { font-size: 1.3rem; }
.about-stat-badge .badge-num  { color: #0288d1; font-size: 1rem; }

/* Right: cards */
.about-text {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.about-card {
    background: white;
    padding: 1.8rem 2rem;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(2,136,209,0.08);
    border: 1px solid rgba(2,136,209,0.1);
    transition: transform 0.25s, box-shadow 0.25s;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
}

.about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(2,136,209,0.18);
}

.card-icon {
    font-size: 2.2rem;
    line-height: 1;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #e3f2fd, #e8f5e9);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-card-body { flex: 1; }

.about-card h3 {
    color: #0288d1;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.about-card p {
    color: #555;
    font-size: 0.93rem;
    line-height: 1.7;
    margin: 0;
}

.btn-story {
    align-self: flex-start;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.8rem 1.8rem;
    background: linear-gradient(135deg, #0288d1, #00c853);
    color: white;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 18px rgba(2,136,209,0.35);
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
}

.btn-story:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(2,136,209,0.45);
    color: white;
}

@media (max-width: 900px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .image-wrapper {
        width: 340px;
        height: 340px;
        margin: 0 auto;
    }
    .about-stat-badge:nth-child(2) { right: 0; }
    .about-stat-badge:nth-child(3) { left: 0; }
}

@media (max-width: 480px) {
    .about-edupass { padding: 4rem 0; }
    .about-header h2 { font-size: 2rem; }
    .image-wrapper { width: 260px; height: 260px; }
    .about-card { flex-direction: column; gap: 0.8rem; }
    .about-stat-badge { font-size: 0.78rem; padding: 0.5rem 0.8rem; }
}


/* Founder Team Section */
.founder-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid #e0e0e0;
}

.founder-section h2 {
    color: #667eea;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
}

.founder-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.founder-card {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.founder-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.founder-avatar {
    text-align: center;
    margin-bottom: 1.5rem;
}

.avatar-circle {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.founder-info h3 {
    color: #667eea;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.founder-title {
    color: #764ba2;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
}

.founder-bio {
    color: #555;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    text-align: justify;
}

.founder-role {
    color: #555;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    background: white;
    padding: 1rem;
    border-radius: 10px;
    border-left: 4px solid #667eea;
}

.founder-contact {
    color: #555;
    font-size: 1rem;
    text-align: center;
    margin-top: 1rem;
}

.founder-contact a {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
}

.founder-contact a:hover {
    text-decoration: underline;
}

.project-quote {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2.5rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.quote-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.project-quote p {
    font-size: 1.3rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    font-style: italic;
}

.quote-project {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    font-style: normal !important;
}

@media (max-width: 768px) {
    .founder-grid {
        grid-template-columns: 1fr;
    }
    
    .founder-section h2 {
        font-size: 2rem;
    }
    
    .avatar-circle {
        width: 100px;
        height: 100px;
        font-size: 3rem;
    }
}

/* Team Section on Homepage */
.team-section {
    padding: 5rem 0;
    background: white;
}

.team-section h2 {
    color: #667eea;
    font-size: 3rem;
    text-align: center;
    margin-bottom: 3rem;
}

/* Team Intro Section */
.team-intro-section {
    padding: 5rem 0;
    background: linear-gradient(160deg, #f0fffe 0%, #e8f4ff 100%);
}

.team-intro-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
}

.team-intro-badge {
    display: inline-block;
    background: linear-gradient(135deg, #0288d122, #00c85322);
    border: 1px solid #0288d144;
    color: #0288d1;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.team-intro-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    color: #1a1a2e;
    line-height: 1.25;
    margin-bottom: 1.2rem;
}

.team-intro-brand {
    background: linear-gradient(135deg, #0288d1, #00c853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.team-intro-p {
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.75;
    margin-bottom: 1rem;
}

.team-intro-commit {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

.team-intro-commit span {
    background: white;
    border: 1.5px solid #0288d133;
    color: #0288d1;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.45rem 1.1rem;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(2,136,209,0.08);
}

.team-intro-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.team-intro-card {
    background: white;
    border-radius: 20px;
    padding: 1.5rem 1.2rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(2,136,209,0.1);
    border: 1px solid rgba(2,136,209,0.1);
    transition: transform 0.25s, box-shadow 0.25s;
}

.team-intro-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(2,136,209,0.18);
}

.team-intro-card--wide {
    grid-column: 1 / -1;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.4rem 1.4rem;
}

.tic-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.team-intro-card--wide .tic-icon {
    font-size: 1.8rem;
    margin-bottom: 0;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.tic-num {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #0288d1, #00c853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 0.3rem;
}

.tic-label {
    font-size: 0.82rem;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tic-text {
    font-size: 0.92rem;
    color: #4a5568;
    line-height: 1.65;
}

/* Scroll animation */
.team-intro-section .team-intro-left,
.team-intro-section .team-intro-right {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
                transform 0.65s cubic-bezier(0.22,1,0.36,1);
}

.team-intro-section.visible .team-intro-left { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.team-intro-section.visible .team-intro-right { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }

@media (max-width: 900px) {
    .team-intro-inner { grid-template-columns: 1fr; gap: 2rem; }
    .team-intro-right { grid-template-columns: repeat(3, 1fr); }
    .team-intro-card--wide { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .team-intro-right { grid-template-columns: 1fr 1fr; }
    .team-intro-section { padding: 3.5rem 0; }
}

/* Contact Section */
/* ── Contact section ── */
.contact-section {
    padding: 5rem 0;
    background: linear-gradient(160deg, #dbeafe 0%, #d1fae5 50%, #ede9fe 100%);
    --cs-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cs-dur: 0.65s;
}

.contact-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

/* Trạng thái ẩn ban đầu cho tất cả elements */
.contact-header,
.contact-side-info,
.contact-form-outer {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity var(--cs-dur) var(--cs-ease),
                transform var(--cs-dur) var(--cs-ease);
}

/* Khi section visible — tất cả hiện cùng lúc với stagger nhỏ */
.contact-section.visible .contact-header {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

.contact-section.visible .contact-side-info {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.12s;
}

.contact-section.visible .contact-form-outer {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.12s;
}

/* Children của contact-header — stagger nhẹ */
.contact-emoji-row {
    font-size: 3.5rem;
    margin-bottom: 0.8rem;
    opacity: 0;
    transform: scale(0.7) translateY(16px);
    transition: opacity 0.5s var(--cs-ease) 0.1s,
                transform 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.1s;
}

.contact-section.visible .contact-emoji-row {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.contact-header h2 {
    font-size: 3.2rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #1a2a3a 0%, #0288d1 50%, #00c853 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--cs-ease) 0.18s,
                transform 0.6s var(--cs-ease) 0.18s;
}

.contact-section.visible .contact-header h2 {
    opacity: 1;
    transform: translateY(0);
    animation: gradientShift 3s ease 0.8s infinite alternate;
}

@keyframes gradientShift {
    from { background-position: 0% center; }
    to   { background-position: 100% center; }
}

.contact-header p {
    color: #60a5fa;
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 0.4rem;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease 0.28s, transform 0.55s var(--cs-ease) 0.28s;
}

.contact-section.visible .contact-header p {
    opacity: 1;
    transform: translateY(0);
}

/* Children của contact-side-info — stagger từ trái */
.contact-side-info .csi-title,
.contact-side-info .csi-desc,
.contact-side-info .csi-card,
.contact-side-info .csi-note {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s var(--cs-ease);
}

.contact-section.visible .contact-side-info .csi-title { opacity: 1; transform: none; transition-delay: 0.22s; }
.contact-section.visible .contact-side-info .csi-desc  { opacity: 1; transform: none; transition-delay: 0.30s; }
.contact-section.visible .contact-side-info .csi-card:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.38s; }
.contact-section.visible .contact-side-info .csi-card:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.46s; }
.contact-section.visible .contact-side-info .csi-card:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.54s; }
.contact-section.visible .contact-side-info .csi-note  { opacity: 1; transform: none; transition-delay: 0.62s; }

@keyframes bounce-emoji {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.contact-typewriter {
    color: #0288d1;
    font-size: 1.1rem;
    line-height: 1.7;
    min-height: 2.2em;
    font-weight: 500;
}

.contact-type-cursor {
    display: inline-block;
    color: #00c853;
    font-weight: 700;
    animation: ctBlink 0.7s step-end infinite;
    margin-left: 1px;
}

@keyframes ctBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Outer wrapper — nền xanh pastel bo tròn lớn */
.contact-form-outer {
    max-width: 780px;
    margin: 0 auto;
    background: linear-gradient(135deg, #bfdbfe 0%, #a7f3d0 60%, #ddd6fe 100%);
    border-radius: 32px;
    padding: 2rem 2rem 1.5rem;
    box-shadow: 0 12px 48px rgba(59,130,246,0.15);
}

/* Inner form box — trắng bo tròn */
.contact-form-inner {
    background: white;
    border-radius: 22px;
    padding: 2rem;
    margin-bottom: 1.2rem;
}

/* Rows */
.cf-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cf-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cf-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cf-group label,
.contact-form label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #60a5fa;
}

.cf-group input,
.cf-group select,
.cf-group textarea,
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 14px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #f0f7ff;
    color: #3b82f6;
    outline: none;
    transition: box-shadow 0.2s, background 0.2s;
}

.cf-group input::placeholder,
.cf-group textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #93c5fd;
}

.cf-group input:focus,
.cf-group select:focus,
.cf-group textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus {
    background: #e0f0ff;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.cf-group textarea { resize: vertical; }

.cf-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232563eb' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* Privacy */
.cf-privacy {
    background: #f0f7ff;
    border-radius: 14px;
    padding: 0.9rem 1.2rem;
    font-size: 0.82rem;
    color: #60a5fa;
    font-weight: 600;
    text-align: center;
    margin-top: 1rem;
}

/* Submit button — xanh đậm full width */
.contact-submit-btn {
    width: 100%;
    padding: 1.1rem;
    background: linear-gradient(135deg, #2563eb, #059669);
    color: white;
    border: none;
    border-radius: 18px;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 6px 24px rgba(37,99,235,0.35);
    text-transform: uppercase;
}

.contact-submit-btn:hover {
    opacity: 0.92;
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(37,99,235,0.45);
}

@media (max-width: 768px) {
    .cf-row-2, .cf-row-3 { grid-template-columns: 1fr; }
    .contact-header h2 { font-size: 1.8rem; }
    .contact-form-outer { padding: 1.2rem 1rem 1rem; }
}

/* Thank you screen */
.contact-thankyou {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    gap: 1rem;
    animation: fadeInUp-ty 0.5s ease;
}

@keyframes fadeInUp-ty {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cty-icon {
    line-height: 1;
    animation: bounce-ty 0.6s ease;
}

@keyframes bounce-ty {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.contact-thankyou h3 {
    font-size: 1.5rem;
    font-weight: 900;
    color: #0288d1;
    margin: 0;
}

.contact-thankyou p {
    font-size: 1rem;
    color: #60a5fa;
    line-height: 1.7;
    margin: 0;
}

.cty-back-btn {
    margin-top: 0.5rem;
    background: linear-gradient(135deg, #0288d1, #00c853);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 0.7rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.cty-back-btn:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

/* Contact layout 2 cột */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 2rem;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

/* Cột trái: thông tin liên hệ */
.contact-side-info {
    background: white;
    border-radius: 28px;
    padding: 2rem 1.8rem;
    box-shadow: 0 8px 32px rgba(2,136,209,0.12);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: fit-content;
}

/* Animate children khi visible — handled by .contact-section.visible above */

.csi-title {
    font-size: 1.3rem;
    font-weight: 900;
    color: #0288d1;
    margin-bottom: 0.2rem;
}

.csi-desc {
    font-size: 0.92rem;
    color: #60a5fa;
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

.csi-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-radius: 18px;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: default;
}

.csi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.csi-gmail  { background: linear-gradient(135deg, #e0f2fe, #bae6fd); }
.csi-hotline { background: linear-gradient(135deg, #dcfce7, #bbf7d0); }
.csi-zalo   { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }

.csi-icon {
    font-size: 1.8rem;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.7);
    flex-shrink: 0;
}

.csi-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 0.2rem;
}

.csi-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0288d1;
    text-decoration: none;
    word-break: break-all;
}

.csi-value:hover { text-decoration: underline; }

.csi-note {
    background: linear-gradient(135deg, #fef9c3, #fde68a);
    border-radius: 14px;
    padding: 0.8rem 1.2rem;
    font-size: 0.88rem;
    color: #92400e;
    text-align: center;
    margin-top: 0.5rem;
}

/* Override contact-form-outer for 2-col layout */
.contact-layout .contact-form-outer {
    max-width: 100%;
    margin: 0;
}

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
    .contact-side-info {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.8rem;
    }
    .csi-title, .csi-desc, .csi-note { width: 100%; }
    .csi-card { flex: 1 1 200px; }
}

.privacy-notice {
    color: #777;
    font-size: 0.9rem;
    text-align: center;
    margin: 1rem 0;
    font-style: italic;
}

.highlight-text {
    color: #667eea;
    font-weight: 700;
    font-size: 1.05em;
}

.empty-message {
    text-align: center;
    color: #999;
    font-size: 1.2rem;
    padding: 3rem;
    background: #f8f9fa;
    border-radius: 10px;
    margin: 2rem 0;
}

/* Create Exam Button */
.exam-actions {
    text-align: center;
    margin-bottom: 3rem;
}

.btn-create-exam {
    font-size: 1.2rem;
    padding: 1rem 2.5rem;
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
}

.btn-create-exam:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* Create Exam Form */
.create-exam-form {
    padding: 1rem 0;
}

.create-exam-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.create-exam-form .form-group {
    margin-bottom: 1.5rem;
}

.create-exam-form label {
    display: block;
    color: #333;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.create-exam-form input,
.create-exam-form select {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.create-exam-form input:focus,
.create-exam-form select:focus {
    outline: none;
    border-color: #667eea;
}

.create-exam-form .btn-full {
    margin-top: 1rem;
}


/* File Input Styling */
.file-input {
    padding: 1rem !important;
    background: #f8f9fa;
    cursor: pointer;
}

.file-input:hover {
    background: #e9ecef;
}

.helper-text {
    color: #777;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    font-style: italic;
}

.form-divider {
    text-align: center;
    margin: 2rem 0;
    position: relative;
}

.form-divider::before,
.form-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: #ddd;
}

.form-divider::before {
    left: 0;
}

.form-divider::after {
    right: 0;
}

.form-divider span {
    background: white;
    padding: 0 1rem;
    color: #999;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Upload Guide Styling */
.upload-guide {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 2rem;
    border-radius: 15px;
    margin-bottom: 2rem;
}

.upload-guide h3 {
    color: #667eea;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.upload-guide p {
    color: #555;
    margin-bottom: 1rem;
}

.template-buttons {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
}

.btn-template {
    flex: 1;
    padding: 1rem;
    background: white;
    color: #667eea;
    text-decoration: none;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.btn-template:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    background: #667eea;
    color: white;
}

.format-guide {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    margin-top: 1rem;
}

.format-guide p {
    margin-bottom: 0.5rem;
    color: #333;
}

.format-guide ul {
    margin: 0.5rem 0 0 1.5rem;
    color: #555;
}

.format-guide li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .template-buttons {
        flex-direction: column;
    }
}

/* CTA Buttons Responsive */
@media (max-width: 768px) {
    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .btn-cta {
        width: 100%;
    }
    
    .btn-icon {
        font-size: 2rem;
    }
    
    .btn-title {
        font-size: 1.1rem;
    }
}

/* Testimonials Section - Marquee */
.testimonials {
    padding: 4rem 0;
    background: #f8fffe;
    overflow: hidden;
}

.testimonials h2 {
    color: #0288d1;
    font-size: 2.6rem;
    text-align: center;
    margin-bottom: 0.6rem;
}

.section-subtitle {
    text-align: center;
    color: #777;
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
}

/* Marquee wrapper */
.testi-marquee-wrap {
    overflow: hidden;
    width: 100%;
    position: relative;
    margin-bottom: 1rem;
}

.testi-marquee-wrap::before,
.testi-marquee-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}
.testi-marquee-wrap::before {
    left: 0;
    background: linear-gradient(to right, #f8fffe, transparent);
}
.testi-marquee-wrap::after {
    right: 0;
    background: linear-gradient(to left, #f8fffe, transparent);
}

.testi-marquee {
    display: flex;
    gap: 1.2rem;
    width: max-content;
    padding: 0.5rem 0;
}

/* Hàng 1: trái → phải */
.testi-row1 {
    animation: testi-scroll-left 60s linear infinite;
}
/* Hàng 2: phải → trái (ngược) */
.testi-row2 {
    animation: testi-scroll-right 55s linear infinite;
}

.testi-marquee:hover { animation-play-state: paused; }

@keyframes testi-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes testi-scroll-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.testi-card {
    background: #fff;
    border-radius: 18px;
    padding: 1.4rem 1.6rem;
    min-width: 280px;
    max-width: 300px;
    box-shadow: 0 4px 18px rgba(2,136,209,0.1);
    border: 1px solid rgba(2,136,209,0.12);
    flex-shrink: 0;
    transition: transform 0.2s, box-shadow 0.2s;
}

.testi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(2,136,209,0.2);
}

.testi-name {
    font-weight: 700;
    color: #0288d1;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.testi-name span {
    font-weight: 500;
    color: #00c853;
    font-size: 0.82rem;
    margin-left: 0.4rem;
}

.testi-card p {
    color: #444;
    font-size: 0.9rem;
    line-height: 1.6;
    font-style: italic;
    margin: 0 0 0.6rem;
}

.testi-stars {
    font-size: 0.85rem;
}

/* Enhanced Page Headers */
.page-header-materials {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 4rem 0;
}

.header-content {
    text-align: center;
}

.header-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: float 3s ease-in-out infinite;
}

/* Enhanced Filters */
.filters-wrapper {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    margin-bottom: 3rem;
}

.filters-wrapper h3 {
    color: #667eea;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    color: #333;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.filter-group input,
.filter-group select {
    padding: 0.8rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: #667eea;
}

@media (max-width: 1024px) {
    .filters {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .filters {
        grid-template-columns: 1fr;
    }
    
    .header-icon {
        font-size: 3rem;
    }
}

/* Enhanced Exam Page Header */
.page-header-exam {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 4rem 0;
}


/* Support Section Responsive */
@media (max-width: 768px) {
    .support-section {
        padding: 3rem 0;
    }
    
    .support-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .support-left {
        position: static;
    }
    
    .qr-container {
        padding: 1.5rem;
    }
    
    .qr-image {
        max-width: 250px;
    }
    
    .support-right h2 {
        font-size: 2rem;
    }
    
    .support-description {
        font-size: 1rem;
    }
    
    .feature-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .feature-item:hover {
        transform: translateX(0);
        transform: translateY(-5px);
    }
}


/* Exam Page Improvements */
.page-header-exam {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.page-header-exam::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
    opacity: 0.3;
}

.header-content {
    position: relative;
    z-index: 1;
}

.header-icon-wrapper {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }
}

.header-icon-wrapper .header-icon {
    font-size: 3rem;
}

.header-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.3rem;
}

.stat-item .stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Account Page Stats Override */
.stats-card .stat-label {
    color: #000000 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

/* Modern Create Exam Button */
.exam-actions {
    text-align: center;
    margin: 3rem 0;
}

/* Featured Action Card */
.featured-action {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 2.5rem 3rem;
    margin: 3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.featured-action::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.featured-action::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.featured-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.featured-icon {
    font-size: 4rem;
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.featured-text {
    color: white;
}

.featured-text h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.featured-text p {
    font-size: 1rem;
    opacity: 0.95;
}

.btn-featured {
    background: white;
    color: #667eea;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    transition: all 0.3s;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
}

.btn-featured:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.btn-arrow {
    font-size: 1.5rem;
    transition: transform 0.3s;
}

.btn-featured:hover .btn-arrow {
    transform: translateX(5px);
}

/* Subject List Improvements */
.section-header-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

.header-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #667eea, transparent);
    max-width: 200px;
}

.section-header-modern h2 {
    font-size: 2.2rem;
    color: #2c3e50;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

.section-description {
    text-align: center;
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .header-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .stat-item {
        width: 100%;
    }
    
    .featured-action {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
        gap: 2rem;
    }
    
    .featured-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .featured-text h3 {
        font-size: 1.4rem;
    }
    
    .featured-text p {
        font-size: 0.95rem;
    }
    
    .btn-featured {
        width: 100%;
        justify-content: center;
    }
    
    .section-header-modern {
        flex-direction: column;
        gap: 1rem;
    }
    
    .header-line {
        display: none;
    }
    
    .section-header-modern h2 {
        font-size: 1.8rem;
    }
    
    .section-description {
        font-size: 1rem;
        padding: 0 1rem;
    }
}


/* Modern Subject Cards */
.subjects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.subject-card-pro {
    position: relative;
    height: 200px;
    border-radius: 20px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.card-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card-gradient);
    opacity: 0.9;
    transition: opacity 0.3s;
}

.subject-card-pro:hover .card-background {
    opacity: 1;
}

.card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: white;
}

.subject-icon-pro {
    font-size: 4rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    transition: all 0.4s;
}

.subject-card-pro:hover .subject-icon-pro {
    transform: scale(1.2) translateY(-10px);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
}

.subject-name-pro {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.subject-card-pro:hover .subject-name-pro {
    transform: translateY(5px);
}

/* Shine Effect */
.card-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 70%
    );
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    transition: transform 0.6s;
}

.subject-card-pro:hover .card-shine {
    transform: translateX(100%) translateY(100%) rotate(45deg);
}

/* Hover Glow Effect */
.card-hover-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.subject-card-pro:hover .card-hover-effect {
    opacity: 1;
}

.subject-card-pro:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

/* Floating Animation for Cards */
@keyframes float-card {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.subject-card-pro:nth-child(odd) {
    animation: float-card 3s ease-in-out infinite;
}

.subject-card-pro:nth-child(even) {
    animation: float-card 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

/* Exam Cards Improvements */
.exams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.exam-card {
    background: white;
    border-radius: 16px;
    padding: 1.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    border: 1px solid #f0f0f0;
    border-left: 4px solid #667eea;
    position: relative;
    overflow: hidden;
}

.exam-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 80px; height: 80px;
    background: linear-gradient(135deg, rgba(102,126,234,0.08), transparent);
    border-radius: 0 16px 0 80px;
}

.exam-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(102, 126, 234, 0.18);
    border-left-color: #764ba2;
}

.exam-card h3 {
    color: #1a1a2e;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
}

.exam-card p {
    color: #888;
    font-size: 0.88rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Back Button */
.btn-back {
    background: #f8f9fa;
    color: #2c3e50;
    border: 2px solid #e0e0e0;
    padding: 0.8rem 1.5rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 2rem;
}

.btn-back:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
    transform: translateX(-5px);
}

@media (max-width: 768px) {
    .subjects-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1.5rem;
    }
    
    .subject-card-pro {
        height: 180px;
    }
    
    .subject-icon-pro {
        font-size: 3rem;
    }
    
    .subject-name-pro {
        font-size: 1.1rem;
    }
    
    .exams-grid {
        grid-template-columns: 1fr;
    }
}


/* Materials Page Improvements */
.page-header-materials {
    background: linear-gradient(135deg, #0288d1 0%, #00c853 100%);
    position: relative;
    overflow: hidden;
    padding: 4rem 0 3rem;
    text-align: center;
}

.page-header-materials::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.12) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 50%);
}

.page-header-materials .header-content {
    position: relative;
    z-index: 1;
}

.page-header-materials .header-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(12px);
    border: 2px solid rgba(255,255,255,0.35);
    border-radius: 24px;
    margin-bottom: 1.2rem;
}

.page-header-materials .header-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.page-header-materials h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: #fff;
    margin-bottom: 0.6rem;
    text-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.page-header-materials p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.88);
    margin: 0;
}

/* Search & Filter Card */
.search-filter-card {
    background: white;
    border-radius: 24px;
    padding: 2rem 2.5rem;
    margin: 2.5rem 0 1.5rem;
    box-shadow: 0 8px 32px rgba(2,136,209,0.1);
    border: 1px solid rgba(2,136,209,0.1);
}

.search-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.search-header h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0288d1;
    margin-bottom: 0.3rem;
}

.search-header p {
    color: #94a3b8;
    font-size: 0.92rem;
}

.filters-modern {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: end;
}

.filter-group-modern {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group-modern label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: #0288d1;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-icon { font-size: 1rem; }

.filter-input-modern,
.filter-select-modern {
    padding: 0.85rem 1.1rem;
    border: 2px solid #e0f0ff;
    border-radius: 14px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s;
    background: #f0f7ff;
    color: #1a1a2e;
}

.filter-input-modern:focus,
.filter-select-modern:focus {
    outline: none;
    border-color: #0288d1;
    background: white;
    box-shadow: 0 0 0 3px rgba(2,136,209,0.12);
}

.filter-input-modern::placeholder { color: #93c5fd; }

/* Subject filter chips */
.subject-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.2rem 0 0;
}

.subject-chip {
    padding: 0.4rem 1rem;
    border-radius: 50px;
    border: 2px solid #e0f0ff;
    background: #f0f7ff;
    color: #0288d1;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.subject-chip:hover,
.subject-chip.active {
    background: linear-gradient(135deg, #0288d1, #00c853);
    color: white;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(2,136,209,0.3);
}

/* Section header */
.section-header-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1.5rem;
}

.section-header-modern h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1a1a2e;
    white-space: nowrap;
}

.header-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #0288d1, #00c853, transparent);
    border-radius: 2px;
}

/* Materials Grid */
.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 0;
}

/* Material Card — redesigned */
.material-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(2,136,209,0.08);
    border: 1.5px solid rgba(2,136,209,0.1);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.material-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(2,136,209,0.18);
    border-color: #0288d1;
}

.material-header {
    padding: 1.4rem 1.4rem 1rem;
    background: linear-gradient(135deg, #e0f2fe 0%, #dcfce7 100%);
    border-bottom: 1.5px solid rgba(2,136,209,0.1);
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.material-header-icon {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}

.material-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.material-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.material-meta span {
    background: rgba(2,136,209,0.1);
    color: #0288d1;
    padding: 0.2rem 0.7rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

.material-body {
    padding: 1rem 1.4rem;
    flex: 1;
}

.material-description {
    color: #64748b;
    line-height: 1.6;
    font-size: 0.88rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.material-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.4rem;
    background: #f8faff;
    border-top: 1.5px solid rgba(2,136,209,0.08);
    gap: 0.8rem;
}

.material-price {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0288d1;
}

.material-price.free {
    color: #00c853;
}

.material-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-material {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-preview {
    background: #e0f0ff;
    color: #0288d1;
}

.btn-preview:hover { background: #bae6fd; }

.btn-download {
    background: linear-gradient(135deg, #0288d1, #00c853);
    color: white;
    box-shadow: 0 3px 10px rgba(2,136,209,0.3);
}

.btn-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(2,136,209,0.4);
}

@media (max-width: 768px) {
    .search-filter-card { padding: 1.2rem; }
    .filters-modern { grid-template-columns: 1fr; }
    .materials-grid { grid-template-columns: 1fr; }
    .material-footer { flex-direction: column; align-items: stretch; }
    .material-actions { width: 100%; }
    .btn-material { flex: 1; }
}


/* Team Section - Updated */
.team-section h2 {
    color: #667eea;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
}

.founder-main {
    max-width: 900px;
    margin: 0 auto 4rem;
}

.founder-card-main {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-left: 6px solid #667eea;
}

.founder-card-main h3 {
    color: #667eea;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.founder-card-main .founder-title {
    color: #764ba2;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.founder-card-main .founder-bio {
    color: #555;
    line-height: 1.9;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    text-align: justify;
}

.founder-card-main .founder-role {
    background: #f8f9ff;
    padding: 1.5rem;
    border-radius: 10px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.founder-card-main .founder-role strong {
    color: #667eea;
}

.founder-card-main .founder-contact {
    font-size: 1.1rem;
    color: #555;
}

.founder-card-main .founder-contact a {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
}

.founder-card-main .founder-contact a:hover {
    text-decoration: underline;
}

.team-members {
    max-width: 1000px;
    margin: 0 auto 4rem;
}

.team-members h3 {
    color: #667eea;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.team-intro {
    text-align: center;
    color: #555;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.member-item {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.member-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
}

.member-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.member-item h4 {
    color: #667eea;
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
}

.member-item p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

.project-quote {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.3);
}

.project-quote h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: white;
}

.project-quote p {
    font-size: 1.15rem;
    line-height: 1.9;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .team-section h2 {
        font-size: 2rem;
    }

    .founder-card-main {
        padding: 2rem 1.5rem;
    }

    .founder-card-main h3 {
        font-size: 1.6rem;
    }

    .team-members h3 {
        font-size: 1.6rem;
    }

    .members-grid {
        grid-template-columns: 1fr;
    }

    .project-quote {
        padding: 2rem 1.5rem;
    }

    .project-quote h3 {
        font-size: 1.5rem;
    }
}


/* Member Item Detailed */
.member-item-detailed {
    background: white;
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 4px solid #667eea;
}

.member-item-detailed:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
}

.member-item-detailed h4 {
    color: #667eea;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.member-item-detailed .member-role {
    color: #764ba2;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    font-style: italic;
}

.member-item-detailed .member-bio {
    color: #555;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
    text-align: justify;
}

.member-item-detailed .member-contribution {
    background: #f8f9ff;
    padding: 1.2rem;
    border-radius: 10px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
}

.member-item-detailed .member-contribution strong {
    color: #667eea;
}

.team-spirit {
    background: linear-gradient(135deg, #f8f9ff 0%, #e8ecff 100%);
    padding: 2.5rem;
    border-radius: 15px;
    text-align: center;
    margin-top: 3rem;
    border: 2px solid #e0e7ff;
}

.team-spirit .spirit-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.team-spirit h4 {
    color: #667eea;
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.team-spirit p {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.9;
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .member-item-detailed {
        padding: 2rem 1.5rem;
    }

    .member-item-detailed h4 {
        font-size: 1.3rem;
    }

    .member-item-detailed .member-role {
        font-size: 0.9rem;
    }

    .member-item-detailed .member-bio {
        font-size: 0.95rem;
    }

    .team-spirit {
        padding: 2rem 1.5rem;
    }

    .team-spirit h4 {
        font-size: 1.5rem;
    }

    .team-spirit p {
        font-size: 1rem;
    }
}


/* Footer Links */
.footer-links {
    margin-top: 0.8rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.footer-links a {
    display: block;
}

/* Preview Modal */
.preview-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 20px;
}

.preview-modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 15px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideDown 0.3s ease;
}

.preview-modal-content h2 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 1.5rem;
}

.preview-info {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-items: start;
}

.preview-image {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.preview-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.preview-details h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.preview-description {
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.preview-meta {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.preview-meta p {
    margin-bottom: 0.8rem;
    color: #555;
    line-height: 1.6;
}

.preview-meta strong {
    color: #2c3e50;
}

.preview-price {
    font-size: 1.2rem;
    color: #e74c3c;
    font-weight: bold;
    padding-top: 0.5rem;
    border-top: 2px solid #ddd;
    margin-top: 0.5rem;
}

.preview-details .btn-primary {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

/* Responsive for Preview Modal */
@media (max-width: 768px) {
    .preview-info {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .preview-modal-content {
        padding: 1.5rem;
    }
}

/* Purchased Materials Styles */
.purchased-item {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 4px solid #667eea;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.purchased-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.item-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

.btn-download {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.btn-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.download-code-display {
    background: #fff3cd;
    color: #856404;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #ffc107;
}

.item-info {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.item-info span {
    color: #6c757d;
    font-size: 0.9rem;
}

/* Technical Support Section */
.tech-support-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 80px 20px;
    color: white;
}

.tech-support-box {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.support-header {
    margin-bottom: 50px;
}

.support-icon-large {
    font-size: 5rem;
    margin-bottom: 20px;
    animation: bounce 2s infinite;
}

.support-header h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: white;
}

.support-intro {
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.95;
}

.support-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 40px 0;
}

.support-contact-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.support-contact-card:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.contact-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.support-contact-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: white;
}

.contact-link {
    display: inline-block;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.8rem 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    transition: all 0.3s ease;
    word-break: break-all;
    max-width: 100%;
    overflow-wrap: break-word;
}

.contact-link:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.support-cta {
    margin-top: 40px;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    border: 2px dashed rgba(255, 255, 255, 0.3);
}

.support-cta p {
    font-size: 1.2rem;
    margin: 0;
    font-weight: 500;
}

@media (max-width: 768px) {
    .support-header h2 {
        font-size: 2rem;
    }
    
    .support-intro {
        font-size: 1rem;
    }
    
    .support-contacts {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Azota Exam Section */
.azota-exam-section {
    margin: 2rem 0;
}

.azota-exam-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    margin-top: 2rem;
    transition: all 0.3s;
    border: 1px solid #f0f0f0;
}

.azota-exam-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.exam-card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1.75rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.exam-icon {
    font-size: 2rem;
    background: rgba(255,255,255,0.2);
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exam-info h3 {
    color: white;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.exam-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.9);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.2);
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
}

.exam-card-body {
    padding: 0;
    background: #f8f9fa;
}

.exam-card-body iframe {
    display: block;
    border: none;
    width: 100%;
}

@media (max-width: 768px) {
    .exam-card-header {
        flex-direction: column;
        text-align: center;
    }
    
    .exam-info h3 {
        font-size: 1.2rem;
    }
    
    .exam-meta {
        justify-content: center;
    }
    
    .exam-card-body iframe {
        height: 700px;
    }
}


/* Gift Button & Modal Styles */
.gift-button-container {
    text-align: center;
    margin: 2rem 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.btn-gift {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    border: none;
    padding: 1.2rem 2.5rem;
    font-size: 1.3rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(245, 87, 108, 0.4);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-gift::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.btn-gift:hover::before {
    left: 100%;
}

.btn-gift:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(245, 87, 108, 0.6);
}

.btn-gift:active {
    transform: translateY(-1px);
}

/* Gift Modal */
.gift-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.gift-modal-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin: 3% auto;
    padding: 0;
    border-radius: 20px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideDown 0.4s ease;
    position: relative;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.gift-modal-header {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    text-align: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.gift-modal-header h2 {
    color: white;
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.gift-modal-header p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin: 0;
}

.gift-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
}

.gift-link-card {
    background: white;
    border-radius: 15px;
    padding: 2rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.gift-link-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gift-link-card:hover::before {
    opacity: 1;
}

.gift-link-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.gift-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.gift-subject {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.5rem;
}

.gift-badge {
    display: inline-block;
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}

.gift-modal-footer {
    background: rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    text-align: center;
    border-top: 2px solid rgba(255, 255, 255, 0.2);
}

.gift-modal-footer p {
    color: white;
    margin: 0;
    font-size: 1rem;
}

.gift-modal .close-modal {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.gift-modal .close-modal:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* Responsive */
@media (max-width: 768px) {
    .btn-gift {
        font-size: 1.1rem;
        padding: 1rem 2rem;
    }
    
    .gift-modal-content {
        width: 95%;
        margin: 5% auto;
    }
    
    .gift-modal-header h2 {
        font-size: 1.5rem;
    }
    
    .gift-links-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .gift-link-card {
        padding: 1.5rem 0.5rem;
    }
    
    .gift-icon {
        font-size: 2.5rem;
    }
    
    .gift-subject {
        font-size: 1.1rem;
    }
}


/* Multiple Links Modal */
.multiple-links-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.multiple-links-modal-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin: 5% auto;
    padding: 0;
    border-radius: 20px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideDown 0.4s ease;
    position: relative;
}

.multiple-links-modal-content h2 {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 2rem;
    margin: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    font-size: 1.8rem;
    text-align: center;
}

.multiple-links-modal-content .modal-description {
    color: rgba(255, 255, 255, 0.9);
    padding: 1.5rem 2rem;
    margin: 0;
    text-align: center;
    font-size: 1.1rem;
    background: rgba(255, 255, 255, 0.05);
}

.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
}

.link-card {
    background: white;
    border-radius: 15px;
    padding: 2rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.link-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.link-icon {
    font-size: 3rem;
}

.link-name {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
}

.link-action {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: bold;
}

.modal-footer-note {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 1.5rem;
    text-align: center;
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    font-size: 1rem;
}

.multiple-links-modal .close-modal {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.multiple-links-modal .close-modal:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* Responsive */
@media (max-width: 768px) {
    .multiple-links-modal-content {
        width: 95%;
        margin: 10% auto;
    }
    
    .multiple-links-modal-content h2 {
        font-size: 1.4rem;
        padding: 1.5rem;
    }
    
    .links-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .link-card {
        padding: 1.5rem 1rem;
    }
}

/* ===== GLOBAL RESPONSIVE FIX ===== */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

section, .container, nav, footer, header {
    width: 100%;
    max-width: 100%;
}

/* Tablet */
@media (max-width: 1024px) {
    .container { padding: 0 16px; }
    .hero-title { font-size: 2.4rem; }
}

/* Mobile lớn */
@media (max-width: 768px) {
    .hero { height: 100svh; }
    .hero-title { font-size: 1.9rem; }
    .hero-inner { padding: 0 1rem; gap: 1rem; }
    .hero-search { max-width: 100%; }
    .hero-cta-row { flex-direction: column; align-items: center; }
    .hero-btn-primary, .hero-btn-secondary { width: 100%; max-width: 280px; text-align: center; }
    .hero-features { border-radius: 20px; padding: 0.6rem 0.8rem; }
    .hero-feature-item { font-size: 0.78rem; padding: 0.25rem 0.5rem; }
    .nav-menu { gap: 0.2rem; }
    .nav-menu a { font-size: 0.82rem; padding: 0.35rem 0.6rem; }
}

/* Mobile nhỏ */
@media (max-width: 480px) {
    .hero-title { font-size: 1.6rem; }
    .hero-subtitle { font-size: 0.95rem; }
    .hero-badge { font-size: 0.78rem; }
    .hero-search input { font-size: 0.88rem; }
    .hero-search .search-btn { padding: 0.45rem 0.9rem; font-size: 0.82rem; }
    .container { padding: 0 12px; }
}

/* ============================================
   MOBILE OPTIMIZATION - Hamburger Nav
   ============================================ */

/* Hamburger button - ẩn trên desktop */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
    flex-shrink: 0;
}
.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Scrolled state hamburger */
.navbar-scrolled .nav-hamburger {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.15);
}
.navbar-scrolled .nav-hamburger span { background: #1a1a2e; }

/* Mobile-only nav items ẩn trên desktop */
.nav-mobile-only { display: none; }

/* ============================================
   MOBILE BREAKPOINT ≤ 768px — Hamburger menu
   ============================================ */
@media (max-width: 768px) {
    /* Navbar layout: logo | hamburger */
    .navbar .container {
        grid-template-columns: 1fr auto;
        height: 56px;
        position: relative;
    }
    .nav-hamburger { display: flex; }
    .nav-actions { display: none; } /* ẩn desktop buttons */

    /* Nav menu: slide down từ navbar */
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: rgba(10,20,40,0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 0 0 20px 20px;
        padding: 1rem;
        gap: 0.4rem;
        z-index: 999;
        border: none;
        border-top: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 12px 40px rgba(0,0,0,0.3);
        animation: slideDown 0.25s ease;
    }
    .nav-menu.open { display: flex; }
    .nav-menu li { width: 100%; }
    .nav-menu a {
        display: block;
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        border-radius: 12px;
        text-align: left;
        min-height: 44px;
        line-height: 1.4;
    }
    .nav-mobile-only { display: block; }
    .nav-mobile-only .btn-nav-register {
        margin-top: 0.2rem;
        border-radius: 12px !important;
        padding: 0.75rem 1rem !important;
        min-height: 44px;
    }
    .nav-mobile-only .btn-nav-login {
        border-radius: 12px !important;
        padding: 0.75rem 1rem !important;
        min-height: 44px;
    }

    /* Scrolled navbar mobile */
    .navbar-scrolled .nav-menu {
        background: rgba(255,255,255,0.98);
    }
    .navbar-scrolled .nav-menu a { color: #1a1a2e; }

    /* Search bar ẩn trên mobile nhỏ */
    .navbar-search-bar { padding: 0.5rem 1rem 0.6rem; }
    .navbar-search-bar .hero-search { max-width: 100%; }

    /* Search dropdown full width */
    .search-dropdown {
        width: calc(100vw - 24px);
        left: 12px;
        right: 12px;
        transform: translateY(-8px);
        border-radius: 16px;
    }
    .search-dropdown.open {
        transform: translateY(4px);
    }

    /* Logo nhỏ hơn */
    .logo-img { height: 36px; }
    .logo-text { font-size: 1.3rem; }
    .logo { padding: 0.2rem 0.5rem 0.2rem 0.25rem; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   MOBILE ≤ 480px — Small phones
   ============================================ */
@media (max-width: 480px) {
    /* Navbar search bar ẩn trên mobile nhỏ để tiết kiệm không gian */
    .navbar-search-bar { display: none; }

    /* Hero */
    .hero-inner { padding: 4.5rem 0.75rem 2rem; }
    .hero-badge { font-size: 0.72rem; padding: 0.3rem 0.8rem; }
    .hero-cta-row { gap: 0.6rem; }
    .hero-btn-primary, .hero-btn-secondary {
        max-width: 100%;
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
        min-height: 44px;
    }
    .hero-features { display: none; } /* ẩn feature bar nhỏ */

    /* Sections padding */
    .section-header h2 { font-size: 1.6rem; }
    .section-header p { font-size: 0.9rem; }

    /* Ecosystem cards */
    .eco-stack-card { padding: 1.2rem; }
    .eco-card-icon { width: 48px; height: 48px; font-size: 1.4rem; }

    /* Benefits */
    .benefit-grid { grid-template-columns: 1fr; gap: 0.8rem; }
    .benefit-card { padding: 1.2rem; }

    /* Contact */
    .contact-layout { gap: 1rem; }
    .contact-card { padding: 1rem; }

    /* Testimonials marquee — giảm tốc độ */
    .testi-track { animation-duration: 50s; }
    .testi-track-reverse { animation-duration: 55s; }

    /* Touch targets tối thiểu 44px */
    .search-chip { min-height: 36px; padding: 0.4rem 0.8rem; font-size: 0.82rem; }
    button, .btn-primary, .btn-secondary, [role="button"] { min-height: 44px; }
}

/* ============================================
   MOBILE ≤ 360px — Very small phones
   ============================================ */
@media (max-width: 360px) {
    .hero-title { font-size: 1.4rem; }
    .hero-subtitle { font-size: 0.88rem; }
    .logo-text { font-size: 1.1rem; }
    .logo-img { height: 30px; }
    .container { padding: 0 10px; }
}

/* ============================================
   NAVBAR-SOLID mobile (các trang phụ)
   ============================================ */
@media (max-width: 768px) {
    .navbar-solid .container {
        grid-template-columns: 1fr auto;
        height: 56px;
        position: relative;
    }
    .navbar-solid .nav-hamburger {
        display: flex;
        background: rgba(255,255,255,0.2);
        border-color: rgba(255,255,255,0.3);
    }
    .navbar-solid .nav-hamburger span { background: #fff; }
    .navbar-solid .nav-actions { display: none; }
    .navbar-solid .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: rgba(2, 136, 209, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 0 0 20px 20px;
        padding: 1rem;
        gap: 0.4rem;
        z-index: 999;
        box-shadow: 0 12px 40px rgba(0,0,0,0.25);
        animation: slideDown 0.25s ease;
    }
    .navbar-solid .nav-menu.open { display: flex; }
    .navbar-solid .nav-menu li { width: 100%; }
    .navbar-solid .nav-menu a {
        display: block;
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        border-radius: 12px;
        text-align: left;
        min-height: 44px;
        color: rgba(255,255,255,0.9);
    }
    .navbar-solid .nav-menu a:hover,
    .navbar-solid .nav-menu a.active {
        background: rgba(255,255,255,0.2);
        color: #fff;
    }
    .navbar-solid .nav-mobile-only { display: block; }
}

/* ============================================
   FOOTER REDESIGN
   ============================================ */
.site-footer {
    background: linear-gradient(160deg, #0f1923 0%, #1a2a3a 60%, #0d1f2d 100%);
    color: #c8d6e5;
    padding: 3.5rem 0 0;
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

/* Subtle top accent line */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00c853, #0288d1, #00c853);
    background-size: 200% 100%;
    animation: footerAccent 4s linear infinite;
}
@keyframes footerAccent {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* Grid layout */
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr;
    gap: 2rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Brand column */
.footer-brand { display: flex; flex-direction: column; gap: 0.8rem; }

.footer-logo-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    width: fit-content;
}

.footer-logo-wrap .footer-logo {
    width: 90px;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    padding: 6px;
}

.footer-brand-name {
    font-size: 1.4rem;
    font-weight: 900;
    background: linear-gradient(135deg, #fff 0%, #00c853 40%, #0288d1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.5px;
}

.footer-desc {
    font-size: 0.88rem;
    color: #b0c4d8;
    line-height: 1.65;
    max-width: 280px;
}

.footer-tagline-new {
    font-size: 0.82rem;
    color: #00c853;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Story block in brand col */
.footer-story {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.footer-story-text {
    font-size: 0.84rem;
    color: #7a96ae;
    line-height: 1.6;
}

.footer-story-link {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0288d1;
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
    width: fit-content;
}

.footer-story-link:hover {
    color: #00c853;
    transform: translateX(3px);
}

/* Nav columns */
.footer-col { display: flex; flex-direction: column; gap: 0.6rem; }

.footer-col-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    margin-bottom: 0.4rem;
}

.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.footer-nav a,
.footer-contact-list a {
    color: #b0c4d8;
    text-decoration: none;
    font-size: 0.88rem;
    padding: 0.3rem 0;
    display: block;
    transition: color 0.2s, transform 0.2s;
    line-height: 1.5;
}

.footer-nav a:hover,
.footer-contact-list a:hover {
    color: #fff;
    transform: translateX(4px);
}

.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Copyright & tagline column */
.footer-col-brand .footer-copy {
    font-size: 0.85rem;
    color: #b0c4d8;
    line-height: 1.6;
    margin-bottom: 0.6rem;
}

.footer-slogan {
    font-size: 1rem;
    font-weight: 800;
    background: linear-gradient(135deg, #00c853, #0288d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.footer-slogan-vi {
    font-size: 0.78rem;
    color: #90a4ae;
    line-height: 1.5;
    margin-bottom: 0.4rem;
}

.footer-slogan-vi2 {
    font-size: 0.82rem;
    font-weight: 700;
    color: #00c853;
    letter-spacing: 0.3px;
}

/* Bottom bar */
.footer-bottom-new {
    padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom));
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-bottom-new p {
    font-size: 0.82rem;
    color: #c8d6e5;
    margin: 0;
    line-height: 1.5;
}

.footer-bottom-new .footer-thank-you {
    font-size: 0.78rem !important;
    color: #a0b8cc !important;
    max-width: 640px;
    margin: 0 auto !important;
    line-height: 1.6;
}

/* Team block in footer */
.footer-team-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(2,136,209,0.07) 0%, rgba(0,200,83,0.05) 100%);
    border: 1px solid transparent;
    background-clip: padding-box;
    border-radius: 20px;
    padding: 1.6rem 2rem;
    max-width: 680px;
    margin: 0.5rem auto;
    overflow: hidden;
}

.footer-team-block::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(2,136,209,0.35), rgba(0,200,83,0.25), rgba(2,136,209,0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.footer-team-block::after {
    content: '';
    position: absolute;
    top: -60px; left: 50%;
    transform: translateX(-50%);
    width: 260px; height: 120px;
    background: radial-gradient(ellipse, rgba(2,136,209,0.12) 0%, transparent 70%);
    pointer-events: none;
}

/* School badge */
.ftb-school-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #0288d1;
    background: rgba(2,136,209,0.1);
    border: 1px solid rgba(2,136,209,0.2);
    border-radius: 30px;
    padding: 0.3rem 1rem;
}

/* Teacher row */
.ftb-teacher {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.ftb-teacher-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.6rem;
    background: linear-gradient(135deg, rgba(2,136,209,0.12) 0%, rgba(0,200,83,0.08) 100%);
    border: 1px solid transparent;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

.ftb-teacher-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(2,136,209,0.5), rgba(0,200,83,0.35));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.ftb-teacher-card::after {
    content: '';
    position: absolute;
    bottom: -20px; right: -20px;
    width: 80px; height: 80px;
    background: radial-gradient(circle, rgba(0,200,83,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.ftb-teacher-icon {
    font-size: 1.6rem;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(2,136,209,0.4));
}

.ftb-teacher-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: left;
}

.ftb-teacher-label {
    font-size: 0.7rem;
    color: #90a4ae;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.ftb-teacher-name {
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(90deg, #42a5f5, #26c6da, #69f0ae);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.2px;
}

/* Separator */
.ftb-sep {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 420px;
}

.ftb-sep-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(2,136,209,0.3), transparent);
}

.ftb-sep-text {
    font-size: 0.68rem;
    color: #90a4ae;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Members */
.footer-team-members {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
}

.ftb-member {
    font-size: 0.76rem;
    font-weight: 500;
    color: #90caf9;
    background: rgba(2,136,209,0.08);
    border: 1px solid rgba(2,136,209,0.18);
    border-radius: 30px;
    padding: 0.28rem 0.9rem;
    transition: all 0.25s ease;
    cursor: default;
}

.ftb-member:hover {
    background: rgba(2,136,209,0.22);
    border-color: rgba(2,136,209,0.45);
    color: #e3f2fd;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(2,136,209,0.22);
}

/* Copyright / IP notice */
.footer-copyright-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 640px;
    margin: 0.25rem auto 0;
    padding: 0.75rem 1.1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
}

.fcn-icon {
    font-size: 0.95rem;
    margin-top: 1px;
    flex-shrink: 0;
    opacity: 0.7;
}

.footer-copyright-notice p {
    font-size: 0.72rem !important;
    color: #90a4ae !important;
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

/* ============================================
   FOOTER RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 1.8rem; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-contact-list { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 2rem; }
}

@media (max-width: 768px) {
    .site-footer { padding: 2.5rem 0 0; }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.8rem;
        padding-bottom: 2rem;
    }
    /* Brand spans full width */
    .footer-brand { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: 1rem; }
    .footer-desc { max-width: 100%; }
    .footer-tagline-new { display: none; }

    .footer-contact-list { flex-direction: column; }
    .footer-grid .footer-col:last-child { grid-column: unset; }
}

@media (max-width: 480px) {
    .site-footer { padding: 2rem 0 0; }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .footer-brand { flex-direction: column; gap: 0.6rem; }
    .footer-brand .footer-desc { font-size: 0.84rem; }

    .footer-col-title { font-size: 0.68rem; }
    .footer-nav a, .footer-contact-list a { font-size: 0.9rem; padding: 0.4rem 0; min-height: 36px; }

    .footer-bottom-new { padding: 1.2rem 0 calc(1.2rem + env(safe-area-inset-bottom)); gap: 0.4rem; }
    .footer-bottom-new p { font-size: 0.78rem; }
    .footer-bottom-new .footer-thank-you { font-size: 0.74rem !important; }
}

/* ============================================
   EDUPASS BRAND TYPOGRAPHY
   E và P in hoa lớn, còn lại in thường
   ============================================ */
.ep-brand {
    background: linear-gradient(90deg, #00c853 0%, #0288d1 45%, #0288d1 55%, #1a1a2e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
}

/* Footer — ep-brand giữ màu text thường, không dùng gradient */
.site-footer .ep-brand {
    background: none;
    -webkit-text-fill-color: inherit;
    background-clip: unset;
}

/* Eco cards & dark sections — ep-brand giữ màu trắng */
.eco-stack-card .ep-brand,
.cta-register-section .ep-brand,
.support-section .ep-brand,
.community-section .ep-brand {
    background: none;
    -webkit-text-fill-color: inherit;
    background-clip: unset;
}

.ep-brand .ep-cap {
    font-size: 1.15em;
    font-weight: inherit;
    line-height: 1;
    display: inline;
}

/* ===== Countdown Section ===== */
.countdown-section {
    position: relative;
    background: #0a0a1a;
    padding: 72px 24px;
    overflow: hidden;
    text-align: center;
}
/* Nền gradient động */
.countdown-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(229,57,53,0.22) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(255,111,0,0.15) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 10% 80%, rgba(63,81,181,0.18) 0%, transparent 60%);
    pointer-events: none;
}
/* Particles */
.cd-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.cd-particles span {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: 0.18;
    animation: cdFloat linear infinite;
}
.cd-particles span:nth-child(1){ width:180px;height:180px;background:#e53935;left:5%;top:10%;animation-duration:18s;animation-delay:0s; }
.cd-particles span:nth-child(2){ width:100px;height:100px;background:#ff6f00;left:80%;top:20%;animation-duration:14s;animation-delay:-4s; }
.cd-particles span:nth-child(3){ width:60px;height:60px;background:#3f51b5;left:60%;top:70%;animation-duration:20s;animation-delay:-8s; }
.cd-particles span:nth-child(4){ width:140px;height:140px;background:#e53935;left:30%;top:60%;animation-duration:16s;animation-delay:-2s; }
.cd-particles span:nth-child(5){ width:80px;height:80px;background:#ff6f00;left:15%;top:80%;animation-duration:22s;animation-delay:-6s; }
.cd-particles span:nth-child(6){ width:50px;height:50px;background:#9c27b0;left:90%;top:60%;animation-duration:12s;animation-delay:-10s; }
@keyframes cdFloat {
    0%   { transform: translateY(0) scale(1); opacity: 0.18; }
    50%  { transform: translateY(-60px) scale(1.1); opacity: 0.1; }
    100% { transform: translateY(0) scale(1); opacity: 0.18; }
}
.cd-inner {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
}
/* Header */
.cd-badge {
    display: inline-block;
    background: rgba(229,57,53,0.15);
    border: 1px solid rgba(229,57,53,0.35);
    color: #ff8a80;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
}
.cd-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.2;
}
.cd-title-hl {
    background: linear-gradient(90deg, #ff6f00, #e53935, #ff6f00);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: cdShine 3s linear infinite;
}
@keyframes cdShine {
    to { background-position: 200% center; }
}
.cd-campaign-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 18px;
    padding: 10px 28px;
    background: linear-gradient(90deg, rgba(255,100,0,0.18) 0%, rgba(255,215,0,0.22) 50%, rgba(255,100,0,0.18) 100%);
    border: 1.5px solid rgba(255,215,0,0.55);
    border-radius: 50px;
    box-shadow: 0 0 24px rgba(255,180,0,0.25), inset 0 0 12px rgba(255,215,0,0.08);
    animation: cd-campaign-glow 2.5s ease-in-out infinite;
}
.cd-campaign-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffe066;
    letter-spacing: 0.04em;
    text-shadow: 0 0 10px rgba(255,215,0,0.6);
}
.cd-campaign-text strong {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 0 14px rgba(255,220,80,0.9);
}
.cd-campaign-fire {
    font-size: 1.3rem;
    animation: cd-fire-bounce 1s ease-in-out infinite alternate;
}
@keyframes cd-campaign-glow {
    0%, 100% { box-shadow: 0 0 18px rgba(255,180,0,0.2), inset 0 0 10px rgba(255,215,0,0.06); border-color: rgba(255,215,0,0.45); }
    50%       { box-shadow: 0 0 36px rgba(255,180,0,0.45), inset 0 0 18px rgba(255,215,0,0.15); border-color: rgba(255,215,0,0.85); }
}
@keyframes cd-fire-bounce {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-4px) scale(1.15); }
}
.cd-campaign {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 0.03em;
    margin: 6px 0 10px;
    text-shadow: 0 0 12px rgba(255,215,0,0.5);
}
.cd-desc {
    color: rgba(255,255,255,0.55);
    font-size: 0.95rem;
    margin: 0 0 40px;
}
.cd-desc strong { color: rgba(255,255,255,0.85); }

/* Boxes */
.cd-boxes {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.cd-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.cd-box-inner {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 24px 28px;
    min-width: 100px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    transition: transform 0.2s;
}
.cd-box-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(229,57,53,0.6), transparent);
}
.cd-box:first-child .cd-box-inner {
    border-color: rgba(229,57,53,0.3);
    box-shadow: 0 8px 32px rgba(229,57,53,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
.cd-num {
    font-size: 3.2rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -2px;
    text-shadow: 0 0 30px rgba(229,57,53,0.5);
}
.cd-box:first-child .cd-num {
    background: linear-gradient(135deg, #ff6f00, #e53935);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 3.8rem;
    text-shadow: none;
}
.cd-lbl {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}
.cd-colon {
    font-size: 2.8rem;
    font-weight: 900;
    color: rgba(255,255,255,0.2);
    margin-top: 12px;
    user-select: none;
    animation: cdBlink 1s step-end infinite;
}
@keyframes cdBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* Progress bar */
.cd-progress-wrap {
    margin-bottom: 36px;
}
.cd-progress-track {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 8px;
}
.cd-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3f51b5, #e53935, #ff6f00);
    border-radius: 99px;
    transition: width 1s linear;
    box-shadow: 0 0 10px rgba(229,57,53,0.5);
}
.cd-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
}

/* CTA */
.cd-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.cd-btn-primary {
    display: inline-block;
    background: linear-gradient(135deg, #e53935, #ff6f00);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 14px 32px;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 4px 24px rgba(229,57,53,0.45);
    transition: transform 0.2s, box-shadow 0.2s;
}
.cd-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(229,57,53,0.6);
}
.cd-btn-secondary {
    display: inline-block;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 14px 32px;
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    backdrop-filter: blur(8px);
}
.cd-btn-secondary:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-3px);
}

@media (max-width: 600px) {
    .countdown-section { padding: 48px 16px; }
    .cd-title { font-size: 1.5rem; }
    .cd-box-inner { padding: 16px 18px; min-width: 70px; }
    .cd-num { font-size: 2.2rem; }
    .cd-box:first-child .cd-num { font-size: 2.6rem; }
    .cd-colon { font-size: 2rem; }
    .cd-boxes { gap: 6px; }
}

/* ===== Nav Dropdown ===== */
.nav-dropdown { position: relative; z-index: 10001; }

.nav-dropdown-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.nav-arrow { font-size: 0.7rem; transition: transform 0.25s; display: inline-block; }
.nav-dropdown.open .nav-arrow { transform: rotate(180deg); }

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
    min-width: 260px;
    padding: 8px;
    list-style: none;
    z-index: 10002;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
}
.nav-dropdown.open .nav-dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.nav-dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #222;
    transition: background 0.15s;
    position: relative;
}
.nav-dropdown-menu li a:hover { background: #f5f5f5; }
.ndm-icon {
    font-size: 1.4rem;
    width: 38px;
    height: 38px;
    background: #f0f4ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ndm-text { display: flex; flex-direction: column; gap: 2px; }
.ndm-text strong { font-size: 0.9rem; font-weight: 700; color: #111; }
.ndm-text small { font-size: 0.75rem; color: #888; font-weight: 400; }
.ndm-badge {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff3e0;
    color: #e65100;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Mobile dropdown */
@media (max-width: 900px) {
    .nav-dropdown-menu {
        display: none;
        position: static;
        transform: none !important;
        opacity: 1;
        box-shadow: none;
        background: rgba(255,255,255,0.08);
        border-radius: 10px;
        margin-top: 4px;
        padding: 4px;
        pointer-events: auto;
        transition: none;
    }
    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
        transform: none !important;
    }
    .nav-dropdown-menu::before { display: none; }
    .nav-dropdown-menu li a {
        color: rgba(255,255,255,0.9);
        border-radius: 8px;
    }
    .nav-dropdown-menu li a:hover {
        background: rgba(255,255,255,0.12);
        color: #fff;
    }
    .ndm-text strong { color: #fff; }
    .ndm-text small { color: rgba(255,255,255,0.6); }
}

/* ============================================
   NOTE & LỊCH HỌC ECOSYSTEM SECTION
   ============================================ */
.nlh-eco-section {
    padding: 5rem 0;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(2,136,209,.12) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(0,200,83,.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(102,126,234,.06) 0%, transparent 60%),
        linear-gradient(160deg, #eef6ff 0%, #f0fff8 50%, #f5f0ff 100%);
    position: relative;
    overflow: hidden;
}

/* Orb trang trí */
.nlh-eco-section::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(2,136,209,.12) 0%, transparent 65%);
    pointer-events: none;
    animation: orbFloat 8s ease-in-out infinite;
}
.nlh-eco-section::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(0,200,83,.1) 0%, transparent 65%);
    pointer-events: none;
    animation: orbFloat 10s ease-in-out infinite reverse;
}
@keyframes orbFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(20px,-20px) scale(1.08); }
}

.nlh-eco-header {
    text-align: center;
    margin-bottom: 3rem;
}

.nlh-eco-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(2,136,209,0.1), rgba(0,200,83,0.1));
    border: 1px solid rgba(2,136,209,0.25);
    color: #0288d1;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.35rem 1rem;
    border-radius: 30px;
    margin-bottom: 1rem;
    letter-spacing: 0.3px;
}

.nlh-eco-header h2 {
    font-size: 2.2rem;
    font-weight: 900;
    color: #1a2a3a;
    margin-bottom: 0.75rem;
}

.nlh-eco-brand {
    background: linear-gradient(135deg, #0288d1, #00c853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nlh-eco-desc {
    color: #607d8b;
    font-size: 1rem;
    max-width: 520px;
    margin: 0 auto;
}

.nlh-eco-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.nlh-eco-card {
    background: #fff;
    border-radius: 18px;
    padding: 1.8rem 1.5rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    border: 1px solid rgba(0,0,0,0.06);
    position: relative;
    transition: transform 0.25s, box-shadow 0.25s;
    overflow: hidden;
}

.nlh-eco-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(2,136,209,0.15);
}

.nlh-eco-card-new {
    border-color: rgba(2,136,209,0.2);
    background: linear-gradient(145deg, #fff 60%, #f0f9ff 100%);
}

.nlh-eco-new-badge {
    position: absolute;
    top: 1rem; right: 1rem;
    background: linear-gradient(135deg, #0288d1, #00897b);
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.nlh-eco-card-icon {
    font-size: 2.2rem;
    margin-bottom: 0.9rem;
    line-height: 1;
}

.nlh-eco-card h4 {
    font-size: 1rem;
    font-weight: 800;
    color: #1a2a3a;
    margin-bottom: 0.5rem;
}

.nlh-eco-card p {
    font-size: 0.83rem;
    color: #607d8b;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.nlh-eco-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.nlh-eco-list li {
    font-size: 0.78rem;
    color: #0288d1;
    font-weight: 600;
}

.nlh-eco-cta {
    text-align: center;
}

.nlh-eco-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #0288d1, #00897b);
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.85rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(2,136,209,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.nlh-eco-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(2,136,209,0.4);
}

@media (max-width: 900px) {
    .nlh-eco-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
    .nlh-eco-grid { grid-template-columns: 1fr; }
    .nlh-eco-header h2 { font-size: 1.6rem; }
}

/* ── Scattered screenshots ── */
.nlh-scatter-wrap {
    position: relative;
    height: 700px;
    margin: 0 auto 3.5rem;
    max-width: 1000px;
}

.nlh-scatter {
    position: relative;
    width: 100%;
    height: 100%;
}

.nlh-sc-img {
    position: absolute;
    width: 320px;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    border: 4px solid #fff;
    object-fit: cover;
    transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s;
    cursor: pointer;
}

.nlh-sc-img:hover {
    transform: scale(1.07) rotate(0deg) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.3);
    z-index: 20 !important;
}

/* Vị trí & góc xoay từng ảnh — scatter đẹp hơn */
.nlh-sc-1 { top: 15px;  left: 1%;    rotate: -5deg;  z-index: 4; width: 380px; box-shadow: 0 16px 48px rgba(0,0,0,.22); }
.nlh-sc-2 { top: 0px;   left: 22%;   rotate:  3deg;  z-index: 6; width: 420px; box-shadow: 0 20px 56px rgba(2,136,209,.2); }
.nlh-sc-3 { top: 25px;  left: 46%;   rotate: -2deg;  z-index: 5; width: 395px; box-shadow: 0 16px 48px rgba(0,0,0,.18); }
.nlh-sc-4 { top: 8px;   left: 68%;   rotate:  5deg;  z-index: 3; width: 405px; box-shadow: 0 14px 40px rgba(0,0,0,.16); }
.nlh-sc-5 { top: 280px; left: 9%;    rotate:  2deg;  z-index: 7; width: 390px; box-shadow: 0 18px 52px rgba(0,200,83,.18); }
.nlh-sc-6 { top: 270px; left: 54%;   rotate: -4deg;  z-index: 5; width: 410px; box-shadow: 0 16px 48px rgba(0,0,0,.2); }

@media (max-width: 768px) {
    .nlh-scatter-wrap { height: 320px; }
    .nlh-sc-img { width: 170px; border-radius: 10px; }
    .nlh-sc-1 { top: 5px;   left: 0%;   }
    .nlh-sc-2 { top: 20px;  left: 22%;  }
    .nlh-sc-3 { top: 5px;   left: 44%;  }
    .nlh-sc-4 { top: 30px;  left: 64%;  }
    .nlh-sc-5 { top: 140px; left: 5%;   }
    .nlh-sc-6 { top: 130px; left: 50%;  }
}

@media (max-width: 480px) {
    .nlh-scatter-wrap { height: 260px; }
    .nlh-sc-img { width: 130px; }
    .nlh-sc-4, .nlh-sc-6 { display: none; }
}

/* ── Lightbox ── */
.nlh-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    backdrop-filter: blur(6px);
}

.nlh-lightbox.open {
    opacity: 1;
    pointer-events: all;
}

.nlh-lb-img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    transform: scale(0.92);
    transition: transform 0.3s cubic-bezier(.22,.68,0,1.2);
    object-fit: contain;
}

.nlh-lightbox.open .nlh-lb-img {
    transform: scale(1);
}

.nlh-lb-caption {
    margin-top: 1rem;
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
    font-weight: 500;
}

.nlh-lb-close {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    font-size: 1.2rem;
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    z-index: 1;
}
.nlh-lb-close:hover { background: rgba(255,255,255,0.25); }

/* ── Scroll animations cho NLH Eco Section ── */
.nlh-eco-header,
.nlh-eco-card,
.nlh-sc-img,
.nlh-eco-cta {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.nlh-eco-header.anim-in,
.nlh-eco-card.anim-in,
.nlh-sc-img.anim-in,
.nlh-eco-cta.anim-in {
    opacity: 1;
    transform: translateY(0);
}

/* Ảnh scatter thêm rotate khi vào */
.nlh-sc-1 { transition: opacity 0.6s ease, transform 0.6s ease; }
.nlh-sc-2 { transition: opacity 0.6s ease 0.08s, transform 0.6s ease 0.08s; }
.nlh-sc-3 { transition: opacity 0.6s ease 0.16s, transform 0.6s ease 0.16s; }
.nlh-sc-4 { transition: opacity 0.6s ease 0.24s, transform 0.6s ease 0.24s; }
.nlh-sc-5 { transition: opacity 0.6s ease 0.32s, transform 0.6s ease 0.32s; }
.nlh-sc-6 { transition: opacity 0.6s ease 0.40s, transform 0.6s ease 0.40s; }

/* Card stagger */
.nlh-eco-card:nth-child(1) { transition-delay: 0.05s; }
.nlh-eco-card:nth-child(2) { transition-delay: 0.15s; }
.nlh-eco-card:nth-child(3) { transition-delay: 0.25s; }
.nlh-eco-card:nth-child(4) { transition-delay: 0.35s; }

/* ============================================
   MOBILE OPTIMIZATION — TỔNG THỂ
   ============================================ */

/* Auth pages */
@media (max-width: 680px) {
    .auth-wrap { grid-template-columns: 1fr; border-radius: 0; min-height: 100svh; }
    .auth-panel-left {
        padding: 1.5rem;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
        min-height: unset;
    }
    .apl-logo { width: 48px; height: 48px; margin-bottom: 0; }
    .apl-brand { font-size: 1.4rem; }
    .apl-slogan { display: none; }
    .apl-features { display: none; }
    .apl-bottom { display: none; }
    .auth-panel-right { padding: 1.5rem; }
    .auth-panel-right h2 { font-size: 1.3rem; }
    .auth-section { padding: 0; align-items: flex-start; }
}

/* Scatter ảnh */
@media (max-width: 600px) {
    .nlh-scatter-wrap { height: 220px; }
    .nlh-sc-img { width: 120px; border-radius: 8px; border-width: 2px; }
    .nlh-sc-1 { top: 0;    left: 0%;   }
    .nlh-sc-2 { top: 15px; left: 24%;  }
    .nlh-sc-3 { top: 0;    left: 48%;  }
    .nlh-sc-4 { display: none; }
    .nlh-sc-5 { top: 110px; left: 5%;  }
    .nlh-sc-6 { top: 105px; left: 50%; }
}

/* NLH Eco section */
@media (max-width: 600px) {
    .nlh-eco-header h2 { font-size: 1.5rem; }
    .nlh-eco-grid { grid-template-columns: 1fr; gap: 1rem; }
    .nlh-eco-card { padding: 1.2rem; }
    .nlh-eco-btn { font-size: 0.88rem; padding: 0.75rem 1.4rem; }
}

/* Footer team block */
@media (max-width: 480px) {
    .footer-team-block { padding: 1rem; border-radius: 14px; }
    .ftb-teacher-name { font-size: 0.85rem; }
    .ftb-member { font-size: 0.7rem; padding: 0.2rem 0.6rem; }
    .footer-copyright-notice { flex-direction: column; gap: 0.4rem; }
}

/* Countdown section */
@media (max-width: 480px) {
    .cd-boxes { gap: 0.4rem; }
    .cd-box-inner { width: 60px; height: 60px; }
    .cd-num { font-size: 1.6rem; }
    .cd-colon { font-size: 1.4rem; }
    .cd-lbl { font-size: 0.65rem; }
    .cd-btn-primary, .cd-btn-secondary { padding: 0.65rem 1.2rem; font-size: 0.85rem; }
}

/* Testimonials */
@media (max-width: 480px) {
    .testi-card { min-width: 240px; padding: 1rem; }
}

/* Benefits */
@media (max-width: 480px) {
    .benefits-header h2 { font-size: 1.5rem; }
    .benefit-grid { grid-template-columns: 1fr; }
}

/* ============================================
   MULTI-DEVICE SECTION
   ============================================ */
.multidevice-section {
    padding: 6rem 0;
    background: linear-gradient(160deg, #07101f 0%, #0a1628 60%, #0d1f0f 100%);
    overflow: hidden;
    position: relative;
}

.multidevice-section::before {
    content: '';
    position: absolute;
    top: -150px; right: -150px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(0,200,83,0.1) 0%, transparent 65%);
    pointer-events: none;
}

.multidevice-section::after {
    content: '';
    position: absolute;
    bottom: -100px; left: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(2,136,209,0.1) 0%, transparent 65%);
    pointer-events: none;
}

.mds-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Text side */
.mds-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(0,200,83,0.15), rgba(2,136,209,0.15));
    border: 1px solid rgba(0,200,83,0.4);
    color: #69f0ae;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.4rem 1.1rem;
    border-radius: 30px;
    margin-bottom: 1.4rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 0 16px rgba(0,200,83,0.15);
}

.mds-text h2 {
    font-size: 2.6rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 1.2rem;
    text-shadow: 0 0 40px rgba(0,200,83,0.2);
}

.mds-brand {
    background: linear-gradient(135deg, #00e676, #00c6ff, #00e676);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: mds-brand-flow 3s linear infinite;
    display: inline-block;
}

@keyframes mds-brand-flow {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.mds-text p {
    color: rgba(255,255,255,0.55);
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
    max-width: 440px;
}

.mds-features {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    max-width: 440px;
}

.mds-feat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.8);
    font-weight: 600;
    padding: 1rem 0;
    flex: 1;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s;
}

.mds-feat:last-child { border-right: none; }
.mds-feat:hover { background: rgba(255,255,255,0.06); }

.mds-feat span:first-child {
    font-size: 1.8rem;
    filter: drop-shadow(0 2px 8px rgba(0,200,83,0.3));
}

.mds-feat small {
    color: rgba(255,255,255,0.4);
    font-size: 0.65rem;
    font-weight: 400;
    text-align: center;
    line-height: 1.3;
}

.mds-highlight-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.mds-tags {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 440px;
}

.mds-tag {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
    background: rgba(0,200,83,0.07);
    border: 1px solid rgba(0,200,83,0.18);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.mds-tag:hover {
    background: rgba(0,200,83,0.14);
    border-color: rgba(0,200,83,0.35);
    color: #fff;
    transform: translateX(4px);
}

/* Devices mockup */
.mds-devices {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mds-img {
    width: 130%;
    max-width: 800px;
    height: auto;
    object-fit: contain;
    margin-left: -15%;
    filter: drop-shadow(0 20px 60px rgba(0,200,83,0.15));
    animation: mds-float 4s ease-in-out infinite;
}

@keyframes mds-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}

/* Laptop */
.mds-laptop {
    position: relative;
    width: 280px;
    z-index: 2;
}

.mds-screen {
    background: #1a2a3a;
    border-radius: 10px 10px 0 0;
    border: 3px solid #2a3f52;
    padding: 8px;
    height: 170px;
    overflow: hidden;
}

.mds-screen-content { height: 100%; display: flex; flex-direction: column; gap: 5px; }

.mds-laptop-base {
    background: linear-gradient(180deg, #2a3f52, #1a2a3a);
    height: 12px;
    border-radius: 0 0 4px 4px;
    border: 2px solid #2a3f52;
    border-top: none;
}

.mds-laptop-foot {
    background: #1a2a3a;
    height: 6px;
    width: 120%;
    margin-left: -10%;
    border-radius: 0 0 8px 8px;
    border: 2px solid #2a3f52;
    border-top: none;
}

/* Phone */
.mds-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
}

.mds-phone-frame {
    width: 90px;
    height: 170px;
    background: #1a2a3a;
    border-radius: 16px;
    border: 3px solid #2a3f52;
    padding: 8px 5px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.mds-phone-notch {
    width: 28px;
    height: 5px;
    background: #2a3f52;
    border-radius: 3px;
    margin: 0 auto 5px;
}

.mds-phone-screen { height: calc(100% - 10px); display: flex; flex-direction: column; gap: 4px; }

/* Mock UI elements */
.mds-mock-nav {
    height: 10px;
    background: linear-gradient(90deg, #0288d1, #00897b);
    border-radius: 4px;
    opacity: 0.8;
}
.mds-mock-nav.sm { height: 7px; }

.mds-mock-hero {
    height: 40px;
    background: linear-gradient(135deg, rgba(2,136,209,0.3), rgba(0,137,123,0.2));
    border-radius: 6px;
    animation: mdsShimmer 2s ease-in-out infinite alternate;
}
.mds-mock-hero.sm { height: 28px; }

@keyframes mdsShimmer {
    from { opacity: 0.6; }
    to   { opacity: 1; }
}

.mds-mock-cards {
    display: flex;
    gap: 5px;
    flex: 1;
}
.mds-mock-cards.sm { flex-direction: column; gap: 4px; }

.mds-mock-card {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
}

/* Floating glow under devices */
.mds-devices::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 30px;
    background: radial-gradient(ellipse, rgba(2,136,209,0.3) 0%, transparent 70%);
    filter: blur(8px);
}

@media (max-width: 900px) {
    .mds-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .mds-text h2 { font-size: 1.8rem; }
    .mds-devices { height: 260px; }
    .mds-laptop { width: 220px; }
    .mds-screen { height: 130px; }
}

@media (max-width: 480px) {
    .mds-text h2 { font-size: 1.5rem; }
    .mds-features { gap: 1rem; }
    .mds-devices { height: 220px; }
    .mds-laptop { width: 180px; }
    .mds-screen { height: 110px; }
    .mds-phone-frame { width: 72px; height: 136px; }
}

.mds-highlight-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.mds-feat small {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    font-weight: 400;
    display: block;
    margin-top: 2px;
    text-align: center;
    line-height: 1.3;
}

/* Scroll-reveal animations */
.mds-text .mds-badge,
.mds-text h2,
.mds-text p,
.mds-features,
.mds-highlight-title,
.mds-tags {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.mds-devices {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}

.multidevice-section.mds-visible .mds-text .mds-badge { opacity: 1; transform: none; transition-delay: 0s; }
.multidevice-section.mds-visible .mds-text h2         { opacity: 1; transform: none; transition-delay: 0.1s; }
.multidevice-section.mds-visible .mds-text p          { opacity: 1; transform: none; transition-delay: 0.2s; }
.multidevice-section.mds-visible .mds-features        { opacity: 1; transform: none; transition-delay: 0.3s; }
.multidevice-section.mds-visible .mds-highlight-title { opacity: 1; transform: none; transition-delay: 0.35s; }
.multidevice-section.mds-visible .mds-tags            { opacity: 1; transform: none; transition-delay: 0.4s; }
.multidevice-section.mds-visible .mds-devices         { opacity: 1; transform: none; }

.mds-feat span:last-child {
    font-size: 0.78rem;
    text-align: center;
    line-height: 1.3;
}


/* ============================================
   MOBILE OPTIMIZATION — GLOBAL PATCH
   Tối ưu hóa toàn diện cho điện thoại
   ============================================ */

/* ── Tránh zoom iOS khi focus input ── */
@media (max-width: 768px) {
    input, select, textarea,
    .form-input, .form-select, .form-textarea,
    .nlh-input, .dt-textarea, .dt-select,
    .tkb-input, .nlh-note-textarea,
    .ai-chat-input input {
        font-size: 16px !important;
    }
}

/* ── Touch targets tối thiểu 44px ── */
@media (max-width: 768px) {
    button, [role="button"],
    .nlh-tab, .nlh-btn-primary, .nlh-btn-secondary,
    .nlh-btn-add, .nlh-cal-nav,
    .dt-btn-translate, .dt-swap-btn,
    .eco-card-link, .quick-action-btn,
    .nlh-timer-btn, .nlh-music-preset,
    .nlh-quick-chip, .dt-quick-chip,
    .tkb-btn-today, .tkb-btn-save,
    .nlh-pomo-mode {
        min-height: 44px;
    }
}

/* ── Overflow ngang ── */
@media (max-width: 768px) {
    .testi-card { min-width: 240px; }
    .subject-card { min-width: 100px; }
    .eco-feat-tag { font-size: 0.72rem; padding: 0.2rem 0.5rem; }
}

/* ── Hero section mobile ── */
@media (max-width: 480px) {
    .hero-title { font-size: 1.7rem !important; letter-spacing: -0.5px; }
    .hero-subtitle { font-size: 0.9rem !important; }
    .hero-inner { padding: 4rem 0.75rem 2rem !important; }
    .hero-cta-row { flex-direction: column; gap: 0.6rem; }
    .hero-btn-primary, .hero-btn-secondary {
        width: 100%; text-align: center; justify-content: center;
    }
    .cd-actions { flex-direction: column; gap: 0.6rem; }
    .cd-btn-primary, .cd-btn-secondary { width: 100%; text-align: center; }
}

/* ── Eco stack cards ── */
@media (max-width: 768px) {
    .eco-stack-card { flex-direction: column !important; gap: 1rem; padding: 1.5rem !important; }
    .eco-card-content { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
    .eco-card-icon-wrap { font-size: 2rem; }
    .eco-stack-card h3 { font-size: 1.3rem; }
    .eco-card-features { flex-wrap: wrap; gap: 0.3rem; }
}

/* ── Section headers ── */
@media (max-width: 480px) {
    .section-header h2, .eco-header-sticky h2 { font-size: 1.5rem !important; }
    .section-header p { font-size: 0.88rem; }
    .eco-badge, .nlh-eco-badge { font-size: 0.72rem; padding: 0.3rem 0.8rem; }
}

/* ── Dịch thuật mobile ── */
@media (max-width: 768px) {
    .dt-boxes { grid-template-columns: 1fr !important; }
    .dt-lang-bar { flex-wrap: wrap; gap: 0.5rem; }
    .dt-lang-group { min-width: 130px; }
    .dt-card { padding: 1.2rem; border-radius: 16px; }
    .dt-intro { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .dt-intro { grid-template-columns: 1fr; }
    .dt-btn-translate { width: 100%; }
    .dt-quick-list { gap: 0.4rem; }
}

/* ── Note & Lịch học mobile ── */
@media (max-width: 480px) {
    .nlh-banner-wrap { grid-template-columns: 1fr !important; }
    .nlh-banner-img-wrap { height: 180px; }
    .nlh-banner-info { padding: 1.5rem 1.2rem; }
    .nlh-banner-title { font-size: 1.3rem !important; }
    .nlh-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding: 4px; }
    .nlh-tab { font-size: 0.78rem; padding: 0.5rem 0.8rem; white-space: nowrap; flex-shrink: 0; }
    .nlh-chart-grid { grid-template-columns: 1fr !important; }
    .nlh-chart-full { grid-column: 1 !important; }
    .nlh-hm-day { width: 24px; height: 24px; font-size: 0.6rem; border-radius: 6px; }
    .nlh-wave-wrap { margin-top: 12px; padding: 14px; }
    .nlh-timer-layout { grid-template-columns: 1fr !important; }
    .nlh-schedule-layout { grid-template-columns: 1fr !important; }
    .nlh-notes-layout { grid-template-columns: 1fr !important; }
}

/* ── Flashcard mobile ── */
@media (max-width: 480px) {
    .fc-card-inner { min-height: 200px; }
    .fc-front, .fc-back { padding: 1.2rem; }
    .fc-word { font-size: 1.4rem; }
    .fc-controls { flex-wrap: wrap; gap: 0.5rem; }
    .fc-btn { flex: 1; min-width: 80px; }
}

/* ── Tạo đề thi mobile ── */
@media (max-width: 480px) {
    .create-exam-page { padding: 1rem 0 80px !important; }
    .page-title h1 { font-size: 1.2rem !important; }
    .card-body { padding: 1rem !important; }
    .radio-group { grid-template-columns: 1fr !important; }
    .form-row { grid-template-columns: 1fr !important; }
}

/* ── Modal bottom sheet trên mobile ── */
@media (max-width: 480px) {
    .nlh-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 20px 20px 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        max-height: 92dvh;
        overflow-y: auto;
    }
    .nlh-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
    .nlh-wave-detail-modal { max-width: 100vw !important; }
}

/* ── Footer mobile ── */
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.2rem !important; }
    .footer-brand { grid-column: 1 / -1 !important; }
    .footer-col-brand { grid-column: 1 / -1 !important; text-align: center; }
    .footer-team-block { padding: 1rem; }
    .ftb-member { font-size: 0.7rem; padding: 0.2rem 0.6rem; }
    .footer-bottom-new p { font-size: 0.75rem; }
}

/* ── Effects — tắt tilt và particles trên mobile (tiết kiệm pin) ── */
@media (max-width: 768px) {
    #ep-particles { display: none; }
    .ep-tilt { transform: none !important; }
    .ep-cursor-dot { display: none; }
    .ep-orb { display: none; }
}

/* ── Safe area inset cho notch/home indicator ── */
@media (max-width: 768px) {
    .mobile-action-bar,
    .tkb-saved-toast,
    .nlh-due-toast {
        padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
    }
    .ai-chat-button {
        bottom: calc(16px + env(safe-area-inset-bottom));
        right: calc(16px + env(safe-area-inset-right));
    }
}

/* ── Scrollbar ẩn trên mobile ── */
@media (max-width: 768px) {
    .nlh-wave-scroll,
    .nlh-tabs,
    .nlh-sw-laps,
    .nlh-history-list {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .nlh-wave-scroll::-webkit-scrollbar,
    .nlh-tabs::-webkit-scrollbar { display: none; }
}

/* ============================================
   DỊCH THUẬT ECOSYSTEM SECTION
   ============================================ */
.dt-eco-section {
    padding: 5rem 0;
    background: linear-gradient(160deg, #f0f4ff 0%, #fdf0ff 100%);
    position: relative;
    overflow: hidden;
}
.dt-eco-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 10% 50%, rgba(79,70,229,.06) 0%, transparent 55%),
                radial-gradient(ellipse at 90% 20%, rgba(168,85,247,.06) 0%, transparent 50%);
    pointer-events: none;
}

/* Scatter ảnh dịch thuật */
.dt-scatter-wrap { height: 480px; }

.dt-sc-1 { top: 10px;  left: 2%;   rotate: -3deg;  z-index: 5; width: 290px; transition: opacity 0.6s ease, transform 0.6s ease; }
.dt-sc-2 { top: 25px;  left: 20%;  rotate:  2deg;  z-index: 4; width: 310px; transition: opacity 0.6s ease 0.08s, transform 0.6s ease 0.08s; }
.dt-sc-3 { top: 8px;   left: 42%;  rotate: -4deg;  z-index: 6; width: 300px; transition: opacity 0.6s ease 0.16s, transform 0.6s ease 0.16s; }
.dt-sc-4 { top: 35px;  left: 62%;  rotate:  3deg;  z-index: 3; width: 305px; transition: opacity 0.6s ease 0.24s, transform 0.6s ease 0.24s; }
.dt-sc-5 { top: 210px; left: 12%;  rotate:  2deg;  z-index: 7; width: 295px; transition: opacity 0.6s ease 0.32s, transform 0.6s ease 0.32s; }

@media (max-width: 768px) {
    .dt-scatter-wrap { height: 300px; }
    .dt-sc-1 { top: 5px;  left: 0%;  width: 160px; }
    .dt-sc-2 { top: 15px; left: 22%; width: 170px; }
    .dt-sc-3 { top: 5px;  left: 46%; width: 165px; }
    .dt-sc-4 { top: 20px; left: 68%; width: 160px; }
    .dt-sc-5 { display: none; }
}
@media (max-width: 480px) {
    .dt-scatter-wrap { height: 240px; }
    .dt-sc-1 { width: 130px; }
    .dt-sc-2 { width: 140px; }
    .dt-sc-3 { width: 135px; }
    .dt-sc-4 { display: none; }
}

/* ── Fix: dt-eco-section cards & images luôn hiển thị khi anim-in ── */
.dt-eco-section .nlh-eco-card.anim-in,
.dt-eco-section .nlh-sc-img.anim-in,
.dt-eco-section .nlh-eco-header.anim-in,
.dt-eco-section .nlh-eco-cta.anim-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* Đảm bảo ep-reveal không block anim-in */
.dt-eco-section .ep-reveal.ep-visible,
.nlh-eco-section .ep-reveal.ep-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ============================================
   WIDGET DỊCH THUẬT TRANG CHỦ
   ============================================ */
.dt-widget {
    max-width: 860px;
    margin: 2.5rem auto 0;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 8px 40px rgba(79,70,229,.12);
    border: 1px solid rgba(79,70,229,.1);
    overflow: hidden;
}
.dt-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    flex-wrap: wrap;
    gap: .6rem;
}
.dt-widget-title {
    font-size: .9rem;
    font-weight: 800;
    color: #fff;
}
.dt-widget-langs {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.dt-widget-select {
    padding: .4rem .7rem;
    border: 1.5px solid rgba(255,255,255,.3);
    border-radius: 10px;
    font-size: .82rem;
    background: rgba(255,255,255,.15);
    color: #fff;
    outline: none;
    cursor: pointer;
    font-family: inherit;
}
.dt-widget-select option { background: #4f46e5; color: #fff; }
.dt-widget-swap {
    background: rgba(255,255,255,.2);
    border: 1.5px solid rgba(255,255,255,.3);
    color: #fff;
    border-radius: 50%;
    width: 32px; height: 32px;
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .25s, background .15s;
    flex-shrink: 0;
}
.dt-widget-swap:hover { transform: rotate(180deg); background: rgba(255,255,255,.3); }

.dt-widget-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    min-height: 140px;
}
.dt-widget-col { display: flex; flex-direction: column; }
.dt-widget-textarea {
    flex: 1;
    border: none;
    outline: none;
    padding: 1rem 1.2rem;
    font-size: .92rem;
    font-family: inherit;
    resize: none;
    color: #1a1a2e;
    line-height: 1.6;
    min-height: 120px;
    background: #fafaff;
}
.dt-widget-textarea::placeholder { color: #c4b5fd; }
.dt-widget-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .5rem;
    background: #f5f0ff;
    border-left: 1px solid #ede9ff;
    border-right: 1px solid #ede9ff;
}
.dt-widget-btn {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: .6rem .9rem;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(79,70,229,.3);
    transition: transform .15s, box-shadow .15s;
}
.dt-widget-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(79,70,229,.4); }
.dt-widget-output {
    flex: 1;
    padding: 1rem 1.2rem;
    font-size: .92rem;
    color: #1a1a2e;
    line-height: 1.6;
    background: #f5f0ff;
    min-height: 120px;
    white-space: pre-wrap;
    word-break: break-word;
}
.dt-widget-placeholder { color: #c4b5fd; font-style: italic; }
.dt-widget-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1.2rem;
    border-top: 1px solid #ede9ff;
    background: #fafaff;
    font-size: .75rem;
}
.dt-widget-footer span { color: #888; }
.dt-widget-more {
    font-size: .78rem;
    font-weight: 700;
    color: #4f46e5;
    text-decoration: none;
    transition: color .15s;
}
.dt-widget-more:hover { color: #7c3aed; }

@media (max-width: 640px) {
    .dt-widget-body { grid-template-columns: 1fr; }
    .dt-widget-divider { padding: .5rem; border: none; border-top: 1px solid #ede9ff; border-bottom: 1px solid #ede9ff; flex-direction: row; }
    .dt-widget-btn { width: 100%; }
    .dt-widget-header { flex-direction: column; align-items: flex-start; }
}

/* ── DT Marquee ── */
.dt-marquee-wrap {
    overflow: hidden;
    margin: 2rem 0 2.5rem;
    position: relative;
    /* fade hai bên */
    -webkit-mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.dt-marquee-track {
    display: flex;
    gap: 1.2rem;
    width: max-content;
    animation: dtMarquee 22s linear infinite;
}
.dt-marquee-wrap:hover .dt-marquee-track { animation-play-state: paused; }
@keyframes dtMarquee {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
.dt-marquee-img {
    height: 220px;
    width: auto;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(79,70,229,.18);
    border: 3px solid #fff;
    object-fit: cover;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
    flex-shrink: 0;
}
.dt-marquee-img:hover {
    transform: scale(1.05) translateY(-4px);
    box-shadow: 0 16px 40px rgba(79,70,229,.28);
    z-index: 2;
}
@media (max-width: 600px) {
    .dt-marquee-img { height: 150px; border-radius: 10px; }
    .dt-marquee-track { gap: .8rem; }
}

/* EduPass logo inline trong tiêu đề */
.benefits-logo-img {
    display: block;
    height: clamp(8rem, 22vw, 16rem);
    width: auto;
    margin: .4rem auto .6rem;
}

/* ── DT Feature Marquee (ngược chiều) ── */
.dt-feat-marquee-wrap {
    margin-top: 1rem;
}
.dt-feat-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: dtFeatReverse 16s linear infinite;
}
.dt-feat-marquee-wrap:hover .dt-feat-track { animation-play-state: paused; }
@keyframes dtFeatReverse {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
.dt-feat-chip {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: #fff;
    border-radius: 18px;
    padding: 1.1rem 1.4rem;
    min-width: 260px;
    max-width: 280px;
    box-shadow: 0 4px 20px rgba(79,70,229,.1);
    border: 1px solid rgba(79,70,229,.1);
    flex-shrink: 0;
    transition: transform .2s, box-shadow .2s;
    cursor: default;
}
.dt-feat-chip:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(79,70,229,.18);
}
.dt-feat-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    margin-top: .1rem;
}
.dt-feat-chip strong {
    display: block;
    font-size: .92rem;
    font-weight: 800;
    color: #4f46e5;
    margin-bottom: .25rem;
}
.dt-feat-chip p {
    font-size: .78rem;
    color: #5a6a8a;
    margin: 0 0 .4rem;
    line-height: 1.5;
}
.dt-feat-chip ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .15rem;
}
.dt-feat-chip ul li {
    font-size: .74rem;
    color: #7c3aed;
    font-weight: 600;
}
@media (max-width: 600px) {
    .dt-feat-chip { min-width: 220px; padding: .9rem 1rem; }
}

/* ── DT Info Grid ── */
.dt-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    margin: 2.5rem 0 2rem;
}
.dt-info-card {
    background: linear-gradient(145deg, #fff 60%, #f5f0ff 100%);
    border-radius: 22px;
    padding: 1.6rem 1.4rem 1.4rem;
    box-shadow: 0 4px 24px rgba(79,70,229,.1);
    border: 1px solid rgba(79,70,229,.1);
    position: relative;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.22,.68,0,1.2), box-shadow .25s;
}
.dt-info-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4f46e5, #a855f7, #ec4899);
    border-radius: 22px 22px 0 0;
}
.dt-info-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 48px rgba(79,70,229,.18);
}
.dt-info-card-new { border-color: rgba(79,70,229,.25); }
.dt-info-new {
    position: absolute; top: .9rem; right: .9rem;
    font-size: .65rem; font-weight: 700;
    background: linear-gradient(135deg,#4f46e5,#7c3aed);
    color: #fff; padding: .2rem .7rem; border-radius: 20px;
    box-shadow: 0 2px 8px rgba(79,70,229,.3);
}
.dt-info-icon {
    font-size: 2.2rem;
    margin-bottom: .75rem;
    display: inline-block;
    filter: drop-shadow(0 4px 8px rgba(79,70,229,.25));
}
.dt-info-card h4 {
    font-size: 1rem;
    font-weight: 800;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: .45rem;
}
.dt-info-card p {
    font-size: .82rem;
    color: #5a6a8a;
    line-height: 1.6;
    margin-bottom: .6rem;
}
.dt-info-card ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .3rem;
}
.dt-info-card ul li {
    font-size: .76rem;
    color: #7c3aed;
    font-weight: 700;
    display: flex; align-items: center; gap: .35rem;
}
.dt-info-card ul li::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg,#4f46e5,#a855f7);
    flex-shrink: 0;
}
@media (max-width: 900px) { .dt-info-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .dt-info-grid { grid-template-columns: 1fr; gap: 1rem; } }

/* ── Eco section top layout: text trái + ảnh phải ── */
.nlh-eco-top-layout {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
}
.nlh-eco-top-layout .nlh-eco-header {
    text-align: left;
    margin-bottom: 0;
}
.nlh-eco-hero-img {
    width: clamp(280px, 35vw, 520px);
    height: auto;
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(0,0,0,.15);
    object-fit: cover;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .nlh-eco-top-layout {
        grid-template-columns: 1fr;
    }
    .nlh-eco-top-layout .nlh-eco-header { text-align: center; }
    .nlh-eco-hero-img { width: 100%; border-radius: 14px; }
}

/* ── NLH Eco Hero Row ── */
.nlh-eco-hero-row {
    display: grid;
    grid-template-columns: 1fr 480px;
    align-items: center;
    gap: 3rem;
    margin-bottom: 3rem;
}
.nlh-eco-hero-text { display: flex; flex-direction: column; gap: 1rem; }
.nlh-eco-hero-text .nlh-eco-badge { width: fit-content; }
.nlh-eco-hero-text h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #1a2a3a;
    line-height: 1.2;
    margin: 0;
}
.nlh-eco-hero-text .nlh-eco-desc {
    font-size: .98rem;
    color: #5a7a8a;
    line-height: 1.7;
    max-width: 480px;
    margin: 0;
}
.nlh-eco-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.nlh-eco-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.nlh-eco-stat-num {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, #0288d1, #00c853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.nlh-eco-stat span:last-child {
    font-size: .78rem;
    color: #78909c;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.nlh-eco-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(135deg, #0288d1, #00c853);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    padding: .8rem 1.8rem;
    border-radius: 50px;
    text-decoration: none;
    width: fit-content;
    box-shadow: 0 6px 20px rgba(2,136,209,.3);
    transition: transform .2s, box-shadow .2s;
}
.nlh-eco-hero-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(2,136,209,.4); }

.nlh-eco-hero-img-wrap {
    position: relative;
}
.nlh-eco-hero-img-wrap .nlh-eco-hero-img {
    width: 100%;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(2,136,209,.2);
    display: block;
    position: relative;
    z-index: 1;
}
.nlh-eco-hero-glow {
    position: absolute;
    inset: 20px;
    background: linear-gradient(135deg, rgba(2,136,209,.3), rgba(0,200,83,.2));
    border-radius: 24px;
    filter: blur(30px);
    z-index: 0;
}

@media (max-width: 900px) {
    .nlh-eco-hero-row { grid-template-columns: 1fr; gap: 2rem; }
    .nlh-eco-hero-text h2 { font-size: 2rem; }
}
@media (max-width: 480px) {
    .nlh-eco-stats { gap: 1.2rem; }
    .nlh-eco-stat-num { font-size: 1.4rem; }
}

/* ── NLH Marquee ── */
.nlh-marquee-wrap {
    overflow: hidden;
    margin: 0 0 2.5rem;
    position: relative;
    -webkit-mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.nlh-marquee-track {
    display: flex;
    gap: 1.2rem;
    width: max-content;
    animation: nlhMarquee 24s linear infinite;
}
.nlh-marquee-wrap:hover .nlh-marquee-track { animation-play-state: paused; }
@keyframes nlhMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.nlh-marquee-img {
    height: 220px;
    width: auto;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(2,136,209,.18);
    border: 3px solid #fff;
    object-fit: cover;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .25s, box-shadow .25s;
}
.nlh-marquee-img:hover {
    transform: scale(1.05) translateY(-4px);
    box-shadow: 0 16px 40px rgba(2,136,209,.28);
}
@media (max-width: 600px) {
    .nlh-marquee-img { height: 150px; border-radius: 10px; }
}

/* ── Scatter float animations ── */
@keyframes scFloat1 { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-10px) rotate(-5deg)} }
@keyframes scFloat2 { 0%,100%{transform:translateY(0) rotate(3deg)}  50%{transform:translateY(-14px) rotate(3deg)} }
@keyframes scFloat3 { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-8px) rotate(-2deg)} }
@keyframes scFloat4 { 0%,100%{transform:translateY(0) rotate(5deg)}  50%{transform:translateY(-12px) rotate(5deg)} }
@keyframes scFloat5 { 0%,100%{transform:translateY(0) rotate(2deg)}  50%{transform:translateY(-10px) rotate(2deg)} }
@keyframes scFloat6 { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-9px) rotate(-4deg)} }

.nlh-sc-1.anim-in { animation: scFloat1 5s ease-in-out infinite; }
.nlh-sc-2.anim-in { animation: scFloat2 6s ease-in-out infinite 0.5s; }
.nlh-sc-3.anim-in { animation: scFloat3 5.5s ease-in-out infinite 1s; }
.nlh-sc-4.anim-in { animation: scFloat4 6.5s ease-in-out infinite 0.3s; }
.nlh-sc-5.anim-in { animation: scFloat5 5.8s ease-in-out infinite 0.8s; }
.nlh-sc-6.anim-in { animation: scFloat6 6.2s ease-in-out infinite 0.2s; }

.nlh-sc-img.anim-in:hover {
    animation-play-state: paused;
    transform: scale(1.07) rotate(0deg) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.3) !important;
    z-index: 20 !important;
}

/* ── Subject Info Popup ── */
.sp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.sp-overlay.sp-active {
    opacity: 1;
    pointer-events: all;
}
.sp-modal {
    --sp-color: #3b82f6;
    background: #0f1923;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 2rem 2.2rem 2.2rem;
    position: relative;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.sp-overlay.sp-active .sp-modal {
    transform: translateY(0) scale(1);
}
.sp-modal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--sp-color);
    border-radius: 20px 20px 0 0;
}
.sp-close {
    position: absolute;
    top: 1rem; right: 1rem;
    background: rgba(255,255,255,0.08);
    border: none;
    color: rgba(255,255,255,0.6);
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.sp-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
.sp-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.8rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sp-icon {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
    flex-shrink: 0;
}
.sp-group {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sp-color);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    opacity: 0.85;
}
.sp-title {
    font-size: 1.7rem;
    font-weight: 900;
    color: #fff;
    margin: 0;
    letter-spacing: 0.02em;
}
.sp-section {
    margin-bottom: 1.4rem;
}
.sp-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}
.sp-core {
    color: rgba(255,255,255,0.8);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
    padding: 0.9rem 1.1rem;
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--sp-color);
    border-radius: 0 10px 10px 0;
}
.sp-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.sp-list li {
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
    padding: 0.5rem 0.9rem;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.sp-list li::before {
    content: '▸';
    color: var(--sp-color);
    font-size: 0.75rem;
    flex-shrink: 0;
}
.sp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.sp-tag {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: color-mix(in srgb, var(--sp-color) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--sp-color) 50%, transparent);
    border-radius: 20px;
    padding: 0.3rem 0.9rem;
    transition: all 0.2s;
}
.sp-tag:hover {
    background: color-mix(in srgb, var(--sp-color) 35%, transparent);
}
.subject-card { cursor: pointer; }
@media (max-width: 480px) {
    .sp-modal { padding: 1.5rem 1.3rem 1.8rem; }
    .sp-title { font-size: 1.4rem; }
}