/* =========================================================
   ESTART.VN - HOMEPAGE STYLESHEET
   Theme: Educational Blue Palette (xem DESIGN.md / RULES.md)
   ========================================================= */

:root {
  --primary-edu: #0052CC;
  --primary-edu-dark: #003D99;
  --secondary-tech: #00B4D8;
  --dark-neutral: #1E293B;
  --bg-light-neutral: #F8FAFC;
  --accent-amber: #F59E0B;
  --border-color: #E2E8F0;

  --hub-coworking: #0052CC;
  --hub-service: #10B981;
  --hub-local: #F59E0B;

  --shadow-soft: 0 .5rem 1.5rem rgba(15, 23, 42, .08);
  --shadow-hover: 0 1rem 2.2rem rgba(0, 82, 204, .18);
}

* { scroll-behavior: smooth; }

body {
  font-family: "Be Vietnam Pro", "Inter", "Roboto", sans-serif;
  color: var(--dark-neutral);
  background-color: #FFFFFF;
  font-size: 0.95rem;
  line-height: 1.6;
  overflow-x: hidden;
}

a { text-decoration: none; }

/* ---------- Utility / Brand ---------- */
.text-primary-edu { color: var(--primary-edu) !important; }
.text-secondary-tech { color: var(--secondary-tech) !important; }
.bg-primary-edu { background-color: var(--primary-edu) !important; }
.bg-light-neutral { background-color: var(--bg-light-neutral) !important; }

.btn-primary-edu {
  background-color: var(--primary-edu);
  border-color: var(--primary-edu);
  color: #fff;
  transition: all .25s ease;
}
.btn-primary-edu:hover {
  background-color: var(--primary-edu-dark);
  border-color: var(--primary-edu-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0, 82, 204, .3);
}
.btn-outline-edu {
  background-color: transparent;
  border: 1.5px solid var(--primary-edu);
  color: var(--primary-edu);
  transition: all .25s ease;
}
.btn-outline-edu:hover {
  background-color: var(--primary-edu);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- Hero CTA buttons (noi bat) ---------- */
.btn-hero-primary {
  position: relative;
  overflow: hidden;
  font-weight: 700;
  color: #fff;
  border: none;
  background: linear-gradient(95deg, var(--accent-amber), #FB923C);
  box-shadow: 0 .6rem 1.4rem rgba(245, 158, 11, .45);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: cta-pulse 2.6s ease-in-out infinite;
}
.btn-hero-primary:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 .9rem 1.8rem rgba(245, 158, 11, .6);
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 .6rem 1.4rem rgba(245, 158, 11, .45); }
  50% { box-shadow: 0 .6rem 1.9rem rgba(245, 158, 11, .7); }
}
/* Hieu ung anh sang luot qua (shimmer) */
.btn-hero-primary::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  animation: shimmer 3s infinite;
}
@keyframes shimmer {
  0% { left: -120%; }
  55%, 100% { left: 140%; }
}
.btn-hero-secondary {
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(4px);
  transition: all .25s ease;
}
.btn-hero-secondary:hover {
  color: var(--primary-edu);
  background: #fff;
  border-color: #fff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .25);
}

.brand-logo {
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--primary-edu);
}
.brand-logo span { color: var(--secondary-tech); }

/* ---------- Scroll Reveal Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.reveal.reveal-left  { transform: translateX(-44px); }
.reveal.reveal-right { transform: translateX(44px); }
.reveal.reveal-zoom  { transform: scale(.9); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Navbar ---------- */
.navbar-estart {
  border-bottom: 1px solid var(--border-color);
  transition: box-shadow .3s ease, background .3s ease;
  backdrop-filter: saturate(180%) blur(8px);
  background-color: rgba(255, 255, 255, .92) !important;
}
.navbar-estart.navbar-scrolled {
  box-shadow: 0 .25rem 1rem rgba(15, 23, 42, .08);
}
.navbar-estart .nav-link {
  font-weight: 500;
  color: var(--dark-neutral);
  padding-left: .9rem;
  padding-right: .9rem;
  position: relative;
}
/* Underline chi ap dung cho menu chinh (khong anh huong dropdown ngon ngu) */
.navbar-estart .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: .9rem; right: .9rem; bottom: .35rem;
  height: 2px;
  background: var(--secondary-tech);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.navbar-estart .navbar-nav .nav-link:hover::after,
.navbar-estart .navbar-nav .nav-link.active::after { transform: scaleX(1); }
.navbar-estart .nav-link.active { color: var(--primary-edu); font-weight: 600; }
.navbar-estart .nav-link:hover { color: var(--primary-edu); }

