/* ===== YOLA brand fonts (self-hosted, matching yola.vn) ===== */
@font-face{font-family:'Bebas Neue Pro';src:url('../fonts/SVN-BebasNeuePro-Middle.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Bebas Neue Pro';src:url('../fonts/SVN-BebasNeueProExp-ExtraBold.woff2') format('woff2');font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:'Brown';src:url('../fonts/Brown-Light.woff2') format('woff2');font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:'Brown';src:url('../fonts/Brown-Bold.woff2') format('woff2');font-weight:600 800;font-style:normal;font-display:swap}

:root{
  --blue:#4FBEEE;
  --blue-600:#1A99D5;
  --blue-700:#0F7CB0;
  --blue-900:#083244;
  --navy:#193F51;
  --navy-deep:#0F2B38;
  --blue-200:#BBE7FB;
  --blue-100:#E5F6FE;
  --blue-50:#F2FBFF;
  --ink:#193F51;
  --muted:#5B8294;
  --muted-2:#325C70;
  --line:#E2F0F7;
  --paper:#F4FCFF;
  --white:#fff;

  /* warm accents (brand nhấn nhá) */
  --accent:#F0872B;
  --accent-600:#DE6F16;
  --accent-gold:#FFB300;
  --accent-soft:#FFF3E6;
  --accent-line:#FADFC2;

  --display:'Bebas Neue Pro',var(--body);
  --body:'Brown',system-ui,sans-serif;
  --btn:'Brown',system-ui,sans-serif;

  --container:1200px;
  --radius:28px;
  --r-md:18px;
  --r-sm:14px;
  --shadow:0 32px 70px -34px rgba(11,51,69,.5);
  --shadow-sm:0 18px 44px -24px rgba(11,51,69,.4);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--body);font-size:16px;font-weight:300;color:var(--ink);background:var(--paper);line-height:1.55;overflow-x:clip;width:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 26px}

/* section order: Hero -> About -> Stats -> Why -> Paths -> CTA (match client draft) */
.main{display:flex;flex-direction:column}
.banner{order:1}.m-about{order:2}.m-stats{order:3}.m-why{order:4}.m-paths{order:5}.m-cta{order:6}

/* flower */
.fl{display:inline-block;color:var(--accent);vertical-align:middle}
.flower-deco{position:absolute;color:var(--accent-line);z-index:1;pointer-events:none}

/* section heads */
.sec-head{text-align:center;max-width:740px;margin:0 auto 56px}
.sec-head.left{text-align:left;margin-left:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--blue-700);font-weight:800;
  text-transform:uppercase;letter-spacing:2.4px;font-size:12.5px;margin-bottom:16px}
.eyebrow .fl{width:15px;height:15px;color:var(--accent)}
.h-sec{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.4px;
  line-height:.9;color:var(--navy);font-size:clamp(44px,5.6vw,78px)}
.lead{font-size:clamp(16px,1.2vw,18.5px);color:var(--muted);margin-top:18px;max-width:62ch}
.sec-head:not(.left) .lead{margin-left:auto;margin-right:auto}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--btn);font-weight:700;font-size:15.5px;letter-spacing:.2px;
  padding:15px 32px;border-radius:999px;cursor:pointer;border:0;transition:transform .3s var(--ease),box-shadow .3s,background .3s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-600));color:#fff;box-shadow:0 18px 38px -16px rgba(222,111,22,.85)}
.btn-primary:hover{background:linear-gradient(135deg,var(--accent-600),#C25E0F);transform:translateY(-3px);box-shadow:0 24px 48px -16px rgba(222,111,22,.95)}
.btn-primary:active{transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--blue-700);box-shadow:0 12px 30px -18px rgba(11,51,69,.5);border:0}
.btn-ghost:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(11,51,69,.6)}
.btn .arr{font-size:14px;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}

