/* =========================================================
   YOLA LANDING PAGE — DESIGN TOKENS
   Trích trực tiếp từ code thật đang chạy tại uudai.yola.vn
   Dùng: <link rel="stylesheet" href="00-tokens.css"> ở đầu mỗi block
   ========================================================= */

/* ---------- FONT (SVN-Gilroy, nhúng từ thư mục assets) ---------- */
@font-face{font-family:'SVN-Gilroy';src:url(font_regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SVN-Gilroy';src:url(font_medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'SVN-Gilroy';src:url(font_semibold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'SVN-Gilroy';src:url(font_bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'SVN-Gilroy';src:url(font_xbold.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  /* ---------- MÀU THƯƠNG HIỆU (brand guideline 2026) ---------- */
  --blue:#179EF1;      /* Primary Blue Light — màu chủ đạo, nút CTA, nền hero */
  --navy:#002467;      /* Primary Blue Dark — tiêu đề, nền section thành tích */
  --lime:#90EB36;      /* Secondary — badge điểm số, dấu tick */
  --sky:#76D9F6;       /* Secondary — số liệu trên nền navy, chấm bullet */
  --pink:#FDB0C9;      /* Secondary — nhóm chương trình mầm non/thiếu nhi */
  --yellow:#FEE454;    /* Secondary — số liệu nổi bật, nút CTA nổi, badge ưu đãi */
  --grey:#F6F9FF;      /* Nền section xen kẽ, nền ô input */
  --ink:#0B1B3B;       /* Màu chữ mặc định */

  /* ---------- MÀU PHỤ TRỢ (dùng trong code, không có trong brandguide) ---------- */
  --text-muted:#42527a;      /* Chữ mô tả, đoạn văn phụ */
  --text-light:#6b7a9c;      /* Chú thích, ghi chú nhỏ */
  --text-on-navy:#D5DFF5;    /* Chữ phụ trên nền navy */
  --text-on-navy-2:#B9C8E8;  /* Chữ phụ mờ hơn trên nền navy */
  --border:#E4ECFA;          /* Viền card */
  --border-input:#D8E2F4;    /* Viền ô nhập liệu */
  --border-soft:#EEF3FC;     /* Viền phân cách nhẹ */
  --scroll-thumb:#C9D8F0;    /* Thanh cuộn ngang/dọc */
  --online-dot:#38D96E;      /* Chấm "đang online" của chatbot */

  /* ---------- FONT SCALE (clamp = tự co giãn theo màn hình) ---------- */
  --font-family:'SVN-Gilroy',system-ui,-apple-system,sans-serif;
  --fs-hero:clamp(32px,4.6vw,54px);      /* H1 hero */
  --fs-stat-hero:clamp(64px,9vw,124px);  /* Con số 68.000+ */
  --fs-section:clamp(26px,3.6vw,40px);   /* Tiêu đề section */
  --fs-stat-lg:clamp(30px,3.4vw,44px);   /* Số liệu card thành tích */
  --fs-modal-title:clamp(28px,3.4vw,42px);
  --fs-lead:clamp(15px,1.6vw,18px);      /* Đoạn mô tả dưới tiêu đề */
  --fs-body:15px;
  --fs-sm:14px;
  --fs-xs:13px;
  --fs-2xs:12px;
  --fs-micro:11px;                        /* Nhãn chip, badge nhỏ */

  /* ---------- FONT WEIGHT ---------- */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-xbold:800;

  /* ---------- SPACING SCALE ---------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:56px; --space-10:72px;
  --section-py:72px;         /* Padding dọc section — desktop */
  --section-py-mobile:52px;  /* Padding dọc section — mobile */
  --wrap-max:1180px;         /* Chiều rộng tối đa nội dung */
  --wrap-px:24px;            /* Padding ngang nội dung */

  /* ---------- BO GÓC ---------- */
  --radius-sm:8px;    --radius-md:12px;  --radius-lg:16px;
  --radius-xl:18px;   --radius-2xl:22px; --radius-3xl:24px;
  --radius-pill:999px;

  /* ---------- ĐỔ BÓNG ---------- */
  --shadow-card:0 12px 32px rgba(0,36,103,.14);
  --shadow-card-hover:0 14px 38px rgba(0,36,103,.13);
  --shadow-form:0 12px 40px rgba(0,36,103,.10);
  --shadow-float:0 10px 28px rgba(0,36,103,.32);
  --shadow-modal:0 20px 60px rgba(0,36,103,.25);
  --shadow-badge:0 2px 8px rgba(0,36,103,.18);

  /* ---------- CHUYỂN ĐỘNG ---------- */
  --transition-fast:.2s;
  --transition-base:.25s;
  --transition-slow:.45s;
}

/* ---------- BREAKPOINT (ghi chú — CSS không dùng biến trong media query) ----------
   --bp-desktop-lg : 980px   → lưới 3 cột về 2 cột, carousel giáo viên thu nhỏ
   --bp-tablet     : 820px   → hero 2 cột về 1 cột, form 2 cột về 1 cột, ẩn ngắt dòng .dtb
   --bp-mobile-lg  : 640px   → chương trình chuyển thành carousel vuốt ngang
   --bp-mobile     : 560px   → lưới còn 1 cột, thu nhỏ padding section
   Dùng trong code: @media(max-width:980px) / (max-width:820px) / (max-width:640px) / (max-width:560px)
------------------------------------------------------------------- */

/* ---------- RESET & NỀN TẢNG (bắt buộc để block hiển thị đúng) ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{font-family:var(--font-family);color:var(--ink);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3{line-height:1.2;font-weight:var(--fw-bold)}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-px)}
section{padding:var(--section-py) 0}
@media(max-width:560px){section{padding:var(--section-py-mobile) 0}}

/* ---------- THÀNH PHẦN DÙNG CHUNG ---------- */
.eyebrow{display:inline-block;font-weight:var(--fw-bold);font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:rgba(23,158,241,.10);border-radius:var(--radius-pill);padding:7px 16px;margin-bottom:14px}
.sec-title{font-size:var(--fs-section);font-weight:var(--fw-xbold);color:var(--navy);margin-bottom:14px}
.dtb{display:inline}
@media(max-width:820px){.dtb{display:none}}
.sec-sub{font-size:var(--fs-lead);color:var(--text-muted);max-width:720px;font-weight:var(--fw-medium)}

/* Nút CTA vạt xéo — theo brand guideline mục 3.6 */
.cta{position:relative;display:inline-flex;align-items:center;gap:0;font-weight:var(--fw-bold);text-transform:uppercase;font-size:var(--fs-body);letter-spacing:.03em;cursor:pointer;border:none;white-space:nowrap}
.cta .lbl{background:var(--navy);color:#fff;padding:15px 22px;transition:filter var(--transition-fast)}
.cta .tail{width:16px;align-self:stretch;background:var(--navy);clip-path:polygon(0 0,55% 0,100% 100%,45% 100%);margin-left:5px;transition:filter var(--transition-fast)}
.cta:hover .lbl,.cta:hover .tail{filter:brightness(1.25)}
.cta.light .lbl,.cta.light .tail{background:var(--blue);color:#fff}
.cta.white .lbl,.cta.white .tail{background:#fff;color:var(--blue)}
.cta.white:hover .lbl,.cta.white:hover .tail{filter:brightness(.94)}

/* Thông báo nổi (toast) — dùng chung cho form và chatbot */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;font-weight:var(--fw-semibold);font-size:var(--fs-sm);padding:13px 22px;border-radius:var(--radius-md);opacity:0;pointer-events:none;transition:all .3s;z-index:300;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}