/* ============================================================
   canthostartup.vn — style.css (TOÀN SITE)
   Đặt SAU Bootstrap CDN. Mở đầu bằng :root override.
   ============================================================ */

:root {
  /* --- Font (override Bootstrap) --- */
  --bs-font-sans-serif:  'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size:   .95rem;
  --bs-body-line-height: 1.65;
  --bs-body-color:       #1A1A2E;
  --bs-body-bg:          #F4F6FB;

  /* --- Brand Colors (override Bootstrap) --- */
  --bs-primary:        #1A73E8;
  --bs-primary-rgb:    26, 115, 232;
  --bs-secondary:      #28A745;
  --bs-secondary-rgb:  40, 167, 69;
  --bs-success:        #28A745;
  --bs-success-rgb:    40, 167, 69;
  --bs-danger:         #DC3545;
  --bs-warning:        #F4A428;
  --bs-warning-rgb:    244, 164, 40;
  --bs-info:           #6366F1;
  --bs-border-color:   #E3E8F0;
  --bs-border-radius:     10px;
  --bs-border-radius-sm:   6px;
  --bs-border-radius-lg:  16px;
  --bs-border-radius-pill: 9999px;
  --bs-link-color:       #1A73E8;
  --bs-link-hover-color: #1557B0;

  /* --- Custom Brand Tokens --- */
  --clr-primary:       #1A73E8;
  --clr-primary-dark:  #1557B0;
  --clr-secondary:     #28A745;
  --clr-secondary-dark:#1E7E34;
  --clr-accent:        #F4A428;
  --clr-navy:          #0A1F5C;
  --clr-text:          #1A1A2E;
  --clr-text-sub:      #555E7B;
  --clr-text-muted:    #8C94A8;
  --clr-bg:            #F4F6FB;
  --clr-white:         #FFFFFF;
  --clr-border:        #E3E8F0;

  /* --- Shadow --- */
  --shadow-card:  0 2px 12px rgba(26, 115, 232, 0.08);
  --shadow-hover: 0 8px 28px rgba(26, 115, 232, 0.18);
  --shadow-nav:   0 2px 16px rgba(0, 0, 0, 0.08);

  /* --- Transition --- */
  --transition-base: all 0.25s ease;

  /* --- Hero / CTA gradient --- */
  --grad-hero: linear-gradient(135deg, #0A1F5C 0%, #1A3A8C 60%, #1A73E8 100%);
  --grad-btn-success: linear-gradient(135deg, #2FB350 0%, #1E7E34 100%);
  --grad-btn-primary: linear-gradient(135deg, #2E86FF 0%, #1557B0 100%);
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--bs-font-sans-serif);
  background-color: var(--clr-bg);
  color: var(--clr-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: var(--clr-primary); }
a:hover { color: var(--clr-primary-dark); }
img { max-width: 100%; }
::selection { background: rgba(26,115,232,0.18); }

/* ============================================================
   FORM FOCUS — bỏ glow mặc định Bootstrap, thay ring hiện đại
   ============================================================ */
.form-control, .form-select {
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 4px rgba(26,115,232,0.14);
  outline: none;
}
.form-control:focus::placeholder { opacity: .6; }
.form-check-input:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 4px rgba(26,115,232,0.14);
}
.form-check-input:checked { background-color: var(--clr-primary); border-color: var(--clr-primary); }

/* Ô search trong navbar (pill tách input-group): ring bọc cả khối, ẩn ring con */
.navbar-search { border-radius: 9999px; transition: box-shadow .25s ease; }
.navbar-search:focus-within { box-shadow: 0 0 0 4px rgba(255,255,255,0.22); }
.navbar-search .form-control:focus,
.navbar-search .input-group-text { box-shadow: none; border-color: transparent; }

/* Card tìm kiếm tổng quát: input/select bên trong không tự glow — card sáng qua :focus-within */
.search-main-card .form-control:focus { box-shadow: none; }
.search-main-card .form-select:focus { box-shadow: 0 0 0 4px rgba(26,115,232,0.12); }

/* Section heading accent line */
.section-title { position: relative; }

/* ============================================================
   GRID / LAYOUT
   ============================================================ */
.section-pad    { padding: 64px 0; }
.section-pad-sm { padding: 40px 0; }
@media (max-width: 768px) {
  .section-pad    { padding: 40px 0; }
  .section-pad-sm { padding: 24px 0; }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.hero-headline      {font-size: 1.6rem;font-weight: 800;line-height: 1.15;}
.hero-headline-alt  {font-size: 2.4rem;font-weight: 800;color: var(--clr-secondary);}
.section-title      { font-size: 1.5rem;    font-weight: 700; line-height: 1.3; color: var(--clr-text); }
.card-title-lg      { font-size: 1rem;      font-weight: 600; line-height: 1.4; }
.card-title-sm      { font-size: 0.875rem; font-weight: 600; }
.stat-number        { font-size: 1.875rem;  font-weight: 800; color: var(--clr-primary); }
.text-muted-custom  { color: var(--clr-text-muted) !important; font-size: 0.8125rem; }
.nav-link-custom    { font-size: 0.875rem;  font-weight: 500; }
@media (max-width: 768px) {
  .hero-headline, .hero-headline-alt { font-size: 2rem; }
  .section-title { font-size: 1.25rem; }
  .stat-number   { font-size: 1.5rem; }
}

@media screen and (max-width: 1400px) {
  .nav-link-custom { 
    font-size: 0.825rem;
  }
}

/* Clamp tiêu đề card để đồng đều chiều cao */
.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   BUTTONS — làm nổi bật (gradient + shadow + shine + lift)
   ============================================================ */
.btn { 
  font-size: .95rem;
  font-weight: 600; letter-spacing: .2px; transition: var(--transition-base); 
}

.btn-success {
  background: var(--grad-btn-success); border: none;
  box-shadow: 0 6px 18px rgba(40,167,69,0.32);
}
.btn-success:hover, .btn-success:focus {
  background: var(--grad-btn-success); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(40,167,69,0.42);
}
.btn-primary {
  background: var(--grad-btn-primary); border: none;
  box-shadow: 0 6px 18px rgba(26,115,232,0.32);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--grad-btn-primary); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(26,115,232,0.42);
}
.btn-outline-light { border-width: 2px; }
.btn-outline-light:hover { transform: translateY(-2px); color: var(--clr-navy); }

/* Shine sweep cho nút lớn */
.btn-lg { position: relative; overflow: hidden; }
.btn-lg::after {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transition: left 0.6s ease;
}
.btn-lg:hover::after { left: 130%; }

/* ============================================================
   NAVBAR
   ============================================================ */
#main-navbar {
  min-height: 76px; box-shadow: var(--shadow-nav); z-index: 1030;
  background: linear-gradient(90deg, #0A1F5C 0%, #143075 45%, #1A3A8C 100%);
  transition: box-shadow .25s ease, background .25s ease;
}
/* Container navbar rộng hơn để menu không xuống hàng */
.container-nav { margin-inline: auto; }
#main-navbar .navbar-brand img { height: 24px; object-fit: contain; }
#main-navbar .nav-link {
  color: rgba(255,255,255,0.82); padding: 6px 10px; border-radius: 6px;
  white-space: nowrap; transition: color 0.2s; position: relative;
}
/* Khoảng giữa các mục hẹp lại ở lg để vừa 1 hàng, rộng ra ở xl */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-nav { gap: 0 !important; }
  #main-navbar .nav-link { padding: 6px 7px; font-size: 0.8125rem; }
  .navbar-search { width: 200px; }
}
#main-navbar .nav-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
#main-navbar .nav-link:hover::after { transform: scaleX(1); }
#main-navbar .nav-link:hover,
#main-navbar .nav-link.active { color: #fff; }
#main-navbar .nav-link.active { font-weight: 600; }
#main-navbar .nav-link.active::after { transform: scaleX(1); height: 2.5px; }
#main-navbar .brand-tagline { font-size: 10.5px; line-height: 1.35; color: rgba(255,255,255,0.66); }
#main-navbar .dropdown-menu { border-radius: var(--bs-border-radius); margin-top: 10px; }
#main-navbar.navbar-scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.28) !important; }

