/* =========================================================
  1) BIẾN MÀU + FONT (giống landing mẫu)
========================================================= */
:root{
  --blue1:#27b2ff;
  --blue2:#1f82ff;
  --blue3:#0b58e6;

  --navy:#0b2e7a;
  --orange:#ff5a2a;
  --orange2:#ff7a3a;
  --yellow:#ffd11a;

  --bgLight:#f4f6fb;
  --text:#0d2a6b;

  --radius:28px;
  --shadow:0 18px 40px rgba(0,0,0,.12);

  --container:1180px;
}

/* =========================================================
  2) RESET + BASE
========================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Be Vietnam Pro", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#fff;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
.center{ text-align:center; }
.mt-10{ margin-top:10px; }
.mt-14{ margin-top:14px; }
.mt-18{ margin-top:18px; }
.mt-24{ margin-top:24px; }
.mt-28{ margin-top:28px; }
.mb-18{ margin-bottom:18px; }

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

/* =========================
  FOOTER GREEN (giống kiểu ảnh bạn gửi)
========================= */
.footer-green{
  background: linear-gradient(180deg, #2f8c3a 0%, #2a7f34 40%, #2f8c3a 100%);
  color:#fff;
  padding: 36px 0 0;
}

.footer-green__inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  gap:22px;
  align-items:start;
}

.footer-brand{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}

.footer-logo{
  width:46px;
  height:46px;
  object-fit:contain;
  background: rgba(255,255,255,.12);
  border-radius:12px;
  padding:6px;
}

.footer-brand-text b{
  font-family:"Montserrat", sans-serif;
  letter-spacing:.4px;
}
.footer-brand-text span{
  display:block;
  opacity:.9;
  font-size:13px;
  margin-top:2px;
}

.footer-desc{
  margin:10px 0 16px;
  opacity:.92;
  line-height:1.6;
  font-weight:500;
  font-size:14px;
}

.footer-block h4{
  margin:0 0 10px;
  font-family:"Montserrat", sans-serif;
  font-size:15px;
  letter-spacing:.4px;
}

.footer-block ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
  font-size:14px;
  opacity:.95;
}

.footer-block a{
  color:#fff;
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.25);
}

.footer-links a{ border-bottom:none; }
.footer-links li a{
  display:inline-block;
  padding:2px 0;
}

.footer-social{
  display:flex;
  gap:10px;
  margin-top:14px;
}
.social-btn{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
  font-weight:900;
}

.footer-fb-btn{
  margin: 6px 0 12px;
  min-width: 100%;
}

/* khung widget FB gọn và đẹp */
.fb-page{
  background: rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px;
  overflow:hidden;
}

/* bottom line */
.footer-green__bottom{
  margin-top:22px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.18);
  text-align:center;
  opacity:.9;
  font-size:13px;
}

/* RESPONSIVE: mobile 1 cột */
@media (max-width: 900px){
  .footer-green__inner{
    grid-template-columns: 1fr;
  }
}
/* =========================
  FIX FOOTER RESPONSIVE MOBILE (đẹp + gọn)
========================= */

/* Mobile-first: footer luôn 1 cột trên màn nhỏ */
@media (max-width: 900px){
  .footer-green{
    padding: 26px 0 0;
  }

  .footer-green__inner{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Mỗi cột thành 1 "card" để nhìn gọn & sang */
  .footer-col{
    background: rgba(0,0,0,.10);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 14px;
  }

  .footer-brand{
    justify-content:flex-start;
  }

  .footer-desc{
    font-size: 13px;
    line-height: 1.6;
    margin: 10px 0 12px;
  }

  .footer-block h4{
    font-size: 14px;
    margin-bottom: 8px;
  }

  .footer-block ul{
    font-size: 13px;
    gap: 7px;
  }

  /* Nút fanpage full width */
  .footer-fb-btn{
    width: 100%;
    min-width: 100% !important;
    padding: 13px 14px;
    border-radius: 12px;
  }

  /* ===== QUAN TRỌNG: ép FB plugin full width (chữa lệch/xấu) ===== */
  .fb-page,
  .fb-page span,
  .fb-page iframe{
    width: 100% !important;
    max-width: 100% !important;
  }

  .fb-page{
    padding: 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.10);
    overflow: hidden;
  }
}

/* Mobile rất nhỏ: chữ gọn hơn */
@media (max-width: 420px){
  .footer-desc{ font-size: 12.5px; }
  .footer-block ul{ font-size: 12.5px; }
}

/* =========================================================
  3) BUTTONS (đúng style nút cam trong ảnh)
========================================================= */
/* ===== HERO TITLE BOX: làm box mềm + đúng kiểu mẫu ===== */
.hero-titlebox{
  position:relative;
  margin-top:-20px;
  width:min(680px, 95%);
  padding:26px 26px 22px;
  border-radius:40px;

  /* nền xanh mượt hơn */
  background: linear-gradient(180deg, #2f63ff 0%, #0f52e3 100%);

  /* viền ngoài */
  border:3px solid rgba(230, 248, 255, .95);

  /* đổ bóng mềm */
  box-shadow: 0 22px 55px rgba(0,0,0,.22);
  overflow:hidden;
}

/* viền trong mờ (tạo cảm giác “xịn” như mẫu) */
.hero-titlebox::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:32px;
  border:2px solid rgba(255,255,255,.20);
  pointer-events:none;
}

/* ===== Tiêu đề ===== */
/* =========================
  3D SOCIAL BUTTONS (giống hình bạn gửi)
  - nổi 3D, có highlight, hover + nhấn xuống
========================= */
.footer-social{
  display:flex;
  gap:14px;
  margin-top:14px;
}
/* =========================================================
  FOOTER RESPONSIVE FIX (DÁN CUỐI styles.css)
  - Desktop: 3 cột đẹp
  - Mobile: 1 cột card gọn, không tràn ngang
  - FB plugin full width
========================================================= */

.footer-green{
  background: linear-gradient(180deg, #2f8c3a 0%, #2a7f34 40%, #2f8c3a 100%);
  color:#fff;
  padding: 34px 0 0;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  gap:18px;
  align-items:start;
}

/* card nền cho từng cột (đẹp hơn) */
.footer-card{
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
}

/* brand */
.footer-brand{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}
.footer-logo{
  width:48px;
  height:48px;
  object-fit:contain;
  background: rgba(255,255,255,.12);
  border-radius:12px;
  padding:6px;
  flex:0 0 auto;
}
.footer-brand-text b{
  font-family:"Montserrat", sans-serif;
  letter-spacing:.4px;
}
.footer-brand-text span{
  display:block;
  opacity:.9;
  font-size:13px;
  margin-top:2px;
}

.footer-desc{
  margin:10px 0 14px;
  opacity:.92;
  line-height:1.6;
  font-weight:500;
  font-size:14px;
}

/* block title */
.footer-block h4{
  margin:0 0 10px;
  font-family:"Montserrat", sans-serif;
  font-size:15px;
  letter-spacing:.4px;
}

/* links */
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}
.footer-links a{
  color:#fff;
  text-decoration:none;
  opacity:.95;
}
.footer-links a:hover{ opacity:1; text-decoration:underline; }

