/*
Theme Name: BBS Corporate
Theme URI: https://bbsgroup.com.vn
Author: BBS
Description: Website giới thiệu Công ty TNHH Phát Triển Thương Mại BBS — giới thiệu công ty, lĩnh vực hoạt động, hợp tác, tin tức, thư viện ảnh và liên hệ. Cùng bộ nhận diện với trang tuyển dụng BBS.
Version: 2.2.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: bbs-corporate
*/

/* ---------- Nền tảng ---------- */
:root{
  --blue:#12A2DC;
  --blue-dark:#0E86B8;
  --navy:#0A3D62;
  --sky:#7FD5F7;
  --tint:#F2F9FD;
  --line:#E3EFF7;
  --line-2:#E1F2FB;
  --border:#D3E6F2;
  --body:#4A6480;
  --muted:#5E7A96;
  --faint:#8FA8BE;
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--navy);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--navy)}
h1,h2,h3,h4{margin:0;letter-spacing:-.028em;text-wrap:pretty;font-weight:800}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.sec{padding-top:104px}
.sec--tight{padding-top:72px}
.sec--last{padding-bottom:110px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.eyebrow--sky{color:var(--sky)}
.h1{font-size:clamp(30px,4.1vw,50px);line-height:1.14}
.h2{font-size:clamp(26px,2.9vw,38px);line-height:1.24}
.h3{font-size:clamp(24px,2.6vw,34px);line-height:1.26}
.lede{margin-top:22px;font-size:17.5px;line-height:1.8;color:var(--body);max-width:56ch;text-align:justify}
.prose p{font-size:16.5px;line-height:1.8;color:var(--body);text-align:justify}
.prose p + p{margin-top:18px}

/* Mọi đoạn văn bản trong phần nội dung căn đều hai bên, cả desktop và mobile.
   Các dòng ngắn mang tính nhãn (ngày tháng, chú thích ảnh, thông báo) giữ căn trái. */
main p{text-align:justify}
main .news-meta,main figcaption,main .notice,main .form-note,main .stat span,
main .pager,main .info-list dd,main label{text-align:left}
.prose strong{color:var(--navy)}

/* ---------- Nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blue);color:#fff;font-weight:600;font-size:16px;
  padding:16px 30px;border-radius:999px;min-height:48px;border:0;cursor:pointer;
  transition:background .25s,transform .25s}
.btn:hover{background:var(--blue-dark);color:#fff}
.btn--ghost{background:#fff;color:var(--navy);border:1.5px solid #C6E0EF}
.btn--ghost:hover{background:#fff;border-color:var(--navy);color:var(--navy)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.link-more{font-size:15px;font-weight:600}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header-in{max-width:var(--wrap);margin:0 auto;padding:14px 32px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:62px;width:auto}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto;
  background:var(--tint);border:1px solid var(--line-2);border-radius:999px;padding:4px}
.nav a{font-size:14px;font-weight:500;padding:9px 16px;border-radius:999px;white-space:nowrap;color:var(--body)}
.nav a:hover{color:var(--navy)}
.nav a.is-current{background:var(--blue);color:#fff;font-weight:700}
.header-cta{display:flex;align-items:center;gap:10px;margin-left:12px;flex-shrink:0}
.btn-line{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--navy);
  border:1.5px solid #C6E0EF;font-weight:600;font-size:14px;padding:11px 20px;border-radius:999px;
  min-height:44px;white-space:nowrap;transition:border-color .25s,color .25s}
.btn-line:hover{border-color:var(--blue);color:var(--blue)}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--tint);border:1px solid var(--line-2);border-radius:12px;width:46px;height:46px;cursor:pointer;flex-shrink:0}
.burger span{display:block;width:20px;height:2px;background:var(--navy)}
.mobile-nav{display:none;border-top:1px solid var(--line);background:#fff;padding:14px 32px 20px}
.mobile-nav.is-open{display:block}
.mobile-nav ul{max-width:var(--wrap);margin:0 auto;display:flex;flex-direction:column;gap:4px}
.mobile-nav a{display:flex;align-items:center;min-height:48px;padding:13px 18px;border-radius:14px;
  font-size:16px;font-weight:500;color:var(--body)}
.mobile-nav a.is-current{background:var(--blue);color:#fff;font-weight:700}

/* ---------- Lưới ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:60px;align-items:center}
.split--text{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.split--form{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}

/* ---------- Ảnh ---------- */
.media{border-radius:22px;overflow:hidden;box-shadow:0 20px 46px rgba(10,61,98,.12)}
.media img{width:100%;object-fit:cover}
.media--16x10 img{aspect-ratio:16/10}
.media--21x9 img{aspect-ratio:21/9}
.media--4x3 img{aspect-ratio:4/3}
.media--1x1 img{aspect-ratio:1/1}
.media--zoom img{transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.media--zoom:hover img{transform:scale(1.045)}
.media--float{animation:bbsFloat 7s ease-in-out infinite}
.media--gap{margin-top:44px}

/* ---------- Hero ---------- */
.hero{padding-top:80px;container-type:inline-size}
/* Hero hiện ngay từ khung hình đầu tiên — không opacity động, không trôi lên. */
.hero .badge,.hero .stack,.hero .lede,.hero .btn-row,.hero .media{opacity:1;transform:none}
.hero .media img{background:var(--tint)}
.hero-col{container-type:inline-size}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--tint);
  border:1px solid var(--line-2);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;color:var(--navy)}