/* Dropdown chon ngon ngu */
.lang-switch .lang-toggle {
  font-weight: 600;
  color: var(--dark-neutral);
  padding: .35rem .75rem;
  border: 1px solid var(--border-color);
  border-radius: 50rem;
  background-color: var(--bg-light-neutral);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.lang-switch .lang-toggle:hover {
  color: var(--primary-edu);
  border-color: var(--secondary-tech);
  background-color: #fff;
}
.lang-switch .lang-toggle i { color: var(--secondary-tech); }
.lang-switch .dropdown-item.active,
.lang-switch .dropdown-item:active {
  background-color: rgba(0, 82, 204, .1);
  color: var(--primary-edu);
}

.search-box {
  border-radius: 50rem;
  background-color: var(--bg-light-neutral);
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.search-box:focus-within {
  border-color: var(--secondary-tech);
  box-shadow: 0 0 0 .2rem rgba(0, 180, 216, .15);
}
.search-box input { border: none; background: transparent; box-shadow: none !important; }
.search-box .btn { border: none; background: transparent; color: var(--primary-edu); }

.notif-bell { position: relative; font-size: 1.25rem; color: var(--dark-neutral); }
.notif-badge {
  position: absolute; top: -4px; right: -8px;
  font-size: .6rem;
  background-color: var(--accent-amber);
  animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .6); }
  50% { box-shadow: 0 0 0 .35rem rgba(245, 158, 11, 0); }
}

.avatar-circle {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--secondary-tech);
}

/* ---------- Hero ---------- */
.hero-section {
  /* Anh nen thuc te: sinh vien hoc tap / khoa hoc truc tuyen */
  background: url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1920&h=760&q=75') center top / cover no-repeat,
              linear-gradient(125deg, #003D99 0%, var(--primary-edu) 45%, #0072F5 70%, var(--secondary-tech) 100%);
  color: #fff;
  position: relative;
  padding-top: 5rem;
  padding-bottom: 7rem;
  overflow: hidden;
}
@keyframes hero-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Lop phu gradient mau thuong hieu len tren anh thuc te de giu do tuong phan chu trang */
.hero-section::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(125deg, rgba(0, 61, 153, .92) 0%, rgba(0, 82, 204, .88) 45%, rgba(0, 114, 245, .8) 70%, rgba(0, 180, 216, .75) 100%);
  background-size: 200% 200%;
  animation: hero-gradient 14s ease infinite;
}
/* Floating decorative blobs */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: .35;
  pointer-events: none;
}
.hero-blob-1 { width: 320px; height: 320px; background: var(--secondary-tech); top: -90px; right: -60px; animation: float 9s ease-in-out infinite; }
.hero-blob-2 { width: 240px; height: 240px; background: var(--accent-amber); bottom: -80px; left: 8%; opacity: .22; animation: float 11s ease-in-out infinite reverse; }
.hero-blob-3 { width: 160px; height: 160px; background: #fff; top: 30%; left: 42%; opacity: .12; animation: float 7s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-26px) translateX(14px); }
}

.hero-section h1 { font-size: 2.2rem; font-weight: 700; line-height: 1.2; }
@media (min-width: 992px) { .hero-section h1 { font-size: 2.7rem; } }
.hero-section p.lead { font-size: 1.05rem; opacity: .92; max-width: 560px; }