/* contact list chống tràn chữ */
.contact-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.contact-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  line-height:1.45;
  font-size:14px;
  min-width:0; /* QUAN TRỌNG: để wrap đúng */
}
.contact-item span,
.contact-item a{
  min-width:0;
  overflow-wrap:anywhere;   /* chống tràn email dài */
  word-break:break-word;
}
.contact-item a{
  color:#fff;
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.25);
}

/* icon vòng tròn */
.ico{
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.20);
}
.ico svg{ width:16px; height:16px; fill:#fff; opacity:.95; }

/* social 3D buttons giữ nguyên + gọn */
.footer-social{
  display:flex;
  gap:14px;
  margin-top:14px;
  flex-wrap:wrap;
}

/* nút fb mở page */
.footer-fb-btn{
  width:100%;
  min-width:100% !important;
  margin: 6px 0 12px;
  border-radius: 12px;
}
/* =========================
  FIX FB BOX lệch trên mobile
========================= */
.fb-wrap{
  width:100%;
  overflow:hidden;
  border-radius:14px;
  background: rgba(255,255,255,.10);
  padding:10px;
}

/* lớp canh giữa - rất quan trọng */
.fb-inner{
  width:100%;
  overflow:hidden;
  display:flex;
  justify-content:center; /* ép FB iframe nằm giữa */
}

/* Ép mọi thứ trong fb-page full width, không tràn */
.fb-page,
.fb-page span,
.fb-page iframe{
  width:100% !important;
  max-width:100% !important;
  display:block !important;
}

/* Chữa trường hợp FB tự set inline style làm lệch */
.fb-page iframe{
  margin:0 auto !important;
  left:0 !important;
}

/* Mobile: padding nhỏ hơn cho gọn, đỡ bị “lệch mắt” */
@media (max-width: 420px){
  .fb-wrap{ padding:8px; border-radius:12px; }
}

/* wrapper để FB không tràn */
.fb-wrap{
  width:100%;
  overflow:hidden;
  border-radius:14px;
  background: rgba(255,255,255,.10);
  padding: 10px;
}

/* Ép FB plugin full width */
.fb-page,
.fb-page span,
.fb-page iframe{
  width:100% !important;
  max-width:100% !important;
}

/* bottom */
.footer-green__bottom{
  margin-top:18px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.18);
  text-align:center;
  opacity:.9;
  font-size:13px;
}

/* =========================
  MOBILE: 1 cột, chữ gọn hơn
========================= */
@media (max-width: 900px){
  .footer-green{ padding: 24px 0 0; }
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .footer-card{ padding: 14px; border-radius: 16px; }
  .footer-desc{ font-size:13px; }
  .footer-block h4{ font-size:14px; }
  .contact-item{ font-size:13px; }
}

/* mobile nhỏ: email/địa chỉ không tràn */
@media (max-width: 420px){
  .ico{ width:26px; height:26px; flex-basis:26px; }
  .ico svg{ width:15px; height:15px; }
}
/* nút nền */
.social-btn{
  --size: 46px;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;

  /* nền kiểu kính + 3D */
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.35), rgba(255,255,255,.10) 45%, rgba(0,0,0,.08) 100%);
  border: 1px solid rgba(255,255,255,.18);

  /* đổ bóng 3D */
  box-shadow:
    0 10px 18px rgba(0,0,0,.22),          /* bóng dưới */
    inset 0 1px 0 rgba(255,255,255,.35),   /* highlight trên */
    inset 0 -6px 10px rgba(0,0,0,.18);     /* đổ tối dưới */

  transform: translateY(0);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  position:relative;
  overflow:hidden;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
/* =========================
  CONTACT LIST: icon đẹp + thẳng hàng
========================= */
.contact-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.contact-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  line-height:1.4;
  font-size:14px;
}

.contact-item a{
  color:#fff;
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.25);
}

/* icon vòng tròn như UI hiện đại */
.ico{
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 8px 14px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.ico svg{
  width:16px;
  height:16px;
  fill:#fff;
  opacity:.95;
}

/* Mobile: chữ nhỏ gọn hơn */
@media (max-width: 420px){
  .contact-item{ font-size:13px; }
  .ico{ width:26px; height:26px; flex-basis:26px; }
  .ico svg{ width:15px; height:15px; }
}
/* lớp “bóng phản chiếu” */
.social-btn::before{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 55%);
  transform: rotate(-18deg);
  opacity:.9;
  pointer-events:none;
}

/* icon */
.social-btn svg{
  width: 22px;
  height: 22px;
  fill: #ffffff;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.20));
  position:relative;
  z-index:1;
}

/* màu riêng từng nút */
.social-btn--fb{
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.35), rgba(255,255,255,.10) 45%, rgba(0,0,0,.10) 100%),
    linear-gradient(180deg, #1b74e4, #0d5bd6);
}
.social-btn--ms{
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.40), rgba(255,255,255,.12) 45%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, #a855f7, #3b82f6);
}

/* hover: nổi lên + sáng nhẹ */
.social-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 14px 26px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -6px 10px rgba(0,0,0,.18);
}

/* active: nhấn xuống giống “3D press” */
.social-btn:active{
  transform: translateY(2px) scale(.98);
  box-shadow:
    0 6px 14px rgba(0,0,0,.22),
    inset 0 2px 8px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.22);
}

/* focus (keyboard) */
.social-btn:focus-visible{
  outline:none;
  box-shadow:
    0 14px 26px rgba(0,0,0,.26),
    0 0 0 4px rgba(255,255,255,.18),
    0 0 0 7px rgba(255,90,42,.35);
}

/* Mobile: nút nhỏ hơn chút cho gọn */
@media (max-width: 420px){
  .social-btn{ --size: 42px; }
  .social-btn svg{ width:20px; height:20px; }
}
.hero-title{
  margin:0;
  text-align:center;
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  color:#fff;
  font-size:38px;
  line-height:1.18;
  text-transform:uppercase;

  /* nhìn “đã” hơn */
  letter-spacing:.4px;
  text-shadow: 0 2px 0 rgba(0,0,0,.10);
}