.badge-dot{position:relative;width:7px;height:7px;flex-shrink:0}
.badge-dot i,.badge-dot em{position:absolute;inset:0;border-radius:999px;background:var(--blue)}
.badge-dot em{animation:bbsPulse 2.4s ease-out infinite}
.stack{margin-top:22px}
.stack span{display:block;white-space:nowrap}
.hero .stack{font-size:min(50px,8.6cqw);line-height:1.14}
.stack .accent{color:var(--blue)}

/* ---------- Dải số liệu ---------- */
.stats{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  background:var(--tint);border:1px solid var(--line-2);border-radius:22px;padding:36px 40px;overflow:hidden}
.stats-sweep{position:absolute;top:0;left:0;width:18%;height:2px;
  background:linear-gradient(90deg,rgba(18,162,220,0),var(--blue),rgba(18,162,220,0));animation:bbsSweep 4.4s linear infinite}
.stat b{display:block;font-size:38px;font-weight:800;letter-spacing:-.03em;color:var(--blue)}
.stat span{display:block;margin-top:4px;font-size:14.5px;color:var(--body)}

/* ---------- Thẻ ---------- */
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:34px 30px;box-shadow:0 12px 30px rgba(10,61,98,.08);overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(10,61,98,.16)}
.card-bar{position:absolute;top:0;left:0;width:56px;height:4px;background:var(--blue)}
.card-num{display:block;font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--blue)}
.card h3{margin-top:14px;font-size:20px}
.card p{margin-top:12px;font-size:15.5px;line-height:1.75;color:var(--body)}

/* ---------- Khối nền đậm ---------- */
.panel-dark{background:var(--navy);border-radius:26px;padding:60px 56px;container-type:inline-size}
.panel-dark .stack{font-size:min(38px,6.6cqw);line-height:1.24;color:#fff}
.panel-dark .stack .accent{color:var(--sky)}
.panel-dark .h3{color:#fff}
.panel-note{margin-top:32px;font-size:15px;color:rgba(255,255,255,.66)}
.value{background:rgba(255,255,255,.06);border:1px solid rgba(127,213,247,.22);border-radius:18px;
  padding:28px 24px;transition:background .35s}
.value:hover{background:rgba(255,255,255,.11)}
.value h3{font-size:19px;color:#fff}
.value p{margin-top:10px;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.76)}
.value .card-num{color:var(--sky)}

/* ---------- Khối nền nhạt ---------- */
.soft{background:var(--tint);border:1px solid var(--line-2);border-radius:26px;padding:56px 52px}
.soft--sm{border-radius:22px;padding:32px 30px}
.cta-soft{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:48px;align-items:center}
.cta-soft .btn-row{justify-content:flex-end;margin-top:0}

/* ---------- Sứ mệnh / Tầm nhìn ---------- */
.mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--tint);
  border:1px solid var(--line-2);border-radius:26px;overflow:hidden}
