/* ==============================
   GLOBAL BASE STYLE
   ============================== */
/* styles.css
   Palette: xanh (primary) + vàng (accent) + trắng
   Fonts: Inter (body), Rubik (titles)
*/
:root{
  --primary:#0B76D1; /* blue */
  --primary-600:#0762A8;
  --accent:#FFC845;  /* yellow */
  --bg:#ffffff;
  --muted:#6b7280;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.18);
  --glass-border: rgba(255,255,255,0.24);
  --radius:12px;
  --container:1180px;
  --shadow-sm: 0 8px 20px rgba(11,118,209,0.08);
  --shadow-md: 0 20px 60px rgba(2,6,23,0.12);
}

*{box-sizing:border-box}
html,body{height:100%}
html {
  scroll-behavior: smooth;
}

body{
  margin:0;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial;line-height:1.45;
  color:#0f172a;background: linear-gradient(180deg,#f7fbff 0%, #ffffff 60%);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

/* container */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* skip link */
.skip-link{position:absolute;left:0;top:0;transform:translateY(-140%);background:var(--primary);color:white;padding:8px 12px;border-radius:0 0 6px 0;z-index:200}
.skip-link:focus{transform:none}

/* header */
.site-header {
  position: fixed; /* 👈 giữ cố định trên cùng màn hình */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
  backdrop-filter: blur(8px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 50px; /* bỏ margin-bottom để không tạo khoảng hở */
}
body::before {
  content: "";
  display: block;
  height: 90px; /* chiều cao header, bạn có thể điều chỉnh */
}
/* nội dung bên trong header */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;  
  max-width: 80%;
  padding: 2px 10px;
  /*max-width: var(--container);*/
  margin: 0 auto;
  border-radius: 0; /* bỏ bo góc để header dính sát trên */
  box-shadow: none; /* tránh đổ bóng 2 lần */
  backdrop-filter: blur(20px);
}

.brand{display:flex;align-items:center;}
.brand .logo{display:block;}
.brand-name{font-family:"Rubik",sans-serif;font-weight:700;font-size:18px}
.brand-tag{font-size:12px;color:var(--muted)}

/* nav */
.main-nav .menu {
  display: flex;
  gap: 12px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 18px;
}

.main-nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.main-nav a:hover {
  color: var(--primary);
  background: rgba(11, 118, 209, 0.06);
}

.has-sub {
  position: relative;
}

.has-sub .sub {
  position: absolute;
  left: 0;
  top: 100%;
  background: white;
  padding: 6px 0;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  min-width: 300px; /* submenu rộng hơn */
  list-style: none; /* bỏ bullet */
}

.has-sub:hover .sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sub li {
  padding: 2px 10px 2px 20px;   /*trên - phải - dưới - trái*/
  position: relative;
}

.sub li::before {
  content: "▸"; /* icon mũi tên nhỏ */
  position: absolute;
  left: 15px;  /*--kc icon vs margin-left--*/
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 14px;
  transition: transform 0.2s ease;
}

.sub li:hover::before {
  transform: translateY(-50%) translateX(3px); /* hiệu ứng trượt nhẹ khi hover */
}

.sub li a {
  display: block;
  color: var(--muted);
  border-radius: 6px;
  transition: all 0.2s ease;
  padding-left: 15px;   /*--kc icon vs text--*/
}

.sub li a:hover {
  background: rgba(11, 118, 209, 0.06);
  color: var(--primary);
}



/* header actions */
.header-actions{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700;text-decoration:none}
.btn.primary{background:var(--primary);color:white;box-shadow:var(--shadow-sm)}
.btn.ghost{background:transparent;border:1px solid rgba(11,118,209,0.08);color:var(--primary)}
.btn.outline{background:transparent;border:2px solid rgba(255,200,69,0.12);color:var(--primary)}
.mobile-toggle{display:none;background:transparent;border:0;padding:8px;cursor:pointer}
.mobile-toggle span{display:block;width:22px;height:2px;background:var(--primary);margin:4px 0;border-radius:2px}

/* hero section */
.section{padding:36px 0}
.hero-grid{display:grid;grid-template-columns:1fr 560px;gap:28px;align-items:center}
.hero-left h1{font-family:"Rubik",sans-serif;font-size:34px;margin:0 0 12px}
.lead{color:var(--muted);font-size:16px;margin-bottom:12px}
.hero-meta{list-style:none;padding:0;margin:10px 0 18px;display:flex;gap:12px}
.hero-meta li{background:linear-gradient(90deg, rgba(11,118,209,0.06), rgba(255,200,69,0.04));padding:8px 10px;border-radius:10px;font-weight:600}
.accent{
  color:var(--accent)
}

/* slider */
.slider{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-md);background:linear-gradient(180deg,#fff,#f7fbff)}
.slider-track{display:flex;transition:transform .6s cubic-bezier(.2,.9,.3,1)}
.slide{min-width:100%;flex-shrink:0}
.slide img{
  display:block;
  width:600px;
  height:400px;
  object-fit:cover
}
.slider-btn{
  position:absolute;
  top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,0.4);
  color:white;
  border:2px solid rgba(3, 57, 104, 0.819);
  border-radius:8px;cursor:pointer;z-index:10
}
.slider-btn.prev{
  color: rgba(1, 40, 74, 0.08);  
  left:-15px
}
.slider-btn.next{
  color: rgba(1, 40, 74, 0.08);
  right:-15px
}
.slider-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:8px}
.slider-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,0.6)}
.slider-dots button.active{background:var(--primary)}