.hl-yellow{ color:#ffe900; }

/* ===== Ảnh bìa: bo góc + có khung + shadow ===== */
.hero-cover{
  margin-top:18px;
  border-radius:18px;
  overflow:hidden;

  /* viền + glow nhẹ */
  border:2px solid rgba(255,255,255,.55);
  box-shadow:
    0 14px 28px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(0,0,0,.06);

  background:#fff;
}

.hero-cover img{
  display:block;
  width:100%;
  height:auto;

  /* tránh ảnh bị méo nếu ảnh khác tỉ lệ */
  object-fit:cover;
}

/* icon góc */
.hero-titlebox__icon{
  position:absolute;
  left:26px;
  bottom:18px;
  width:46px;
}

/* ===== Mobile tối ưu (phụ huynh dùng điện thoại) ===== */
@media (max-width: 720px){
  .hero-titlebox{
    border-radius:28px;
    padding:18px 16px 16px;
  }

  .hero-title{
    font-size:22px;
    line-height:1.2;
  }

  .hero-cover{
    margin-top:14px;
    border-radius:14px;
  }

  .hero-titlebox__icon{
    width:34px;
    left:14px;
    bottom:12px;
  }
}

/* tránh iPhone tự zoom khi bấm input (mượt hơn) */
input, textarea, button { font-size:16px; }
body { -webkit-text-size-adjust:100%; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  letter-spacing:.2px;
  border:none;
  cursor:pointer;
  user-select:none;
  transition:transform .08s ease, filter .15s ease;
}
.btn:active{ transform:translateY(1px); }

.btn--pill{
  padding:12px 26px;
  border-radius:999px;
  box-shadow:0 10px 20px rgba(255,90,42,.25);
}
.btn--orange{
  background:linear-gradient(180deg, var(--orange2), var(--orange));
  color:#fff;
}
.btn--big{
  width:100%;
  padding:14px 18px;
  border-radius:14px;
  margin-top:12px;
  box-shadow:0 14px 26px rgba(255,90,42,.25);
}
.btn--wide{
  min-width:320px;
  padding:14px 28px;
  border-radius:14px;
  box-shadow:0 14px 26px rgba(255,90,42,.25);
}
.btn--yellow{
  background:linear-gradient(180deg, #ffe57a, var(--yellow));
  color:#0b2e7a;
  box-shadow:0 14px 26px rgba(255,209,26,.25);
}
.btn--gray{
  background:#e9edf5;
  color:#183a7a;
  border-radius:14px;
  padding:12px 18px;
}

/* =========================================================
  4) TOPBAR
========================================================= */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  background:#fff;
  box-shadow:0 2px 16px rgba(0,0,0,.06);
}
.topbar__inner{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo-slot{
  width:94px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:12px;
  color:rgba(13,42,107,.6);
}

/* =========================================================
  5) HERO (nền xanh + pixel)
========================================================= */
.hero{
  position:relative;
  padding-top:84px; /* chừa chỗ topbar */
  overflow:hidden;
}
.hero__bg{
  position:absolute;
  inset:0;
  background:
    /* pixel pattern */
    url("./assets/bg-pixel.png") center / cover no-repeat,
    linear-gradient(180deg, #cfeeff 0%, var(--blue1) 40%, var(--blue2) 100%);
  z-index:0;
}
.hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:center;
  padding:40px 0 56px;
}

/* doodles */
.doodle{
  position:absolute;
  z-index:1;
  pointer-events:none;
  opacity:1;
}
.doodle--star-top{ top:94px; left:220px; width:58px; }
.doodle--scribble-left{ top:250px; left:60px; width:90px; }
.doodle--star-right{ top:210px; right:520px; width:76px; }

/* left */
.hero-left{ position:relative; display:flex; flex-direction:column; align-items:center; }
.hero-kids{
  width:min(520px, 92%);
  margin:0 auto;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.10));
}
.hero-titlebox{
  position:relative;
  margin-top:-20px;
  width:min(680px, 95%);
  padding:26px 26px 22px;
  border-radius:40px;
  background:linear-gradient(180deg, #2d5bff, #0f52e3);
  border:3px solid rgba(255,255,255,.75);
  box-shadow:0 20px 46px rgba(0,0,0,.20);
}
.hero-titlebox h1{
  margin:0;
  text-align:center;
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  color:#fff;
  font-size:38px;
  line-height:1.18;
  text-transform:uppercase;
}
.hl-yellow{ color:#ffe900; }
.hero-titlebox__icon{
  position:absolute;
  left:34px;
  bottom:22px;
  width:46px;
}

/* right form */
.hero-right{ display:flex; justify-content:center; }
.form-card{
  width:100%;
  max-width:520px;
  background:#fff;
  border-radius:44px;
  padding:28px 26px 24px;
  box-shadow:var(--shadow);
}
.form-title{
  margin:6px 0 16px;
  text-align:center;
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  font-size:36px;
  letter-spacing:.5px;
  color:#0c3a8b;
}
.price-row{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:14px;
  margin-bottom:12px;
}
.price-label{
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  font-size:22px;
  color:#0c3a8b;
}
.price-old{
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  font-size:26px;
  color:#8a97b6;
 
  text-decoration-thickness:3px;
  text-decoration-color:#8a97b6;
}
.price-new{
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  font-size:34px;
  color:#fff;
  background:var(--orange);
  padding:8px 14px;
  border-radius:8px;
}
.form-badge{
  text-align:center;
  margin:10px auto 18px;
  width:max-content;
  max-width:100%;
  padding:10px 18px;
  border-radius:999px;
  background:#ffe9e1;
  color:var(--orange);
  font-weight:800;
}
.input{
  width:100%;
  height:52px;
  border-radius:8px;
  border:1px solid #d7dbe6;
  padding:0 14px;
  font-size:15px;
  margin-bottom:12px;
  outline:none;
}
.input:focus{
  border-color:rgba(255,90,42,.55);
  box-shadow:0 0 0 4px rgba(255,90,42,.14);
}

/* =========================================================
  6) SECTIONS
========================================================= */
.section{ padding:64px 0; }
.section.light{
  background:var(--bgLight);
  background-image:url("./assets/bg-pixel.png");
  background-size:460px;
  background-position:center;
}
.section.blue{
  background:
    url("./assets/bg-pixel.png") center / cover no-repeat,
    linear-gradient(180deg, #0b52e0 0%, #0a62f0 45%, #2aa6ff 100%);
  color:#fff;
}
.section.sky{
  background:
    url("./assets/bg-pixel.png") center / cover no-repeat,
    linear-gradient(180deg, #d9f0ff 0%, #35b0ff 75%);
}

/* title giống mẫu: chữ to, màu xanh/cam, có doodle */
.section-title{
  position:relative;
  text-align:center;
  margin-bottom:34px;
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  letter-spacing:.3px;
}
.title-blue{ color:#0c3a8b; font-size:40px; }
.title-orange{ color:var(--orange); font-size:40px; }
.title-doodle{
  position:absolute; width:44px; pointer-events:none;
}
.title-doodle--left{ left:calc(50% - 280px); top:0px; }
.title-doodle--mid{ left:calc(50% - 80px); top:54px; width:34px; }
.title-doodle--right{ right:calc(50% - 300px); top:22px; width:46px; }

/* =========================================================
  7) FIT CARDS (4 card như ảnh)
========================================================= */
.grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:26px;
  justify-items:center;
}
.fit-cards{ max-width:860px; margin:0 auto; }
.fit-card{
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:16px;
  padding:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  display:flex;
  gap:14px;
  align-items:center;
}
.fit-card img{
  width:120px;
  height:72px;
  object-fit:cover;
  border-radius:10px;
}
.fit-text{
  font-weight:800;
  color:#1a3f8e;
}
.fit-text--orange{ color:var(--orange); }

/* =========================================================
  8) BLUE BLOCK TEXT
========================================================= */
.big-blue-title{
  margin:0;
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  font-size:44px;
  line-height:1.18;
  text-transform:uppercase;
}
.big-blue-title .yellow{ color:#ffe900; }
.blue-paragraph{
  margin:18px 0 0;
  font-weight:700;
  line-height:1.55;
  opacity:.95;
}

/* =========================================================
  9) CONTENT CARD (khung trắng giữa + art 2 bên)
========================================================= */
.content-card-wrap{
  position:relative;
  padding:26px 0;
}
.side-art{
  position:absolute;
  bottom:-20px;
  width:260px;
  pointer-events:none;
}
.side-art--left{ left:0; }
.side-art--right{ right:0; }

.content-card{
  position:relative;
  margin:0 auto;
  width:min(920px, 100%);
  background:#fff;
  border-radius:18px;
  padding:36px 34px;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.content-title{
  margin:0 0 18px;
  text-align:center;
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  font-size:40px;
  color:#0c3a8b;
}
.bullet{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:18px;
}
.bullet li{
  position:relative;
  padding-left:28px;
  color:#153a86;
  font-weight:700;
}
/* =========================
  FIX: NÚT + VIDEO KHÔNG BỊ DÍNH
========================= */
.section.blue{
  padding: 60px 0; /* nếu đang bị thấp/ghi đè */
}

/* hàng chứa nút vàng */
.cta-row{
  display:flex;
  justify-content:center;
  margin-top:14px;
  margin-bottom:18px;  /* khoảng cách với video */
}

/* video box đẹp hơn, không sát */
.video-box{
  margin-top: 0;              /* vì đã có margin ở cta-row */
  border-radius: 14px;
  overflow: hidden;
  background:#000;
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
}

/* video luôn full width trong box */
.video-box video{
  width:100%;
  height:auto;
  display:block;
}

/* mobile tối ưu khoảng cách */
@media (max-width: 720px){
  .section.blue{ padding: 44px 0; }
  .cta-row{ margin-bottom: 14px; }
  .video-box{ border-radius: 12px; }
}
.bullet li::before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 6px rgba(255,90,42,.12);
}

.promo-row{
  margin-top:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.promo-text{ font-weight:800; color:#143c8a; }
.promo-chip{
  background:#2b4fd6;
  color:#fff;
  font-weight:900;
  padding:8px 14px;
  border-radius:8px;
  font-family:"Montserrat", sans-serif;
}


/* =========================================================
  10) HIGHLIGHT CARDS (4 card ảnh)
========================================================= */
.highlight-grid{ max-width:900px; margin:0 auto; }
.highlight-card{
  width:100%;
  background:#fff;
  border-radius:18px;
  box-shadow:0 16px 34px rgba(0,0,0,.10);
  overflow:hidden;
}
.highlight-card img{
  width:100%;
  height:260px;
  object-fit:cover;
}
.highlight-body{ padding:16px 18px 18px; }
.highlight-body h4{
  margin:0;
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  color:#0c3a8b;
}
.highlight-body h4.orange{ color:var(--orange); }
.highlight-body p{
  margin:10px 0 0;
  color:#153a86;
  font-weight:700;
  line-height:1.45;
}

/* =========================================================
  11) SLIDER (Cơ sở vật chất / hoạt động)
========================================================= */
.slider{
  position:relative;
  max-width:920px;
  margin:0 auto;
  overflow:hidden;
  border-radius:14px;
}
.slider-track{
  display:flex;
  transition:transform .35s ease;
}
.slide{
  width:100%;
  flex:0 0 100%;
  height:320px;
  object-fit:cover;
}
.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 20px rgba(0,0,0,.12);
  font-size:22px;
  display:flex; align-items:center; justify-content:center;
}
.slider-btn--left{ left:10px; }
.slider-btn--right{ right:10px; }

/* =========================================================
  12) VIDEO / MEDIA
========================================================= */
.video-box{
  max-width:920px;
  margin:0 auto;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 16px 34px rgba(0,0,0,.18);
}
.video-box video{ width:100%; height:auto; display:block; }
.stack-media{
  max-width:920px;
  margin:0 auto;
  display:grid;
  gap:24px;
}
.img-wide{
  width:100%;
  border-radius:8px;
  box-shadow:0 16px 34px rgba(0,0,0,.10);
}

/* =========================================================
  13) ACTIVITY GRID (blue section)
========================================================= */
.white-title{
  margin:0;
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  font-size:42px;
  text-transform:uppercase;
}
.white-title .orange{ color:var(--orange2); }

.activity-grid{
  max-width:980px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.activity-grid img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:6px;
  box-shadow:0 16px 34px rgba(0,0,0,.18);
}
.activity-grid img.span-2{
  grid-column:span 2;
  height:260px;
}

/* =========================================================
  14) STEPS
========================================================= */
.steps{ margin-top:10px; display:grid; gap:12px; }
.step{
  font-weight:700;
  color:#153a86;
  line-height:1.55;
}
.step .orange{ color:var(--orange); font-weight:900; }
.orange{ color:var(--orange); }

/* =========================================================
  15) MODAL (Thank you)
========================================================= */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:80;
}
.modal.show{ display:flex; }
.modal__card{
  width:min(520px, 100%);
  background:#fff;
  border-radius:16px;
  padding:18px 18px 16px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}
.modal__card h4{
  margin:0 0 8px;
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  color:#0c3a8b;
}
.modal__card p{
  margin:0 0 14px;
  color:#153a86;
  font-weight:700;
  line-height:1.5;
}

/* =========================================================
  16) RESPONSIVE (Mobile-first tối ưu phụ huynh)
========================================================= */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns:1fr; padding:26px 0 46px; }
  .doodle--star-right{ right:40px; top:190px; width:60px; }
  .hero-titlebox h1{ font-size:30px; }
  .form-title{ font-size:32px; }
}

@media (max-width: 720px){
  .topbar__inner{ height:60px; }
  .btn--pill{ padding:10px 18px; font-size:14px; }
  .title-blue,.title-orange{ font-size:28px; }
  .hero-titlebox{ border-radius:28px; padding:18px 16px; }
  .hero-titlebox h1{ font-size:22px; }
  .hero-titlebox__icon{ width:36px; left:14px; bottom:12px; }

  .form-card{ border-radius:26px; padding:18px 16px; }
  .form-title{ font-size:26px; }
  .price-label{ font-size:18px; }
  .price-old{ font-size:20px; }
  .price-new{ font-size:26px; }

  .grid-2{ grid-template-columns:1fr; }
  .fit-card{ max-width:520px; }
  .fit-card img{ width:110px; height:70px; }

  .content-title{ font-size:26px; }
  .white-title{ font-size:28px; }
  .big-blue-title{ font-size:30px; }
  .btn--wide{ min-width: 92%; }

  .side-art{ display:none; } /* mobile: ẩn art để gọn */
  .slide{ height:220px; }

  .activity-grid{ grid-template-columns:1fr; }
  .activity-grid img{ height:220px; }
  .activity-grid img.span-2{ grid-column:span 1; height:220px; }
}
/* =========================================================
  BUTTON SHINE EFFECT (ÁNH SÁNG VỤT QUA)
  Áp dụng cho tất cả .btn (a/button)
========================================================= */

/* đảm bảo btn có position để đặt lớp ánh sáng */
.btn{
  position: relative;
  overflow: hidden;         /* để ánh sáng không tràn ra ngoài */
  isolation: isolate;       /* tránh blend bị lỗi trên vài trình duyệt */
  transform: translateZ(0); /* mượt hơn */
}

/* lớp ánh sáng */
.btn::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-120%;
  width:60%;
  height:180%;

  /* dải sáng */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%
  );

  transform: skewX(-18deg);
  opacity: .0;
  pointer-events:none;
  z-index: 1;
}

/* Khi hover: ánh sáng vụt qua */
.btn:hover::after{
  opacity: .9;
  animation: btnShine 0.85s ease-in-out forwards;
}

/* Khi bấm (mobile tap): cũng vụt nhẹ */
.btn:active::after{
  opacity: .9;
  animation: btnShine 0.65s ease-in-out forwards;
}

/* keyframes vụt qua */
@keyframes btnShine{
  0%   { left:-120%; }
  100% { left:140%; }
}

/* Tôn nội dung lên trên lớp ánh sáng */
.btn > *{
  position: relative;
  z-index: 2;
}

/* Nếu user bật giảm chuyển động (accessibility) thì tắt animation */
@media (prefers-reduced-motion: reduce){
  .btn::after{ display:none; }
}

/* =========================================================
  BUTTON SHINE EFFECT (WORKS ON MOBILE)
  - Desktop: hover / active sẽ vụt qua
  - Mobile (hover:none): tự chạy lặp lại nhẹ để luôn thấy
========================================================= */

.btn{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  transform: translateZ(0);
}

/* lớp ánh sáng */
.btn::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-140%;
  width:55%;
  height:200%;
  transform: skewX(-18deg);
  pointer-events:none;
  z-index: 2;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.65) 50%,
    rgba(255,255,255,0) 100%
  );

  opacity: 0;
}