/* Search pill trong navbar (nền tối) */
.navbar-search { width: 270px; }
@media screen and (max-width: 1400px) {
  .navbar-search {
    width: 175px;
  }
}
.navbar-search .input-group-text {
  background: rgba(255,255,255,0.95); border: none; border-radius: 9999px 0 0 9999px; padding-left: 14px;
}
.navbar-search .input-group-text i { color: var(--clr-text-muted); }
.navbar-search .form-control {
  background: rgba(255,255,255,0.95); border: none; border-radius: 0 9999px 9999px 0;
  font-size: 0.8125rem; padding-left: 0; box-shadow: none;
}
.navbar-search .form-control::placeholder { color: var(--clr-text-muted); }

/* Control links bên phải (VI, chuông) */
.nav-ctrl-link { color: rgba(255,255,255,0.85); transition: var(--transition-base); cursor: pointer; }
.nav-ctrl-link:hover { color: #fff; }
.nav-ctrl-link.show { color: #fff; }

/* Dropdown mở khi hover (desktop) — có cầu nối chống mất hover */
@media (min-width: 992px) {
  .nav-hover-dropdown:hover > .dropdown-menu { display: block; }
}
.nav-hover-dropdown .dropdown-menu { margin-top: 8px; }
.nav-hover-dropdown .dropdown-menu::before {
  content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}

/* Menu ngôn ngữ */
.lang-menu { min-width: 170px; padding: 6px; }
.lang-menu .dropdown-item { border-radius: var(--bs-border-radius-sm); padding: 8px 10px; font-size: 0.875rem; }
.lang-menu .dropdown-item.active { background: rgba(26,115,232,0.1); color: var(--clr-primary); font-weight: 600; }

/* Panel thông báo */
.notif-menu { width: 340px; max-width: 92vw; overflow: hidden; }
.notif-menu .notif-head { border-bottom: 1px solid var(--clr-border); }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item { color: var(--clr-text); border-bottom: 1px solid var(--clr-border); transition: background .2s; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--clr-bg); color: var(--clr-text); }
.notif-item.unread { background: rgba(26,115,232,0.05); }
.notif-item.unread .small { font-weight: 500; }
.notif-ico {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.notif-foot { border-top: 1px solid var(--clr-border); color: var(--clr-primary); background: var(--clr-bg); transition: background .2s; }
.notif-foot:hover { background: #eaf1fd; color: var(--clr-primary-dark); }
.nav-user { color: #fff; }
.nav-avatar { object-fit: cover; border: 2px solid rgba(255,255,255,0.6); }
.nav-user:hover {
  color: #fff;
}
/* Hamburger trắng + dropdown chữ trên mobile */
#main-navbar .navbar-toggler { color: rgba(255,255,255,0.9); }
@media (max-width: 991.98px) {
  #main-navbar .navbar-collapse {
    background: rgba(255,255,255,0.06); border-radius: var(--bs-border-radius);
    padding: 12px; margin-top: 10px;
  }
  .navbar-search { width: 100%; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero-section { background: var(--grad-hero); position: relative; }
/* Hero cao tối thiểu + chừa chỗ cho card search overlap bên dưới */
.hero-inner { z-index: 2; padding-top: 64px; padding-bottom: 110px; min-height: 520px; }
.hero-bg-overlay {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(100deg, rgba(10,31,92,0.94) 0%, rgba(13,40,110,0.82) 40%, rgba(26,90,200,0.45) 100%),
    url('../images/banner-xanhbien.png');
  background-size: cover; background-position: center;
}
.hero-section .container-xl { position: relative; }
.hero-sub-label {
  display: inline-flex; align-items: center;
  color: #fff; font-size: 0.8125rem; font-weight: 600;
  background: rgba(40,167,69,0.22); border: 1px solid rgba(40,167,69,0.5);
  padding: 6px 14px; border-radius: 9999px; backdrop-filter: blur(4px);
}
.hero-section .hero-headline-alt {
  background: linear-gradient(90deg, #3DDC84, #28A745);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* --- Hero stats: thẻ kính (glassmorphism) --- */
.hero-stat-card {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--bs-border-radius-lg);
  padding: 18px 8px; text-align: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transition: var(--transition-base);
}
.hero-stat-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.32); }
.hero-stat-icon {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  background: rgba(255,255,255,0.92);
}
.hero-stat-num { font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1.1; }
.hero-stat-label { font-size: 0.65rem; color: rgba(255,255,255,0.8); margin-top: 2px; }
.hero-stat-trend {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 0.7rem; font-weight: 600; color: #4ADE80; margin-top: 8px;
}
.hero-stat-trend i { font-size: 1rem; }

@media (max-width: 991.98px) {
  .hero-inner { padding-top: 40px; padding-bottom: 90px; min-height: 0; }
  .hero-stat-num { font-size: 1.4rem; }
}

/* --- Search card overlap mép dưới hero --- */
.search-overlap { margin-top: -64px; position: relative; z-index: 4; }
@media (max-width: 768px) { .search-overlap { margin-top: -56px; } }

/* ============================================================
   SEARCH
   ============================================================ */
.search-main-card { transition: var(--transition-base); }
.search-main-card:focus-within { box-shadow: var(--shadow-hover) !important; border-color: var(--clr-primary) !important; }
.search-tag {
  padding: 4px 14px; border: 1px solid var(--clr-border);
  border-radius: var(--bs-border-radius-pill); font-size: 0.8125rem;
  color: var(--clr-text-sub); transition: var(--transition-base);
}
.search-tag:hover { background: var(--clr-primary); border-color: var(--clr-primary); color: white; transform: translateY(-2px); }

/* ============================================================
   SECTION HEADER (link xem tất cả)
   ============================================================ */
.see-all { transition: var(--transition-base); }
.see-all:hover { transform: translateX(3px); }

/* ============================================================
   MARKETPLACE
   ============================================================ */
.marketplace-card {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--bs-border-radius-lg) !important;
  transition: var(--transition-base); position: relative; overflow: hidden;
  --mkp: var(--clr-primary); --mkp-tint: #EAF2FE; --mkp-icon: #DCEBFD;
}
.marketplace-card { background: linear-gradient(135deg, #FFFFFF 0%, var(--mkp-tint) 100%) !important; }
.marketplace-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover) !important;
  border-color: var(--mkp) !important;
}
/* Icon tròn bên trái */
.mkp-icon-wrap {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; background: var(--mkp-icon); color: var(--mkp);
  transition: var(--transition-base);
}
.marketplace-card:hover .mkp-icon-wrap { transform: scale(1.08); }
.mkp-title { font-weight: 700; color: var(--mkp); }
.mkp-count {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--mkp);
}
.mkp-count i { transition: transform .25s ease; }
.marketplace-card:hover .mkp-count i { transform: translateX(4px); }
/* Mũi tên lớn mờ góc phải dưới */
.mkp-bg-arrow {
  position: absolute; right: 16px; bottom: 12px;
  font-size: 2.2rem; color: var(--mkp); opacity: .14; pointer-events: none;
}

/* Theme màu từng card */
.mkp-blue   { --mkp: #1A73E8; --mkp-tint: #EAF2FE; --mkp-icon: #DBEAFE; }
.mkp-green  { --mkp: #1E9E4A; --mkp-tint: #E9F7EE; --mkp-icon: #D6F0DE; }
.mkp-purple { --mkp: #6366F1; --mkp-tint: #EEEEFE; --mkp-icon: #E2E2FD; }
.mkp-orange { --mkp: #E8941C; --mkp-tint: #FDF3E2; --mkp-icon: #FBE6C7; }

/* ============================================================
   STARTUP SWIPER
   ============================================================ */
.startup-swiper { padding: 8px 4px 16px; }
.startup-swiper .swiper-slide { width: 220px; height: auto; }
.startup-card {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--bs-border-radius-lg) !important; transition: var(--transition-base);
}
.startup-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover) !important; border-color: var(--clr-primary) !important; }
/* Logo: vòng tròn nền tint nhạt + icon màu (có viền nhạt) */
.startup-logo {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; transition: var(--transition-base); overflow: hidden;
  background: var(--logo-tint, #EEF2F7); color: var(--logo-clr, var(--clr-primary));
  border: 4px solid var(--logo-ring, #F4F6FB);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
/* Ảnh logo phủ kín khung tròn (sau này thay bằng logo thật) */
.startup-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.startup-card:hover .startup-logo { transform: scale(1.06); }
.logo-green  { --logo-clr:#1E9E4A; --logo-tint:#E5F6EC; --logo-ring:#F0FBF4; }
.logo-blue   { --logo-clr:#1A73E8; --logo-tint:#E5F0FE; --logo-ring:#F0F6FE; }
.logo-orange { --logo-clr:#E8941C; --logo-tint:#FDF1DF; --logo-ring:#FEF8EE; }
.logo-purple { --logo-clr:#6366F1; --logo-tint:#EBEBFD; --logo-ring:#F4F4FE; }
.logo-cyan   { --logo-clr:#0EA5C4; --logo-tint:#E1F5FA; --logo-ring:#F0FAFC; }

.startup-desc { min-height: 2.6em; }
.startup-meta { border-top: 1px solid var(--clr-border); }

.badge-stage  { display: inline-block; padding: 4px 14px; border-radius: 9999px; font-size: 11px; font-weight: 600; }
.badge-growth { background:#DCFCE7; color:#15803D; }
.badge-early  { background:#DBEAFE; color:#1D4ED8; }
.badge-seed   { background:#FEF3C7; color:#92400E; }
.badge-idea   { background:#EDE9FE; color:#6D28D9; }

.swiper-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--clr-border);
  background: white; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10; box-shadow: var(--shadow-card); transition: var(--transition-base);
}
.swiper-nav-btn:hover { background: var(--clr-primary); color: white; border-color: var(--clr-primary); transform: translateY(-50%) scale(1.08); }
.swiper-nav-prev { left: -5px; }
.swiper-nav-next { right: -5px; }
.swiper-nav-btn.swiper-button-disabled { opacity: .4; cursor: default; }

/* ============================================================
   EVENTS — ảnh thực tế
   ============================================================ */
.event-card {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--bs-border-radius-lg) !important;
  overflow: hidden; transition: var(--transition-base);
}
.event-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover) !important; }
.event-thumb {
  height: 170px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #e9eef7;
}
.event-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.event-card:hover .event-thumb img { transform: scale(1.08); }
.event-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,92,0) 40%, rgba(10,31,92,0.35)); }
.event-type-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 4px 12px; border-radius: 9999px; font-size: 11px; font-weight: 700; color: white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.type-seminar  { background:#6366F1; }
.type-workshop { background:#F59E0B; }
.type-pitching { background:#EF4444; }
.type-webinar  { background:#3B82F6; }
.type-training { background:#10B981; }
.type-expo     { background:#8B5CF6; }

.event-meta { font-size: 0.8125rem; color: var(--clr-text-sub); }
.btn-event-register {
  background: var(--grad-btn-success); color: white; border: none;
  border-radius: var(--bs-border-radius); padding: 10px; width: 100%;
  font-weight: 600; font-size: 0.875rem; transition: var(--transition-base);
  box-shadow: 0 4px 12px rgba(40,167,69,0.25);
}
.btn-event-register:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(40,167,69,0.38); color: white; }

/* ============================================================
   KNOWLEDGE + NEWS — ảnh thực tế
   ============================================================ */
.knowledge-item {
  border: 1px solid var(--clr-border); border-radius: var(--bs-border-radius);
  transition: var(--transition-base); cursor: pointer;
}
.knowledge-item:hover { border-color: var(--clr-border); background: var(--clr-white); transform: translateX(6px); box-shadow: var(--shadow-card); }
.knowledge-thumb {
  width: 84px; height: 64px; flex-shrink: 0; border-radius: var(--bs-border-radius-sm);
  overflow: hidden; position: relative;
}
.knowledge-thumb img { width: 100%; height: 100%; object-fit: cover; }
.knowledge-thumb .k-ico {
  position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 6px;
  background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--clr-primary);
}
/* Dòng tác giả + meta của mục tri thức */
.kn-author { font-size: 0.8125rem; color: var(--clr-text-sub); }
.kn-author-link { color: var(--clr-primary); font-weight: 600; }
.kn-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 0.75rem; color: var(--clr-text-muted);
}
.kn-dot { color: var(--clr-border); }
.kn-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 8px; border-radius: 9999px; font-weight: 600;
  background: rgba(220,53,69,0.1); color: #DC3545;
}

.news-featured {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--bs-border-radius-lg) !important; overflow: hidden; transition: var(--transition-base);
}
.news-featured:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover) !important; }
.news-featured-thumb { height: 260px; overflow: hidden; }
.news-featured-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news-featured:hover .news-featured-thumb img { transform: scale(1.06); }
.news-feat-meta { font-size: 0.8125rem; border-top: 1px solid var(--clr-border); padding-top: 10px; }

.news-mini-item { transition: var(--transition-base); cursor: pointer; border-radius: var(--bs-border-radius); }
.news-mini-item:hover { transform: translateX(6px); background: var(--clr-bg); }
.news-mini-thumb { width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--bs-border-radius-sm); overflow: hidden; }
.news-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Nhãn danh mục tin tức */
.news-tag {
  display: inline-block; padding: 2px 10px; border-radius: 9999px;
  font-size: 0.6875rem; font-weight: 600; line-height: 1.6;
}
.tag-blue   { background: rgba(26,115,232,0.12);  color: #1A73E8; }
.tag-orange { background: rgba(244,164,40,0.16);  color: #B26B00; }
.tag-green  { background: rgba(40,167,69,0.14);   color: #1E7E34; }
.tag-peach  { background: rgba(249,115,22,0.12);  color: #C2410C; }

/* ============================================================
   FORUM
   ============================================================ */
.forum-card { border: 1px solid var(--clr-border) !important; border-radius: var(--bs-border-radius-lg) !important; }
.forum-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 10px; border-bottom: 1px solid var(--clr-border);
  transition: var(--transition-base); cursor: pointer; border-radius: var(--bs-border-radius);
}
.forum-item:last-child { border-bottom: none; }
.forum-item:hover { background: var(--clr-bg); transform: translateX(4px); }
.forum-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.875rem; color: white; box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.forum-stats { display: flex; gap: 16px; font-size: 0.8125rem; color: var(--clr-text-muted); margin-top: 4px; }

/* ============================================================
   CTA
   ============================================================ */
/* CTA dạng card bo góc nền xanh (không full-bleed) */
.cta-card {
  background: linear-gradient(120deg, #1E6FE0 0%, #2C7BEA 45%, #1557B0 100%);
  border-radius: 24px; padding: 40px 48px;
  box-shadow: 0 20px 50px rgba(26,115,232,0.30);
}
.cta-card::before {
  content: ""; position: absolute; top: -70px; right: -50px; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%); border-radius: 50%; z-index: 1;
}
.cta-card::after {
  content: ""; position: absolute; bottom: -80px; left: 30%; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(40,167,69,0.22), transparent 70%); border-radius: 50%; z-index: 1;
}
.cta-illu { filter: drop-shadow(0 16px 36px rgba(0,0,0,0.25)); }
.cta-check {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-size: 0.875rem; font-weight: 500;
}
.cta-check i { color: #4ADE80; font-size: 1.05rem; }
@media (max-width: 768px) { .cta-card { padding: 32px 22px; border-radius: 18px; } }

/* ============================================================
   PARTNERS
   ============================================================ */
.partners-swiper { padding: 10px 4px 12px; }
.partners-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; }
.partner-logo {
  height: 76px; width: 100%; padding: 0 16px; transition: var(--transition-base);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--clr-border); border-radius: var(--bs-border-radius-lg); background: #fff;
  opacity: .85;
}
.partner-logo:hover { opacity: 1; border-color: var(--clr-primary); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.pl-wm { font-weight: 800; font-size: 1.15rem; letter-spacing: .3px; line-height: 1; }
.pl-wm small { font-size: 0.6rem; letter-spacing: .5px; }
.pl-natec {
  font-weight: 800; font-size: 1.15rem; letter-spacing: 1px;
  color: #0A4DA2; border: 2px solid #0A4DA2; border-radius: 50%; padding: 8px 12px;
}
.pl-fpt { font-size: 1.5rem; letter-spacing: 1px; }
.pl-google { font-size: 1.2rem; }

/* ============================================================
   FOOTER
   ============================================================ */
#main-footer { background: #0A1F5C; color: rgba(255,255,255,0.75); }
.footer-desc { font-size: 0.8125rem; color: rgba(255,255,255,0.6); line-height: 1.6; }
.footer-title { font-size: 0.9375rem; font-weight: 700; color: #fff; margin-bottom: 18px; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: rgba(255,255,255,0.65); font-size: 0.875rem; transition: color 0.2s, padding 0.2s; }
.footer-links a:hover { color: white; padding-left: 4px; }
.footer-contact li { color: rgba(255,255,255,0.65); font-size: 0.8125rem; margin-bottom: 10px; line-height: 1.5; }
.footer-social {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.75); font-size: 0.875rem; transition: var(--transition-base);
}
.footer-social:hover { background: var(--clr-primary); border-color: var(--clr-primary); color: white; transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.8125rem; color: rgba(255,255,255,0.55); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-float { animation: none; }
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
#backToTop {
  position: fixed; right: 24px; bottom: 24px; z-index: 1040;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--grad-btn-primary); color: #fff; box-shadow: var(--shadow-hover);
  display: none; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease;
}
#backToTop.show { opacity: 1; transform: translateY(0); }
#backToTop:hover { transform: translateY(-3px); }