.mv > div{padding:52px 48px;display:flex;flex-direction:column;gap:20px}
.mv > div:first-child{border-right:1px solid #D9EBF6}
.mv-label{display:flex;align-items:center;gap:12px}
.mv-label i{width:32px;height:2px;background:var(--blue);display:block}
.mv p.mv-text{font-size:23px;line-height:1.5;font-weight:700;color:var(--navy);text-align:justify}
.mv p.mv-foot{margin-top:auto;font-size:15.5px;line-height:1.7;color:var(--muted)}

/* ---------- Lĩnh vực hoạt động: tiêu đề hai cột + lưới kẻ ---------- */
.cap-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 64px;align-items:end;margin-top:16px}
.cap-head p{font-size:17.5px;line-height:1.8;color:var(--body);padding-bottom:6px}
.matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:52px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.matrix-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:40px 44px 44px;transition:background .35s}
.matrix-cell:hover{background:#F8FCFE}
.matrix-num{display:flex;align-items:center;gap:14px}
.matrix-num span{font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--blue)}
.matrix-num i{flex:1;height:1px;background:var(--line);display:block}
.matrix-cell h3{margin-top:20px;font-size:22px;letter-spacing:-.02em}
.matrix-cell p{margin-top:14px;font-size:15.5px;line-height:1.8;color:var(--body);max-width:44ch}

/* ---------- Năng lực vận hành: chuỗi mắt xích ---------- */
.chain{margin-top:52px;display:flex;flex-direction:column}
.chain-step{display:grid;grid-template-columns:76px minmax(0,1fr);gap:32px;align-items:start}
.chain-rail{position:relative;display:flex;flex-direction:column;align-items:center;align-self:stretch}
.chain-node{position:relative;z-index:1;width:48px;height:48px;border-radius:999px;background:#fff;
  border:1.5px solid #C6E0EF;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:var(--blue);letter-spacing:.04em;flex-shrink:0;
  transition:border-color .35s,background .35s}
.chain-step:hover .chain-node{border-color:var(--blue);background:var(--tint)}
.chain-rail i{flex:1;width:1.5px;background:var(--line);display:block}
.chain-step:last-child .chain-rail i{display:none}
.chain-body{padding-bottom:40px}
.chain-step:last-child .chain-body{padding-bottom:0}
.chain-body h3{font-size:20px;line-height:1.35;letter-spacing:-.015em;padding-top:11px}
.chain-body p{margin-top:12px;font-size:16.5px;line-height:1.8;color:var(--body);max-width:70ch}

/* ---------- Khối thành tích trên nền tảng số ---------- */
.ach-panel{position:relative;overflow:hidden}
.ach-sweep{position:absolute;top:0;left:0;width:18%;height:2px;
  background:linear-gradient(90deg,rgba(127,213,247,0),var(--sky),rgba(127,213,247,0));
  animation:bbsSweep 4.4s linear infinite}
.ach-head{margin-top:0;align-items:end;gap:24px 64px}
.ach-title{margin-top:16px;color:#fff}
.ach-lede{font-size:16.5px;line-height:1.8;color:rgba(255,255,255,.72);padding-bottom:4px}
.ach-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:48px;
  border-top:1px solid rgba(127,213,247,.22);border-left:1px solid rgba(127,213,247,.22)}
.ach-cell{border-right:1px solid rgba(127,213,247,.22);border-bottom:1px solid rgba(127,213,247,.22);
  padding:30px 28px;display:flex;flex-direction:column;transition:background .35s}
.ach-cell:hover{background:rgba(255,255,255,.06)}
.ach-value{font-size:clamp(28px,2.7vw,36px);font-weight:800;letter-spacing:-.03em;color:var(--sky);line-height:1.1}
.ach-label{margin-top:14px;margin-bottom:18px;font-size:15.5px;line-height:1.55;color:#fff;font-weight:600}
/* margin-top:auto ghim dòng nền tảng xuống đáy ô — các ô cao bằng nhau nên
   đường kẻ phân cách thẳng hàng giữa mọi ô cùng hàng. */
.ach-plat{margin-top:auto;padding-top:14px;border-top:1px solid rgba(127,213,247,.22);
  font-size:11.5px;font-weight:700;letter-spacing:.1em;line-height:1.5;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.ach-proof{margin-top:44px;padding-top:36px;border-top:1px solid rgba(127,213,247,.22)}
.ach-proof-head{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sky)}
/* Mỗi hàng dùng chung một tỷ lệ ảnh (--ar) để các ảnh cao bằng nhau. */
.ach-proof-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:22px;margin-top:22px;align-items:stretch}
.ach-proof-grid .ach-shot{height:100%}
.ach-proof-grid img{aspect-ratio:var(--ar,1170/2532) !important;object-fit:cover;object-position:top}
.ach-shot{margin:0;border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(127,213,247,.3);
  display:flex;flex-direction:column}