/* Desktop hover */
@media (hover:hover){
  .btn:hover::after{
    opacity: .95;
    animation: btnShine .85s ease-in-out forwards;
  }
  .btn:active::after{
    opacity: .95;
    animation: btnShine .65s ease-in-out forwards;
  }
}

/* Mobile / touch: tự chạy lặp lại để luôn thấy */
@media (hover:none){
  .btn::after{
    animation: btnShineAuto 4.8s ease-in-out infinite;
  }
}

@keyframes btnShine{
  0%   { left:-140%; opacity:0; }
  15%  { opacity:.95; }
  100% { left:140%; opacity:0; }
}

@keyframes btnShineAuto{
  0%,55% { left:-140%; opacity:0; }
  60%    { opacity:.9; }
  100%   { left:140%; opacity:0; }
}

/* Nếu người dùng bật giảm chuyển động thì tắt */
@media (prefers-reduced-motion: reduce){
  .btn::after{ display:none; }
}
/* =========================
  SELECT giống hệt INPUT trong form + mobile đẹp
========================= */

/* wrapper để tạo mũi tên dropdown đẹp */
.select-wrap{
  position: relative;
  width: 100%;
}

/* mũi tên (icon) */
.select-wrap::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:10px;
  height:10px;
  transform: translateY(-55%) rotate(45deg);
  border-right:2px solid #9aa6c4;
  border-bottom:2px solid #9aa6c4;
  pointer-events:none;
  opacity:.95;
}