/*------------ hiệu ứng chuyển động không cần js -------- 28/10/2025*/
/* ---- Slider container ---- */
.slider {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(2,6,23,0.12);
  background: linear-gradient(180deg,#fff,#f7fbff);
}

/* mỗi slide nằm chồng lên nhau */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /*animation: fadeSlide 12s infinite;*/
}
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }

@keyframes fadeSlide {
  0% { opacity: 0; }
  8% { opacity: 1; }
  33% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; }
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1s ease;
}
.slide:nth-child(1):hover img,
.slide:nth-child(2):hover img,
.slide:nth-child(3):hover img {
  transform: scale(1.1);
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.slide.active {
  opacity: 1;
  z-index: 2;
}


/* responsive */
@media (max-width: 720px){
  .slider { height: 220px; border-radius: 12px; }
}


/*------------ end hiệu ứng chuyển slide ------------*/

.home-hero{
  padding:0 0 18px;
  background:#f8fbff;
  overflow:hidden;
}
.home-hero-inner{
  display:grid;
  gap:14px;
}
.home-hero-slider.slider{
  width:100vw;
  height:clamp(420px,calc(100vh - 290px),768px);
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-radius:0;
  box-shadow:none;
}
.home-hero-slider .slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.home-slide-caption{
  position:absolute;
  left:50%;
  bottom:42px;
  z-index:4;
  max-width:min(900px,calc(100vw - 40px));
  transform:translateX(-50%);
  padding:14px 24px;
  border-radius:8px;
  background:linear-gradient(135deg,rgba(10,31,68,.88),rgba(11,118,209,.78));
  color:#fff;
  font-size:clamp(20px,2.4vw,34px);
  font-weight:800;
  line-height:1.25;
  text-align:center;
  box-shadow:0 18px 46px rgba(2,6,23,.26);
}
.home-hero-slider .slider-btn{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  color:var(--primary);
  box-shadow:0 10px 24px rgba(15,23,42,.14);
  font-size:24px;
}
.home-hero-slider .slider-btn.prev{
  left:28px;
  color:var(--primary);
}
.home-hero-slider .slider-btn.next{
  right:28px;
  color:var(--primary);
}
.home-hero-features{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  padding:0;
  margin:0 auto;
  max-width:1180px;
}
.home-hero-features li{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:78px;
  padding:12px 24px;
  border:1px solid rgba(11,118,209,.12);
  border-radius:8px;
  background:linear-gradient(180deg,#f7fbff 0%,#eef7ff 100%);
  box-shadow:0 12px 28px rgba(21,50,95,.07);
  color:#111827;
  font-size:19px;
  font-weight:800;
  text-align:left;
}
.home-hero-features i{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#fff;
  color:var(--primary);
  font-size:18px;
  box-shadow:0 8px 18px rgba(11,118,209,.12);
}
.home-hero-features span{
  min-width:0;
  line-height:1.45;
}
.home-hero-features strong{
  display:block;
  color:var(--accent);
  font-size:19px;
}
.home-breaking-news{
  width:100vw;
  height:62px;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#fff;
  border-bottom:1px solid var(--primary);
}
.home-breaking-label{
  position:relative;
  z-index:2;
  width:300px;
  min-width:300px;
  height:100%;
  padding:0 22px 0 0;
  display:flex;
  align-items:center;
  gap:0;
  color:#0a1f44;
  background:#fff;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0;
  border-right:1px solid var(--primary);
  border-bottom:1px solid var(--primary);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%);
}
.home-breaking-label::before{
  content:"SVE";
  position:absolute;
  top:0;
  left:0;
  width:58px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  color:#fff;
  font-size:18px;
  font-weight:950;
}
.home-breaking-label::after{
  display:none;
}
.home-breaking-label strong{
  display:none;
}
.home-breaking-label span{
  position:relative;
  z-index:2;
  min-width:0;
  flex:1;
  height:auto;
  display:flex;
  align-items:center;
  padding:0 38px 0 78px;
  background:transparent;
  color:#0a1f44;
  border:0;
  font-size:22px;
  font-weight:950;
  line-height:.95;
  box-shadow:none;
  clip-path:none;
}
.home-breaking-track{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  overflow:hidden;
  height:100%;
  background:#fff;
  border-bottom:1px solid var(--primary);
}
.home-breaking-marquee{
  display:flex;
  width:max-content;
  align-items:center;
  gap:38px;
  padding-left:28px;
  animation:breakingMarquee 32s linear infinite;
}
.home-breaking-marquee:hover{
  animation-play-state:paused;
}
.home-breaking-marquee a,
.home-breaking-marquee span{
  position:relative;
  flex:0 0 auto;
  color:#0f172a;
  text-decoration:none;
  font-size:15px;
  font-weight:400;
  white-space:nowrap;
}
.home-breaking-marquee a::after,
.home-breaking-marquee span::after{
  content:"";
  position:absolute;
  right:-22px;
  top:50%;
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--accent);
  transform:translateY(-50%);
}
.home-breaking-marquee a:hover{
  color:var(--primary);
}

@keyframes breakingMarquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