/* ===== HEADER ===== */
.header{position:sticky;top:0;z-index:50;background:rgba(245,252,255,.72);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid transparent;transition:background .3s, box-shadow .3s,box-shadow .3s}
.header.scrolled{background:rgba(255,255,255,.92);border-bottom-color:var(--line);box-shadow:0 10px 30px -22px rgba(11,51,69,.55)}
.header .bar{display:flex;align-items:center;gap:18px;height:76px}
.logo{font-family:var(--display);font-size:38px;color:var(--blue-700);letter-spacing:1px;line-height:1;display:inline-flex;align-items:center}
.logo-img{height:34px;width:auto;display:block}
.logo::after{display:none}
.nav{display:flex;align-items:center;gap:2px;margin-left:14px}
.nav a{position:relative;font-weight:600;font-size:14.5px;color:var(--navy);padding:9px 14px;border-radius:999px;transition:.25s;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;background:var(--blue);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav a:hover{color:var(--accent-600)}
.nav a:hover::after{transform:scaleX(1)}
.nav a.active{background:var(--blue-600);color:#fff}
.nav a.active::after{display:none}
.header .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.header .right .btn{padding:12px 24px;font-size:14.5px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2.5px;background:var(--navy);border-radius:2px}
.m-nav{position:fixed;inset:0;background:#fff;z-index:60;transform:translateX(100%);transition:transform .4s var(--ease);padding:90px 28px 40px;display:flex;flex-direction:column;gap:4px}
.m-nav.open{transform:translateX(0)}
.m-nav a{font-family:var(--display);font-size:30px;color:var(--navy);padding:14px 0;border-bottom:1px solid var(--line)}
.m-nav .close{position:absolute;top:24px;right:24px;font-size:34px;background:none;border:0;color:var(--navy);cursor:pointer}

/* ===== HERO ===== */
.banner{position:relative;overflow:hidden;background:
  radial-gradient(110% 85% at 90% -12%,#DCF3FE,transparent 60%),
  radial-gradient(95% 75% at -8% 112%,#E7F7FE,transparent 55%),
  var(--paper)}
.banner::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(83,197,250,.11) 1px,transparent 1.5px);background-size:26px 26px;-webkit-mask-image:radial-gradient(72% 62% at 70% 28%,#000,transparent 76%);mask-image:radial-gradient(72% 62% at 70% 28%,#000,transparent 76%);pointer-events:none}
.banner .container{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:50px;align-items:center;min-height:660px;padding:60px 26px 74px}
.banner-copy{position:relative;z-index:3}
.banner-copy .eyebrow{margin-bottom:20px}
.banner-copy h1{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.4px;line-height:.83;
  font-size:clamp(62px,8.8vw,108px);color:var(--navy);margin-bottom:14px}
.banner-copy h1 .bl{color:var(--blue-700);position:relative;display:inline-block}
.banner-copy h1 .bl::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.13em;background:var(--blue);opacity:.4;border-radius:3px}
.banner-copy .sub{font-size:clamp(18px,1.5vw,22px);color:var(--blue-900);font-weight:700;margin:8px 0 16px}
.banner-copy p{color:var(--muted-2);max-width:46ch;margin-bottom:32px;font-size:17px}
.banner-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.txtlink{font-weight:800;color:var(--blue-700);display:inline-flex;gap:8px;align-items:center;transition:gap .25s}
.txtlink:hover{gap:13px}

.banner-art{position:relative;z-index:2}
.banner-art::before{content:"";position:absolute;inset:-16px -16px 34px 30px;background:linear-gradient(150deg,var(--blue),var(--blue-700));border-radius:38px;z-index:-1;opacity:.16}
.banner-art .frame{position:relative;border-radius:34px;overflow:hidden;box-shadow:var(--shadow);border:6px solid #fff;rotate:1.2deg;transition:rotate .55s var(--ease)}
.banner-art:hover .frame{rotate:0deg}
.banner-art .frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(11,51,69,.07);border-radius:inherit;pointer-events:none}
.banner-art .ph{aspect-ratio:4/4.4}
.banner-art .frame img{width:100%;height:100%;object-fit:cover;display:block}
.banner-badge{position:absolute;left:-24px;bottom:46px;background:#fff;border-radius:20px;padding:16px 22px;
  box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:14px;z-index:4}
.banner-badge .bnum{font-family:var(--display);font-size:44px;color:var(--blue-700);line-height:.8}
.banner-badge .blbl{font-size:12.5px;color:var(--muted);font-weight:600;max-width:12ch}

/* ===== placeholder (fallback for any image-less slot) ===== */
.ph{position:relative;background:linear-gradient(135deg,var(--blue-100),#fff 60%,var(--blue-50));
  border:1px dashed #B9E3F6;display:flex;align-items:center;justify-content:center;flex-direction:column;
  color:var(--blue-700);text-align:center;overflow:hidden}
.ph .ph-ic{width:48px;height:48px;border-radius:13px;background:var(--blue-700);display:grid;place-items:center;margin-bottom:12px}
.ph .ph-ic svg{width:24px;height:24px;fill:#fff}
.ph .ph-name{font-weight:800;font-size:13px;letter-spacing:.3px}
.ph .ph-tag{font-size:12px;color:var(--muted);margin-top:3px}

/* ===== STAT BAND (navy anchor) ===== */
.m-stats{position:relative;padding:96px 0;color:#fff;overflow:hidden;background:
  radial-gradient(120% 130% at 88% -10%,#0B4A66,transparent 55%),
  linear-gradient(175deg,var(--navy),var(--navy-deep))}
.m-stats::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.5px);background-size:24px 24px;opacity:.7;pointer-events:none}
.m-stats .flower-deco{color:rgba(255,255,255,.06)}
.m-stats .sec-head{text-align:left;max-width:580px;margin:0 0 50px}
.m-stats .eyebrow{color:var(--blue-200)}
.m-stats .eyebrow .fl{color:var(--accent)}
.m-stats .h-sec{color:#fff}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;z-index:2}
.stat{text-align:left;position:relative;padding:6px 26px}
.stat:first-child{padding-left:0}
.stat .num{font-family:var(--display);font-size:clamp(40px,5vw,66px);color:#fff;line-height:.82;letter-spacing:.5px}
.stat .lbl{font-weight:700;color:#9EC9DD;margin-top:12px;font-size:14.5px;letter-spacing:.3px}
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:8%;height:84%;width:1px;background:rgba(255,255,255,.14)}
/* stats: user's transparent PNG (mirrored) overlaid on the navy background */
.m-stats{min-height:74vh;display:flex;align-items:center}
.stats-img{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;transform:scaleX(-1) translateY(24%);z-index:1;pointer-events:none}
.m-stats .container{position:relative;z-index:2;width:100%}
.m-stats .sec-head{max-width:600px}
.stats-row{max-width:620px}
.stat{padding:6px 16px}
.stat .num{font-size:clamp(28px,3.2vw,46px)}

/* ===== ABOUT / EVP (editorial split) ===== */
.m-about{padding:112px 0;position:relative;overflow:hidden}
.about-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:72px;align-items:center}
.m-about .ph{position:relative;aspect-ratio:4/3.6;border-radius:28px;box-shadow:var(--shadow);z-index:1}
.about-copy .eyebrow{margin-bottom:14px}
.about-copy h2{text-align:left}
.about-copy .h-sec{font-size:clamp(40px,4.8vw,66px);text-align:left}
.about-copy p{color:var(--muted-2);margin-top:20px;font-size:17px;max-width:52ch}

/* ===== VALUES (numbered cards) ===== */
.m-values{position:relative;padding:110px 0;background:linear-gradient(180deg,#fff,var(--blue-50));overflow:hidden}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:val}
.value{position:relative;background:#fff;border-radius:24px;padding:34px 28px 30px;text-align:left;border:0;
  counter-increment:val;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s, box-shadow .35s}
.value::before{content:counter(val,decimal-leading-zero);position:absolute;top:16px;right:22px;font-family:var(--display);font-size:46px;color:var(--blue-100);line-height:1;transition:color .35s}
.value::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--blue),var(--blue-700));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.value:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.value:hover::before{color:var(--accent-line)}
.value:hover::after{transform:scaleX(1)}
.value .ic{width:58px;height:58px;border-radius:16px;background:var(--blue-50);display:grid;place-items:center;margin:0 0 20px;transition:.35s}
.value:hover .ic{background:var(--accent)}
.value .ic svg{width:28px;height:28px;fill:var(--blue-700);transition:.35s}
.value:hover .ic svg{fill:#fff}
.value h3{font-family:var(--display);font-size:26px;color:var(--navy);letter-spacing:.4px;margin-bottom:8px}
.value p{color:var(--muted);font-size:14.5px}

/* ===== WHY / BENEFITS (bento) ===== */
.m-why{padding:110px 0;position:relative}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(158px,1fr);gap:18px}
.benefit{position:relative;background:#fff;border:0;border-radius:20px;padding:28px 26px;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s, box-shadow .3s}
.benefit:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);box-shadow:0 22px 44px -22px rgba(18,103,142,.55)}
.benefit .bic{width:52px;height:52px;border-radius:14px;background:var(--blue-50);display:grid;place-items:center;margin-bottom:16px}
.benefit .bic svg{width:26px;height:26px;fill:var(--blue-700)}
.benefit b{display:block;color:var(--navy);font-size:18px;margin-bottom:6px;font-weight:800}
.benefit span{color:var(--muted);font-size:14.5px}

/* ===== PATHS ===== */
.m-paths{position:relative;padding:110px 0;background:linear-gradient(180deg,var(--blue-50),#fff);overflow:hidden}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.path{position:relative;border-radius:30px;overflow:hidden;min-height:460px;display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.path .ph{position:absolute;inset:0;border:0;border-radius:0;z-index:-2}
.path .ph img{transition:transform .9s var(--ease)}
.path:hover .ph img{transform:scale(1.06)}
.path::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,33,44,.05) 28%,rgba(8,33,44,.9))}
.path .pbody{padding:40px;width:100%}
.path .ptag{display:inline-block;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);padding:7px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.25);
  font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:16px}
.path h3{font-family:var(--display);font-size:clamp(38px,3.8vw,54px);letter-spacing:.5px;line-height:.9}
.path p{margin:12px 0 22px;max-width:40ch;color:#DBEDF6;font-size:15px}
.path .plink{display:inline-flex;align-items:center;gap:9px;font-weight:800;background:#fff;color:var(--blue-700);padding:13px 26px;border-radius:999px;transition:gap .25s,transform .25s}
.path:hover .plink{gap:15px;transform:translateY(-2px)}

/* ===== CTA (feedback slide 29 — GIỐNG HỆT trang chủ) =====
   Section CTA mang dải gradient chuyển từ trắng/xanh rất nhạt xuống navy đậm bằng đúng
   màu footer, nên CTA và footer nối liền thành một khối. CTA là 1 KHUNG CHỮ NHẬT NỔI. */
/* dải gradient giữ nguyên hướng/độ dài, chỉ đổi sang tông xanh YOLA tươi:
   đáy dải = #0C4468 = đúng màu .footer để 2 khối vẫn nối liền */
.m-cta{padding:78px 0 84px;background:linear-gradient(180deg,#F7FCFF 0%,#DDF1FC 16%,#4FBEEE 46%,#2E7FC4 72%,#2B5B9E 100%)}
.m-cta .container{max-width:var(--container);padding:0 26px}
.cta-box{position:relative;overflow:hidden;border-radius:30px;text-align:center;color:#fff;
  background:radial-gradient(130% 140% at 10% 0%,#7DD6FF,#4BBEF3 48%,var(--blue-600));padding:64px 24px 68px;
  box-shadow:0 48px 90px -40px rgba(6,38,54,.75),0 0 0 1px rgba(255,255,255,.22) inset}
.cta-box::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.5px);background-size:24px 24px;pointer-events:none}
.cta-box .flower-deco{position:absolute;color:rgba(255,255,255,.14);z-index:1}
.cta-box .flower-deco circle{fill:currentColor}
.cta-box>*{position:relative;z-index:2}
.cta-box .eyebrow{color:#CFF0FF}
.cta-box .eyebrow .fl{color:var(--accent)}
.cta-box h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,2.6vw,40px);letter-spacing:.6px;line-height:1}
.cta-box p{margin:18px auto 34px;max-width:50ch;color:#EAF8FF}
.cta-box .btn-primary{background:#fff;color:var(--blue-700);box-shadow:0 20px 44px -18px rgba(0,0,0,.4)}
.cta-box .btn-primary:hover{background:var(--accent);color:#fff}
.cta-gif{position:absolute;bottom:0;left:62%;width:175px;height:auto;z-index:3;pointer-events:none}
@media(max-width:620px){.m-cta{padding:56px 0 60px}.cta-box{border-radius:22px;padding:52px 20px 56px}.cta-gif{width:104px;left:auto;right:10px}}

/* --- nối liền section phía trên với dải gradient CTA (bỏ đường phân cách) ---
   Đáy section trước là #F2FBFF+tint còn .m-cta mở đầu #F7FCFF -> lệch 5-11 đơn vị và lệch
   không đều theo chiều ngang (chỗ có blob xanh lệch nhiều hơn), nên không vá bằng cách khớp
   1 mã màu được. Giải pháp: 120px đầu của .m-cta mờ dần từ trong suốt -> nền section trên lộ
   qua và hoà dần vào dải. Đúng cho mọi trang, không phụ thuộc section đứng trước màu gì.
   margin-top âm + padding-top bù đúng bấy nhiêu nên chiều cao layout không đổi. */
@supports ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  .m-cta{--cta-fade:120px;position:relative;z-index:1;
    margin-top:calc(var(--cta-fade) * -1);
    padding-top:calc(78px + var(--cta-fade));
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--cta-fade));
            mask-image:linear-gradient(180deg,transparent 0,#000 var(--cta-fade))}
  @media(max-width:620px){.m-cta{--cta-fade:80px;padding:calc(56px + var(--cta-fade)) 0 60px}}
}


/* ===== FOOTER ===== */
/* feedback slide 25: nền footer đang gần như đen -> đổi sang xanh đậm */
/* feedback slide 29: footer phải giống hệt nhau trên cả web — trước đây trang chủ dùng
   var(--navy-deep) còn các trang con dùng #0C3A54 nên 2 bên lệch màu. */
/* đổi sang xanh tươi #0C4468, khớp đúng stop cuối của .m-cta ở CẢ index.html lẫn file này */
.footer{background:#2B5B9E;color:#CFE7F2;padding:64px 0 28px}
.foot-main{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.foot-main .logo-img{height:40px;filter:brightness(0) invert(1)}
.foot-divider{width:1px;height:46px;background:rgba(255,255,255,.18)}
.foot-co b{display:block;color:#fff;font-weight:800;font-size:15px;letter-spacing:.3px}
.foot-co span{color:#C8DCEF;font-size:13.5px}
.foot-social{margin-left:auto;display:flex;align-items:center;gap:12px;font-weight:700;color:#fff;font-size:14px}
.foot-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.25s}
.foot-social a:hover{background:var(--accent);transform:translateY(-3px)}
.foot-social svg{width:18px;height:18px;fill:#fff}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:#C8DCEF;font-size:13.5px;flex-wrap:wrap;gap:10px}
.foot-bottom a{color:#C8DCEF}.foot-bottom a:hover{color:#fff}

/* ===== floating ===== */
.group-contact{position:fixed;right:22px;bottom:22px;z-index:40;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.group-contact a{width:54px;height:54px;border-radius:50%;background:var(--blue-600);display:grid;place-items:center;box-shadow:var(--shadow);transition:.25s;color:#fff}
.group-contact a:hover{transform:scale(1.08) translateY(-2px);background:linear-gradient(135deg,var(--accent),var(--accent-600))}
.group-contact svg{width:24px;height:24px;fill:#fff}
.group-contact .apply{width:auto;border-radius:999px;padding:0 24px;font-weight:800;color:#fff;gap:8px;height:54px;background:var(--blue-600);box-shadow:var(--shadow)}
.group-contact .apply:hover{background:linear-gradient(135deg,var(--accent),var(--accent-600))}

.ph.has-img{border:0;background:none;padding:0}
.ph.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ===== reveal / motion ===== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-visible{opacity:1;transform:none}
.value:nth-child(2),.benefit:nth-child(2){transition-delay:.06s}
.value:nth-child(3),.benefit:nth-child(3){transition-delay:.12s}
.value:nth-child(4),.benefit:nth-child(4){transition-delay:.18s}
.benefit:nth-child(5){transition-delay:.24s}.benefit:nth-child(6){transition-delay:.3s}

/* ===== ENHANCEMENTS ===== */
/* section order incl. values marquee */
.banner{order:1}.m-about{order:2}.m-stats{order:3}.vmarquee{order:4}.m-why{order:5}.m-paths{order:6}.m-cta{order:7}

/* About: stacked editorial - wide image banner on top, centered copy below */
/* About: scroll zoom - image center->full first, then centered text fades in */
.m-about{height:240vh;padding:0;overflow:visible;--p:0;--pz:0;--pt:0}
.about-wrap{max-width:none;padding:0;position:sticky;top:0;height:100vh;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;place-items:center;overflow:hidden}
.about-wrap>*{grid-area:1/1/2/2}
.m-about .ph{aspect-ratio:auto;box-shadow:0 40px 90px -42px rgba(8,33,44,.5);
  width:calc(46vw + 54vw*var(--pz));height:calc(40vh + 60vh*var(--pz));
  border-radius:calc(34px - 34px*var(--pz));z-index:1}
.m-about .ph::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;opacity:var(--pt);
  background:linear-gradient(180deg,rgba(8,33,44,.32),rgba(8,33,44,.64))}
.about-copy{position:relative;z-index:3;align-self:start;width:min(760px,88vw);margin:50vh auto 0;text-align:center;color:#fff;
  opacity:var(--pt);clip-path:inset(0 0 calc((1 - var(--pt))*100%) 0)}
.about-head{margin-bottom:18px}
.about-copy .eyebrow{justify-content:center;color:#CFF0FF}
.about-copy .eyebrow .fl{color:var(--accent)}
.about-copy h2,.about-copy .h-sec{text-align:center;color:#fff;font-size:clamp(40px,5.2vw,78px);margin:0;line-height:.92}
.about-text{display:block;margin-top:20px;text-align:center}
.about-text p{margin:0 auto;max-width:62ch;color:#EEF8FC;font-size:16.5px}
.about-text p+p{margin-top:14px}

/* Core-values marquee band */
.vmarquee{background:linear-gradient(90deg,var(--blue-700),var(--blue-600),var(--blue-700));overflow:hidden;padding:16px 0;color:#fff}
.vmarquee .track{display:flex;width:max-content;will-change:transform;animation:marquee 34s linear infinite}
.vmarquee .item{display:inline-flex;align-items:center;gap:18px;padding:0 26px;font-family:var(--display);font-size:27px;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap}
.vmarquee .item .fl{width:19px;height:19px;color:var(--accent)}
.vmarquee:hover .track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.benefit{overflow:hidden}
.benefit>*{position:relative;z-index:2}
/* motion trimmed per feedback: no pointer-spotlight, no floating/spinning decorations */

/* Why YOLA: central model with floating cards (3 left / 2 right) */
.why-stage{position:relative;max-width:1080px;height:600px;margin:-30px auto 0;overflow:hidden}
.why-model{position:absolute;left:50%;top:8%;bottom:auto;transform:translateX(-50%);height:134%;width:auto;z-index:1;pointer-events:none;filter:drop-shadow(0 28px 46px rgba(11,51,69,.22))}
.why-card{position:absolute;width:286px;background:#fff;border-radius:18px;padding:20px 22px;box-shadow:0 28px 58px -30px rgba(11,51,69,.5);z-index:2;transition:transform .3s var(--ease),box-shadow .3s}
.why-card:hover{transform:translateY(-6px);box-shadow:0 36px 66px -28px rgba(11,51,69,.62)}
.why-card .wic{width:34px;height:34px;border-radius:9px;background:var(--blue-50);display:grid;place-items:center;margin-bottom:12px}
.why-card .wic .fl{width:18px;height:18px;color:var(--accent)}
.why-card b{display:block;font-family:var(--display);font-size:19px;letter-spacing:.4px;text-transform:uppercase;color:var(--navy);margin-bottom:7px;line-height:1.02}
.why-card .wd{font-size:12.5px;color:var(--muted);line-height:1.55}
.wc1{top:24px;left:72px}
.wc3{top:198px;left:0}
.wc4{top:372px;left:212px}
.wc2{top:54px;right:22px}
.wc5{top:316px;right:56px}

/* responsive */
@media(max-width:980px){
  .nav,.header .lang{display:none}.burger{display:flex}
  .banner .container{grid-template-columns:1fr;text-align:center;min-height:auto;padding-top:40px;gap:32px}
  .banner-copy .eyebrow,.banner-actions{justify-content:center}
  .banner-copy p{margin:0 auto 30px}
  .banner-art{max-width:440px;width:100%;margin:6px auto 0}.banner-badge{left:0}
  .banner-art .frame{rotate:0deg}
  .m-stats .sec-head{text-align:center;max-width:none;margin:0 auto 40px}
  .m-stats .eyebrow{justify-content:center}
  .m-stats{min-height:auto;display:block}
  .stats-img{display:none}
  .m-stats .sec-head{max-width:none}
  .stats-row{grid-template-columns:repeat(3,1fr);gap:18px 0;max-width:none}
  .stat{text-align:center;padding:6px 10px}.stat:first-child{padding-left:10px}
  .stat .num{font-size:clamp(32px,5.4vw,52px)}
  .about-copy{grid-template-columns:1fr;gap:26px}
  .about-head{text-align:center}
  .about-copy h2,.about-copy .h-sec,.about-copy .eyebrow{text-align:center;justify-content:center}
  .values-grid{grid-template-columns:1fr 1fr}
  .benefits{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .paths{grid-template-columns:1fr}
  .why-stage{height:auto;max-width:560px;display:flex;flex-direction:column;gap:16px;margin-top:8px}
  .why-model{display:none}
  .why-card{position:static;width:auto}
  .wc1,.wc2,.wc3,.wc4,.wc5{inset:auto}
}
@media(max-width:620px){
  .values-grid,.benefits,.stats-row{grid-template-columns:1fr}
  .stat::after{display:none!important}.foot-social{margin-left:0}.foot-bottom{justify-content:center;text-align:center}
  .h-sec{font-size:clamp(40px,11vw,58px)}
  .header .right .btn{display:none}
  .banner-copy h1{font-size:clamp(38px,10vw,56px);letter-spacing:0}
  .banner .container{padding-left:20px;padding-right:20px}
  .vmarquee .item{font-size:23px}
  .about-text{grid-template-columns:1fr;gap:14px;text-align:center}
  .about-copy h2,.about-copy .h-sec{font-size:clamp(34px,9vw,52px)}
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .banner-art .frame,.banner-art:hover .frame{rotate:0deg!important}
  .path .ph img,.path:hover .ph img{transform:none!important}
  .btn,.value,.benefit,.path .plink,.nav a::after{transition:none!important}
  .flower-deco,.banner-badge{animation:none!important}
  .vmarquee .track{animation:none!important}
  .benefit::after{display:none}
  .m-about{height:auto!important;--pz:1;--pt:1}
  .about-wrap{position:static!important;height:auto!important;display:block!important;padding:0!important;background:var(--navy-deep)!important}
  .m-about .ph{width:100%!important;height:auto!important;aspect-ratio:16/8!important;border-radius:0!important}
  .m-about .ph::after{opacity:1!important}
  .about-copy{opacity:1!important;transform:none!important;padding:56px 24px!important;margin:0 auto!important}
}

/* ===================== GENERIC PAGES (about / life / teacher / staff) ===================== */
.page{display:block}
.page-hero{position:relative;overflow:hidden;text-align:center;padding:140px 0 88px;
  background:radial-gradient(110% 80% at 85% -10%,#DCF3FE,transparent 60%),radial-gradient(95% 70% at -5% 110%,#E7F7FE,transparent 55%),var(--paper)}
.page-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(83,197,250,.10) 1px,transparent 1.5px);background-size:26px 26px;-webkit-mask-image:radial-gradient(70% 70% at 50% 35%,#000,transparent 75%);mask-image:radial-gradient(70% 70% at 50% 35%,#000,transparent 75%);pointer-events:none}
.page-hero .container{position:relative;z-index:2;max-width:1060px}
.page-hero .h-sec{font-size:clamp(38px,4.4vw,68px);text-wrap:balance}
.page-hero p{color:var(--muted-2);font-size:clamp(16px,1.3vw,19px);margin:18px auto 0;max-width:62ch}
.page-hero .hero-actions{margin-top:32px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

.sec{padding:96px 0;position:relative;overflow:hidden}
.sec.alt{background:var(--blue-50)}
.sec.tight{padding:64px 0}
.sec.navy{color:#fff;background:radial-gradient(120% 130% at 88% -10%,#0B4A66,transparent 55%),linear-gradient(175deg,var(--navy),var(--navy-deep))}
.sec.navy .h-sec{color:#fff}.sec.navy .eyebrow{color:var(--blue-200)}.sec.navy .eyebrow .fl{color:var(--accent)}.sec.navy .lead{color:#CFE7F2}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.copy h2{text-align:left}.copy .h-sec{text-align:left;font-size:clamp(38px,4.4vw,62px)}
.copy .eyebrow{margin-bottom:12px}
.copy p{color:var(--muted-2);font-size:17px;margin-top:18px;max-width:54ch}

/* image placeholder (use until real photos/videos are provided) */
.imgph{position:relative;background:linear-gradient(135deg,var(--blue-100),#fff 60%,var(--blue-50));border:1.5px dashed #B9E3F6;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--blue-700);overflow:hidden;text-align:center;aspect-ratio:16/11}
.imgph .ic{width:46px;height:46px;border-radius:13px;background:var(--blue-700);display:grid;place-items:center;margin-bottom:10px}
.imgph .ic svg{width:24px;height:24px;fill:#fff}
.imgph b{font-size:13px;font-weight:800;letter-spacing:.3px}.imgph span{font-size:12px;color:var(--muted);margin-top:2px}
.imgph.tall{aspect-ratio:4/5}.imgph.wide{aspect-ratio:16/6}.imgph.sq{aspect-ratio:1/1}.imgph.full{aspect-ratio:auto;height:100%}

/* info card (vision / mission / values) */
.icard{background:#fff;border:0;border-radius:22px;padding:32px 30px;box-shadow:0 14px 34px -20px rgba(18,103,142,.45);transition:transform .3s var(--ease),box-shadow .3s, box-shadow .3s}
.icard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.icard .ic{width:58px;height:58px;border-radius:16px;background:var(--blue-50);display:grid;place-items:center;margin-bottom:18px;transition:.3s}
.icard:hover .ic{background:var(--accent)}
.icard .ic svg{width:28px;height:28px;fill:var(--blue-700);transition:.3s}.icard:hover .ic svg{fill:#fff}
.icard h3{font-family:var(--display);font-size:26px;color:var(--navy);letter-spacing:.4px;margin-bottom:10px}
.icard p{color:var(--muted);font-size:15px}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.gallery .imgph{aspect-ratio:auto;height:100%;border-radius:20px}
.g-tall{grid-row:span 2}.g-wide{grid-column:span 2}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:#fff;border:0;border-radius:22px;padding:30px 28px;box-shadow:0 14px 34px -20px rgba(18,103,142,.45);display:flex;flex-direction:column}
.quote .qmark{font-family:var(--display);font-size:54px;line-height:.6;color:var(--blue-200)}
.quote p{color:var(--muted-2);font-size:15.5px;line-height:1.62;margin-top:8px;flex:1}
.quote .qby{display:flex;align-items:center;gap:12px;margin-top:20px}
.quote .qav{width:46px;height:46px;border-radius:50%;background:var(--blue-100);display:grid;place-items:center;color:var(--blue-700);font-weight:800;font-family:var(--display);font-size:20px}
.quote .qn b{display:block;color:var(--navy);font-size:14.5px}.quote .qn span{color:var(--muted);font-size:13px}

/* job / position list */
.jobs{display:flex;flex-direction:column;gap:14px;max-width:900px;margin:0 auto}
.job{display:flex;align-items:center;gap:20px;background:#fff;border:0;border-radius:18px;padding:22px 26px;transition:.25s}
.job:hover{transform:translateX(4px);box-shadow:var(--shadow-sm)}
.job .jt{flex:1}
.job .jt b{display:block;font-size:18px;color:var(--navy);font-weight:800}
.job .jt span{color:var(--muted);font-size:13.5px}
.job .jtag{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--blue-700);background:var(--blue-50);padding:6px 12px;border-radius:999px;white-space:nowrap}
.job .japply{font-weight:800;color:var(--blue-700);white-space:nowrap;display:inline-flex;gap:7px;align-items:center}.job:hover .japply{gap:11px}

/* role cards (Expat / Vietnamese / Teaching Assistant) */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.role{position:relative;border-radius:24px;overflow:hidden;min-height:360px;display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.role .imgph{position:absolute;inset:0;border:0;border-radius:0;z-index:-2;aspect-ratio:auto}
.role::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top right,rgba(8,33,44,.94) 0%,rgba(8,33,44,.55) 45%,rgba(8,33,44,.08) 80%)}
.role .rb .japply{color:#fff;margin-top:14px}
.role .rb .japply .arr{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px}
.role .rb{padding:28px;width:100%}
.role .rtag{display:inline-block;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);padding:6px 13px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:12px}
.role h3{font-family:var(--display);font-size:30px;letter-spacing:.4px;line-height:.95}
.role p{color:#DBEDF6;font-size:14px;margin-top:8px}

/* generic CTA band (full-width) */
.ctaband{position:relative;overflow:hidden;color:#fff;text-align:center;padding:104px 24px;
  background:radial-gradient(120% 130% at 0% 0%,var(--blue),var(--blue-700) 55%,var(--navy))}
.ctaband::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.5px);background-size:24px 24px;pointer-events:none}
.ctaband>*{position:relative;z-index:2}
.ctaband .eyebrow{color:#CFF0FF}.ctaband .eyebrow .fl{color:var(--accent)}
.ctaband h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,2.6vw,40px);letter-spacing:.6px;line-height:1}
.ctaband p{margin:16px auto 30px;max-width:52ch;color:#EAF8FF}
.ctaband .btn-primary{background:#fff;color:var(--blue-700)}.ctaband .btn-primary:hover{background:linear-gradient(135deg,var(--accent),var(--accent-600));color:#fff}

@media(max-width:980px){
  .grid-2{grid-template-columns:1fr;gap:36px}.copy .h-sec,.copy h2,.copy .eyebrow{text-align:center}.copy p{margin-left:auto;margin-right:auto}
  .grid-3,.grid-4,.quotes,.roles{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
  .page-hero{padding:120px 0 70px}
}
@media(max-width:620px){
  .grid-3,.grid-4,.quotes,.roles,.gallery{grid-template-columns:1fr}
  .gallery .g-wide{grid-column:auto}.gallery .g-tall{grid-row:auto}
  .job{flex-wrap:wrap;gap:12px}
  .sec{padding:64px 0}
}

/* ===================== CRAFT-SPECIFIC COMPONENTS ===================== */
/* value-icon row (About values / Teacher mini-values) */
.vrow{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;margin-top:34px}
.vrow .vi{display:flex;flex-direction:column;align-items:center;gap:9px;width:150px;text-align:center}
.vrow .vi .ic{width:54px;height:54px;border-radius:15px;background:var(--blue-50);display:grid;place-items:center;transition:.3s}
.vrow .vi:hover .ic{background:var(--accent)}
.vrow .vi .ic svg{width:26px;height:26px;fill:var(--blue-700);transition:.3s}.vrow .vi:hover .ic svg{fill:#fff}
.vrow .vi b{font-size:13px;color:var(--navy);text-transform:uppercase;letter-spacing:.5px}

/* mission/vision big duo */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mv .icard .ic{background:var(--blue-700)}.mv .icard .ic svg{fill:#fff}

/* blog / article cards (Life at YOLA) */
.cats{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.cat{display:inline-flex;align-items:center;gap:9px;background:var(--blue-100);border:0;border-radius:999px;padding:12px 19px;font-weight:700;font-size:14px;color:var(--blue-700);transition:.25s;cursor:pointer}
.cat:hover,.cat.on{background:var(--accent);color:#fff}
.cat svg{width:18px;height:18px;fill:currentColor}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:380px;border-radius:22px;overflow:hidden;color:#fff;isolation:isolate;background:var(--navy);padding:28px;transition:transform .3s var(--ease),box-shadow .3s}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post .imgph{position:absolute;inset:0;border:0;border-radius:0;aspect-ratio:auto;margin:0;z-index:0}
.post::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top right,rgba(8,33,44,.95) 0%,rgba(8,33,44,.62) 42%,rgba(8,33,44,.08) 78%)}
.post .ptag{position:relative;z-index:2;align-self:flex-start;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#fff;background:var(--blue-700);padding:6px 13px;border-radius:999px;margin-bottom:14px}
.post h3{position:relative;z-index:2;font-size:22px;color:#fff;font-weight:800;line-height:1.26;margin-bottom:8px;max-width:24ch}
.post p{position:relative;z-index:2;font-size:14px;color:#DCEDF5;max-width:42ch}
.post .more{position:relative;z-index:2;margin-top:18px;font-weight:800;color:#fff;display:inline-flex;gap:11px;align-items:center;font-size:14px}
.post .more .arr{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;transition:transform .25s}
.post:hover .more .arr{transform:translateX(3px)}
.post.feat{grid-column:span 2;min-height:500px}
.post.feat h3{font-size:30px;font-family:var(--display);letter-spacing:.4px}

/* job search bar + blue job cards (Staff) */
.searchbar{max-width:900px;margin:0 auto 40px;background:#fff;border:0;border-radius:20px;padding:18px;box-shadow:var(--shadow-sm)}
.searchbar .sinput{display:flex;align-items:center;gap:10px;border:0;border-radius:12px;padding:13px 16px}
.searchbar .sinput svg{width:20px;height:20px;fill:var(--muted)}
.searchbar .sinput input{border:0;outline:0;flex:1;font-family:var(--body);font-size:15px;color:var(--ink);background:none}
.searchbar .srow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.searchbar select{border:0;border-radius:12px;padding:13px 14px;font-family:var(--body);font-size:14px;color:var(--navy);background:#fff;cursor:pointer}
.searchbar .sbtn{width:100%;margin-top:12px;justify-content:center}
.joblist{display:flex;flex-direction:column;gap:16px;max-width:900px;margin:0 auto}
.jobcard{display:block;background:radial-gradient(120% 140% at 100% 0%,var(--blue),transparent 60%),linear-gradient(120deg,var(--blue-600),var(--blue-700));color:#fff;border-radius:16px;padding:22px 28px;transition:.25s}
.jobcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.jobcard h3{font-size:21px;font-weight:800;margin-bottom:8px;letter-spacing:.2px}
.jobcard .addr{font-size:12.5px;color:#DBF1FB;line-height:1.55}
.jobcard .meta{font-size:13px;font-weight:800;margin-top:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jobcard .meta .jd-go{margin-left:auto;color:#fff;background:rgba(255,255,255,.16);padding:6px 14px;border-radius:999px;transition:.2s}
.jobcard:hover .meta .jd-go{background:var(--accent);color:#fff}

@media(max-width:980px){.mv{grid-template-columns:1fr}.posts{grid-template-columns:1fr 1fr}.post.feat{grid-column:span 2}}
@media(max-width:620px){.posts{grid-template-columns:1fr}.post.feat{grid-column:auto}.vrow{gap:18px}.vrow .vi{width:46%}}

/* ===================== IMAGE-FORWARD LAYOUTS (more visuals, no side-by-side) ===================== */
/* asymmetric image gallery / bento */
.imgbento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:175px;gap:14px}
.imgbento .imgph{aspect-ratio:auto;height:100%;border-radius:18px;margin:0}
.imgbento .b-tall{grid-row:span 2}
.imgbento .b-wide{grid-column:span 2}
.imgbento .b-big{grid-column:span 2;grid-row:span 2}

/* hero image trio (staggered) */
.heroshots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:980px;margin:46px auto 0}
.heroshots .imgph{aspect-ratio:3/4;border-radius:22px}
.heroshots .imgph:nth-child(1){transform:translateY(14px)}
.heroshots .imgph:nth-child(2){transform:translateY(-14px)}
.heroshots .imgph:nth-child(3){transform:translateY(14px)}

/* full-width single image band */
.bandimg{position:relative;width:100%}
.bandimg .imgph{border-radius:0;aspect-ratio:auto;height:clamp(320px,40vw,560px)}

/* photo strip: equal tiles edge to edge */
.photostrip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.photostrip .imgph{aspect-ratio:1/1;border-radius:16px}

/* image feature cards (image on top, caption below) */
.icards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:320px;border-radius:20px;overflow:hidden;color:#fff;isolation:isolate;background:var(--navy);transition:transform .3s var(--ease),box-shadow .3s}
.fcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.fcard .imgph{position:absolute;inset:0;border:0;border-radius:0;aspect-ratio:auto;margin:0;z-index:0}
.fcard::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top right,rgba(8,33,44,.92) 0%,rgba(8,33,44,.5) 46%,rgba(8,33,44,.05) 80%)}
.fcard .fb{position:relative;z-index:2;padding:24px 26px}
.fcard .fb .ic{width:48px;height:48px;border-radius:13px;background:rgba(255,255,255,.2);display:grid;place-items:center;margin:0 0 14px;border:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.fcard .fb .ic svg{width:23px;height:23px;fill:#fff}
.fcard h3{font-family:var(--display);font-size:25px;color:#fff;letter-spacing:.4px;margin-bottom:7px}
.fcard p{font-size:14px;color:#DCEDF5}

/* testimonial with photo */
.quote .qav.ph-av{background:linear-gradient(135deg,var(--blue-100),var(--blue-50));border:1.5px dashed #B9E3F6;color:var(--blue-700);font-size:11px;font-weight:800}

@media(max-width:980px){
  .imgbento{grid-template-columns:repeat(2,1fr)}
  .heroshots{grid-template-columns:repeat(3,1fr);gap:12px}
  .photostrip{grid-template-columns:repeat(3,1fr)}
  .icards{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .imgbento{grid-template-columns:1fr 1fr;grid-auto-rows:140px}.imgbento .b-big{grid-column:span 2}
  .heroshots{max-width:420px}.heroshots .imgph{aspect-ratio:1/1}
  .photostrip{grid-template-columns:1fr 1fr}.icards{grid-template-columns:1fr}
}

/* filled image placeholder (real photo as cover background) */
.imgph.filled{border:0;background-size:cover;background-position:center;background-color:var(--blue-100)}
.imgph.filled>*{display:none!important}

/* ===================== REFINED / COMPACT (recruitment sub-pages only; .page = not Home) ===================== */
.page-hero{padding:100px 0 52px}
.page-hero .h-sec{font-size:clamp(32px,3.8vw,54px)}
.page-hero p{font-size:clamp(14.5px,1.05vw,16.5px);margin-top:14px;max-width:56ch}
.page-hero .hero-actions{margin-top:26px}
.page-hero .heroshots{max-width:660px;gap:14px;margin-top:34px}
.page-hero .heroshots .imgph{aspect-ratio:1/1;border-radius:14px}
.page-hero .heroshots .imgph:nth-child(1),.page-hero .heroshots .imgph:nth-child(2),.page-hero .heroshots .imgph:nth-child(3){transform:none}

.page .sec{padding:64px 0}
.page .sec.tight{padding:44px 0}
.page .sec-head{margin-bottom:36px;max-width:680px}
.page .sec-head .h-sec,.page .copy .h-sec{font-size:clamp(26px,3vw,40px)}
.page .lead{font-size:15px;margin-top:10px}
.page .eyebrow{font-size:11px;letter-spacing:2px;margin-bottom:11px}

.page .grid-2{gap:40px}
.page .grid-3,.page .grid-4{gap:18px}

/* compact image gallery */
.page .imgbento{grid-auto-rows:124px;gap:12px}
.page .imgbento .imgph{border-radius:14px}

/* compact overlay stories (keep style, smaller) */
.page .posts{grid-template-columns:repeat(3,1fr);gap:18px}
.page .post{min-height:240px;border-radius:16px;padding:20px}
.page .post.feat{grid-column:span 1;min-height:240px}
.page .post.feat h3{font-size:17px;font-family:var(--body);letter-spacing:0}
.page .post::after{background:linear-gradient(to top,rgba(8,33,44,.9) 4%,rgba(8,33,44,.42) 50%,transparent 84%)}
.page .post .ptag{font-size:10px;padding:4px 10px;margin-bottom:9px}
.page .post h3{font-size:16.5px;line-height:1.3;margin-bottom:6px;max-width:none}
.page .post p{font-size:12.5px;max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.page .post .more{font-size:12.5px;margin-top:12px;gap:9px}
.page .post .more .arr{width:24px;height:24px;font-size:11px}

/* compact feature cards */
.page .fcard{min-height:214px;border-radius:16px}
.page .fcard .fb{padding:20px}
.page .fcard .fb .ic{width:40px;height:40px;border-radius:11px;margin-bottom:10px}
.page .fcard .fb .ic svg{width:20px;height:20px}
.page .fcard h3{font-size:18px}
.page .fcard p{font-size:13px}

/* compact role cards */
.page .role{min-height:250px;border-radius:16px}
.page .role .rb{padding:22px}
.page .role .rtag{font-size:10px;padding:5px 11px;margin-bottom:10px}
.page .role h3{font-size:22px}
.page .role p{font-size:12.5px}
.page .role .rb .japply{font-size:12.5px;margin-top:12px}
.page .role .rb .japply .arr{width:24px;height:24px;font-size:11px}

/* benefits: 6 ô đều nhau, dàn trải (theo feedback — bỏ ô lớn) */
.page .benefits{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(172px,1fr);gap:18px}
.page .benefit{padding:28px 26px;border-radius:18px;flex-direction:column;justify-content:flex-start;background:#fff;border:0;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .35s, box-shadow .3s,background .35s}
.page .benefit::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .35s;pointer-events:none;display:block;
  background:radial-gradient(120% 90% at 100% 0%,var(--accent-gold),transparent 58%),linear-gradient(150deg,var(--accent),var(--accent-600))}
.page .benefit>*{position:relative;z-index:2}
.page .benefit .bic{width:52px;height:52px;border-radius:14px;margin-bottom:15px;background:var(--accent-soft);transition:background .35s}
.page .benefit .bic svg{fill:var(--accent-600);width:25px;height:25px;transition:fill .35s}
.page .benefit b{font-size:18px;margin-bottom:6px;color:var(--navy);font-weight:800;transition:color .35s}
.page .benefit span{font-size:14px;color:var(--muted-2);transition:color .35s}
.page .benefit:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 26px 52px -26px rgba(222,111,22,.62)}
.page .benefit:hover::before{opacity:1}
.page .benefit:hover .bic{background:rgba(255,255,255,.24)}
.page .benefit:hover .bic svg{fill:#fff}
.page .benefit:hover b{color:#fff}
.page .benefit:hover span{color:#FFF3E6}
@media(max-width:900px){.page .benefits{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.page .benefits{grid-template-columns:1fr}}

/* compact values */
.page .values-grid{gap:16px}
.page .value{padding:24px 22px;border-radius:16px}
.page .value::before{font-size:36px;top:14px;right:18px}
.page .value .ic{width:46px;height:46px;border-radius:13px;margin-bottom:14px}
.page .value .ic svg{width:23px;height:23px}
.page .value h3{font-size:21px}
.page .value p{font-size:13px}

/* compact info cards (mission/vision) */
.page .icard{padding:26px 24px;border-radius:18px}
.page .icard .ic{width:48px;height:48px;border-radius:13px;margin-bottom:14px}
.page .icard h3{font-size:21px}
.page .icard p{font-size:14px}

/* compact testimonials */
.page .quotes{gap:18px}
.page .quote{padding:24px 22px;border-radius:16px}
.page .quote .qmark{font-size:40px}
.page .quote p{font-size:13.5px}
.page .quote .qav{width:42px;height:42px;font-size:17px}

/* compact job list / search */
.page .jobcard{padding:18px 22px;border-radius:14px}
.page .jobcard h3{font-size:18px;margin-bottom:6px}
.page .searchbar{padding:16px;border-radius:16px;margin-bottom:28px}
.page .vrow{gap:14px 26px;margin-top:28px}
.page .vrow .vi{width:138px}
.page .vrow .vi .ic{width:46px;height:46px}

/* compact CTA band */
.page .ctaband{padding:70px 24px}
.page .ctaband h2{font-size:clamp(30px,2.6vw,40px)}
.page .ctaband p{font-size:15px}

/* slightly tighter buttons on sub-pages */
.page .btn{padding:12px 26px;font-size:14.5px}

/* ===================== DESIGN SYSTEM TOKENS + CONSISTENT TYPE (all sub-pages) ===================== */
:root{
  --fs-hero:clamp(38px,5vw,72px);
  --fs-h2:clamp(30px,2.6vw,40px);
  --fs-h3:20px;
  --fs-h4:16px;
  --fs-lead:16px;
  --fs-body:14.5px;
  --fs-small:13px;
  --fs-eyebrow:12px;
}
.page .sec-head .h-sec,.page .copy .h-sec{font-size:var(--fs-h2)}
.page .eyebrow{font-size:var(--fs-eyebrow);letter-spacing:2px}
.page .lead{font-size:var(--fs-lead)}
.page .value h3,.page .icard h3,.page .role h3,.page .fcard h3{font-size:var(--fs-h3)}
.page .post h3,.page .post.feat h3,.page .benefit b,.page .jobcard h3{font-size:var(--fs-h4)}
.page .post p,.page .fcard p,.page .role p,.page .icard p,.page .value p,.page .benefit span,.page .quote p,.page .jobcard .addr{font-size:var(--fs-small)}
.page .copy p{font-size:var(--fs-body)}

/* ===================== FULL-WIDTH BANNER HERO (all sub-pages) ===================== */
.page-hero{position:relative;overflow:hidden;text-align:left;padding:0;min-height:clamp(340px,42vw,500px);display:flex;align-items:flex-end;background:var(--navy)}
.page-hero::before{display:none}
.page-hero .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 26%;z-index:0}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,33,44,.72) 0%,rgba(8,33,44,.34) 40%,rgba(8,33,44,0) 78%)}
.page-hero .container{position:relative;z-index:2;max-width:1200px;width:100%;padding-top:56px;padding-bottom:52px;text-align:left}
.page-hero .eyebrow{color:#BCEAFF;justify-content:flex-start}
.page-hero .eyebrow .fl{color:var(--accent)}
.page-hero .h-sec{color:#fff;font-size:clamp(30px,3.7vw,54px);text-align:left;margin:0}
.page-hero p{color:#EEF8FD;text-align:left;margin:14px 0 0;max-width:44ch;font-size:clamp(15px,1.1vw,16.5px)}
.page-hero .hero-actions{justify-content:flex-start;margin-top:24px}
.page-hero .heroshots{display:none}

/* ===================== FULL-WIDTH LOOPING IMAGE GALLERY (2 staggered rows) ===================== */
/* static photo strip (auto-scroll removed per feedback) */
.galleryloop{width:100%;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;overflow:hidden;padding:2px 0}
.gl-row{display:contents}
.gl-row .gtile{width:auto;aspect-ratio:16/11;border-radius:14px;background-size:cover;background-position:center;background-color:var(--blue-100)}
/* show a single balanced band of 5 tiles from the two source rows */
.gl-row .gtile:nth-child(n+6){display:none}
@media(max-width:980px){.galleryloop{grid-template-columns:repeat(3,1fr)}.gl-row .gtile:nth-child(n+4){display:none}}
@media(max-width:620px){.galleryloop{grid-template-columns:1fr 1fr}.gl-row .gtile:nth-child(n+3){display:none}}

/* ===== MONA.Media footer signature ===== */
.mona-sign{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;padding:22px 0 2px;margin-top:16px;border-top:1px solid var(--sig-line,rgba(255,255,255,.07))}
.mona-sign span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sig-label,#598396)}
.mona-sign a{display:inline-flex;opacity:.9;transition:opacity .2s,transform .2s}
.mona-sign a:hover{opacity:1;transform:translateY(-1px)}
.mona-sign img{height:19px;width:auto;display:block}
@media(max-width:560px){.mona-sign{gap:9px;padding-top:18px}}

/* ===== chip/tag vertical alignment fix (Brown font metrics sit text high) ===== */
.role .rtag,.path .ptag,.post .ptag,.job .jtag,.jobcard .meta .jd-go,.cat,.rtag,.ptag{line-height:1!important;padding-top:.72em!important;padding-bottom:.5em!important}

/* ===== HEADER v2: centered nav + minimal icons + refined lang switcher ===== */
.header .bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;height:76px}
.nav{justify-self:center;margin-left:0}
.nav a{display:inline-flex;align-items:center;gap:7px;line-height:1;padding:11px 16px 10px}
.nav a .ni{width:15px;height:15px;fill:var(--blue);flex:0 0 auto;margin-top:-2px;transition:fill .2s}
.nav a:hover .ni{fill:var(--accent)}
.nav a.active .ni{fill:#fff}
.header .right{margin-left:0;justify-self:end}
.header .right .btn{gap:8px}
.btn .bi{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
/* chuyển ngôn ngữ: cờ + tên ngôn ngữ, mở dropdown (nền màu đặc, không viền) */
.lang{position:relative}
.lang .flag{width:20px;height:14px;border-radius:3px;flex:0 0 auto;display:block;box-shadow:0 1px 3px rgba(8,50,68,.35)}
.lang-cur{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--blue-100);color:var(--blue-700);
  border-radius:999px;padding:9px 12px 9px 11px;cursor:pointer;font-family:var(--body);font-weight:700;font-size:13px;line-height:1;transition:background .22s,color .22s}
.lang-cur:hover{background:var(--accent-soft);color:var(--accent-600)}
.lang.open .lang-cur{background:var(--blue-600);color:#fff}
.lang-name{white-space:nowrap}
.lang-caret{width:15px;height:15px;fill:currentColor;flex:0 0 auto;transition:transform .25s var(--ease)}
.lang.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:172px;list-style:none;margin:0;padding:6px;
  background:#fff;border-radius:16px;box-shadow:0 26px 54px -20px rgba(8,50,68,.45);z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-7px);transition:opacity .2s,transform .2s var(--ease),visibility .2s}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;border-radius:11px;
  padding:10px 12px;cursor:pointer;font-family:var(--body);font-weight:700;font-size:13.5px;color:var(--navy);text-align:left;transition:.18s}
.lang-opt:hover{background:var(--accent-soft);color:var(--accent-600)}
.lang-opt.on{background:var(--blue-600);color:#fff}

/* ===== arrow-circle alignment fix (keep icon on same line + center glyph vs Brown metrics) ===== */
.role .rb .japply{display:inline-flex;align-items:center;gap:9px;line-height:1}
.job .japply,.post .more{align-items:center;line-height:1}
.role .rb .japply .arr,.post .more .arr,.job .japply .arr{line-height:1;padding-top:.16em}

/* ============================================================
   REVIEW 2 — components added per client feedback (deck 31/07)
   ============================================================ */

/* --- page hero: chữ nổi bật hơn --- */
/* ĐỒNG BỘ với banner trang chủ (.banner-copy h1 / p): cùng weight 400 (face Middle), cùng letter-spacing,
   cùng thang font-size clamp(30px,3.7vw,54px) — trước đây weight 600 nhảy sang face Exp-ExtraBold nên trông khác hẳn */
.page-hero .h-sec{font-weight:400;letter-spacing:.5px;line-height:1;text-shadow:0 10px 34px rgba(4,22,30,.55)}
@media(max-width:620px){.page-hero .h-sec{font-size:clamp(26px,6.4vw,42px);letter-spacing:0}}
.page-hero p{text-shadow:0 6px 22px rgba(4,22,30,.5)}
.page-hero::after{background:linear-gradient(to top,rgba(6,26,36,.74) 0%,rgba(6,26,36,.38) 44%,rgba(6,26,36,.02) 82%)}
.page-hero .eyebrow{letter-spacing:2px}

/* --- QUY TRÌNH TUYỂN DỤNG (recruitment process) --- */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:step;position:relative}
.pstep{position:relative;background:#fff;border:0;border-radius:18px;box-shadow:0 14px 34px -20px rgba(18,103,142,.45);padding:30px 22px 24px;text-align:center;
  transition:transform .3s var(--ease),box-shadow .35s, box-shadow .3s}
.pstep:hover{transform:translateY(-6px);border-color:var(--accent-line);box-shadow:0 24px 48px -28px rgba(222,111,22,.55)}
.pstep .pnum{width:46px;height:46px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--display);font-size:22px;line-height:1;padding-top:.16em;
  background:linear-gradient(150deg,var(--accent),var(--accent-600));box-shadow:0 14px 26px -14px rgba(222,111,22,.9)}
.pstep b{display:block;color:var(--navy);font-size:16px;font-weight:800;line-height:1.3;margin-bottom:6px}
.pstep span{display:block;color:var(--muted);font-size:13px;line-height:1.5}
.pstep::after{content:"";position:absolute;top:50%;right:-11px;width:14px;height:14px;border-top:2px solid var(--accent-line);border-right:2px solid var(--accent-line);transform:translateY(-50%) rotate(45deg);z-index:2}
.pstep:last-child::after{display:none}
@media(max-width:1000px){.process{grid-template-columns:repeat(3,1fr)}.pstep::after{display:none}}
@media(max-width:620px){.process{grid-template-columns:1fr}}

/* --- FAQ (accordion) --- */
.faqwrap{display:grid;grid-template-columns:.85fr 1.6fr;gap:44px;align-items:start}
.faqwrap .faqside h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,2.8vw,44px);color:var(--navy);letter-spacing:.5px;line-height:1}
.faqwrap .faqside p{color:var(--muted);margin-top:14px;font-size:15px}
.faqlist{border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq>button{width:100%;background:none;border:0;cursor:pointer;text-align:left;display:flex;align-items:center;gap:18px;padding:22px 4px;
  font-family:var(--body);font-size:16.5px;font-weight:700;color:var(--navy);line-height:1.45;transition:color .25s}
.faq>button:hover{color:var(--accent-600)}
.faq>button .fic{margin-left:auto;flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--blue-50);display:grid;place-items:center;transition:transform .3s var(--ease),background .25s}
.faq>button .fic svg{width:14px;height:14px;fill:var(--blue-700)}
.faq.open>button{color:var(--accent-600)}
.faq.open>button .fic{transform:rotate(180deg);background:var(--accent-soft)}
.faq.open>button .fic svg{fill:var(--accent-600)}
.faq .fbody{display:none;padding:0 44px 24px 4px;color:var(--muted-2);font-size:15px;line-height:1.68}
.faq.open .fbody{display:block}
@media(max-width:900px){.faqwrap{grid-template-columns:1fr;gap:26px}}

/* --- HỆ THỐNG TRUNG TÂM YOLA (13 địa chỉ) — chia ô rõ ràng theo feedback slide 20 --- */
.centers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1240px;margin:0 auto}
.center-item{display:flex;align-items:flex-start;gap:13px;padding:18px 18px 17px;background:#fff;border:0;border-radius:16px;
  box-shadow:0 18px 38px -22px rgba(18,103,142,.5);transition:transform .28s var(--ease),box-shadow .3s, box-shadow .28s}
.center-item:hover{transform:translateY(-5px);box-shadow:0 28px 50px -22px rgba(224,122,24,.45)}
.center-item .cic{flex:0 0 auto;width:38px;height:38px;background:linear-gradient(140deg,#3FB0E4,#0F7CB0);border-radius:50%;display:grid;place-items:center;padding-top:0;
  box-shadow:0 8px 18px -8px rgba(15,124,176,.85);transition:transform .28s var(--ease)}
/* toàn bộ ghim nền xanh; hover thẻ mới đổi sang cam (không so le) */
.center-item:hover .cic{transform:scale(1.08);background:var(--ic-orange-bg);box-shadow:0 10px 22px -8px rgba(224,122,24,.9)}
.center-item .cic svg{width:18px;height:18px;fill:#fff}
.center-item b{display:block;color:var(--navy);font-size:14.5px;font-weight:800;margin-bottom:4px;transition:color .25s}
.center-item:hover b{color:var(--accent-600)}
.center-item span{display:block;color:var(--muted);font-size:12.5px;line-height:1.5}
@media(max-width:1180px){.centers{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(max-width:860px){.centers{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:560px){.centers{grid-template-columns:1fr}}

/* --- FOUNDERS (như yola.vn) --- */
.founders{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center}
.founder{text-align:center}
.founder .fimg{width:190px;height:190px;margin:0 auto 18px;border-radius:50%;background-size:cover;background-position:center top;border:5px solid #fff;box-shadow:0 24px 48px -26px rgba(11,51,69,.55)}
.founder h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(22px,2vw,30px);color:var(--navy);letter-spacing:.6px;line-height:1.05}
.founder .frole{color:var(--blue-700);font-weight:800;font-size:14px;margin-top:8px}
.founder p{color:var(--muted);font-size:14.5px;line-height:1.65;margin-top:12px;max-width:38ch;margin-left:auto;margin-right:auto}
.founders .fdiv{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,var(--line),transparent)}
@media(max-width:860px){.founders{grid-template-columns:1fr}.founders .fdiv{display:none}}

/* --- KHÁT VỌNG (aspiration) — feedback slide 30 ---
   Trước đây là 1 khối ảnh full-bleed nền tối, rất cao. Đổi sang nền sáng đúng tông
   Vision & Mission, thu gọn lại thành 1 khối chữ ngắn và ghép liền mạch với section
   Vision & Mission ngay bên dưới. */
.aspiration{position:relative;z-index:2;overflow:visible;min-height:0;display:block;color:inherit;width:100%;margin:0 0 64px}
.aspiration .abg{display:none}
.aspiration::after{content:none}
.aspiration .acopy{max-width:76ch;margin:0 auto;padding:0;text-align:center}
.aspiration .eyebrow{margin-bottom:12px}
.aspiration h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.5vw,38px);letter-spacing:.5px;line-height:1.04;color:var(--navy);text-wrap:balance}
.aspiration h2::after{content:"";display:block;width:88px;height:5px;margin:14px auto 0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent-gold),var(--accent));opacity:.9}
.aspiration p{color:var(--muted-2);font-size:clamp(15px,1.15vw,16.5px);line-height:1.7;margin-top:16px;text-wrap:pretty}

/* --- BÀI VIẾT (news cards — bố cục kiểu trang tuyển dụng hiện đại) --- */
.artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.artcard{display:flex;flex-direction:column;background:#fff;border:0;border-radius:18px;box-shadow:0 14px 34px -20px rgba(18,103,142,.45);overflow:hidden;transition:transform .3s var(--ease),box-shadow .35s}
.artcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.artcard .athumb{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--blue-100)}
.artcard .abody{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.artcard .acat{color:var(--accent-600);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:1.4px;margin-bottom:9px}
.artcard h3{font-size:18px;color:var(--navy);font-weight:800;line-height:1.34;margin-bottom:10px}
.artcard .aviews{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px;margin-bottom:10px}
.artcard .aviews svg{width:15px;height:15px;fill:var(--muted)}
.artcard p{color:var(--muted);font-size:13.5px;line-height:1.6;flex:1}
.artcard .amore{margin-top:16px;font-weight:800;color:var(--accent-600);display:inline-flex;align-items:center;gap:9px;font-size:13.5px;transition:gap .25s}
.artcard:hover .amore{gap:13px}
@media(max-width:960px){.artgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.artgrid{grid-template-columns:1fr}}

/* --- VỊ TRÍ TUYỂN DỤNG dạng lưới + phân trang --- */
.posgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.poscard{position:relative;display:block;background:#fff;border:0;border-radius:16px;box-shadow:0 14px 34px -20px rgba(18,103,142,.45);padding:22px 22px 20px;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .35s, box-shadow .3s}
.poscard:hover{transform:translateY(-5px);border-color:var(--accent-line);box-shadow:0 24px 46px -28px rgba(222,111,22,.55)}
.poscard .pmeta{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12.5px;font-weight:700;margin-bottom:10px}
.poscard .pmeta svg{width:14px;height:14px;fill:var(--accent-600)}
.poscard .pmeta span{display:inline-flex;align-items:center;gap:6px}
.poscard h3{font-size:17px;color:var(--navy);font-weight:800;line-height:1.35;margin-bottom:8px;min-height:2.7em}
.poscard .paddr{color:var(--muted);font-size:12.5px;line-height:1.5}
/* ruy-băng góc: dải rộng 122px, tâm đặt lệch vào trong 13px theo đường chéo để dải cắt gọn qua góc
   và hai đầu được .poscard{overflow:hidden} cắt đúng ở cạnh trên + cạnh phải (trước đây dải quá lớn nên tràn thành mảng cam) */
.poscard .phot{position:absolute;top:10px;right:-40px;width:126px;text-align:center;
  background:linear-gradient(135deg,var(--accent),#E0473C);color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:1.6px;line-height:1.35;padding:5px 0 4px;
  transform:rotate(45deg);box-shadow:0 6px 14px -6px rgba(224,71,60,.65)}
.pager{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:34px}
.pager button{min-width:40px;height:40px;border-radius:12px;border:0;background:var(--blue-100);color:var(--blue-700);font-weight:800;font-size:14px;cursor:pointer;
  transition:background .25s,color .25s, box-shadow .25s,transform .2s}
.pager button:hover:not(:disabled){background:var(--accent);color:#fff;transform:translateY(-2px)}
.pager button.on{background:linear-gradient(150deg,var(--accent),var(--accent-600));color:#fff}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager svg{width:16px;height:16px;fill:currentColor}
@media(max-width:960px){.posgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.posgrid{grid-template-columns:1fr}.poscard h3{min-height:0}}

/* --- media/video block linh hoạt (ảnh hoặc video) --- */
.mediabox{position:relative;border-radius:22px;overflow:hidden;min-height:clamp(280px,34vw,440px);background-size:cover;background-position:center;isolation:isolate}
.mediabox::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,33,44,.55),transparent 52%);z-index:1}
.mediabox .mplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;
  box-shadow:0 22px 44px -18px rgba(0,0,0,.6);transition:transform .3s var(--ease)}
.mediabox:hover .mplay{transform:translate(-50%,-50%) scale(1.08)}
.mediabox .mplay svg{width:26px;height:26px;fill:var(--blue-700);margin-left:4px}
.mediabox .mcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 28px;color:#fff;font-weight:700}
.mediabox+.quotes,.mediabox+.grid-3,.mediabox+div{margin-top:26px}

/* --- About: 3 core values / vision-mission nổi bật hơn --- */
.values-grid.v3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.values-grid.v3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.values-grid.v3{grid-template-columns:1fr}}
.page .mv .icard{padding:38px 34px}
.page .mv .icard h3{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:1.2px;line-height:1.05;text-transform:uppercase;color:var(--navy)}
.page .mv .icard p{font-size:clamp(15.5px,1.15vw,17.5px);color:var(--muted-2);line-height:1.68;margin-top:10px}

/* Tiêu đề card ở sub-page: CAPS + bold đậm, đồng bộ với dải core values ngoài home (.vband .item b) */
.page .value h3,.page .icard h3,.page .role h3,.page .fcard h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:1.2px;line-height:1.05}

/* --- Founders: 2 chân dung ở giữa, tên hai bên (như yola.vn) --- */
.founders{align-items:center}
.founders .fpics{align-self:end}
.founders .fpics{display:flex;align-items:flex-end;justify-content:center;gap:0}
.founders .fpics img{width:clamp(160px,17vw,250px);height:auto;display:block;margin-bottom:0;vertical-align:bottom}
.founders .fpics img:last-child{margin-left:-18px}
.founder.fleft{text-align:right}
.founder.fright{text-align:left}
.founder.fleft p{margin-left:auto;margin-right:0}
.founder.fright p{margin-left:0;margin-right:auto}
@media(max-width:860px){.founders{grid-template-columns:1fr;justify-items:center}.founder.fleft,.founder.fright{text-align:center}.founder p{margin:12px auto 0}.founders .fpics{order:-1}}

/* --- About: founders sát mép dưới + nền trắng / xanh nhạt (bỏ màu kem) --- */
.page .sec.founders-sec{padding-bottom:0}
.page.about .sec{background:#fff}
.page.about .sec.alt{background:var(--blue-50)}
.page.about .centers{margin-top:-6px}
@media(max-width:860px){.page .sec.founders-sec{padding-bottom:0}.founders .fpics{align-self:center}}
.page.about .sec:not(.alt) .icard,.page.about .sec:not(.alt) .value{box-shadow:0 16px 36px -28px rgba(11,51,69,.5)}

/* Khát vọng + Vision & Mission giờ nằm chung MỘT section (xem about.html), nên padding của
   section chỉ khai báo một lần: 64px trên/dưới đúng nhịp chung `.page .sec`, và khoảng cách
   giữa khối Khát vọng với tiêu đề Vision & Mission cũng đúng 64px (`.aspiration{margin-bottom}`). */
.page .sec.alt.vm-sec{padding:64px 0}

/* Cụm chi nhánh: đồng nhất nền xanh nhạt ở mọi trang */
.centers-sec,.page .sec.centers-sec{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(70% 90% at 6% 4%,#E4F6FF,transparent 60%),
             radial-gradient(65% 85% at 96% 100%,#E4F6FF,transparent 58%),
             var(--blue-50)}
.centers-sec::before{content:"";position:absolute;left:-6%;top:-18%;width:56%;height:64%;z-index:0;pointer-events:none;
  border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(187,231,251,.5),rgba(187,231,251,0) 68%)}
.centers-sec::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(26,153,213,.13) 1.2px,transparent 1.6px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(60% 60% at 88% 8%,#000,transparent 72%);mask-image:radial-gradient(60% 60% at 88% 8%,#000,transparent 72%)}
.centers-sec>.container{position:relative;z-index:2}
.centers-sec .lead .cnum{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:1px;
  font-size:1.5em;line-height:1;color:var(--blue-600);vertical-align:-2px;margin-right:2px}

/* --- VISION & MISSION: nền trang trí nhạt cho bớt trống (feedback slide 21) --- */
.sec.alt.vm-sec{position:relative;isolation:isolate;
  background:radial-gradient(90% 120% at 8% -12%,#E1F5FF,transparent 62%),
             radial-gradient(80% 110% at 100% 112%,#E9F8FF,transparent 58%),
             var(--blue-50)}
.vm-sec::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(26,153,213,.13) 1.2px,transparent 1.6px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(72% 82% at 22% 18%,#000,transparent 74%);mask-image:radial-gradient(72% 82% at 22% 18%,#000,transparent 74%)}
.vm-sec>.container{position:relative;z-index:2}
.vm-deco{position:absolute;border-radius:50%;z-index:0;pointer-events:none;opacity:.6}
.vm-d1{width:240px;height:240px;left:-72px;bottom:-64px;background:radial-gradient(circle at 32% 30%,#BBE7FB,rgba(187,231,251,0) 70%);animation:vmfloat 12s ease-in-out infinite}
.vm-d2{width:160px;height:160px;right:6%;top:12%;background:radial-gradient(circle at 40% 34%,#FFE0BE,rgba(255,224,190,0) 70%);animation:vmfloat 15s ease-in-out infinite reverse}
@keyframes vmfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes vmspin{to{transform:rotate(360deg)}}
.vm-sec .mv .icard{background:#fff;box-shadow:0 26px 56px -34px rgba(18,103,142,.6)}
@media(max-width:820px){.vm-deco{opacity:.42}}
@media (prefers-reduced-motion:reduce){.vm-deco{animation:none!important}}

/* --- V&M: bố cục theo bản mẫu client (slide 21): icon + tiêu đề cùng hàng, nội dung thật, hình minh hoạ --- */
.vm-sec .h-sec .vm-amp{color:var(--blue-600)}
.vm-sec .sec-head{margin-bottom:34px}
.vm-sec .sec-head .h-sec::after{content:"";display:block;width:96px;height:6px;margin:12px auto 0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent-gold),var(--accent));opacity:.9}
.vm-sec .mv{gap:30px}
.vm-sec .mv .icard{position:relative;overflow:hidden;padding:34px 32px 36px;min-height:392px;display:flex;flex-direction:column;border-radius:26px}
.vm-sec .mv .ic-row{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.vm-sec .mv .icard .ic{width:56px;height:56px;border-radius:50%;margin:0;flex:0 0 auto;
  background:linear-gradient(140deg,#3FB0E4,#0F7CB0);box-shadow:0 12px 26px -12px rgba(15,124,176,.8)}
.vm-sec .mv .icard .ic svg{width:26px;height:26px;fill:#fff}
.page .vm-sec .mv .icard h3{margin:0;font-size:clamp(22px,1.9vw,28px);letter-spacing:1.4px;position:relative;padding-bottom:10px}
.page .vm-sec .mv .icard h3::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:3px;border-radius:99px;background:var(--accent)}
/* feedback slide 31: max-width 22ch làm chữ "education." bị rớt xuống một mình một dòng.
   Nới rộng + text-wrap:balance để các dòng chia đều, không còn chữ mồ côi. */
.page .vm-sec .mv .icard .vm-lead{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--navy);font-weight:500;margin:0 0 20px;max-width:28ch;text-wrap:balance}
.page .vm-sec .mv .icard .vm-lead b{color:var(--blue-600);font-weight:700}
.page .vm-sec .mv .icard .vm-lead-sm{font-size:clamp(15px,1.12vw,17px);line-height:1.62;color:var(--muted-2);font-weight:400;max-width:38ch}
.page .vm-sec .mv .icard .vm-lead-sm b{color:var(--blue-600);font-weight:700}
.vm-chips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:290px;position:relative;z-index:2}
.vm-chips li{display:flex;align-items:center;gap:11px;background:#fff;border:0;border-radius:14px;
  padding:11px 15px;font-size:14.5px;color:var(--muted-2);box-shadow:0 10px 24px -18px rgba(18,103,142,.8);transition:transform .25s var(--ease), box-shadow .25s}
.vm-chips li:hover{transform:translateX(5px);box-shadow:0 22px 44px -22px rgba(18,103,142,.55)}
.vm-chips li b{font-weight:700}
.chip-ic{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center}
.chip-ic svg{width:17px;height:17px;fill:#fff}
.chip-ic.c-green{background:#3FB878}.vm-chips li:has(.c-green) b{color:#2E9A60}
.chip-ic.c-purple{background:#54AFD9}.vm-chips li:has(.c-purple) b{color:#4098C0}
.chip-ic.c-orange{background:var(--accent)}.vm-chips li:has(.c-orange) b{color:var(--accent-600)}
/* feedback slide 31: icon trang trí lấp khoảng trống trong card Mission.
   Cả cụm absolute + pointer-events:none nên bố cục chữ của card giữ nguyên 100%. */
.vm-icons{position:absolute;left:32px;bottom:24px;width:220px;height:150px;z-index:1;pointer-events:none}
.vm-icons .vmi{position:absolute;display:grid;place-items:center;border-radius:50%;
  box-shadow:0 14px 26px -14px rgba(18,103,142,.5)}
.vm-icons .vmi svg{fill:#fff}
.vm-icons .vmi-1{width:54px;height:54px;left:0;top:14px;background:linear-gradient(140deg,#FBA85A,#E07A18);animation:vmfloat 9s ease-in-out infinite}
.vm-icons .vmi-1 svg{width:27px;height:27px}
.vm-icons .vmi-2{width:44px;height:44px;left:72px;top:64px;background:linear-gradient(140deg,#3FB0E4,#0F7CB0);animation:vmfloat 11s ease-in-out infinite reverse}
.vm-icons .vmi-2 svg{width:22px;height:22px}
.vm-icons .vmi-3{width:38px;height:38px;left:8px;top:100px;background:linear-gradient(140deg,#5CCB90,#2E9A60);animation:vmfloat 13s ease-in-out infinite}
.vm-icons .vmi-3 svg{width:19px;height:19px}
.vm-icons .vmi-4{width:32px;height:32px;left:128px;top:8px;background:linear-gradient(140deg,#FFD27A,#F0AF2B);animation:vmfloat 10s ease-in-out infinite reverse}
.vm-icons .vmi-4 svg{width:16px;height:16px}
@media(max-width:980px){.vm-icons{display:none}}
@media (prefers-reduced-motion:reduce){.vm-icons .vmi{animation:none!important}}
.vm-sec .mv .icard:last-child{justify-content:flex-start;padding-bottom:170px}
@media(max-width:980px){.vm-sec .mv .icard{min-height:0;padding-bottom:150px}
  .vm-art-globe{width:190px;right:-14px}.vm-art-book{width:230px}}
@media(max-width:560px){.vm-chips{max-width:none}.vm-art{opacity:.5}}

/* nút phụ trên ảnh bìa: viền trắng mờ (trước đây chữ navy chìm vào ảnh) */
/* nút phụ trên ảnh bìa: nền màu đặc, KHÔNG viền (feedback: button dùng background màu, không dùng stroke) */
.page-hero .hero-actions .btn:not(.btn-primary):not(.btn-ghost){
  background:var(--blue-600);color:#fff;border:0;box-shadow:0 18px 38px -16px rgba(15,124,176,.9)}
.page-hero .hero-actions .btn:not(.btn-primary):not(.btn-ghost):hover{
  background:linear-gradient(135deg,var(--accent),var(--accent-600));transform:translateY(-3px);box-shadow:0 24px 48px -16px rgba(222,111,22,.95)}

/* ============================================================
   PHỐI CAM CHO CÁC ICON NHỎ (feedback 2026-08-07)
   Xen kẽ cam/xanh theo vị trí thay vì đổi hết sang cam, để bảng màu
   không bị một tông và vẫn giữ xanh logo làm màu chủ đạo.
   ============================================================ */
:root{--ic-orange-bg:linear-gradient(140deg,#FBA85A,#E07A18)}

/* core values: ô 2 màu cam */
.value:nth-child(3n+2) .ic{background:var(--accent-soft)}
.value:nth-child(3n+2) .ic svg{fill:var(--accent-600)}
.value:nth-child(3n+2):hover .ic{background:var(--accent)}
.value:nth-child(3n+2):hover .ic svg{fill:#fff}


/* Vision & Mission: icon Mission màu cam cho cân với Vision xanh */
.vm-sec .mv .icard:last-child .ic{background:linear-gradient(140deg,#FBA85A,#E07A18);box-shadow:0 12px 26px -12px rgba(224,122,24,.8)}

/* quy trình tuyển dụng: số bước xen kẽ cam */
.pstep:nth-child(2n) .pnum{background:var(--ic-orange-bg);box-shadow:0 10px 22px -10px rgba(224,122,24,.85)}

/* phúc lợi trang chủ: icon xen kẽ cam */
.m-benefits .benefit:nth-child(3n+2) .bic{background:var(--accent-soft)}
.m-benefits .benefit:nth-child(3n+2) .bic svg{fill:var(--accent-600)}

/* icon nhỏ trong thẻ việc làm + thẻ tin tức */
.jmeta svg,.jcard .jmeta svg{fill:var(--accent-600)}
.artcard .ameta svg{fill:var(--accent-600)}

/* mũi tên FAQ ở trạng thái đóng: viền cam nhạt cho ấm hơn */
.faq>button .fic{background:var(--accent-soft)}
.faq>button .fic svg{fill:var(--accent-600)}

/* hoa thị trên dải giá trị cốt lõi nền xanh: dùng vàng thay vì trắng */
.vband .item .fl,.vmarquee .item .fl{color:var(--accent-gold)}



/* ============================================================
   TRANG CHI TIẾT CÂU CHUYỆN (story.html) — mở từ nút "Read story"
   ============================================================ */
.story-hero{min-height:clamp(400px,52vh,520px)}
.story-hero .container{position:relative;z-index:2}
.backlink{display:flex;width:max-content;align-items:center;gap:9px;color:#EEF8FD;font-weight:700;font-size:13.5px;margin-bottom:18px;
  background:rgba(8,50,68,.42);padding:9px 16px;border-radius:999px;transition:gap .25s,background .25s}
.backlink:hover{gap:14px;background:var(--accent);color:#fff}
.story-meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px;color:#DBEDF5;font-size:13.5px;font-weight:700}
.story-meta .sm-au{display:inline-flex;align-items:center;gap:10px;color:#fff}
.story-meta .sm-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ic-orange-bg);
  color:#fff;font-family:var(--display);font-size:17px;line-height:1;padding-top:.14em}

.story-body{max-width:760px;margin:0 auto}
.story-body .story-lead{font-size:clamp(17.5px,1.45vw,21px);line-height:1.62;color:var(--navy);font-weight:500;margin:0 0 34px}
.story-body h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.6px;line-height:1.05;
  font-size:clamp(24px,2.1vw,32px);color:var(--navy);margin:40px 0 14px}
.story-body p{color:var(--muted-2);font-size:16.5px;line-height:1.78;margin:0 0 18px}
.story-body blockquote{margin:32px 0;padding:26px 30px;border-radius:20px;background:var(--blue-50);
  color:var(--blue-700);font-size:clamp(17px,1.35vw,20px);line-height:1.55;font-weight:500;position:relative}
.story-body blockquote::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:99px;background:var(--accent)}
.story-fig{margin:34px 0;height:clamp(240px,34vw,400px);border-radius:22px;background-size:cover;background-position:center;
  box-shadow:0 26px 54px -30px rgba(18,103,142,.6)}

.story-share{max-width:760px;margin:44px auto 0;display:flex;align-items:center;gap:12px;color:var(--muted);font-weight:700;font-size:13.5px}
.story-share a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--blue-100);transition:.22s}
.story-share a svg{width:17px;height:17px;fill:var(--blue-700);transition:fill .22s}
.story-share a:hover{background:var(--accent)}
.story-share a:hover svg{fill:#fff}
@media(max-width:640px){.story-body p{font-size:15.5px}.story-body blockquote{padding:22px 22px}}

/* ============================================================
   HÌNH MINH HOẠ VISION & MISSION — khối 3D đặt ở GÓC PHẢI, chỉ hiện ~2/3
   (.icard có overflow:hidden nên phần thừa bị cắt gọn theo bo góc thẻ)
   ============================================================ */
.vm-art{position:absolute;pointer-events:none;z-index:1;height:auto;
  right:clamp(-74px,-5.2vw,-50px);bottom:clamp(-68px,-4.8vw,-46px);width:clamp(240px,26vw,300px)}

/* --- VISION: quả cầu 3D xoay --- */
@keyframes gLand{from{transform:translateX(0)}to{transform:translateX(-300px)}}
@keyframes gLon{0%{transform:scaleX(1)}25%{transform:scaleX(.02)}50%{transform:scaleX(-1)}75%{transform:scaleX(.02)}100%{transform:scaleX(1)}}
@keyframes gPin{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes gPinSh{0%,100%{transform:scale(1);opacity:.28}50%{transform:scale(.7);opacity:.14}}

.vm-art-globe .g-land{animation:gLand 26s linear infinite}
.vm-art-globe .g-lon{animation:gLon 26s linear infinite}
.vm-art-globe .g-lon-2{animation-delay:-6.5s}
.vm-art-globe .g-lon-3{animation-delay:-13s}
.vm-art-globe .g-lon-4{animation-delay:-19.5s}
.vm-art-globe .g-pin{animation:gPin 3.4s ease-in-out infinite}
.vm-art-globe .g-pin-2{animation-duration:4.2s;animation-delay:-1.1s}
.vm-art-globe .g-pin-3{animation-duration:3.8s;animation-delay:-2.2s}
.vm-art-globe .g-pinsh{animation:gPinSh 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.vm-art-globe .g-pin-2 .g-pinsh{animation-duration:4.2s;animation-delay:-1.1s}
.vm-art-globe .g-pin-3 .g-pinsh{animation-duration:3.8s;animation-delay:-2.2s}

/* --- MISSION: mũ tốt nghiệp + chồng sách, cùng cách đặt góc --- */
@keyframes mRing{to{transform:rotate(360deg)}}
@keyframes mRingR{to{transform:rotate(-360deg)}}
@keyframes mCap{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-13px) rotate(1.5deg)}}
@keyframes mStack{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes mTassel{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes mBub{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.06)}}

.vm-art-book .m-ring-1{animation:mRing 34s linear infinite}
.vm-art-book .m-ring-2{animation:mRingR 24s linear infinite}
.vm-art-book .m-cap{animation:mCap 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.vm-art-book .m-stack{animation:mStack 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.vm-art-book .m-tassel{animation:mTassel 2.4s ease-in-out infinite}
.vm-art-book .m-bub{animation:mBub 4s ease-in-out infinite}
.vm-art-book .m-bub-2{animation-duration:5.2s;animation-delay:-1.4s}
.vm-art-book .m-bub-3{animation-duration:4.6s;animation-delay:-2.6s}

@media(max-width:980px){.vm-art{width:200px;right:-46px;bottom:-40px}}
@media(max-width:560px){.vm-art{opacity:.45}}
@media (prefers-reduced-motion:reduce){.vm-art *{animation:none!important}}

/* ===== feedback slide 26: đồng bộ mọi nền xanh nhạt ở trang con theo nền section Vision & Mission ===== */
/* trước đây .sec.alt chỉ là màu phẳng var(--blue-50) nên nhìn lệch hẳn so với V&M */
/* layer đầu = bóng cam, đặt tràn khỏi mép PHẢI và neo theo px từ đỉnh section để luôn rơi
   vào vùng trống cạnh tiêu đề, không bị card trắng che (bản trước neo theo % nên nằm sau card).
   Blob xanh góc dưới-trái nằm ở ::after. Độ đậm canh theo .vm-d2 bên Vision & Mission. */
.page .sec.alt,
.page.about .sec.alt{
  position:relative;isolation:isolate;
  background:radial-gradient(320px 320px at calc(100% - 120px) 200px,rgba(255,208,155,.7),rgba(255,208,155,0) 70%),
             radial-gradient(90% 120% at 8% -12%,#E1F5FF,transparent 62%),
             radial-gradient(80% 110% at 100% 112%,#E9F8FF,transparent 58%),
             var(--blue-50)}
/* lớp chấm mờ giống V&M; loại trừ các section đã tự định nghĩa ::before của riêng nó */
.page .sec.alt:not(.vm-sec):not(.centers-sec)::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(26,153,213,.13) 1.2px,transparent 1.6px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(72% 82% at 22% 18%,#000,transparent 74%);
  mask-image:radial-gradient(72% 82% at 22% 18%,#000,transparent 74%)}
.page .sec.alt>.container{position:relative;z-index:2}


/* ============================================================
   FEEDBACK 2026-08-11 (slide 31 → 34)
   ============================================================ */

/* --- slide 31 / 32 / 34: tiêu đề card TO HƠN và NGANG HÀNG VỚI ICON ---
   Trước đây icon là 1 khối riêng nằm trên, tiêu đề xuống dòng bên dưới.
   Đổi sang lưới 2 cột: [icon][tiêu đề] cùng một hàng, đoạn mô tả trải hết bên dưới.
   Áp cho: .benefit (Why Teach At YOLA – trang Teacher, Why Become A Yolan – trang Staff)
   và .value (Our Core Values – trang About). */
.page .benefits .benefit{
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:10px;align-items:center;
  grid-template-areas:"bic btitle" "btext btext"}
.page .benefits .benefit .bic{grid-area:bic;margin:0;width:54px;height:54px}
.page .benefits .benefit b{grid-area:btitle;margin:0;align-self:center;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:1.1px;line-height:1.08;
  font-size:clamp(19px,1.55vw,23px)}
.page .benefits .benefit span{grid-area:btext;align-self:start}
@media(max-width:520px){.page .benefits .benefit b{font-size:18px;letter-spacing:.8px}}

.page .values-grid .value{
  display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:12px;align-items:center;
  grid-template-areas:"vic vtitle" "vtext vtext"}
.page .values-grid .value .ic{grid-area:vic;margin:0}
.page .values-grid .value h3{grid-area:vtitle;margin:0;align-self:center;
  font-size:clamp(21px,1.75vw,27px);line-height:1.08}
.page .values-grid .value p{grid-area:vtext;align-self:start}
/* số thứ tự 01/02/03 ở góc phải không được đè lên tiêu đề dài */
.page .values-grid .value::before{font-size:38px;top:12px;right:16px;opacity:.9}
.page .values-grid .value h3{padding-right:44px}

/* --- slide 31: hover vào ô Core Values đổi hẳn sang xanh / cam cho nổi bật --- */
.page .values-grid .value{transition:transform .35s var(--ease),box-shadow .35s,background .35s}
.page .values-grid .value:hover{
  background:linear-gradient(150deg,#4FBEEE,var(--blue-700));
  box-shadow:0 30px 58px -28px rgba(15,124,176,.7)}
.page .values-grid .value:nth-child(3n+2):hover{
  background:linear-gradient(150deg,#FBA85A,var(--accent-600));
  box-shadow:0 30px 58px -28px rgba(222,111,22,.7)}
.page .values-grid .value:hover h3{color:#fff}
.page .values-grid .value:hover p{color:rgba(255,255,255,.92)}
.page .values-grid .value:hover::before{color:rgba(255,255,255,.26)}
.page .values-grid .value:hover::after{background:rgba(255,255,255,.55)}
.page .values-grid .value:hover .ic{background:rgba(255,255,255,.22)}
.page .values-grid .value:hover .ic svg{fill:#fff}
.page .values-grid .value:nth-child(3n+2):hover .ic{background:rgba(255,255,255,.24)}

/* --- slide 34: hover thẻ vị trí đang tuyển — chữ nổi lên + đổi màu --- */
.poscard h3,.poscard .paddr,.poscard .pmeta{transition:color .25s,transform .3s var(--ease)}
.poscard:hover h3{color:var(--blue-700);transform:translateX(3px)}
.poscard:hover .paddr{color:var(--muted-2);transform:translateX(3px)}
.poscard:hover .pmeta{color:var(--accent-600)}
.poscard::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--accent),var(--accent-600));
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.poscard:hover::after{transform:scaleY(1)}

/* --- slide 33: chữ "FAQ" phải nổi rõ là một section riêng --- */
.faqwrap .faqside{position:relative}
.page .faqwrap .faqside h2{
  font-size:clamp(44px,4.6vw,76px);color:var(--navy);line-height:.92;letter-spacing:1px}
.page .faqwrap .faqside h2::after{
  content:"";display:block;width:84px;height:6px;margin:16px 0 0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent-gold),var(--accent))}
.page .faqwrap .faqside p{margin-top:18px;max-width:34ch}
@media(max-width:900px){.page .faqwrap .faqside h2::after{margin-left:auto;margin-right:auto}}
.faq-eyebrow{justify-content:flex-start;margin-bottom:12px}
@media(max-width:900px){.faq-eyebrow{justify-content:center}}

/* --- slide 35: "đồng bộ màu nền xanh, thêm các elements cho sáng hơn, sinh động" ---
   Mọi mảng nền xanh nhạt ở trang con đã dùng chung nền của Vision & Mission; bổ sung thêm
   một bóng tròn mềm trôi nhẹ để không còn là mảng màu phẳng. Trừ .vm-sec và .centers-sec
   vì 2 section đó đã có lớp trang trí riêng. */
/* KHÔNG dùng border-radius:50% + gradient lệch tâm: phía đối diện tâm gradient chưa mờ hết
   đã bị bo tròn cắt ngang -> hiện viền cứng (đo được 23/px ở story.html).
   Dùng closest-side + tâm ở giữa: màu tắt hẳn đúng tại mép hộp nên không cần cắt. */
.page .sec.alt:not(.vm-sec):not(.centers-sec)::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:460px;height:460px;left:-150px;bottom:-120px;opacity:.75;
  background:radial-gradient(circle closest-side at 50% 50%,#A8DCF7,rgba(168,220,247,0) 100%);
  animation:vmfloat 13s ease-in-out infinite}
@media(max-width:820px){.page .sec.alt::after{opacity:.4}}
@media (prefers-reduced-motion:reduce){.page .sec.alt::after{animation:none!important}}


/* ============================================================
   FEEDBACK 2026-08-12 (vòng chỉnh sau khi review bản deploy)
   ============================================================ */

/* --- 1. TAG TRÊN TITLE ĐỒNG BỘ TOÀN BỘ: hoa CAM + chữ XANH ---
   `.eyebrow` gốc đã đúng chuẩn này; chỉ có vài chỗ trước đây bị đổi sang chữ cam
   hoặc dùng class riêng không có hoa. Kéo tất cả về một kiểu. */
.page .eyebrow,
.page .sec-head .eyebrow,
.aspiration .eyebrow,
.faq-eyebrow{color:var(--blue-700)}
.page .eyebrow .fl,
.aspiration .eyebrow .fl,
.faq-eyebrow .fl{color:var(--accent)}
/* ngoại lệ bắt buộc: eyebrow nằm trên nền ảnh tối / nền xanh đậm phải là chữ sáng
   thì mới đọc được — hoa vẫn giữ màu cam. */
.page-hero .eyebrow{color:#BCEAFF}
.cta-box .eyebrow{color:#CFF0FF}
.page-hero .eyebrow .fl,.cta-box .eyebrow .fl{color:var(--accent)}

/* --- 2. TITLE CÁC CARD CAO BẰNG NHAU + SUB-TEXT CHỪA SẴN 2 DÒNG ---
   Áp cho toàn site: .benefit (Teacher/Staff), .value (Core Values), .poscard (vị trí tuyển dụng).
   Nội dung dồn lên đỉnh card (align-content:start) rồi mỗi vùng chừa chiều cao tối thiểu,
   nên icon + title của mọi card luôn nằm đúng một đường ngang; ô nào chữ ngắn thì để trống
   phần dưới thay vì kéo title dịch lên. */
.page .benefits .benefit{align-content:start}
.page .benefits .benefit b{display:flex;align-items:center;
  min-height:calc(2 * 1.08em)}                 /* 2 dòng title */
.page .benefits .benefit span{line-height:1.6;min-height:calc(2 * 1.6em)}   /* 2 dòng mô tả */

.page .values-grid .value{align-content:start}
.page .values-grid .value h3{display:flex;align-items:center;
  min-height:calc(2 * 1.08em)}
.page .values-grid .value p{line-height:1.6;min-height:calc(2 * 1.6em)}

/* --- 3. Thẻ vị trí đang tuyển: hover đổ CAM giống các box khác (thay vì chỉ đổi màu chữ) --- */
.poscard::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;z-index:0;
  transition:opacity .35s;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%,var(--accent-gold),transparent 58%),
             linear-gradient(150deg,var(--accent),var(--accent-600))}
.poscard>*{position:relative;z-index:1}
.poscard:hover::before{opacity:1}
.poscard:hover h3{color:#fff;transform:none}
.poscard:hover .paddr{color:#FFF1E0;transform:none}
.poscard:hover .pmeta{color:#FFF1E0}
.poscard:hover .pmeta svg{fill:#fff}
/* thanh cam bên trái không còn cần khi cả thẻ đã đổ cam */
.poscard::after{content:none}
/* ruy băng HOT phải nổi trên lớp nền cam */
.poscard .phot{z-index:3}
.poscard:hover .phot{background:#fff;color:var(--accent-600)}

/* ===== Ô CTA "Start Your Journey" chỉ còn ở trang chủ =====
   File này KHÔNG được index.html nạp (trang chủ dùng CSS inline riêng), nên rule ở đây
   chỉ chạm các trang con — trang chủ giữ nguyên ô CTA.
   Giữ lại <section class="m-cta"> làm DẢI CHUYỂN MÀU xuống footer: bỏ hẳn section thì
   footer (#2B5B9E) sẽ đối đầu trực tiếp với section sáng phía trên và đường phân cách
   vừa xử lý xong sẽ quay lại. */
.m-cta>.container{display:none}

/* ===== Behaviors dưới mỗi giá trị cốt lõi (feedback 13/08, slide OUR CORE VALUES) =====
   Bỏ hình minh hoạ trong ảnh mẫu, chỉ dùng icon line/fill 24x24 đồng bộ với icon sẵn có
   của site (cùng viewBox, cùng ô bo góc nền xanh nhạt như .value .ic). */
.page .values-grid .value{
  align-items:start;align-content:start;
  grid-template-areas:"vic vtitle" "vtext vtext" "vbeh vbeh"}
.page .values-grid .value .ic{align-self:center}
.page .values-grid .value h3{align-self:center}
.vbeh{grid-area:vbeh;list-style:none;margin:18px 0 0;padding:18px 0 0;
  border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.vbeh li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:13px;line-height:1.52;color:var(--muted-2)}
.vbeh .vbi{width:26px;height:26px;border-radius:9px;background:var(--blue-50);
  display:grid;place-items:center;margin-top:1px;transition:background .35s}
.vbeh .vbi svg{width:15px;height:15px;color:var(--blue-700);transition:color .35s}
/* card đổi nền khi hover -> chữ và icon phải đảo màu theo, nếu không sẽ chìm mất */
.page .values-grid .value:hover .vbeh{border-top-color:rgba(255,255,255,.3)}
.page .values-grid .value:hover .vbeh li{color:rgba(255,255,255,.93)}
.page .values-grid .value:hover .vbeh .vbi{background:rgba(255,255,255,.2)}
.page .values-grid .value:hover .vbeh .vbi svg{color:#fff}
@media(max-width:900px){.vbeh{margin-top:14px;padding-top:14px;gap:10px}.vbeh li{font-size:12.5px}}

/* ===== Hoa YOLA đè lên box Core Values =====
   Đặt CHỒNG LÊN card (z-index trên nền card) và tràn ra ngoài mép, giống cách slide khách
   để hình minh hoạ nằm vắt qua viền panel. Dùng lại đúng pattern .cta-box .flower-deco.
   Card không đặt overflow:hidden nên hoa tràn ra ngoài được; .sec bọc ngoài mới cắt. */
.page .values-grid .value{overflow:visible}
.vdeco{position:absolute;z-index:3;pointer-events:none;line-height:0}
.vdeco svg{width:100%;height:100%;display:block;color:inherit}
.vdeco svg use{fill:currentColor}
/* Rải so le quanh 3 card để không có 2 bông đứng cạnh nhau thành cụm:
   dưới-trái (1) -> phải-giữa (1) -> trên-giữa (2) -> dưới-phải (2) -> trên-trái (3) -> dưới-phải (3) */
.value.v1 .vd-a{width:96px;height:96px;left:-34px;bottom:-36px;color:#BBE7FB;transform:rotate(-14deg)}
.value.v1 .vd-b{width:48px;height:48px;right:-30px;top:40%;color:#FFD9AE;transform:rotate(18deg)}
/* bông lớn của card 2 phải nằm ở ĐÁY: đặt mép trên sẽ đè lên tiêu đề 2 dòng
   "PASSION FOR EXCELLENCE", mà đáy card này đang trống vì list ngắn hơn 2 card kia */
.value.v2 .vd-a{width:78px;height:78px;left:50%;bottom:-30px;margin-left:-39px;color:#FFD9AE;transform:rotate(12deg)}
.value.v2 .vd-b{width:56px;height:56px;right:-26px;top:-26px;color:#BBE7FB;transform:rotate(-20deg)}
.value.v3 .vd-a{width:100px;height:100px;right:-36px;bottom:-32px;color:#BBE7FB;transform:rotate(16deg)}
.value.v3 .vd-b{width:46px;height:46px;left:-24px;top:55%;color:#FFD9AE;transform:rotate(-10deg)}
/* card đổi nền khi hover -> hoa chuyển sang trắng mờ để không chọi màu */
.page .values-grid .value:hover .vdeco{color:rgba(255,255,255,.5)}
/* không dùng transform:scale ở đây — mỗi bông đang dùng transform để xoay, ghi đè sẽ mất góc nghiêng */
@media(max-width:900px){
  .value.v1 .vd-a{width:76px;height:76px;left:-26px;bottom:-28px}
  .value.v2 .vd-a{width:64px;height:64px;margin-left:-32px;bottom:-24px}
  .value.v3 .vd-a{width:80px;height:80px;right:-28px;bottom:-26px}
  .value.v1 .vd-b,.value.v2 .vd-b,.value.v3 .vd-b{width:40px;height:40px}
}
@media(max-width:600px){.value.v1 .vd-b,.value.v2 .vd-b,.value.v3 .vd-b{display:none}}

/* ===== feedback slide 46: thanh filter vị trí tuyển dụng (staff) ===== */
.posfilter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 30px}
.posfilter button{appearance:none;border:1.5px solid var(--line);background:#fff;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:14px;color:var(--muted-2);
  padding:10px 20px;border-radius:999px;transition:.22s var(--ease);white-space:nowrap}
.posfilter button:hover{border-color:var(--blue);color:var(--blue-700)}
.posfilter button.on{background:var(--blue-600);border-color:var(--blue-600);color:#fff;
  box-shadow:0 12px 26px -14px rgba(26,153,213,.9)}
.posfilter .poscount{margin-left:auto;font-size:13.5px;color:var(--muted);font-weight:600}
.posfilter .poscount b{color:var(--blue-700);font-weight:800}
@media(max-width:640px){
  .posfilter{gap:7px}
  .posfilter button{padding:9px 15px;font-size:13px}
  .posfilter .poscount{margin-left:0;width:100%}
}

/* ===== feedback slide 43: khối thông tin trụ sở / CSKH / pháp lý trong footer ===== */
.foot-info{display:grid;grid-template-columns:1.15fr 1fr 1.25fr;gap:34px;
  margin-top:34px;padding-top:30px;border-top:1px solid rgba(255,255,255,.12)}
.foot-info .fi-col{min-width:0}
.foot-info h4{font-family:var(--display),sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.9px;font-size:19px;color:#fff;margin:0 0 12px}
.foot-info p{margin:0 0 8px;font-size:13.5px;line-height:1.62;color:#C8DCEF}
.foot-info a{color:#fff;font-weight:600}
.foot-info a:hover{color:var(--accent-gold)}
.foot-info .fi-legal p{margin-bottom:3px;font-size:12.8px;color:#A9C6DE}
.foot-info .fi-badge{display:block;width:172px;height:auto;margin-top:16px;border-radius:5px}
@media(max-width:980px){.foot-info{grid-template-columns:1fr 1fr;gap:28px}
  .foot-info .fi-legal{grid-column:1/-1}}
@media(max-width:620px){.foot-info{grid-template-columns:1fr;gap:24px;margin-top:26px;padding-top:24px}}

/* ===== WP additions (appended — do not reorder the prototype rules above) =====
   Loading state cho listing AJAX + dấu "…" của pager nhiều trang. */
.js-posgrid[aria-busy="true"],.js-artgrid[aria-busy="true"]{opacity:.55;pointer-events:none;transition:opacity .2s}
.pager .pgap{min-width:24px;text-align:center;color:var(--muted);font-weight:800;align-self:center}
/* Logo là flex-item trong .bar — khi nhãn menu dài (VI) làm bar chật, flex
   bóp ngang ảnh trong khi height cố định 34px -> méo tỉ lệ. Cấm co. */
.bar .logo,.logo-img{flex-shrink:0}
.bar .logo-img{max-width:none}
/* Story body giờ là editor tự do (Classic Editor) — ảnh chèn trực tiếp qua
   editor (thẻ img) nhận cùng ngôn ngữ hình với .story-fig của thiết kế. */
.story-body img{display:block;width:100%;height:auto;margin:34px 0;border-radius:22px}
.story-body figure.story-fig img{margin:0;border-radius:0}
/* Ảnh trong story body dùng thẻ <img class="story-fig"> thật (editor nhìn
   thấy được) — kế thừa height/bo góc/margin từ rule .story-fig sẵn có,
   cover-crop bằng object-fit thay cho background-image. */
img.story-fig{display:block;width:100%;object-fit:cover}

/* ===== Base E-Hiring card meta (deadline / quantity row on synced jobs) ===== */
.poscard .pdead{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);color:var(--accent-600);font-size:12.5px;font-weight:700}

/* Vùng fade 120px của .m-cta (margin-top âm, mask trong suốt) vẫn bắt click và
   đè lên nút Ứng tuyển của sidebar JD khi aside dài (card chi nhánh). Cho cả
   section xuyên click, bật lại đúng phần nội dung thật bên trong. */
.m-cta{pointer-events:none}
.m-cta .container{pointer-events:auto}

/* ===== Hero video nền (feedback 9/9): giữa lớp ảnh (z0) và content (z2) ===== */
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}

/* ===== Video popup (mediabox) ===== */
.vpop-ov{position:fixed;inset:0;z-index:9999;background:rgba(7,26,38,.88);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .2s ease}
.vpop-ov.on{opacity:1}
.vpop-box{position:relative;width:min(960px,94vw);aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.96);transition:transform .2s ease}
.vpop-ov.on .vpop-box{transform:scale(1)}
.vpop-box video,.vpop-box iframe{width:100%;height:100%;display:block;border:0}
.vpop-x{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:24px;line-height:1;cursor:pointer;backdrop-filter:blur(4px)}
.vpop-x:hover{background:var(--accent,#F0872B)}

/* ===== Emoji icon trong the benefit: to va nam giua khung (feedback 11/09).
   Span emoji trong .bic bi selector layout ".benefits .benefit span" keo vao
   vung text (grid-area btext) nen lech goc — tra ve giua o + phong to. ===== */
.benefit .bic{position:relative}
.benefit .bic span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1}
.page .benefits .benefit .bic span{grid-area:auto;line-height:1;min-height:0;align-self:auto}