/* ép select giống input */
select.input{
  width:100%;
  height:52px;
  border-radius:8px;
  border:1px solid #d7dbe6;
  padding:0 42px 0 14px; /* chừa chỗ cho mũi tên */
  font-size:16px;        /* iPhone không zoom */
  color:#0d2a6b;
  background:#fff;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}

/* placeholder option (dòng đầu) */
select.input option[disabled]{
  color:#9aa6c4;
}

/* focus y hệt input */
select.input:focus{
  outline:none;
  border-color: rgba(255,90,42,.55);
  box-shadow: 0 0 0 4px rgba(255,90,42,.14);
}

/* Mobile: giữ y hệt, chỉ giảm nhẹ nếu màn nhỏ */
@media (max-width: 420px){
  select.input{
    height:50px;
    border-radius:8px;
  }
  .select-wrap::after{
    right:14px;
  }
}
/* =========================
  FIX SELECT: đúng màu + không tràn + giống input
========================= */
.select-wrap{
  position:relative;
  width:100%;
}

/* mũi tên dropdown */
.select-wrap::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:8px;
  height:8px;
  transform: translateY(-60%) rotate(45deg);
  border-right:2px solid #b7bfd3;
  border-bottom:2px solid #b7bfd3;
  pointer-events:none;
}