@media (max-width:900px){
  .home-hero-features{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  .home-hero-slider.slider{
    height:clamp(320px,calc(100vh - 330px),560px);
  }
  .home-breaking-label{
    width:250px;
    min-width:250px;
    font-size:14px;
  }
  .home-breaking-label span{
    padding-left:72px;
    font-size:19px;
  }
}

@media (max-width:560px){
  .home-hero{
    padding-bottom:22px;
  }
  .home-hero-inner{
    gap:12px;
  }
  .home-hero-slider.slider{
    height:360px;
  }
  .home-hero-features{
    grid-template-columns:1fr;
    gap:10px;
  }
  .home-hero-features li{
    justify-content:flex-start;
    padding:13px 16px;
  }
  .home-breaking-news{
    height:52px;
  }
  .home-breaking-label{
    width:70px;
    min-width:70px;
    padding:0;
    clip-path:none;
  }
  .home-breaking-label::after{
    display:none;
  }
  .home-breaking-label::before{
    width:70px;
    font-size:18px;
  }
  .home-breaking-label span{
    display:none;
  }
  .home-breaking-marquee{
    gap:28px;
    padding-left:18px;
  }
  .home-breaking-marquee a,
  .home-breaking-marquee span{
    font-size:14px;
  }
}

/* video section */
.video-grid{display:grid;grid-template-columns:560px 1fr;gap:24px;align-items:center}
.video-frame{border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md)}
.video-text h2{font-family:"Rubik",sans-serif}

/* split grids */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.split-grid.reverse{direction:ltr}
.split-grid.reverse .split-left{order:1}
.split-right img, .split-left img{width:100%;height:auto;border-radius:12px;box-shadow:var(--shadow-sm)}
.illustration{object-fit:cover}

/* features list */
.features-list .section-head{margin-bottom:16px}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:linear-gradient(180deg,#fff,#fff);padding:18px;border-radius:12px;box-shadow:var(--shadow-sm);transition:transform .18s ease, box-shadow .18s ease;cursor:default}
.card:hover{transform:translateY(-6px);box-shadow:0 25px 60px rgba(11,118,209,0.08)}
.card-icon{font-size:26px;margin-bottom:10px}

/* teacher */
.teacher-grid{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:center}
.avatar{width:100%;height:auto;border-radius:12px;object-fit:cover}

/* blog / news carousel */
.news-carousel{display:flex;align-items:center;gap:12px}
.news-track-wrapper{overflow:hidden;flex:1;border-radius:12px}
.news-track{display:flex;gap:12px;transition:transform .6s cubic-bezier(.2,.9,.3,1)}
.news-card{background:white;border-radius:10px;padding:12px;min-width:240px;box-shadow:var(--shadow-sm)}
.news-card img{width:100%;height:140px;object-fit:cover;border-radius:8px}

/* closing */
.closing{padding:28px 0;text-align:center}
.center{text-align:center}

/* footer */
.site-footer{background:linear-gradient(180deg,#071428,#042033);color:#f1f7ff;padding:28px 0}
.footer-grid{display:grid;grid-template-columns:1fr 220px 240px;gap:18px;align-items:start;padding-bottom:12px}
.footer-col h4{margin:0 0 8px}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col a{color:inherit;text-decoration:none;opacity:.95}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,0.04);padding-top:12px;font-size:14px;color:rgba(255,255,255,0.8)}

/* modal (glass) */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:300}
.modal[aria-hidden="false"]{display:flex}
.modal-backdrop{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,0.5),rgba(2,6,23,0.6));backdrop-filter: blur(3px)}
.modal-card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));border-radius:14px;padding:22px;width:96%;max-width:520px;box-shadow:var(--shadow-md);border:1px solid rgba(255,255,255,0.08);backdrop-filter: blur(8px)}
.modal-close{position:absolute;right:12px;top:12px;background:transparent;border:0;color:white;font-size:18px}
.modal-body h3{color:white;margin-top:0}
.modal-body .muted{color:rgba(255,255,255,0.75)}
.form-row{margin:12px 0;display:flex;flex-direction:column}
.form-row label{color:rgba(255,255,255,0.9);margin-bottom:6px;font-weight:600}
.form-row input,.form-row select{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.02);color:white}
.form-actions{display:flex;gap:10px;margin-top:12px}
.form-message{margin-top:10px;color:#e6f6ff}

/* reveal animation */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1)}
.reveal.visible{opacity:1;transform:none}

/* responsive */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .video-grid{grid-template-columns:1fr}
  .split-grid{grid-template-columns:1fr}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .news-card{min-width:220px}
  .teacher-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .main-nav .menu{display:none}
  .mobile-toggle{display:block}
}

/* small */
@media (max-width:720px){
  .cards-grid{grid-template-columns:1fr}
  .slider-btn{display:none}
  .slider-dots{display:none}
  .news-carousel{flex-direction:column}
  .header-inner{gap:8px}
  .brand-name{font-size:16px}
}

/* ===== SECTION TEACHER ===== */
.section.teacher {
  padding: 100px 0;
  background: linear-gradient(135deg, #ffffff 0%, #f9fbff 100%);
  color: #222;
}

.teacher-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.teacher-left img.avatar {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 90, 200, 0.15);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.teacher-left img.avatar:hover {
  transform: scale(1.03);
  box-shadow: 0 15px 40px rgba(0, 90, 200, 0.25);
}

.teacher-right h3 {
  font-size: 1.8rem;
  color: #0066cc;
  margin-bottom: 10px;
}

.teacher-right .muted {
  color: #555;
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 20px;
  position: relative;
  padding-left: 18px;
}

.teacher-right .muted::before {
  content: "★";
  color: #ffcc00;
  position: absolute;
  left: 0;
  top: 0;
}

.teacher-right p {
  line-height: 1.7;
  margin-bottom: 25px;
  color: #333;
}

.teacher-right .btn.primary {
  background: #0066cc;
  color: #fff;
  border: none;
  padding: 12px 30px;
  font-size: 1rem;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.teacher-right .btn.primary:hover {
  background: #004b99;
  transform: translateY(-3px);
}

/* ===== ANIMATION REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .teacher-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .teacher-right {
    order: 2;
  }

  .teacher-left img.avatar {
    max-width: 320px;
    margin: 0 auto 30px;
  }
}

          
/*----------footer -----------------------*/
/* ==============================
   FOOTER STYLE - sMath
   ============================== */
.site-footer {
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: #fff;
  padding: 60px 20px 30px;
  position: relative;
  overflow: hidden;
  border-top: 5px solid #ffd60a;
}

/* Hiệu ứng sáng nhẹ */
.site-footer::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at top left, rgba(255,255,255,0.15), transparent 70%);
  animation: footerGlow 8s infinite alternate;
  z-index: 0;
}
@keyframes footerGlow {
  0% { transform: translate(0, 0); }
  100% { transform: translate(30px, 30px); }
}