.hero-img-wrap { position: relative; }
.hero-img-wrap img {
  border-radius: 1.25rem;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .3);
  animation: float 8s ease-in-out infinite;
}
.hero-badge-float {
  position: absolute;
  background: #fff;
  color: var(--dark-neutral);
  border-radius: .8rem;
  padding: .6rem .9rem;
  box-shadow: var(--shadow-soft);
  font-size: .8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.hero-badge-1 { top: 12%; left: -18px; animation: float 6s ease-in-out infinite; }
.hero-badge-2 { bottom: 14%; right: -12px; animation: float 7.5s ease-in-out infinite reverse; }

/* Wave divider under hero */
.hero-wave {
  position: absolute;
  bottom: -1px; left: 0; width: 100%;
  line-height: 0;
}

.hero-stats-ribbon {
  position: relative;
  margin-top: -3.5rem;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 1rem;
  z-index: 5;
  box-shadow: var(--shadow-soft);
}
.hero-stats-ribbon .stat-item { text-align: center; padding: 1.4rem .5rem; transition: transform .25s ease; }
.hero-stats-ribbon .stat-item:hover { transform: translateY(-4px); }
.hero-stats-ribbon .stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-edu);
  line-height: 1;
}
.hero-stats-ribbon .stat-icon { font-size: 1.3rem; color: var(--secondary-tech); margin-bottom: .35rem; }
.hero-stats-ribbon .stat-label { font-size: .8rem; color: #64748B; margin-top: .25rem; }
.hero-stats-ribbon .vr-divider { width: 1px; background-color: var(--border-color); }

/* ---------- Section base + modern backgrounds ---------- */
.section-block { position: relative; overflow: hidden; }
.section-block.bg-soft {
  background:
    radial-gradient(1200px 400px at 100% 0%, rgba(0, 180, 216, .07), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(0, 82, 204, .06), transparent 60%),
    var(--bg-light-neutral);
}
.section-block.bg-plain {
  background:
    radial-gradient(800px 300px at 0% 0%, rgba(0, 82, 204, .04), transparent 55%);
}

/* Background bang HINH ANH THAT (phu lop mo de chu van ro) */
.section-block.bg-photo { position: relative; }
.section-block.bg-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.section-block.bg-photo-team::before {
  background-image:
    linear-gradient(rgba(248, 250, 252, .94), rgba(248, 250, 252, .97)),
    url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1600&q=70');
}
.section-block.bg-photo-study::before {
  background-image:
    linear-gradient(rgba(248, 250, 252, .93), rgba(255, 255, 255, .96)),
    url('https://images.unsplash.com/photo-1524178232363-1fb2b075b655?auto=format&fit=crop&w=1600&q=70');
}
/* Background hoa tiet luoi cham (geometric pattern) */
.section-block.bg-pattern-dots {
  background-color: #fff;
  background-image: radial-gradient(rgba(0, 82, 204, .08) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}
/* Background hoa tiet duong cheo nhe */
.section-block.bg-pattern-grid {
  background-color: var(--bg-light-neutral);
  background-image:
    linear-gradient(rgba(0, 82, 204, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 82, 204, .035) 1px, transparent 1px);
  background-size: 32px 32px;
}
/* decorative dotted blob */
.deco-blob {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(0, 180, 216, .14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.deco-blob.tr { top: -60px; right: -40px; }
.deco-blob.bl { bottom: -60px; left: -40px; background: radial-gradient(circle at 30% 30%, rgba(245, 158, 11, .12), transparent 70%); }
.section-block > .container { position: relative; z-index: 1; }

/* ---------- Section heading ---------- */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--secondary-tech);
  background: rgba(0, 180, 216, .1);
  padding: .3rem .8rem;
  border-radius: 50rem;
  margin-bottom: .6rem;
}
.section-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--dark-neutral);
}
.section-subtitle { color: #64748B; font-size: .9rem; }
.link-view-all { font-weight: 600; color: var(--primary-edu); white-space: nowrap; transition: gap .2s ease; }
.link-view-all:hover { color: var(--secondary-tech); }
.link-view-all i { transition: transform .2s ease; }
.link-view-all:hover i { transform: translateX(4px); }

/* ---------- Course Card ---------- */
.course-card {
  border: 1px solid var(--border-color);
  border-radius: 1rem !important;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  height: 100%;
}
.course-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover) !important;
}
.course-card .thumb-wrap { aspect-ratio: 16/9; overflow: hidden; position: relative; }
.course-card .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.course-card:hover .thumb-wrap img { transform: scale(1.08); }
.course-card .thumb-wrap::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, .35), transparent 45%);
  opacity: 0; transition: opacity .3s ease;
}
.course-card:hover .thumb-wrap::after { opacity: 1; }
/* Badge danh muc/linh vuc dung chung cho moi loai card (khoa hoc, e-book, tin tuc...) */
.badge-category {
  display: inline-block;
  background-color: rgba(0, 180, 216, .12);
  color: var(--secondary-tech) !important;
  font-weight: 600;
}
.course-card .badge-float {
  position: absolute; top: .7rem; left: .7rem;
  background: rgba(255, 255, 255, .92);
  color: var(--primary-edu);
  font-weight: 600;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.course-card .course-title {
  font-size: .98rem; font-weight: 600;
  color: var(--dark-neutral);
  min-height: 2.6em;
}
.course-card .course-meta { font-size: .8rem; color: #64748B; }
.rating-star { color: var(--accent-amber); }

/* ---------- Event List ---------- */
.event-item {
  border: 1px solid var(--border-color);
  border-radius: .9rem;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.event-item::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--secondary-tech);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s ease;
}
.event-item:hover { transform: translateX(4px); box-shadow: var(--shadow-soft); }
.event-item:hover::before { transform: scaleY(1); }
.event-date-block {
  background: linear-gradient(160deg, var(--primary-edu), var(--secondary-tech));
  color: #fff;
  border-radius: .7rem;
  width: 66px; height: 66px;
  flex-shrink: 0;
}
.event-date-block .day { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.event-date-block .month { font-size: .7rem; text-transform: uppercase; }

/* ---------- E-Book Shelf ---------- */
.ebook-card {
  border: 1px solid var(--border-color);
  border-radius: 1rem !important;
  overflow: hidden;
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.ebook-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.ebook-cover-wrap { aspect-ratio: 5/4; overflow: hidden; background-color: var(--bg-light-neutral); position: relative; }
.ebook-cover-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ebook-card:hover .ebook-cover-wrap img { transform: scale(1.06); }
.ebook-card .course-title, .hub-card .course-title {
  font-size: 1.2rem; font-weight: 600;
  color: var(--dark-neutral);
  min-height: 2.4em;
}
.ebook-cover-wrap .read-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 61, 153, .82), rgba(0, 61, 153, 0) 55%);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 1rem;
  opacity: 0; transition: opacity .3s ease;
}
.ebook-card:hover .read-overlay { opacity: 1; }

