/* =========================================================
   GLOB Du học — style.css
   Phong cách: tư vấn du học & định cư, sáng sủa, tin cậy (cobalt + sky + vàng nắng trên nền trắng).
   Font: "Outfit" cho tiêu đề (hình học, hiện đại) + "Nunito" cho thân bài (tròn, dễ đọc).
   Bố cục khác các mẫu trước:
     - Header: logo quả địa cầu + menu + nút "Đặt lịch tư vấn" + ô CHỌN CHI NHÁNH (Hà Nội · TP.HCM · Đà Nẵng)
     - Dưới header: dải mỏng "Lịch hội thảo tuần này" có 2 mục kèm ngày
     - Hero 2 cột: trái = chữ + THẺ QUIZ "Bạn phù hợp nước nào?" (3 câu hỏi → JS gợi ý 2 nước)
                    phải = CHỒNG HỘ CHIẾU: 6 thẻ nước xếp quạt xoay chồng nhau, cờ vẽ bằng khối màu CSS, hover đưa lên trước
     - Điểm đến: 6 thẻ nước có ảnh + BẢNG MINI 4 chỉ số
     - Lộ trình: STEPPER NGANG 6 nút trên đường cong SVG + thẻ bước bên dưới
     - Máy tính chi phí (chọn nước / bậc / số năm / % học bổng → tổng hiển thị lớn, JS)
     - Câu chuyện học viên có ảnh, bảng học bổng có chip "Sắp hết hạn", đội ngũ nền ảnh văn phòng,
       hội thảo dạng khối ngày, footer 3 chi nhánh
   Ảnh: mỗi khối ảnh dùng biến --img trên thẻ HTML (đường dẫn ../images/…).
   ========================================================= */