/* Grid layout */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  position: relative;
  z-index: 1;
}

/* Các cột footer */
.footer-col img {
  width: 130px;
  margin-bottom: 15px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

.footer-col h4 {
  color: #ffd60a;
  margin-bottom: 15px;
  font-size: 1.1rem;
  position: relative;
}

.footer-col h4::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: #ffd60a;
  margin-top: 6px;
  border-radius: 2px;
}

.footer-col p,
.footer-col a {
  color: #e0e0e0;
  font-size: 0.95rem;
  line-height: 1.6;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-col a:hover {
  color: #ffd60a;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 8px;
}

/* Phần bottom */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.2);
  margin-top: 40px;
  padding-top: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #ccc;
  position: relative;
  z-index: 1;
}

.footer-bottom strong {
  color: #ffd60a;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}
/* ==============================
   WAVE EFFECT
   ============================== */
.footer-wave {
  position: relative;
  top: 0;
  width: 100%;
  height: 90px;
  overflow: hidden;
  line-height: 0;
  background: var(--primary, #004aad); /* nền xanh đậm liền mạch với footer */
}

.footer-wave svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 100%;
  transform: rotate(180deg); /* đảo sóng xuống dưới */
  animation: waveMove 12s ease-in-out infinite alternate;
}

@keyframes waveMove {
  0% { transform: rotate(180deg) translateX(0); }
  100% { transform: rotate(180deg) translateX(-50px); }
}

/* ==============================
   REVEAL ANIMATION ON SCROLL
   ============================== */
.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================
   INLINE & SECTION STYLES EXTRACTED
   ============================== */
.brand {
          display: flex;
          align-items: center;
          gap: 10px;          
        }

        .logo-link{
          /*width: 250px;
          height: auto;*/
          display: block;
        }

        .brand-text {
          display: flex;
          flex-direction: column;
          line-height: 1.2;
        }

        .brand-name {
          font-size: 1.5rem;
          font-weight: 700;
          color: #0B76D1;
        }

        .brand-tag {
          font-size: 0.9rem;
          color: #666;
        }

      


        /* --- Khối video-text --- */
        .video-frame {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            margin-bottom: 32px;
          }
          .video-frame iframe {
            display: block;
            width: 100%;
            height: 360px;
            border: none;
          }

        .video-text {
          background: #f8fbff;
          border-radius: 10px;
          padding: 20px 15px;
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
          position: relative;
          overflow: hidden;
          max-width: 720px;
          margin: 0 auto;
          transition: transform 0.6s ease, opacity 0.6s ease;
        }

        /* --- Hiệu ứng reveal khi cuộn --- */
        .video-text.reveal {
          transform: translateY(40px);
          opacity: 0;
        }
        .video-text.reveal.active {
          transform: translateY(0);
          opacity: 1;
        }

        /* --- Tiêu đề --- */
        .video-text h2 {
          font-size: 26px;
          font-weight: 700;
          color: #003366;
          margin-bottom: 16px;
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .video-text h2::before {
          content: "🤖";
          font-size: 28px;
        }

        /* --- Mô tả --- */
        .video-text p {
          font-size: 16px;
          color: #333;
          line-height: 1.7;
          margin-bottom: 20px;
        }

        /* --- Danh sách --- */
        .video-text ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .video-text ul li {
          position: relative;
          padding-left: 30px;
          margin-bottom: 12px;
          font-size: 15.5px;
          color: #444;
        }

        .video-text ul li::before {
          content: "";
          position: absolute;
          left: 0;
          top: 7px;
          width: 18px;
          height: 18px;
          background: url("assets/img/icons/check-circle.svg") no-repeat center center / cover;
        }

        /* --- Mũi tên vàng trang trí --- */
        .video-text::after {
          content: "";
          position: absolute;
          right: -40px;
          bottom: -30px;
          width: 140px;
          height: 140px;
          background: url("assets/img/ui/arrow-curve-yellow.svg") no-repeat center center / contain;
          opacity: 0.9;
          pointer-events: none;
        }

        /* --- Responsive --- */
        @media (max-width: 768px) {
          .video-text {
            padding: 28px 22px;
          }

          .video-text h2 {
            font-size: 22px;
          }

          .video-text p,
          .video-text ul li {
            font-size: 15px;
          }
        }

    


        .feature-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 2rem;
          align-items: center;
        }

        .feature-left {
          background: #f9fbff;
          border-radius: 16px;
          padding: 2rem;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .feature-left h2 {
          font-size: 1.5rem;
          font-weight: 700;
          color: #043873;
          margin-bottom: 0.75rem;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }

        .feature-left p {
          color: #555;
          margin-bottom: 1rem;
          line-height: 1.6;
        }

        .feature-left ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .feature-left li {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 1rem;
          color: #333;
          margin-bottom: 0.5rem;
          line-height: 1.5;
        }

        .feature-right .illustration {
          width: 100%;
          max-width: 480px;
          border-radius: 16px;
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
          object-fit: cover;
        }
      


        .benefit {
          background: #f9fbff;
          padding: 4rem 2rem;
        }

        .benefit-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 2rem;
          align-items: center;
        }

        .benefit-left {
          text-align: center;
        }

        .benefit-left .illustration {
          width: 100%;
          max-width: 480px;
          border-radius: 16px;
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
          object-fit: cover;
        }

        .benefit-right {
          background: #fff;
          border-radius: 16px;
          padding: 2rem;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .benefit-right h2 {
          color: #043873;
          font-size: 1.6rem;
          font-weight: 700;
          margin-bottom: 1rem;
        }

        .benefit-right ol {
          list-style: none;
          padding: 0;
        }

        .benefit-right li {
          display: flex;
          align-items: flex-start;
          gap: 0.5rem;
          margin-bottom: 0.75rem;
          color: #333;
          font-size: 1rem;
          line-height: 1.6;
        }

        @media (max-width: 768px) {
          .feature-grid,
          .benefit-grid {
            grid-template-columns: 1fr;
          }
        }
      


        /* ==== SECTION CLOSING ==== */
        .section.closing {
          position: relative;
          text-align: center;
          padding: 30px 20px;
          background: linear-gradient(135deg, #0B76D1, #58C1FF, #FFD43B);
          background-size: 200% 200%;
          animation: bgShift 8s ease-in-out infinite;
          color: #fff;
          overflow: hidden;
        }

        /* gradient chuyển động */
        @keyframes bgShift {
          0% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
          100% { background-position: 0% 50%; }
        }

        /* text */
        .section.closing h2 {
          font-size: 42px;
          line-height: 1.3;
          font-weight: 700;
          text-shadow: 0 3px 15px rgba(0,0,0,0.25);
          margin-bottom: 16px;
          animation: fadeInUp 1s ease both;
        }

        .section.closing p {
          font-size: 20px;
          color: rgba(255,255,255,0.9);
          font-weight: 500;
          letter-spacing: 0.5px;
          margin-bottom: 40px;
          animation: fadeInUp 1.2s ease both;
        }

        /* hiệu ứng text fade-in */
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        /* nút chính */
        .section.closing .btn.primary {
          background: #fff;
          color: #0B76D1;
          border: none;
          font-size: 22px;
          padding: 16px 48px;
          border-radius: 50px;
          cursor: pointer;
          font-weight: 700;
          box-shadow: 0 8px 20px rgba(255,255,255,0.3);
          transition: all 0.3s ease;
          animation: pulseGlow 2s infinite ease-in-out;
        }

        /* hiệu ứng hover */
        .section.closing .btn.primary:hover {
          background: #FFD43B;
          color: #003366;
          box-shadow: 0 8px 30px rgba(255, 212, 59, 0.5);
          transform: translateY(-3px);
        }

        /* hiệu ứng rung nhẹ nút */
        @keyframes pulseGlow {
          0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
          70% { box-shadow: 0 0 0 18px rgba(255,255,255,0); }
          100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
        }

        /* responsive */
        @media (max-width: 768px) {
          .section.closing h2 {
            font-size: 32px;
          }
          .section.closing p {
            font-size: 18px;
          }
          .section.closing .btn.primary {
            font-size: 18px;
            padding: 14px 36px;
          }
        }

    


      /* Section tổng thể */
      .section.offer {
        background: linear-gradient(135deg, #f9fbff 0%, #eef6ff 100%);
        padding: 4rem 2rem;
      }

      /* Grid chia layout */
      .section.offer .split-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 2rem;
      }

      /* Phần text bên trái */
      .section.offer .split-left {
        background: #fff;
        border-radius: 16px;
        padding: 2.5rem;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
      }

      .section.offer .split-left h2 {
        color: #043873;
        font-size: 1.7rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
      }

      .section.offer .split-left p {
        color: #444;
        line-height: 1.6;
        margin-bottom: 1rem;
      }

      .section.offer .split-left .muted {
        color: #666;
        font-style: italic;
      }

      /* Phần ảnh bên phải */
      .section.offer .split-right .illustration {
        width: 100%;
        max-width: 460px;
        border-radius: 16px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
        object-fit: cover;
        display: block;
        margin: 0 auto;
      }

      /* Nút CTA */
      .section.offer .hero-cta {
        display: flex;
        justify-content: center;
        margin-top: 2rem;
      }

      .section.offer .btn.primary {
        background: #0b76d1;
        color: #fff;
        font-size: 1.2rem;
        padding: 16px 48px;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 260px;
        text-transform: uppercase;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(11, 118, 209, 0.2);
      }

      /* Hiệu ứng hover đẹp mắt */
      .section.offer .btn.primary:hover {
        background: #095ea9;
        box-shadow: 0 8px 20px rgba(11, 118, 209, 0.4);
        transform: translateY(-2px);
      }

      /* Responsive */
      @media (max-width: 768px) {
        .section.offer .split-grid {
          grid-template-columns: 1fr;
        }

        .section.offer .split-left {
          text-align: center;
        }

        .section.offer .split-left h2 {
          justify-content: center;
        }
      }
      


        /* Section tổng thể */
          .section.features-list {
            background: #f9fbff;
            padding: 2rem 2rem 3rem;
            position: relative;
            overflow: hidden;
          }

          /* Tiêu đề */
          .section.features-list .section-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: #043873;
            margin-bottom: 0.5rem;
          }

          .section.features-list .highlight {
            color: var(--accent, #0b76d1);
          }

          /* Grid các card */
          .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
          }

          /* Card item */
          .card {
            background: #fff;
            border-radius: 16px;
            padding: 1.5rem 1.25rem;
            text-align: center;
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: translateY(30px) scale(0.96);
          }

          /* Icon trong card */
          .card-icon {
            font-size: 2rem;
            margin-bottom: 0.75rem;
          }

          /* Tiêu đề tính năng */
          .card h3 {
            font-size: 1.1rem;
            font-weight: 700;
            color: #043873;
            margin-bottom: 0.25rem;
          }

          /* Mô tả */
          .card p {
            font-size: 0.95rem;
            color: #555;
            line-height: 1.5;
          }

          /* Hover effect */
          .card:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 8px 20px rgba(11, 118, 209, 0.2);
          }

          /* Keyframes cho animation reveal */
          @keyframes fadeUpZoom {
            0% {
              opacity: 0;
              transform: translateY(30px) scale(0.96);
            }
            100% {
              opacity: 1;
              transform: translateY(0) scale(1);
            }
          }

          /* Khi hiển thị (add class .show) */
          .card.show {
            animation: fadeUpZoom 0.7s ease forwards;
          }

          /* Responsive cho mobile */
          @media (max-width: 768px) {
            .section.features-list {
              padding: 3rem 1.2rem 2.5rem;
            }
            .section.features-list .section-title {
              font-size: 1.8rem;
            }
            .card {
              padding: 1.25rem;
              min-height: 180px;
            }
          }


    


    .section.trust {
      background: linear-gradient(135deg, #0B76D1 0%, #65C7F7 100%);
      color: #fff;
      padding: 5rem 2rem;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    /* Hiệu ứng ánh sáng nhẹ phía sau */
    .section.trust::before {
      content: "";
      position: absolute;
      top: -50px;
      left: -50px;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
      animation: moveLight 8s infinite linear;
    }

    @keyframes moveLight {
      0% { transform: translate(0, 0); opacity: 0.8; }
      50% { transform: translate(60vw, 40vh); opacity: 0.4; }
      100% { transform: translate(0, 0); opacity: 0.8; }
    }

    .trust-box {
      max-width: 800px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
      padding: 3rem 2rem;
      border-radius: 20px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .trust-box h2 {
      font-size: 2.2rem;
      font-weight: 800;
      margin-bottom: 1rem;
      letter-spacing: 1px;
    }

    .trust-box h2 span {
      color: #FFE156;
    }

    .trust-box .highlight {
      font-size: 1.3rem;
      margin-bottom: 1rem;
      line-height: 1.7;
    }

    .trust-box .mission {
      font-size: 1.5rem;
      font-weight: 700;
      text-transform: uppercase;
      margin-top: 1rem;
      color: #fff;
      text-shadow: 0 2px 4px rgba(0,0,0,0.25);
    }

    /* Hiệu ứng chữ nổi bật */
    .trust-box strong {
      color: #FFE156;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .trust-box {
        padding: 2rem 1.5rem;
      }
      .trust-box h2 {
        font-size: 1.8rem;
      }
      .trust-box .highlight, .trust-box .mission {
        font-size: 1.1rem;
      }
    }
    


      .teacher-right {
      background: #ffffff;
      border-radius: 20px;
      padding: 15px 20px;
      box-shadow: 0 8px 30px rgba(0, 102, 204, 0.08);
      transition: transform 0.5s ease, box-shadow 0.5s ease;
    }

    .teacher-right:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(0, 102, 204, 0.15);
    }

    .teacher-right h3 {
      font-size: 26px;
      font-weight: 700;
      color: #0055bb;
      margin-bottom: 20px;
      position: relative;
    }

      .teacher-right h3::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 60px;
        height: 3px;
        background: #ffcc00;
        border-radius: 3px;
      }

      /* ====== Thông tin từng dòng ====== */
      .teacher-info {
        margin-top: 25px;
        line-height: 1.8;
        color: #333;
      }

      .teacher-info p {
        margin-bottom: 14px;
        padding-left: 35px;
        position: relative;
        font-size: 1.05rem;
      }

      .teacher-info p::before {
        content: "🎓";
        position: absolute;
        left: 0;
        top: 0;
        font-size: 20px;
      }

      .teacher-info p:nth-child(2)::before {
        content: "📘";
      }
      .teacher-info p:nth-child(3)::before {
        content: "💡";
      }

      /* ====== Nút đăng ký ====== */
      .teacher-right .btn.primary {
        display: inline-block;
        background: linear-gradient(135deg, #0066cc, #004b99);
        color: #fff;
        border: none;
        padding: 12px 40px;
        font-size: 1.05rem;
        font-weight: 600;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.35s ease;
        margin-top: 25px;
        box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
      }

      .teacher-right .btn.primary:hover {
        transform: scale(1.05);
        background: linear-gradient(135deg, #ffcc00, #ffaa00);
        color: #003366;
        box-shadow: 0 6px 20px rgba(255, 204, 0, 0.4);
      }

      /* Animation on scroll */
      .reveal {
        opacity: 0;
        transform: translateY(40px);
        transition: all 0.8s ease-out;
      }
      .reveal.active {
        opacity: 1;
        transform: translateY(0);
      }
      


        /* ==== SECTION BLOG ==== */
        .section.blog {
          background: #f8fbff;
          padding: 80px 0;
        }

        .news-carousel {
          position: relative;
          overflow: hidden;
          margin-top: 40px;
        }

        .news-track-wrapper {
          overflow: hidden;
        }

        .news-track {
          display: flex;
          gap: 20px;
          transition: transform 0.6s ease-in-out;
        }

        .news-card {
          flex: 0 0 calc(25% - 20px);
          background: #fff;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 20px rgba(0, 102, 204, 0.08);
          transition: all 0.4s ease;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

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

        .news-card img {
          width: 100%;
          height: 180px;
          object-fit: cover;
        }

        .news-card h4 {
          font-size: 18px;
          margin: 15px;
          color: #003366;
        }

        .news-card p {
          margin: 0 15px 15px 15px;
          color: #555;
          font-size: 0.95rem;
        }

        /* ==== Nút xem chi tiết ==== */
        .btn-news {
          margin: 0 15px 20px 15px;
          align-self: flex-start;
          background: linear-gradient(135deg, #007bff, #0055cc);
          color: #fff;
          border: none;
          padding: 8px 18px;
          border-radius: 30px;
          cursor: pointer;
          font-size: 0.9rem;
          font-weight: 600;
          transition: all 0.3s ease;
          box-shadow: 0 3px 10px rgba(0, 123, 255, 0.25);
        }

        .btn-news:hover {
          transform: translateY(-2px);
          background: linear-gradient(135deg, #ffcc00, #ffaa00);
          color: #003366;
          box-shadow: 0 5px 15px rgba(255, 204, 0, 0.4);
        }

        /* ==== Nút điều hướng ==== */
        .news-btn {
          position: absolute;
          top: 45%;
          transform: translateY(-50%);
          background: rgba(255, 255, 255, 0.85);
          border: none;
          font-size: 30px;
          cursor: pointer;
          padding: 8px 15px;
          border-radius: 50%;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          transition: background 0.3s ease;
          z-index: 2;
        }

        .news-btn:hover {
          background: #ffcc00;
          color: #003366;
        }

        .news-btn.prev {
          left: 10px;
        }

        .news-btn.next {
          right: 10px;
        }

        /* ==== Responsive ==== */
        @media (max-width: 1024px) {
          .news-card {
            flex: 0 0 calc(33.333% - 20px);
          }
        }

        @media (max-width: 768px) {
          .news-card {
            flex: 0 0 calc(50% - 15px);
          }
        }

        @media (max-width: 500px) {
          .news-card {
            flex: 0 0 100%;
          }
        }

    


    /* ==== FOOTER CHUNG ==== */
.site-footer {
  background: linear-gradient(180deg, #0B76D1 0%, #084C9E 100%);
  color: #fff;
  padding: 60px 0 20px;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

/* ==== LƯỚI BỐ CỤC ==== */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 1fr 1fr; /* ✅ Cột 1 rộng hơn, cột 2 nhỏ hơn */
  gap: 40px;
  align-items: start;
}

/* ==== CỘT CHUNG ==== */
.footer-col h4 {
  color: #FFD700;
  margin-bottom: 20px;
  font-size: 1.0rem;
  text-transform: uppercase;
  position: relative;
}

.footer-col h4::after {
  content: '';
  width: 50px;
  height: 3px;
  background: #FFD700;
  position: absolute;
  left: 0;
  bottom: -6px;
  border-radius: 3px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin: 10px 0;
}

.footer-col ul li a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.footer-col ul li a:hover {
  color: #FFD700;
  padding-left: 6px;
}

/* ==== CỘT 1: LOGO & THÔNG TIN ==== */
.footer-about {
  font-size: 0.95rem;
  line-height: 1.6;
}

.footer-brand {
  display: flex;
  align-items: left;
  /*margin-bottom: 20px;*/
}

.footer-logo {
  width: 60px;
  height: auto;
  margin-right: 6px;
  filter: brightness(1.1);
}

.footer-brand-text h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  color: #FFD700;
}

.footer-brand-text p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

.footer-company-info h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #FFD700;
  text-transform: uppercase;
}

.footer-company-info p {
  margin: 6px 0;
}

.footer-company-info a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.footer-company-info a:hover {
  color: #FFD700;
}

/* ==== CỘT 3: MẠNG XÃ HỘI ==== */
.social-icons {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #0B76D1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: 0.3s;
}

.social-icons a:hover {
  background: #FFD700;
  color: #084C9E;
  transform: translateY(-3px);
}

.social-icons img {
  width: 20px;
  height: 20px;
}

.map iframe {
  width: 100%;
  height: 140px;
  border: 0;
  border-radius: 8px;
}

/* ==== CỘT 4: FORM TƯ VẤN ==== */
.footer-form input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 6px;
  outline: none;
}

.footer-form button {
  width: 100%;
  background: #FFD700;
  color: #084C9E;
  font-weight: bold;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.footer-form button:hover {
  background: #fff;
  color: #0B76D1;
}

/* ==== DÒNG DƯỚI CÙNG ==== */
.footer-bottom {
  margin: 20px 20px 5px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ==== RESPONSIVE ==== */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

/* ==============================
   INLINE ELEMENT STYLES (AUTO-GENERATED)
   ============================== */
.inline-style-1{
  padding:10px 0; 
  margin-top: 20px;
  background:linear-gradient(180deg, #fff 0%, #E8F4FF 100%);
  position:relative; 
  z-index:1; 
  overflow:hidden;
  }
.inline-style-2{display:grid; grid-template-columns:repeat(auto-fit, minmax(400px,1fr));
              align-items:center; gap:60px; max-width:1400px; margin:auto;}
.inline-style-3{text-align:center;}
.inline-style-4
{
  line-height:1; 
  margin-bottom:40px;
  margin-top: 50px;
}
.inline-style-5
{
  font-size:90px; 
  color:#0B76D1; 
  display:block;
}
.inline-style-6{font-size:24px; color:var(--accent);}
.inline-style-7{list-style:none; padding:0; margin:0; font-size:20px; line-height:1.6;}
.inline-style-8{font-size:19px; margin-top:20px; color:#444;}
.inline-style-9{display:flex;justify-content:center;margin-top:30px;}
.inline-style-10{background:#0B76D1;color:#fff;font-size:20px;padding:14px 44px;
                 border:none;border-radius:50px;cursor:pointer;
                 transition:all .3s ease;min-width:240px;text-transform:uppercase;
                 font-weight:600;
                 box-shadow:0 4px 12px rgba(11,118,209,0.2);}
.inline-style-11{position:relative;}
.inline-style-12{width:100%;border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,0.1);}
.inline-style-13{width:100%;border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,0.1);}
.inline-style-14{width:100%;border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,0.1);}
.inline-style-15{position:absolute;top:50%;left:-25px;transform:translateY(-50%);
                 background:#fff;border:none;border-radius:50%;width:42px;height:42px;
                 font-size:22px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.15);
                 transition:all .3s ease;}
.inline-style-16{position:absolute;top:50%;right:-25px;transform:translateY(-50%);
                 background:#fff;border:none;border-radius:50%;width:42px;height:42px;
                 font-size:22px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.15);
                 transition:all .3s ease;}
.inline-style-17{display:flex;justify-content:center;margin-top:18px;}
.inline-style-18{text-align: justify;}
.inline-style-19{text-align: justify;}
.inline-style-20{text-align: justify;}
.inline-style-21{text-align: center;}
.inline-style-22{font-size: 50px; margin-bottom: -20px; margin-top: -20px;}
.inline-style-23{color: var(--accent);}
.inline-style-24{padding: 10px;}
.inline-style-25{font-size: 50px; text-align: center;margin-top: -50px;}
.inline-style-26{color: var(--accent);}
.inline-style-27{text-align: justify;}
.inline-style-28{text-align: justify;}
.inline-style-29{text-align: justify;}
.inline-style-30{font-size: 50px; text-align: center;margin-top: -50px;}
.inline-style-31{color: var(--accent);}
.inline-style-32{text-align: justify;}
.inline-style-33{text-align: justify;}
.inline-style-34{text-align: justify;}
.inline-style-35{text-align: justify;}
.inline-style-36{text-align: justify;}
.inline-style-37{text-align: justify;}
.inline-style-38{text-align: justify;}
.inline-style-39{text-align: justify;}

/* ==============================
   MOBILE NAVIGATION FIX
   ============================== */

/* Ẩn panel mobile mặc định */
#mobile-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.98);
  z-index: 999;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

/* Khi panel được bật (JS thêm class .active) */
#mobile-panel.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* Ẩn hoàn toàn menu mobile trên desktop */
@media (min-width: 768px) {
  #mobile-panel {
    display: none !important;
  }
}

/* Căn chỉnh bên trong panel */
.mobile-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.mobile-nav a {
  display: block;
  font-size: 1.2rem;
  padding: 12px;
  text-decoration: none;
  color: #0b76d1;
}

.mobile-cta {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}


/* ==============================
   FOOTER BRAND FIX
   ============================== */
.footer-inner {
  justify-content: flex-start !important;
  text-align: left !important;
}

.footer-col.footer-about {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
  margin-top: 10px;
  margin-left: -35px;
}

.footer-logo {
  margin-right: 15px;
  display: block;
}

.footer-brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-left: -30px;
}

/*--- PARTNER 14/02/2026----*/
.partner-section {
  background: #ffffff;
  padding: 0 80px 10px 80px;
  overflow: hidden;
  position: relative;
}

.section-title {
  text-align: center;
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 50px;
  color: #222;
}

/* ===== Slider Wrapper ===== */

.partner-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* ===== Fade 2 bên ===== */

.partner-slider::before,
.partner-slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.partner-slider::before {
  left: 0;
  background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
}

.partner-slider::after {
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
}

/* ===== Track ===== */

.partner-track {
  display: flex;
  width: max-content;
  animation: scroll 35s linear infinite;
  align-items: center;
}

/* Hover dừng */

.partner-slider:hover .partner-track {
  animation-play-state: paused;
}

/* ===== Logo ===== */

.partner-track img {
  max-height: 75px;
  width: auto;
  transition: all 0.5s ease;
  opacity: 0.9;
}

.partner-track a:hover img {
  transform: scale(1.08);
  opacity: 1;
  filter: none;
}

.partner-track a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
  transition: transform 0.3s ease;
}
.partner-track a:hover img {
  transform: scale(1.08);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border-radius: 8px;
}


/* ===== Animation ===== */

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

/* ===== Responsive ===== */

@media (max-width: 1024px) {
  .partner-track {
    animation-duration: 28s;
  }

  .partner-track a {
    padding: 0 40px;
  }

  .partner-track img {
    max-height: 65px;
  }
}

@media (max-width: 768px) {
  .partner-track {
    animation-duration: 22s;
  }

  .partner-track a {
    padding: 0 30px;
  }

  .partner-track img {
    max-height: 55px;
  }

  .partner-slider::before,
  .partner-slider::after {
    width: 60px;
  }
}

@media (max-width: 480px) {
  .partner-track {
    animation-duration: 18s;
  }

  .partner-track a {
    padding: 0 20px;
  }

  .partner-track img {
    max-height: 45px;
  }
}