/* ---------- E-Hub Cards ---------- */
.hub-card {
  border: 1px solid var(--border-color);
  border-radius: 1rem !important;
  border-top: 4px solid var(--primary-edu);
  height: 100%;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.hub-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.hub-card .hub-thumb { aspect-ratio: 16/9; overflow: hidden; }
.hub-card .hub-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hub-card:hover .hub-thumb img { transform: scale(1.07); }
.hub-card.hub-coworking { border-top-color: var(--hub-coworking); }
.hub-card.hub-service { border-top-color: var(--hub-service); }
.hub-card.hub-local { border-top-color: var(--hub-local); }
.hub-tag-coworking { background-color: var(--hub-coworking); }
.hub-tag-service { background-color: var(--hub-service); }
.hub-tag-local { background-color: var(--hub-local); }

/* ---------- CTA Block ---------- */
.cta-block {
  position: relative;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(120deg, var(--primary-edu-dark), var(--primary-edu) 55%, var(--secondary-tech));
}
.cta-block::before {
  content: "";
  position: absolute; inset: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="1.5" fill="white" opacity="0.2"/></svg>');
  background-size: 48px 48px; opacity: .5;
}
.cta-block .btn-light { transition: transform .25s ease, box-shadow .25s ease; }
.cta-block .btn-light:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .25); }

/* ---------- News ---------- */
.news-featured .thumb-wrap { aspect-ratio: 16/9; overflow: hidden; border-radius: 1rem; }
.news-featured .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news-featured:hover .thumb-wrap img { transform: scale(1.05); }
.news-side-item { transition: background .2s ease; border-radius: .6rem; }
.news-side-item:hover { background: var(--bg-light-neutral); }
.news-side-item .thumb-wrap { width: 116px; height: 84px; flex-shrink: 0; overflow: hidden; border-radius: .6rem; }
.news-side-item .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.news-side-item:hover .thumb-wrap img { transform: scale(1.08); }
.news-excerpt { font-size: .85rem; color: #64748B; }
.news-featured h3, .news-side-item h3 { transition: color .2s ease; }
.news-featured:hover h3, .news-side-item:hover h3 { color: var(--primary-edu); }

/* ---------- Footer ---------- */
.footer-estart {
  background:
    radial-gradient(900px 400px at 100% 0%, rgba(0, 82, 204, .25), transparent 60%),
    var(--dark-neutral);
  color: #CBD5E1;
}
.footer-estart h6 { color: #fff; font-weight: 700; margin-bottom: 1rem; }
.footer-estart a { color: #CBD5E1; transition: color .2s ease, padding-left .2s ease; }
.footer-estart ul a:hover { color: var(--secondary-tech); padding-left: .25rem; }
.footer-estart .social-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .08);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform .25s ease, background .25s ease;
}
.footer-estart .social-icon:hover { background-color: var(--secondary-tech); transform: translateY(-3px); }
.footer-estart hr { border-color: rgba(255, 255, 255, .1); }

/* ---------- Back to top ---------- */
#backToTop {
  position: fixed; bottom: 24px; right: 24px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--primary-edu);
  color: #fff; border: none;
  box-shadow: var(--shadow-soft);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: all .3s ease;
  z-index: 1030;
}
#backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); }
#backToTop:hover { background: var(--primary-edu-dark); transform: translateY(-3px); }

/* ---------- Misc ---------- */
.badge-amber { background-color: var(--accent-amber); }

@media (prefers-reduced-motion: reduce) {
  *, .reveal { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}