:root{
  --cobalt:#1E3A8A;
  --cobalt-2:#2B4EB2;
  --cobalt-deep:#172C6B;
  --cobalt-soft:#E8EEFB;
  --sky:#38BDF8;
  --sky-deep:#0EA5E9;
  --sky-soft:#E0F5FE;
  --sun:#FDE047;
  --sun-deep:#EAB308;
  --sun-soft:#FEF9C3;
  --red:#DC2626;
  --red-soft:#FEE2E2;
  --green:#16A34A;
  --green-soft:#DCFCE7;
  --bg:#F5F8FF;
  --text:#1B2340;
  --muted:#5F6B8A;
  --line:#E3E8F3;
  --white:#fff;
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 1px 2px rgba(30,58,138,.06),0 10px 30px rgba(30,58,138,.10);
  --shadow-lg:0 30px 70px rgba(30,58,138,.20);
  --ph:linear-gradient(135deg,#E8EEFB 0%,#D3E7F8 55%,#BFDDF5 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,-apple-system,sans-serif;color:var(--text);background:var(--white);font-size:15.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ph{background:var(--img,var(--ph)) center/cover no-repeat,var(--ph)}
.container{width:min(1200px,92%);margin:0 auto}
h1,h2,h3,h4{font-family:'Outfit',system-ui,sans-serif;font-weight:700;line-height:1.15;color:var(--cobalt);letter-spacing:-.01em}
b,strong{font-weight:800}
select,input,textarea{font:inherit;color:inherit}

/* ---------- Nút & nhãn ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;border-radius:12px;font-weight:800;font-size:14.5px;transition:.2s;white-space:nowrap;line-height:1.2}
.btn svg{width:16px;height:16px}
.btn--cobalt{background:var(--cobalt);color:#fff;box-shadow:0 8px 20px rgba(30,58,138,.25)}
.btn--cobalt:hover{background:var(--cobalt-2)}
.btn--sun{background:var(--sun);color:var(--cobalt-deep)}
.btn--sun:hover{background:#FCD34D}
.btn--sky{background:var(--sky);color:var(--cobalt-deep)}
.btn--sky:hover{background:var(--sky-deep);color:#fff}
.btn--line{border:1.5px solid var(--line);color:var(--cobalt);background:#fff}
.btn--line:hover{border-color:var(--cobalt)}
.btn--sm{padding:9px 16px;font-size:13px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:999px;background:var(--sky-soft);color:var(--cobalt);font-size:12.5px;font-weight:800}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sky)}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:800;line-height:1.5}
.chip--red{background:var(--red-soft);color:var(--red)}
.chip--green{background:var(--green-soft);color:var(--green)}
.chip--sun{background:var(--sun-soft);color:#854D0E}
.chip--sky{background:var(--sky-soft);color:var(--cobalt)}
.chip--gray{background:var(--line);color:var(--muted)}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header__in{display:flex;align-items:center;gap:18px;min-height:74px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Outfit',sans-serif;font-weight:800;font-size:22px;color:var(--cobalt);letter-spacing:-.02em}
.logo__mark{width:42px;height:42px;border-radius:50%;background:var(--cobalt);display:grid;place-items:center;position:relative;overflow:hidden}
.logo__mark svg{width:26px;height:26px;color:var(--sky);stroke-width:1.8}
.logo__mark::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--sun);right:4px;top:4px}
.logo small{font-family:'Nunito',sans-serif;font-size:11px;font-weight:700;color:var(--muted);display:block;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.logo span.t{display:flex;flex-direction:column;line-height:1.1}
.nav{display:flex;gap:2px;margin-left:8px}
.nav__link{padding:8px 12px;border-radius:10px;font-weight:700;font-size:14px;color:var(--text)}
.nav__link:hover{background:var(--cobalt-soft);color:var(--cobalt)}
.nav__link.is-active{color:var(--cobalt);background:var(--cobalt-soft)}
.hright{margin-left:auto;display:flex;align-items:center;gap:10px}
.branch{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:12px;padding:8px 10px;font-size:13px;font-weight:700;color:var(--cobalt);background:#fff}
.branch svg{width:15px;height:15px;color:var(--sky-deep)}
.branch select{border:0;outline:none;background:transparent;font-weight:800;font-size:13px;color:var(--cobalt);cursor:pointer}
.burger{display:none;width:42px;height:42px;border-radius:12px;background:var(--cobalt-soft);place-items:center;color:var(--cobalt)}

/* Dải hội thảo tuần này */
.semstrip{background:var(--cobalt);color:#fff;font-size:13px}
.semstrip__in{display:flex;align-items:center;gap:22px;min-height:40px;overflow:hidden}
.semstrip__label{display:flex;align-items:center;gap:7px;font-weight:800;color:var(--sun);white-space:nowrap}
.semstrip__label svg{width:15px;height:15px}
.semstrip a{display:flex;align-items:center;gap:8px;white-space:nowrap;opacity:.92}
.semstrip a:hover{opacity:1;text-decoration:underline}
.semstrip a b{background:rgba(255,255,255,.14);padding:2px 8px;border-radius:6px;font-size:12px;font-weight:800}
.semstrip .more{margin-left:auto;font-weight:800;color:var(--sky)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,var(--bg) 0%,#fff 100%);padding:56px 0 70px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.22),transparent 65%);right:-120px;top:-120px;pointer-events:none}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:clamp(36px,4.6vw,56px);margin:18px 0 14px}
.hero h1 mark{background:linear-gradient(transparent 62%,var(--sun) 62%);color:inherit;padding:0 3px}
.hero p.lead{font-size:17px;color:var(--muted);max-width:520px}
.hero__stats{display:flex;gap:26px;margin:22px 0 28px;flex-wrap:wrap}
.hero__stats b{display:block;font-family:'Outfit',sans-serif;font-size:26px;color:var(--cobalt);line-height:1}
.hero__stats span{font-size:12.5px;color:var(--muted)}

/* Quiz card */
.quiz{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow);max-width:560px}
.quiz__head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.quiz__head h3{font-size:18px}
.quiz__head small{color:var(--muted);font-size:12.5px;font-weight:700}
.quiz__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiz label.q{display:block;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}
.quiz select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;background:#fff;font-weight:700;font-size:14px}
.quiz select:focus{border-color:var(--sky)}
.quiz fieldset{border:0;grid-column:1/-1}
.quiz fieldset legend{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.radios{display:flex;gap:8px;flex-wrap:wrap}
.radios label{border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px}
.radios input{accent-color:var(--cobalt)}
.radios label:has(input:checked){border-color:var(--cobalt);background:var(--cobalt-soft);color:var(--cobalt)}
.quiz .btn{grid-column:1/-1;margin-top:2px}
.quiz__res{grid-column:1/-1;display:none;gap:10px;grid-template-columns:1fr 1fr;margin-top:4px}
.quiz__res.is-show{display:grid}
.quiz__res div{background:var(--bg);border-radius:12px;padding:12px 14px;border-left:4px solid var(--sky)}
.quiz__res div:nth-child(2){border-left-color:var(--sun)}
.quiz__res b{display:block;font-family:'Outfit',sans-serif;font-size:16px;color:var(--cobalt)}
.quiz__res span{font-size:12.5px;color:var(--muted)}

/* Chồng hộ chiếu (passport stack) */
.stack{position:relative;height:500px;max-width:560px;margin:0 auto;width:100%}
.pass{position:absolute;left:50%;top:50%;width:210px;height:280px;margin:-140px 0 0 -105px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(30,58,138,.14);padding:18px;transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg));transform-origin:50% 90%;transition:transform .35s,box-shadow .35s,z-index 0s;cursor:pointer;display:flex;flex-direction:column;overflow:hidden}
.pass::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,0) 60%,rgba(30,58,138,.05))}
.pass:hover{transform:translate(var(--x,0),calc(var(--y,0px) - 22px)) rotate(0deg) scale(1.05);z-index:20!important;box-shadow:var(--shadow-lg)}
.pass__top{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800}
.pass__top span{color:var(--sky-deep)}
.flag{width:100%;height:112px;border-radius:10px;margin:14px 0 12px;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.06)}
.pass b{font-family:'Outfit',sans-serif;font-size:21px;color:var(--cobalt);line-height:1.1}
.pass small{color:var(--muted);font-size:12.5px;display:block;margin-top:3px}
.pass .from{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;color:var(--muted)}
.pass .from em{font-style:normal;font-family:'Outfit',sans-serif;font-size:18px;color:var(--cobalt);font-weight:700}
.pass .stamp{position:absolute;right:14px;bottom:56px;width:52px;height:52px;border:2px solid var(--sky-deep);border-radius:50%;color:var(--sky-deep);font-size:8.5px;font-weight:800;display:grid;place-items:center;text-align:center;transform:rotate(-14deg);opacity:.7;line-height:1.1;letter-spacing:.03em}
.pass--1{--x:-150px;--y:26px;--r:-22deg;z-index:1}
.pass--2{--x:-90px;--y:-4px;--r:-13deg;z-index:2}
.pass--3{--x:-30px;--y:-20px;--r:-4deg;z-index:3}
.pass--4{--x:30px;--y:-20px;--r:4deg;z-index:4}
.pass--5{--x:90px;--y:-4px;--r:13deg;z-index:5}
.pass--6{--x:150px;--y:26px;--r:22deg;z-index:6}
/* Cờ vẽ bằng CSS (đơn giản hóa) */
.flag--au{background:#00247D}
.flag--au::before{content:"";position:absolute;left:0;top:0;width:50%;height:50%;background:linear-gradient(#fff,#fff) 50% 0/22% 100% no-repeat,linear-gradient(#fff,#fff) 0 50%/100% 22% no-repeat,linear-gradient(#CF142B,#CF142B) 50% 0/9% 100% no-repeat,linear-gradient(#CF142B,#CF142B) 0 50%/100% 9% no-repeat,#00247D}
.flag--au::after{content:"★ ★\A ★ ★ ★";white-space:pre;position:absolute;right:10px;top:22px;color:#fff;font-size:15px;line-height:1.5;text-align:center}
.flag--ca{background:linear-gradient(90deg,#D52B1E 0 25%,#fff 25% 75%,#D52B1E 75%)}
.flag--ca::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%) rotate(45deg);background:#D52B1E;clip-path:polygon(50% 0,64% 34%,100% 30%,80% 60%,100% 100%,50% 82%,0 100%,20% 60%,0 30%,36% 34%)}
.flag--de{background:linear-gradient(#000 0 33.3%,#DD0000 33.3% 66.6%,#FFCE00 66.6%)}
.flag--kr{background:#fff}
.flag--kr::before{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%) rotate(-30deg);border-radius:50%;background:linear-gradient(#CD2E3A 0 50%,#0047A0 50%)}
.flag--kr::after{content:"";position:absolute;left:14px;top:22px;width:22px;height:20px;border-top:5px solid #000;border-bottom:5px solid #000;box-shadow:0 0 0 0 transparent;background:linear-gradient(#000,#000) 0 50%/100% 5px no-repeat}
.flag--jp{background:#fff}
.flag--jp::before{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;background:#BC002D}
.flag--uk{background:linear-gradient(#CF142B,#CF142B) 50% 0/12% 100% no-repeat,linear-gradient(#CF142B,#CF142B) 0 50%/100% 12% no-repeat,linear-gradient(#fff,#fff) 50% 0/26% 100% no-repeat,linear-gradient(#fff,#fff) 0 50%/100% 26% no-repeat,linear-gradient(28deg,transparent 47%,#fff 47% 53%,transparent 53%),linear-gradient(-28deg,transparent 47%,#fff 47% 53%,transparent 53%),#00247D}
.flag--sm{width:34px;height:24px;margin:0;border-radius:5px;flex:none}
.flag--sm::before,.flag--sm::after{transform:scale(.4)}
.flag--sm.flag--kr::before,.flag--sm.flag--jp::before{width:14px;height:14px;transform:translate(-50%,-50%) rotate(-30deg)}
.flag--sm.flag--jp::before{transform:translate(-50%,-50%)}
.flag--sm.flag--kr::after{display:none}
.flag--sm.flag--au::after{content:"·  ·\A· · ·";font-size:7px;line-height:1;right:2px;top:5px;transform:none;font-weight:900}
.flag--sm.flag--au::before{transform:none}
.flag--sm.flag--ca::after{width:10px;height:10px;transform:translate(-50%,-50%) rotate(45deg)}

/* ---------- Section chung ---------- */
.section{padding:88px 0}
.section--bg{background:var(--bg)}
.section--cobalt{background:var(--cobalt);color:#fff}
.section--cobalt h2,.section--cobalt h3{color:#fff}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:40px;flex-wrap:wrap}
.section__title{font-size:clamp(28px,3.4vw,40px);margin-top:12px}
.section__title mark{background:linear-gradient(transparent 62%,var(--sun) 62%);color:inherit;padding:0 3px}
.section__head p{color:var(--muted);max-width:520px;margin-top:8px}
.section--cobalt .section__head p{color:rgba(255,255,255,.72)}
.section--cobalt .eyebrow{background:rgba(255,255,255,.12);color:#fff}
.section--cobalt .eyebrow::before{background:var(--sun)}

/* ---------- Điểm đến: thẻ nước + bảng mini ---------- */
.dests{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dest{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.dest:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.dest__media{position:relative;aspect-ratio:16/9}
.dest__media .ph{position:absolute;inset:0}
.dest__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(23,44,107,.75))}
.dest__name{position:absolute;left:16px;bottom:14px;z-index:1;color:#fff;display:flex;align-items:center;gap:10px}
.dest__name b{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700}
.dest__name small{display:block;font-size:12px;opacity:.85}
.dest__tag{position:absolute;right:12px;top:12px;z-index:1}
.dest__body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.dest__body p{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.mini{width:100%;border-collapse:collapse;font-size:13px}
.mini td{padding:7px 0;border-top:1px dashed var(--line)}
.mini td:first-child{color:var(--muted)}
.mini td:last-child{text-align:right;font-weight:800;color:var(--cobalt)}
.dest__foot{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center}
.dest__foot a{font-weight:800;color:var(--sky-deep);font-size:13.5px;display:inline-flex;align-items:center;gap:5px}
.dest__foot a svg{width:14px;height:14px}

/* ---------- Lộ trình: stepper cong ---------- */
.stepper{position:relative;margin-top:10px}
.stepper__line{width:100%;height:auto;display:block;overflow:visible}
.stepper__line path{fill:none;stroke:var(--sky);stroke-width:3;stroke-dasharray:8 8;stroke-linecap:round}
.stepper__line circle{fill:#fff;stroke:var(--cobalt);stroke-width:3}
.stepper__line text{font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;fill:var(--cobalt);text-anchor:middle;dominant-baseline:central;stroke:none}
.stepper__line .plane{fill:var(--sun);stroke:var(--cobalt);stroke-width:1.5}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:8px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px;position:relative}
.step small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-deep);font-weight:800}
.step b{display:block;font-family:'Outfit',sans-serif;font-size:15.5px;color:var(--cobalt);margin:4px 0 6px;line-height:1.2}
.step p{font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---------- Máy tính chi phí ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.calc__form{padding:32px}
.calc__form h3{font-size:22px;margin-bottom:6px}
.calc__form > p{color:var(--muted);font-size:14px;margin-bottom:18px}
.calc__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-size:13px;font-weight:800}
.field input,.field select,.field textarea{border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;outline:none;background:#fff;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sky)}
.field textarea{min-height:100px;resize:vertical}
.field input[type=range]{padding:0;border:0;accent-color:var(--cobalt)}
.field .hint{font-size:12px;color:var(--muted)}
.calc__out{background:var(--cobalt);color:#fff;padding:32px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.calc__out::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(56,189,248,.18);right:-100px;bottom:-120px}
.calc__out small{font-size:12.5px;opacity:.75;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.calc__total{font-family:'Outfit',sans-serif;font-size:clamp(40px,4.5vw,60px);font-weight:700;line-height:1;margin:10px 0 4px;color:var(--sun)}
.calc__total sub{font-size:18px;vertical-align:baseline;color:#fff;opacity:.8;margin-left:4px}
.calc__out .per{opacity:.8;font-size:14px}
.calc__rows{margin-top:22px;border-top:1px solid rgba(255,255,255,.18);position:relative}
.calc__rows div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px}
.calc__rows div span:first-child{opacity:.8}
.calc__rows div.sc{color:var(--sky)}
.calc__out .note{margin-top:auto;font-size:12.5px;opacity:.7;padding-top:18px;position:relative}
.calc__out .btn{margin-top:16px;align-self:flex-start;position:relative}

/* ---------- Câu chuyện học viên ---------- */
.stories{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.story{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.story .ph{aspect-ratio:4/3}
.story__body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.story__meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:8px}
.story__body h3{font-size:16.5px;margin-bottom:4px}
.story__body .sch{font-size:13px;color:var(--muted);margin-bottom:10px}
.story__body q{font-size:13.5px;line-height:1.55;color:var(--text);quotes:"“" "”"}
.story__body q::before,.story__body q::after{color:var(--sky-deep);font-weight:800}
.story__foot{margin-top:auto;padding-top:12px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between}

/* ---------- Bảng học bổng ---------- */
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);font-size:14px}
.tbl th{background:var(--cobalt);color:#fff;text-align:left;padding:14px 16px;font-family:'Outfit',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.03em}
.tbl td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:var(--bg)}
.tbl td b{font-weight:800}
.tbl .co{display:flex;align-items:center;gap:8px;white-space:nowrap}
.tbl .amt{font-weight:800;color:var(--cobalt)}
.tblwrap{overflow-x:auto;border-radius:var(--radius-lg)}
.tbl--cmp{min-width:900px}
.tbl--cmp th:first-child,.tbl--cmp td:first-child{position:sticky;left:0;background:#fff;font-weight:800;min-width:160px}
.tbl--cmp th:first-child{background:var(--cobalt)}
.tbl--cmp th:not(:first-child){text-align:center}
.tbl--cmp td{text-align:center;font-size:13.5px}
.tbl--cmp td:first-child{text-align:left}
.tbl--cmp .good{color:var(--green);font-weight:800}
.tbl--cmp .bad{color:var(--red);font-weight:800}

/* ---------- Vì sao GLOB ---------- */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.why div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);padding:26px}
.why .ic{width:48px;height:48px;border-radius:14px;background:var(--sun);display:grid;place-items:center;margin-bottom:16px}
.why .ic svg{width:24px;height:24px;color:var(--cobalt-deep)}
.why b{display:block;font-family:'Outfit',sans-serif;font-size:19px;margin-bottom:6px;font-weight:600}
.why p{font-size:14px;opacity:.78}
.why em{font-style:normal;font-family:'Outfit',sans-serif;font-size:30px;color:var(--sun);display:block;line-height:1;margin-bottom:8px}

/* ---------- Đội ngũ tư vấn ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.member{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:340px;display:flex;align-items:flex-end;padding:22px;color:#fff}
.member .ph{position:absolute;inset:0;transition:.5s}
.member:hover .ph{transform:scale(1.05)}
.member::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,44,107,.05) 30%,rgba(23,44,107,.92))}
.member div{position:relative;z-index:1}
.member .role{display:inline-block;background:var(--sun);color:var(--cobalt-deep);padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:800;margin-bottom:10px}
.member b{display:block;font-family:'Outfit',sans-serif;font-size:21px;font-weight:600}
.member p{font-size:13.5px;opacity:.85;margin-top:4px}
.member .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.member .tags span{background:rgba(255,255,255,.16);padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700}

/* ---------- Hội thảo ---------- */
.events{display:grid;gap:12px}
.event{display:grid;grid-template-columns:86px 1fr auto;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;transition:.2s}
.event:hover{box-shadow:var(--shadow)}
.event__date{background:var(--cobalt-soft);border-radius:12px;text-align:center;padding:10px 6px;color:var(--cobalt)}
.event__date b{display:block;font-family:'Outfit',sans-serif;font-size:28px;line-height:1}
.event__date span{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.event--hot .event__date{background:var(--sun)}
.event h3{font-size:17px;margin-bottom:4px}
.event p{font-size:13.5px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.event p span{display:inline-flex;align-items:center;gap:5px}
.event p svg{width:14px;height:14px;color:var(--sky-deep)}
.event .btn{white-space:nowrap}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(120deg,var(--cobalt),var(--cobalt-2));color:#fff;border-radius:var(--radius-lg);padding:50px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:var(--sky);opacity:.25;right:-60px;top:-100px}
.cta h2{color:#fff;font-size:30px}
.cta p{opacity:.85;margin-top:6px;max-width:560px}
.cta > div,.cta .btn{position:relative;z-index:1}
.cta .btns{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Footer ---------- */
.footer{background:var(--cobalt-deep);color:#fff;padding:60px 0 0;margin-top:40px}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px}
.footer .logo{color:#fff}.footer .logo__mark{background:rgba(255,255,255,.12)}.footer .logo small{color:rgba(255,255,255,.6)}
.footer__col p{opacity:.7;font-size:13.5px;margin-top:14px;max-width:320px}
.footer__col h4{color:var(--sun);font-family:'Nunito',sans-serif;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}
.footer__col a{display:block;padding:4px 0;font-size:14px;opacity:.85}
.footer__col a:hover{opacity:1;color:var(--sky)}
.footer__col .addr{font-size:13.5px;opacity:.85;margin-bottom:12px;line-height:1.5}
.footer__col .addr b{display:block;color:var(--sky);font-weight:800}
.footer__bar{margin-top:50px;border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:12.5px;opacity:.6;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- Trang con: pagehead ---------- */
.pagehead{background:linear-gradient(180deg,var(--bg),#fff);padding:52px 0 40px;border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(32px,4.2vw,48px);margin-top:14px}
.pagehead p{color:var(--muted);max-width:640px;margin-top:12px;font-size:16px}
.crumbs{display:flex;gap:8px;font-size:13px;color:var(--muted)}
.crumbs a:hover{color:var(--cobalt)}
.subnav{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.subnav a{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:800;background:#fff}
.subnav a:hover{border-color:var(--cobalt);color:var(--cobalt)}

/* Điểm đến chi tiết: hàng xen kẽ */
.crow{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;padding:70px 0;border-top:1px solid var(--line)}
.crow:first-of-type{border-top:0}
.crow:nth-child(even) .crow__media{order:2}
.crow__media{position:sticky;top:96px}
.crow__media .ph{aspect-ratio:4/3;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.crow__media .kv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.crow__media .kv div{background:var(--bg);border-radius:12px;padding:12px;text-align:center}
.crow__media .kv b{display:block;font-family:'Outfit',sans-serif;font-size:19px;color:var(--cobalt)}
.crow__media .kv span{font-size:11.5px;color:var(--muted)}
.crow__head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.crow__head h2{font-size:32px}
.crow__head small{color:var(--muted);font-size:13px;display:block}
.crow > div > p.intro{color:var(--muted);font-size:15.5px;margin-bottom:20px}
.crow h3{font-size:15px;margin:22px 0 10px;text-transform:uppercase;letter-spacing:.08em;color:var(--sky-deep);font-family:'Nunito',sans-serif;font-weight:800}
.costs{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.costs th{background:var(--cobalt-soft);color:var(--cobalt);text-align:left;padding:9px 12px;font-size:12.5px;font-weight:800}
.costs td{padding:9px 12px;border-top:1px solid var(--line)}
.costs td:last-child{text-align:right;font-weight:800;color:var(--cobalt);white-space:nowrap}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pills span{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700}
.checks{list-style:none;display:grid;gap:7px}
.checks li{display:flex;gap:9px;font-size:14px;align-items:flex-start}
.checks li svg{width:16px;height:16px;color:var(--green);margin-top:4px;flex:none}
.checks li.warn svg{color:var(--sun-deep)}
.visanote{background:var(--sun-soft);border-left:4px solid var(--sun-deep);border-radius:10px;padding:14px 16px;font-size:14px;margin-top:6px}
.visanote b{color:#854D0E}
.crow .btns{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}

/* Chi phí ẩn checklist */
.hidden{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.hidden label{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer}
.hidden input{accent-color:var(--cobalt);margin-top:4px;width:16px;height:16px;flex:none}
.hidden b{display:block;font-size:14.5px}
.hidden span{font-size:13px;color:var(--muted)}
.hidden em{font-style:normal;margin-left:auto;font-family:'Outfit',sans-serif;color:var(--cobalt);font-weight:700;white-space:nowrap;flex:none}

/* Học bổng: bộ lọc + thẻ */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px}
.filterbar label{font-size:13px;font-weight:800;color:var(--muted)}
.filterbar select{border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;outline:none;font-weight:700;font-size:13.5px;background:#fff}
.filterbar .cnt{margin-left:auto;font-size:13px;color:var(--muted)}
.filterbar .cnt b{color:var(--cobalt)}
.schols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.schol{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:8px;position:relative}
.schol.is-hidden{display:none}
.schol__top{display:flex;justify-content:space-between;align-items:center}
.schol__top .co{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--muted)}
.schol h3{font-size:17px}
.schol .sch{font-size:13.5px;color:var(--muted)}
.schol .amt{font-family:'Outfit',sans-serif;font-size:26px;color:var(--cobalt);font-weight:700;line-height:1}
.schol .amt small{font-family:'Nunito',sans-serif;font-size:12.5px;color:var(--muted);font-weight:700}
.schol .dl{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--line);padding-top:12px;margin-top:auto;font-size:13px}
.schol .dl b{color:var(--red)}
.schol .dl b.ok{color:var(--green)}
.schol .req{font-size:12.5px;color:var(--muted)}
.hsteps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s}
.hstep{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;position:relative}
.hstep::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:'Outfit',sans-serif;font-size:34px;font-weight:700;color:var(--sky);line-height:1;display:block;margin-bottom:10px}
.hstep b{display:block;font-family:'Outfit',sans-serif;font-size:16px;color:var(--cobalt);margin-bottom:6px}
.hstep p{font-size:13px;color:var(--muted)}
.hstep small{display:block;margin-top:8px;font-size:12px;color:var(--sky-deep);font-weight:800}

/* Câu chuyện: nổi bật + lưới lọc */
.featured{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.featured .ph{min-height:480px}
.featured__body{padding:40px 44px 40px 0;min-width:0}
.featured__body h2{font-size:30px;margin:10px 0 6px}
.featured__body .sch{color:var(--muted);font-size:14px;margin-bottom:18px}
.featured__body p{font-size:15px;margin-bottom:12px}
.featured__body blockquote{border-left:4px solid var(--sun);padding:6px 16px;font-style:italic;color:var(--cobalt);font-size:16.5px;margin:16px 0}
.featured__facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.featured__facts b{display:block;font-family:'Outfit',sans-serif;font-size:20px;color:var(--cobalt)}
.featured__facts span{font-size:12px;color:var(--muted)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.tabs button{border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:800;background:#fff}
.tabs button.is-active{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.story.is-hidden{display:none}

/* Liên hệ: chi nhánh + form đặt lịch */
.branches{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.mapph{height:170px;background:var(--cobalt-soft);position:relative;overflow:hidden;background-image:linear-gradient(rgba(30,58,138,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(30,58,138,.08) 1px,transparent 1px);background-size:28px 28px}
.mapph::before{content:"";position:absolute;left:-10%;top:40%;width:120%;height:18px;background:rgba(56,189,248,.35);transform:rotate(-8deg)}
.mapph::after{content:"";position:absolute;left:30%;top:-10%;width:14px;height:120%;background:rgba(56,189,248,.35);transform:rotate(20deg)}
.mapph .pin{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-90%);z-index:1}
.mapph .pin::before{content:"";position:absolute;inset:0;background:var(--red);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.mapph .pin::after{content:"";position:absolute;width:12px;height:12px;background:#fff;border-radius:50%;left:11px;top:11px}
.mapph span{position:absolute;right:10px;bottom:8px;font-size:11px;color:var(--cobalt);font-weight:800;background:#fff;padding:2px 8px;border-radius:6px;z-index:1}
.bcard__body{padding:18px 20px 20px}
.bcard__body h3{font-size:18px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.bcard__body h3 .chip{margin-left:auto}
.bcard__body p{font-size:13.5px;color:var(--muted);display:flex;gap:8px;padding:3px 0}
.bcard__body p svg{width:15px;height:15px;color:var(--sky-deep);margin-top:4px}
.bcard__body .btns{display:flex;gap:8px;margin-top:12px}
.book{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow)}
.form h2{font-size:26px;margin-bottom:6px}
.form > p{color:var(--muted);font-size:14px;margin-bottom:20px}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.slots{display:flex;gap:8px;flex-wrap:wrap}
.slots label{border:1.5px solid var(--line);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer}
.slots input{display:none}
.slots label:has(input:checked){border-color:var(--cobalt);background:var(--cobalt-soft);color:var(--cobalt)}
.form .btn{width:100%;margin-top:6px}
.form small.note{display:block;color:var(--muted);font-size:12.5px;text-align:center;margin-top:10px}
.aside{display:grid;gap:16px}
.aside .box{background:var(--bg);border-radius:var(--radius-lg);padding:24px}
.aside .box h3{font-size:17px;margin-bottom:10px}
.aside .box li{list-style:none;display:flex;gap:9px;font-size:14px;padding:4px 0;align-items:flex-start}
.aside .box li svg{width:16px;height:16px;color:var(--sky-deep);margin-top:4px}
.aside .box.zalo{background:var(--sun-soft)}
.faq details{border:1px solid var(--line);border-radius:var(--radius);padding:16px 22px;margin-bottom:10px;background:#fff}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;font-weight:800;color:var(--cobalt)}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{color:var(--sky-deep)}
.faq p{color:var(--muted);margin-top:10px;font-size:14px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .dests{grid-template-columns:repeat(2,1fr)}
  .stories{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .stepper__line{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .hsteps{grid-template-columns:repeat(3,1fr)}
  .schols{grid-template-columns:repeat(2,1fr)}
  .branches{grid-template-columns:1fr 1fr}
  .stack{height:460px}
  .pass{width:200px;height:270px;margin:-135px 0 0 -100px}
  .pass--1{--x:-130px}.pass--6{--x:130px}.pass--2{--x:-78px}.pass--5{--x:78px}.pass--3{--x:-26px}.pass--4{--x:26px}
}
@media (max-width:980px){
  .nav{display:none}
  .nav.is-open{display:flex;position:fixed;inset:74px 0 auto 0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:12px 20px 20px;z-index:60;box-shadow:var(--shadow-lg)}
  .nav.is-open .nav__link{padding:12px 14px}
  .hright .btn{display:none}
  .burger{display:grid}
  .semstrip a:nth-of-type(2),.semstrip .more{display:none}
  .hero__in{grid-template-columns:1fr}
  .stack{height:400px;max-width:460px}
  .crow{grid-template-columns:1fr;gap:26px;padding:50px 0}
  .crow:nth-child(even) .crow__media{order:0}
  .crow__media{position:static}
  .calc{grid-template-columns:1fr}
  .team{grid-template-columns:1fr 1fr}
  .featured{grid-template-columns:1fr}
  .featured .ph{min-height:0;aspect-ratio:16/10}
  .featured__body{padding:26px}
  .book{grid-template-columns:1fr}
  .event{grid-template-columns:70px 1fr;gap:16px}
  .event .btn{grid-column:2}
}
@media (max-width:640px){
  .container{width:min(1200px,100% - 32px)}
  .section{padding:56px 0}
  .header__in{gap:10px}
  .branch{display:none}
  .semstrip a b{display:none}
  .hero{padding:36px 0 50px}
  .quiz__grid,.quiz__res{grid-template-columns:1fr}
  .stack{height:330px}
  .pass{width:150px;height:205px;margin:-102px 0 0 -75px;padding:12px}
  .flag{height:70px;margin:10px 0 8px}
  .pass b{font-size:16px}.pass small{font-size:11px}.pass .stamp{display:none}.pass .from em{font-size:14px}
  .pass--1{--x:-100px;--y:0}.pass--6{--x:100px;--y:0}.pass--2{--x:-60px;--y:-14px}.pass--5{--x:60px;--y:-14px}.pass--3{--x:-20px;--y:-20px}.pass--4{--x:20px;--y:-20px}
  .dests,.stories,.why,.team,.steps,.calc__grid,.form__grid,.hsteps,.schols,.branches,.hidden{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .calc__form,.calc__out{padding:24px}
  .form{padding:22px}
  .cta{padding:32px 24px}
  .member{min-height:260px}
  .tbl th,.tbl td{padding:11px 12px;font-size:13px}
  .crow__head h2{font-size:26px}
  .crow__media .kv{grid-template-columns:repeat(3,1fr)}
  .filterbar .cnt{margin-left:0;width:100%}
}