/* ép select y hệt .input */
select.input{
  width:100%;
  height:52px;
  border-radius:8px;
  border:1px solid #d7dbe6;
  background:#fff;

  /* màu chữ giống input */
  color:#0d2a6b;
  font-family:"Be Vietnam Pro", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* iPhone không zoom */
  font-size:16px;
  line-height:52px;

  padding:0 44px 0 14px; /* chừa chỗ mũi tên */
  outline:none;

  /* chống tràn chữ */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}

/* placeholder option (disabled) - màu giống placeholder input */
select.input:invalid{
  color:#9aa6c4;
}

/* focus giống input */
select.input:focus{
  border-color: rgba(255,90,42,.55);
  box-shadow: 0 0 0 4px rgba(255,90,42,.14);
}

/* mobile nhỏ */
@media (max-width: 420px){
  select.input{
    height:50px;
    line-height:50px;
    padding-right:40px;
  }
  .select-wrap::after{ right:14px; }
}
/* =========================================================
  CUSTOM SELECT (dropdown nhỏ dưới ô) - giống input
========================================================= */
.select-custom{
  position: relative;
  width: 100%;
  margin-bottom: 12px; /* giống spacing các input */
}

/* Nút select nhìn giống hệt .input */
.select-btn{
  width: 100%;
  height: 52px;
  border-radius: 8px;
  border: 1px solid #d7dbe6;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 14px;
  cursor: pointer;

  font-family: "Be Vietnam Pro", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px; /* tránh iPhone zoom */
  color: #0d2a6b;
}

.select-btn:focus{
  outline: none;
  border-color: rgba(255,90,42,.55);
  box-shadow: 0 0 0 4px rgba(255,90,42,.14);
}

.select-text{
  flex: 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* placeholder màu xám giống input placeholder */
.select-text.is-placeholder{
  color: #9aa6c4;
  font-weight: 500;
}

.select-arrow{
  width: 8px;
  height: 8px;
  margin-left: 12px;
  flex: 0 0 auto;
  transform: rotate(45deg);
  border-right: 2px solid #b7bfd3;
  border-bottom: 2px solid #b7bfd3;
}

/* Menu dropdown */
.select-menu{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 9999;

  display: none;
  background: #fff;
  border: 1px solid #d7dbe6;
  border-radius: 12px;
  padding: 6px;

  box-shadow: 0 16px 34px rgba(0,0,0,.12);

  max-height: 240px;
  overflow: auto;
}

/* mở dropdown */
.select-custom.open .select-menu{
  display: block;
}

/* nếu thiếu chỗ phía dưới thì mở lên trên */
.select-custom.open-up .select-menu{
  top: auto;
  bottom: calc(100% + 8px);
}

.select-option{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 12px;
  border-radius: 10px;

  font-family: inherit;
  font-size: 15px;
  color: #0d2a6b;
  cursor: pointer;
  text-align: left;
}

.select-option:hover,
.select-option.is-active{
  background: rgba(255,90,42,.10);
}

.select-error{
  margin-top: 6px;
  font-size: 12px;
  color: #ff3b30;
  display: none;
}
.select-custom.invalid .select-error{
  display: block;
}

/* Mobile nhỏ */
@media (max-width: 420px){
  .select-btn{ height: 50px; }
  .select-menu{ max-height: 220px; }
}
/* FIX iOS: cho dropdown menu cuộn được tới hết */
.select-menu{
  max-height: 60vh !important;              /* cao hơn, kéo thoải mái */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;        /* iPhone scroll mượt */
  overscroll-behavior: contain;             /* không kéo “lụi” trang */
  touch-action: pan-y;                      /* ưu tiên scroll dọc */
}
.hero{
  position:relative;
  padding-top:84px;
  overflow-x:hidden;   /* chỉ chặn tràn ngang */
  overflow-y:visible;  /* cho dropdown tràn xuống được */
}
/* dropdown luôn nổi lên trên */
.hero, .hero__grid, .hero-right, .form-card{ overflow: visible !important; }

.select-custom{ position:relative; z-index: 9999; }
.select-menu{ z-index: 10000; }

/* iOS scroll mượt trong menu */
.select-menu{
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.select-menu{
  max-height: min(260px, 45vh);
  -webkit-overflow-scrolling: touch;
}
.select-custom{ z-index: 9999; }
.select-menu{ z-index: 10000; }
.select-custom{ z-index: 9999; }
.select-menu{ z-index: 10000; }
/* =========================================================
  BACK TO TOP BAR (3D + shine) - Responsive mobile
========================================================= */
.backtop{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 99999;

  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.backtop.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.backtop__btn{
  border: 0;
  cursor: pointer;
  user-select: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* pill bar */
  min-width: min(92vw, 360px);
  height: 48px;
  padding: 0 18px;
  border-radius: 999px;

  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  letter-spacing: .3px;

  color: #fff;
  background: linear-gradient(180deg, #ff7a3a, #ff5a2a);
  border: 1px solid rgba(255,255,255,.22);

  /* 3D */
  box-shadow:
    0 14px 26px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -8px 14px rgba(0,0,0,.18);

  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Icon tròn 3D */
.backtop__icon{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);

  box-shadow:
    0 8px 16px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* Shine sweep (ánh sáng vụt qua) */
.backtop__btn::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-140%;
  width:55%;
  height:200%;
  transform: skewX(-18deg);
  pointer-events:none;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.70) 50%,
    rgba(255,255,255,0) 100%
  );
  opacity: 0;
}

/* Desktop hover */
@media (hover:hover){
  .backtop__btn:hover{
    transform: translateY(-2px);
    filter: brightness(1.03);
  }
  .backtop__btn:hover::after{
    opacity: .95;
    animation: backtopShine .85s ease-in-out forwards;
  }
  .backtop__btn:active{
    transform: translateY(2px) scale(.98);
  }
}

/* Mobile: tự chạy shine nhẹ để luôn thấy đẹp */
@media (hover:none){
  .backtop__btn::after{
    animation: backtopAuto 5.2s ease-in-out infinite;
  }
}

@keyframes backtopShine{
  0%   { left:-140%; opacity:0; }
  15%  { opacity:.95; }
  100% { left:140%; opacity:0; }
}
@keyframes backtopAuto{
  0%,60% { left:-140%; opacity:0; }
  65%    { opacity:.85; }
  100%   { left:140%; opacity:0; }
}

/* Mobile nhỏ hơn */
@media (max-width: 420px){
  .backtop{ bottom: 12px; }
  .backtop__btn{ height: 46px; min-width: 92vw; }
  .backtop__text{ font-size: 13px; }
}

/* Tôn trọng accessibility */
@media (prefers-reduced-motion: reduce){
  .backtop__btn::after{ display:none; }
}

/* ===== Backtop nhỏ gọn hơn (ghi đè) ===== */
.backtop{
  bottom: 12px; /* sát hơn chút */
}

.backtop__btn{
  min-width: min(98vw, 100px); /* nhỏ hơn */
  height: 35px;                /* thấp hơn */
  padding: 0 14px;             /* gọn hơn */
  gap: 8px;
  font-size: 13px;             /* chữ nhỏ hơn */
}

.backtop__icon{
  width: 26px;
  height: 26px;
  font-size: 14px;
}

@media (max-width: 420px){
  .backtop{ bottom: 10px; }
  .backtop__btn{
    min-width: 88vw;
    height: 38px;
    font-size: 12px;
  }
  .backtop__icon{
    width: 24px;
    height: 24px;
  }
}
/* =========================================================
  BACK TO TOP (FAB tròn góc phải) - 3D + shine
========================================================= */
.backtop-fab{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 99999;

  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  cursor: pointer;

  background: linear-gradient(180deg, #ff7a3a, #ff5a2a);
  color: #fff;

  /* 3D */
  box-shadow:
    0 14px 26px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -8px 14px rgba(0,0,0,.18);

  display: grid;
  place-items: center;

  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, filter .15s ease;

  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.backtop-fab.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.backtop-fab__icon{
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.20));
}

/* Shine sweep */
.backtop-fab::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-140%;
  width:70%;
  height:200%;
  transform: skewX(-18deg);
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,0) 100%
  );
  opacity: 0;
}