.ach-shot-cap{order:-1;padding:13px 16px;background:var(--navy);color:#fff;font-size:13.5px;
  font-weight:700;line-height:1.45;border-bottom:1px solid rgba(127,213,247,.3)}
.ach-shot img{width:100%;height:auto;display:block;background:var(--tint)}
.ach-logos{display:flex;flex-wrap:wrap;align-items:center;gap:34px;margin-top:40px;
  padding-top:34px;border-top:1px solid rgba(127,213,247,.22)}
.ach-logos img{height:30px;width:auto;opacity:.75;filter:brightness(0) invert(1);transition:opacity .3s}
.ach-logos img:hover{opacity:1}

/* ---------- Tên gọi BBS ---------- */
.slogan-note{margin-top:20px;padding-left:16px;border-left:3px solid var(--blue);
  font-size:16px;line-height:1.75;color:var(--navy);font-weight:600}
.share-list{margin-top:18px;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px 14px;align-items:baseline}
.share-row{display:contents}
.share-who{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.share-what{font-size:15.5px;line-height:1.7;color:var(--body)}

/* ---------- Danh sách gạch ngang ---------- */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:32px;padding:30px 0;border-bottom:1px solid var(--line)}
.row-year{font-size:24px;font-weight:800;color:var(--blue);letter-spacing:-.02em}
.row h3{font-size:19px}
.row p{margin-top:8px;font-size:16px;line-height:1.75;color:var(--body);max-width:70ch}
.row--num{grid-template-columns:52px minmax(0,1fr);gap:20px;padding:26px 0}
.row--num .row-n{font-size:14px;font-weight:800;color:var(--blue);padding-top:4px}
.row--num p{margin-top:0;font-size:16.5px;max-width:78ch}
.bullets{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.bullet{display:flex;gap:12px;align-items:flex-start}
.bullet i{width:7px;height:7px;border-radius:999px;background:var(--blue);margin-top:9px;flex-shrink:0;display:block}
.bullet p{font-size:16px;line-height:1.7;color:var(--body)}

/* ---------- Tin tức ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.news-card{display:block;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 12px 30px rgba(10,61,98,.08);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s,border-color .35s}
.news-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(10,61,98,.16);border-color:#C6E0EF}
.news-card img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.news-card:hover img{transform:scale(1.045)}
.news-card .news-body{padding:24px 26px 28px}
.news-meta{display:flex;gap:10px;align-items:center;font-size:12.5px;font-weight:600;color:var(--faint)}
.news-meta .tag{color:var(--blue)}
.news-card h3{margin-top:12px;font-size:18.5px;line-height:1.4;color:var(--navy)}
.news-card p{margin-top:10px;font-size:14.8px;line-height:1.7;color:var(--body)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.chip{border:1.5px solid var(--border);background:#fff;color:var(--body);font-size:14px;font-weight:600;
  padding:10px 20px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.chip.is-current{background:var(--blue);border-color:var(--blue);color:#fff}
.article{max-width:820px;margin:0 auto;padding:76px 32px 110px}
.article h1{margin-top:14px;font-size:clamp(28px,3.6vw,44px);line-height:1.18}
.article .media{margin-top:32px}
.article-body{margin-top:32px;font-size:17px;line-height:1.85;color:var(--body)}
.article-body p{margin-bottom:20px;text-align:justify}
.article-body h2{font-size:26px;margin:32px 0 14px;color:var(--navy)}
.article-body h3{font-size:21px;margin:28px 0 12px;color:var(--navy)}
.article-body ul{list-style:disc;padding-left:22px;margin-bottom:20px}
.article-body li{margin-bottom:8px}
.article-body img{border-radius:16px;margin:8px 0 20px}
.article-body blockquote{margin:0 0 20px;padding:18px 24px;background:var(--tint);
  border-left:3px solid var(--blue);border-radius:0 14px 14px 0;color:var(--navy);font-weight:600}
.pager{display:flex;gap:12px;flex-wrap:wrap;margin-top:48px}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:46px;
  padding:0 14px;border-radius:12px;border:1.5px solid var(--border);font-weight:600;color:var(--body)}
.pager .current{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- Thư viện ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.figure{margin:0;border-radius:18px;overflow:hidden;background:var(--tint);border:1px solid var(--line);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s}
.figure:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(10,61,98,.16)}
.figure img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.figure:hover img{transform:scale(1.045)}
.figure--wide{grid-column:span 2}
.figure--wide img{aspect-ratio:16/9}
.figure figcaption{padding:14px 18px;font-size:13.5px;color:var(--muted)}

/* ---------- Form ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:22px;padding:38px 36px;
  box-shadow:0 20px 46px rgba(10,61,98,.12);display:flex;flex-direction:column;gap:18px}
.form h2{font-size:22px}
.field{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600;color:var(--navy)}
.field input,.field select,.field textarea{
  border:1.5px solid var(--border);border-radius:12px;padding:13px 15px;font-size:15px;
  color:var(--navy);min-height:48px;background:#fff;font-family:inherit;width:100%}
.field textarea{min-height:auto;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.field-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-note{font-size:14px;line-height:1.7;color:var(--muted)}
a[href^="mailto:"]{overflow-wrap:anywhere}
.notice{padding:14px 18px;border-radius:12px;font-size:14.5px;font-weight:600}
.notice--ok{background:#EAF7FD;color:#0A6D95;border:1px solid #BFE6F7}
.notice--err{background:#FDECEC;color:#8C2B2B;border:1px solid #F3C9C9}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.info-list{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 20px;align-items:baseline}
.info-list dt{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.info-list dd{margin:0;font-size:16px;line-height:1.65;color:var(--navy)}

/* ---------- Chân trang ---------- */
.site-footer{background:var(--navy);color:#fff;padding:64px 0 40px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) max-content max-content max-content;
  justify-content:space-between;gap:48px 56px;align-items:start}
.foot-brand{max-width:44ch}
.foot-logo{display:flex;align-items:center;gap:14px}
.foot-logo img{height:56px;width:auto;background:#fff;border-radius:10px;padding:8px 14px}
.foot-brand p{margin-top:18px;font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.72)}
.foot-info{margin-top:24px;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;align-items:baseline}
.foot-info dt{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(127,213,247,.75)}
.foot-info dd{margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.78)}
.foot-info a{color:var(--sky);font-weight:600}
.foot-info a:hover{color:#fff}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-head{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(127,213,247,.9)}
.foot-col a{font-size:15px;color:rgba(255,255,255,.78)}
.foot-col a:hover{color:var(--sky)}
.foot-badges{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:44px}
.foot-badges img{height:30px;width:auto;opacity:.8;transition:opacity .3s}
.foot-badges a:hover img{opacity:1}
.foot-legal{margin-top:24px;padding-top:24px;border-top:1px solid rgba(127,213,247,.22);
  font-size:13.5px;color:rgba(255,255,255,.6)}

/* ---------- Hiệu ứng ---------- */
@keyframes bbsPulse{0%{transform:scale(1);opacity:1}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
@keyframes bbsSweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes bbsFloat{0%{transform:translateY(0)}50%{transform:translateY(-7px)}100%{transform:translateY(0)}}
[data-reveal]{opacity:0;transform:translateY(12px);
  transition:opacity .38s cubic-bezier(.22,.61,.36,1),transform .38s cubic-bezier(.22,.61,.36,1)}
[data-reveal="in"]{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

/* ---------- Đáp ứng ---------- */
@media (max-width:1240px){
  .nav{display:none}
  .burger{display:flex}
  .header-cta{margin-left:auto}
}
/* ≤768px: CTA kinh doanh chính đứng ngoài, tô nền; Tuyển dụng vào menu. */
@media (max-width:768px){
  .header-cta .btn-line:last-child{display:none}
  .header-cta .btn-line:first-child{background:var(--blue);border-color:var(--blue);color:#fff}
  .header-cta .btn-line:first-child:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
}
@media (max-width:420px){
  .header-cta .btn-line{padding:11px 15px;font-size:13.5px}
}
@media (max-width:1024px){
  .ach-proof-grid{grid-template-columns:repeat(min(var(--cols,3),2),minmax(0,1fr))}
  .ach-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .ach-head{grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
  .ach-lede{padding-bottom:0}
  .split,.split--text,.split--even,.split--form,.cta-soft{grid-template-columns:minmax(0,1fr);gap:40px}
  .cta-soft .btn-row{justify-content:flex-start}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .cap-head{grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
  .cap-head p{padding-bottom:0}
}
@media (max-width:820px){
  .matrix{grid-template-columns:minmax(0,1fr)}
  .matrix-cell{padding:30px 24px 32px}
  .mv{grid-template-columns:minmax(0,1fr)}
  .mv > div:first-child{border-right:0;border-bottom:1px solid #D9EBF6}
  .mv > div{padding:34px 26px}
}
@media (max-width:720px){
  .stack span{white-space:normal}
  .hero .stack,.panel-dark .stack{font-size:clamp(28px,7.4vw,38px)}
  .grid2,.grid3,.grid4{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:minmax(0,1fr);gap:8px}
  .field-2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .chain-step{grid-template-columns:52px minmax(0,1fr);gap:18px}
  .chain-node{width:40px;height:40px;font-size:13px}
  .chain-body{padding-bottom:30px}
  .chain-body h3{padding-top:8px;font-size:18.5px}
  .wrap,.mobile-nav,.header-in,.article{padding-left:20px;padding-right:20px}
  /* Mobile: ảnh lên trước, chữ xuống sau — mở trang là thấy hình ngay. */
  .split--hero > .hero-col{order:2}
  .split--hero > .media{order:1;margin-bottom:6px}
  .brand img{height:46px}
  .foot-logo img{height:48px}
  .sec{padding-top:56px}
  .sec--tight{padding-top:48px}
  .sec--last{padding-bottom:72px}
  .media--gap{margin-top:28px}
  .share-list{grid-template-columns:minmax(0,1fr);gap:14px 0}
  .share-row{display:block}
  .share-who{display:block}
  .share-what{display:block;margin-top:2px}
  .hero{padding-top:34px}
  .article{padding-top:40px;padding-bottom:72px}
  .site-footer{padding:48px 0 32px}
  .h1{font-size:31px}
  .h2{font-size:25px}
  .h3{font-size:23px}
  .lede{font-size:16.5px}
  .btn{width:100%;padding:15px 24px}
  .btn-row{gap:12px}
  .header-cta .btn-line{width:auto;padding:11px 18px}
  .panel-dark{padding:34px 22px;border-radius:20px}
  .soft{padding:26px 20px;border-radius:18px}
  .soft--sm{padding:24px 20px}
  .form{padding:26px 20px;border-radius:18px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:24px 22px;gap:18px}
  .ach-grid{grid-template-columns:minmax(0,1fr);margin-top:32px}
  .ach-cell{padding:22px 20px}
  .ach-value{font-size:29px}
  .ach-proof{margin-top:32px;padding-top:26px}
  .ach-proof-grid{grid-template-columns:minmax(0,1fr) !important;gap:16px;margin-top:18px}
  .ach-shot-cap{padding:11px 14px;font-size:13px}
  .ach-logos{gap:24px;margin-top:30px;padding-top:26px}
  .ach-logos img{height:24px}
  .stat b{font-size:29px}
  .card{padding:24px 22px}
  .gallery{grid-template-columns:minmax(0,1fr)}
  .figure--wide{grid-column:span 1}
  .figure--wide img{aspect-ratio:4/3}
  .media--21x9 img,.media--1x1 img{aspect-ratio:16/10}
  .media--float{animation:none}
  .ach-sweep{animation:none}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .field input,.field select,.field textarea{font-size:16px}
  [data-reveal]{transform:translateY(14px)}
}
@media (max-width:400px){
  .stats{grid-template-columns:minmax(0,1fr)}
  .h1{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal="in"]{opacity:1 !important;transform:none !important;transition:none !important;animation:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .card:hover,.news-card:hover,.figure:hover{transform:none}
  .media--zoom:hover img,.news-card:hover img,.figure:hover img{transform:none}
  .media--float,.badge-dot em,.stats-sweep,.ach-sweep{animation:none}
}