/* Desktop hover */
@media (hover:hover){
  .backtop-fab:hover{
    transform: translateY(-2px);
    filter: brightness(1.03);
  }
  .backtop-fab:hover::after{
    opacity: .95;
    animation: fabShine .85s ease-in-out forwards;
  }
  .backtop-fab:active{
    transform: translateY(2px) scale(.98);
    box-shadow:
      0 8px 18px rgba(0,0,0,.22),
      inset 0 2px 8px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.22);
  }
}

/* Mobile: tự chạy shine nhẹ */
@media (hover:none){
  .backtop-fab::after{
    animation: fabAuto 5.2s ease-in-out infinite;
  }
}

/* Mobile nhỏ: nút bé hơn nữa */
@media (max-width: 420px){
  .backtop-fab{
    width: 42px;
    height: 42px;
    right: 12px;
    bottom: 12px;
  }
  .backtop-fab__icon{ font-size: 17px; }
}

@keyframes fabShine{
  0%   { left:-140%; opacity:0; }
  15%  { opacity:.95; }
  100% { left:140%; opacity:0; }
}
@keyframes fabAuto{
  0%,60% { left:-140%; opacity:0; }
  65%    { opacity:.85; }
  100%   { left:140%; opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .backtop-fab::after{ display:none; }
}
/* =========================================================
  BLUE PEOPLE DECOR (2 ảnh xóa phông 2 bên)
  - Đè xuống để không lộ chân
  - Hover/float đẹp
========================================================= */
.blue-people{
  position: relative;
  overflow: hidden; /* QUAN TRỌNG: cắt phần chân nằm ngoài */
}

/* nội dung luôn nằm trên ảnh */
.blue-people__content{
  position: relative;
  z-index: 2;
}

/* 2 ảnh người */
.blue-person{
  position: absolute;
  bottom: -120px;        /* ĐÈ XUỐNG -> phần chân bị cắt */
  width: 340px;
  max-width: 36vw;
  height: auto;
  z-index: 1;

  /* nhìn “xịn” hơn */
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.25));
  transform: translateY(0);
  transition: transform .22s ease, filter .22s ease;
}

/* trái / phải */
.blue-person--left{ left: -40px; }
.blue-person--right{ right: -40px; }

/* Hover (desktop) */
@media (hover:hover){
  .blue-person:hover{
    transform: translateY(-10px) scale(1.02);
    filter: drop-shadow(0 28px 36px rgba(0,0,0,.28));
  }
}

/* Mobile: giảm kích thước + đẩy ra ngoài hơn để không che nội dung */
@media (max-width: 900px){
  .blue-person{
    width: 260px;
    max-width: 44vw;
    bottom: -40px; /* đè xuống thêm để cắt chân nhiều hơn */
    opacity: .95;
  }
  .blue-person--left{ left: -70px; }
  .blue-person--right{ right: -70px; }
}

/* Mobile nhỏ: nếu vẫn che chữ thì cho “ẩn bớt” hoặc đẩy ra thêm */
@media (max-width: 520px){
  .blue-person{
    width: 220px;
    max-width: 48vw;
    bottom: -150px;
    opacity: .85;
  }
  .blue-person--left{ left: -90px; }
  .blue-person--right{ right: -90px; }
}

/* Hiệu ứng “float” nhẹ (mobile không có hover vẫn đẹp) */
@media (hover:none){
  .blue-person{
    animation: blueFloat 3.8s ease-in-out infinite;
  }
  .blue-person--right{
    animation-delay: .6s;
  }
}

@keyframes blueFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
/* Ảnh đứng đúng vị trí */
.blue-person{
  bottom: -20px !important;      /* không đẩy xuống nữa */
}

/* Tạo lớp che chân (fade) ở đáy section */
.blue-people::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:140px;                 /* vùng che chân */
  z-index: 1;                   /* nằm trên ảnh, dưới chữ */
  pointer-events:none;

  /* fade từ trong suốt -> xanh (đè phần chân) */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(10,98,240,0.0) 25%,
    rgba(10,98,240,0.45) 70%,
    rgba(10,98,240,1) 100%
  );
}

/* đảm bảo chữ luôn trên cùng */
.blue-people__content{ z-index: 2; }

/* =========================================================
  MODAL 3D (đăng ký thành công) + shine button
========================================================= */
.modal{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
}

.modal.show{ display: block; }

.modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}

.modal__card{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);

  width: min(520px, calc(100vw - 28px));
  border-radius: 22px;

  /* nền card kiểu kính */
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border: 1px solid rgba(255,255,255,.35);

  /* 3D shadow */
  box-shadow:
    0 30px 70px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.55);

  overflow: hidden;
  animation: modalPop .22s ease-out;
}

/* viền trong mờ cho sang */
.modal__card::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  pointer-events:none;
}

/* ảnh mascot PNG */
.modal__mascot{
  position:absolute;
  left: 14px;
  bottom: -10px;
  width: 140px;
  height: auto;
  pointer-events:none;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.22));
}

/* nội dung chừa chỗ ảnh bên trái */
.modal__content{
  padding: 18px 18px 18px 170px;
  position:relative;
  z-index:1;
}

.modal__title{
  margin: 0 0 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: #0c3a8b;
  letter-spacing: .2px;
}

.modal__desc{
  margin: 0 0 14px;
  color: #153a86;
  font-weight: 700;
  line-height: 1.55;
  font-size: 14px;
}

/* nút X góc phải */
.modal__x{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  cursor:pointer;

  box-shadow:
    0 10px 18px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.45);

  transition: transform .12s ease, filter .12s ease;
}
.modal__x:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.modal__x:active{ transform: translateY(1px) scale(.98); }

.modal__actions{ margin-top: 6px; }

/* ===== Shine cho nút Đóng (áp dụng riêng modal để chắc chắn thấy) ===== */
.modal__btn{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

/* lớp ánh sáng */
.modal__btn::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-140%;
  width:55%;
  height:200%;
  transform: skewX(-18deg);
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,0) 100%
  );
  opacity: 0;
}

/* hover/active */
@media (hover:hover){
  .modal__btn:hover::after{
    opacity:.95;
    animation: modalShine .85s ease-in-out forwards;
  }
  .modal__btn:active{
    transform: translateY(1px) scale(.99);
  }
}

/* mobile: tự chạy shine nhẹ cho đẹp */
@media (hover:none){
  .modal__btn::after{
    animation: modalShineAuto 4.8s ease-in-out infinite;
  }
}

@keyframes modalShine{
  0%{ left:-140%; opacity:0; }
  15%{ opacity:.95; }
  100%{ left:140%; opacity:0; }
}
@keyframes modalShineAuto{
  0%,60%{ left:-140%; opacity:0; }
  65%{ opacity:.9; }
  100%{ left:140%; opacity:0; }
}

@keyframes modalPop{
  from{ transform: translate(-50%,-50%) scale(.96); opacity:0; }
  to{ transform: translate(-50%,-50%) scale(1); opacity:1; }
}

/* Mobile: card gọn hơn + ảnh nhỏ lại */
@media (max-width: 420px){
  .modal__mascot{ width: 120px; left: 10px; }
  .modal__content{ padding: 16px 14px 16px 140px; }
  .modal__title{ font-size: 16px; }
  .modal__desc{ font-size: 13px; }
}

/* =========================================================
  MODAL IMAGE FRAME (bo tròn + 3D + sang)
========================================================= */

/* card nền mượt hơn + bo góc đẹp */
.modal__card{
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86)) !important;
  overflow: hidden !important;
}

/* thêm highlight nhẹ góc card */
.modal__card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.55), transparent 55%);
  transform: rotate(-10deg);
  pointer-events:none;
  opacity:.55;
}

/* khối media nằm bên trái */
.modal__media{
  position:absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 150px;

  border-radius: 18px;
  overflow:hidden;

  /* khung 3D */
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.35));
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    0 18px 36px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.55);

  display:flex;
  align-items:center;
  justify-content:center;
}

/* ảnh bên trong: cover cho đẹp */
.modal__img{
  width:100%;
  height:100%;
  object-fit: cover; /* quan trọng: không méo, tự crop đẹp */
  display:block;
  filter: saturate(1.03) contrast(1.02);
  transform: scale(1.02); /* hơi zoom để tránh viền trắng */
}

/* đổi padding nội dung để ăn khớp media */
.modal__content{
  padding: 18px 18px 18px 182px !important;
}

/* Mobile: media nhỏ lại */
@media (max-width: 420px){
  .modal__media{
    width: 120px;
    left: 10px;
    top: 10px;
    bottom: 10px;
    border-radius: 16px;
  }
  .modal__content{
    padding: 16px 14px 16px 142px !important;
  }
}
/* ===== Fix nút Đóng trong modal: không tràn + chữ luôn nằm trên shine ===== */
.modal__actions{
  display:flex;
}

.modal__btn{
  width: 100% !important;
  min-width: 0 !important;          /* chặn lỗi min-width của btn--wide */
  justify-content: center !important;
  text-align: center !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  position: relative;
  overflow: hidden;
}

/* chữ nằm trên hiệu ứng */
.modal__btn .btn__label{
  position: relative;
  z-index: 5;
  display:inline-block;
}

/* hiệu ứng shine nằm dưới chữ */
.modal__btn::after{
  z-index: 3;
}
/* =========================================================
  FIX HERO MOBILE: CHỐNG TRÀN FORM (GIỮ NGUYÊN VỊ TRÍ ẢNH)
  -> Dán CUỐI styles.css
========================================================= */

/* 1) Fix lỗi grid/flex item không chịu co => gây tràn ngang */
.hero__grid,
.hero-left,
.hero-right{
  min-width: 0;
}

/* 2) Ảnh hero-kid luôn nằm gọn trong container (không tràn) */
.hero-kids-row{
  display: flex;
  justify-content: center;
}
.hero-kid{
  max-width: 100%;
  height: auto;
}

/* 3) 2 “khối” hay bị tràn ngang: titlebox + form-card */
.hero-titlebox,
.form-card{
  max-width: 100%;
}

/* 4) Mobile: ép form + titlebox full width trong container, tránh tràn */
@media (max-width: 720px){
  .hero{
    overflow-x: hidden; /* chỉ chặn tràn ngang ở HERO, không đụng phần khác */
  }

  .hero__grid{
    grid-template-columns: 1fr; /* chắc chắn về 1 cột */
  }

  .hero-titlebox{
    width: 100%;
  }

  .form-card{
    width: 100%;
    max-width: 100%;
  }

  /* 5) Hàng “TEST ĐẦU VÀO / MIỄN PHÍ / 100%” nếu chật thì cho tự xuống dòng */
  .price-row{
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
  }

  /* 6) Chống text dài làm tràn (an toàn) */
  .form-title,
  .form-badge{
    max-width: 100%;
  }
}

/* 7) Máy rất nhỏ: giảm rủi ro tràn do padding/viền (không đổi layout ảnh) */
@media (max-width: 380px){
  .hero-titlebox{ width: 100%; }
  .form-card{ width: 100%; }
}