:root{
  /* Bộ nhận diện CGD 2026 — CGD_BRAND_HANDOVER_PREMIUM_FINAL_2026
     Cam #FD4001 · Navy #071C34 · Đen #0D0F10 (03_COLOUR_AND_TYPOGRAPHY/CGD_Colour_Swatches.json) */
  --navy:#071C34; --navy-d:#03101F; --navy-l:#14375E; --navy-soft:#EEF2F7;
  --orange:#FD4001; --orange-d:#C33200; --orange-soft:#FFF0EB;
  /* Cam trên nền tối đủ tương phản (4,2:1) nên dùng luôn làm màu nhấn nghịch đảo */
  --accent-on-dark:#FD4001;
  --ink:#0D0F10; --ink-2:#1E293B; --slate:#4A5568;
  /* #7A8699 cũ chỉ đạt tương phản 3,69 trên nền trắng — dưới chuẩn AA (4,5)
     cho chữ nhỏ. #687384 đạt 4,8 mà vẫn giữ đúng sắc xám xanh. */
  --mut:#687384;
  --bg:#ffffff; --soft:#F5F7FA; --line:#E2E8F0; --card:#ffffff;
  --shadow:0 1px 2px rgba(7,28,52,.05),0 8px 30px rgba(7,28,52,.07);
  --shadow-lg:0 20px 50px rgba(7,28,52,.16);
  --r:14px; --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Bộ nhận diện quy định Aptos Display (tiêu đề) và Aptos (nội dung).
   Aptos là font của Microsoft Office, không phát hành cho web, nên trang ưu tiên gọi Aptos
   nếu máy khách đã cài Office, còn lại rơi về Inter — cùng nhóm neo-grotesque, gần Aptos nhất
   và hỗ trợ đầy đủ tiếng Việt. */
body{font-family:"Aptos","Aptos Display",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* height:auto là lưới an toàn: nếu width/height khai trong thẻ lệch với tệp
   thật thì trình duyệt vẫn vẽ theo tỉ lệ thật, không kéo dãn ảnh. */
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

section{padding:84px 0}
section.alt{background:var(--soft)}
h1,h2,h3,h4,.h2,.h3{font-family:"Aptos Display","Aptos",Inter,system-ui,-apple-system,sans-serif}
h1,h2,h3{line-height:1.22;letter-spacing:-.02em}
.eyebrow{color:var(--orange-d);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.h2{font-size:clamp(1.65rem,3.3vw,2.4rem);font-weight:800;color:var(--ink)}
/* Số nổi trong tiêu đề mục — dùng cho «15 năm». Cỡ 1.55em nên luôn rơi vào
   ngưỡng chữ lớn của WCAG, do đó --orange (3.55:1) vẫn đạt AA ở mức 3:1. */
.so-noi{font-size:1.55em;line-height:.9;color:var(--orange);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;vertical-align:-.06em}
.h3{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700}
.lead{color:var(--slate);font-size:1.05rem;max-width:660px;margin-top:14px}
.sec-head{margin-bottom:44px}
/* Chữ bóng lớn phía sau tiêu đề mục — học từ cgd.vn. Thuần trang trí nên
   aria-hidden, không đọc bởi trình đọc màn hình và không ảnh hưởng SEO. */
.sec-head{position:relative}
.ghostw{position:absolute;left:-6px;top:-46px;z-index:0;pointer-events:none;
  font-family:"Aptos Display","Aptos",Inter,sans-serif;font-weight:800;
  font-size:clamp(3.2rem,8vw,6.5rem);line-height:1;letter-spacing:-.03em;
  color:var(--navy);opacity:.045;text-transform:uppercase;white-space:nowrap}
.sec-head>*:not(.ghostw){position:relative;z-index:1}
/* Trên điện thoại chữ bóng chiếm nhiều diện tích và Lighthouse vẫn kiểm tương
   phản dù đã aria-hidden. Ẩn lớp trang trí này để tiêu đề mục gọn, rõ hơn. */
@media(max-width:760px){.ghostw{display:none}}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.96rem;
  padding:13px 26px;border-radius:100px;border:1.6px solid transparent;cursor:pointer;transition:.2s;white-space:nowrap}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-d);transform:translateY(-1px);box-shadow:0 10px 24px rgba(7,28,52,.30)}
.btn-accent{background:var(--orange);color:#fff}
.btn-accent:hover{background:var(--orange-d);transform:translateY(-1px);box-shadow:0 10px 24px rgba(253,64,1,.34)}
.btn-line{border-color:var(--line);color:var(--ink-2);background:#fff}
.btn-line:hover{border-color:var(--navy);color:var(--navy)}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14)}

/* Liên kết bỏ qua điều hướng — ẩn cho tới khi nhận tiêu điểm bàn phím (WCAG 2.4.1) */
.skip{position:fixed;left:16px;top:-70px;z-index:200;background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:0 0 12px 12px;font-weight:600;font-size:.92rem}
.skip:focus,.skip:focus-visible{top:0}

/* Tiêu điểm bàn phím thấy được trên mọi thành phần bấm được (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

/* Nhãn chỉ dành cho trình đọc màn hình */
.chi-doc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:18px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{height:46px;width:auto}
.menu{display:flex;align-items:center;gap:24px}
.menu>li{list-style:none;position:relative}
.menu a{font-weight:500;font-size:.94rem;color:var(--ink-2);transition:.15s;display:inline-flex;align-items:center;gap:5px}
.menu a:hover{color:var(--navy)}
.drop{position:absolute;top:calc(100% + 14px);left:-16px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-lg);padding:10px;min-width:320px;max-height:min(74vh,620px);overflow-y:auto;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:.18s}
.menu>li:hover .drop{opacity:1;visibility:visible;transform:translateY(0)}
.dgr{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-d);
  font-weight:800;padding:13px 13px 6px;margin-top:6px;border-top:1px solid var(--line)}
.dgr:first-child{padding-top:5px;margin-top:0;border-top:0}
.sbgr{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-d);
  font-weight:800;padding:12px 12px 6px}
.sbgr:first-child{padding-top:0}
.drop a{display:block;padding:9px 13px;border-radius:9px;font-size:.9rem;color:var(--slate)}
.drop a:hover{background:var(--navy-soft);color:var(--navy)}
.nav-cta{display:flex;align-items:center;gap:12px}
.search-open{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;transition:.18s}
.search-open:hover{border-color:var(--navy-l);background:var(--navy-soft)}
.search-open svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px}

/* nút ngôn ngữ */
.lang{position:relative}
.langbtn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:100px;padding:8px 13px;font:inherit;font-size:.85rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.langbtn:hover{border-color:var(--navy-l);color:var(--navy)}
.langbtn .ic{width:17px;height:17px}
.langmenu{position:absolute;right:0;top:calc(100% + 9px);background:#fff;border:1px solid var(--line);
  border-radius:13px;box-shadow:var(--shadow-lg);min-width:186px;padding:8px;display:none;z-index:120}
.langmenu.open{display:block}
.langmenu button{display:block;width:100%;text-align:left;border:0;background:none;color:var(--slate);
  padding:9px 12px;border-radius:9px;font:inherit;font-size:.9rem;cursor:pointer}
.langmenu button:hover{background:var(--navy-soft);color:var(--navy)}
.langmenu button[aria-current="true"]{background:var(--navy);color:#fff;font-weight:600}

/* Tìm kiếm toàn site: chỉ nạp chỉ mục sau khi người dùng mở hộp tìm kiếm. */
.site-search{width:min(760px,calc(100% - 28px));max-height:min(82vh,720px);margin:auto;padding:0;border:0;
  border-radius:18px;box-shadow:0 28px 80px rgba(3,16,31,.34);overflow:hidden;color:var(--ink)}
.site-search::backdrop{background:rgba(3,16,31,.68);backdrop-filter:blur(4px)}
.search-head{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid var(--line)}
.search-head input{font-size:1.05rem;background:var(--soft);border-color:transparent}
.search-close{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--navy-soft);
  color:var(--navy);font:700 1.3rem/1 Inter,sans-serif;cursor:pointer}
.search-meta{padding:13px 20px;color:var(--mut);font-size:.86rem;border-bottom:1px solid var(--line)}
.search-results{padding:8px;overflow:auto;max-height:58vh}
.search-hit{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:14px;border-radius:12px;color:inherit}
.search-hit:hover,.search-hit:focus-visible{background:var(--navy-soft)}
.search-kind{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-d);font-weight:800;padding-top:3px}
.search-hit h3{font-size:1rem;margin-bottom:4px}.search-hit p{font-size:.88rem;color:var(--slate);line-height:1.48}
.search-empty{padding:34px 18px;text-align:center;color:var(--slate)}

/* Bộ kiểm tra nhanh độ sẵn sàng dự án — xử lý hoàn toàn trong trình duyệt. */
.readiness{background:var(--navy);color:#fff;border-radius:22px;padding:clamp(24px,4vw,48px);position:relative;overflow:hidden}
.readiness::after{content:"";position:absolute;width:360px;height:360px;border:70px solid rgba(255,255,255,.035);
  border-radius:50%;right:-130px;top:-150px;pointer-events:none}
.readiness .h2{color:var(--orange)}
.readiness .eyebrow{color:#FF8A63}
.readiness-head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr);gap:36px;align-items:end}
.readiness .lead{color:rgba(255,255,255,.76)}
.readiness-note{border-left:3px solid var(--orange);padding-left:15px;color:rgba(255,255,255,.78);font-size:.9rem}
.readiness-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:28px}
.ready-q{border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:15px;background:rgba(255,255,255,.055);min-width:0}
.ready-q legend{font-size:.86rem;font-weight:700;padding:0 4px;margin-bottom:10px}
.ready-q label{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.82);font-size:.78rem;line-height:1.35;margin-top:7px;cursor:pointer;min-height:32px}
.ready-q input{width:24px;height:24px;min-width:24px;margin:0;accent-color:var(--orange);flex:none}
.ready-result{position:relative;z-index:1;margin-top:18px;padding:20px;border-radius:14px;background:#fff;color:var(--ink);display:none}
.ready-result.on{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.ready-result b{display:block;color:var(--orange-d);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.ready-result h3{font-size:1.15rem;margin-bottom:5px}.ready-result p{font-size:.9rem;color:var(--slate)}

/* huy hiệu thành viên */
.mem{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mem .in{display:flex;align-items:center;justify-content:center;gap:30px;padding:30px 0;flex-wrap:wrap}
.mem .lb{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:700}
.mem a{display:flex;align-items:center;gap:16px;padding:13px 22px;border:1px solid var(--line);
  border-radius:12px;background:#fff;transition:.2s}
.mem a:hover{border-color:var(--navy-l);box-shadow:var(--shadow);transform:translateY(-1px)}
.mem img,.mem svg.lg{height:48px;width:auto;display:block}
.mem .chip{display:block;background:var(--navy-d);border-radius:11px;padding:11px 15px}
.mem .chip img{height:34px}
.mem span{font-size:.88rem;color:var(--slate);line-height:1.35;max-width:20ch}
.mem span b{display:block;color:var(--ink);font-weight:700;font-size:1rem;margin-bottom:1px}
@media(max-width:640px){.mem .in{gap:16px;flex-direction:column}}

/* nút tải hồ sơ */
.pdf{display:inline-flex;align-items:center;gap:11px;padding:14px 20px;border:1.6px solid var(--line);
  border-radius:14px;background:#fff;transition:.2s}
.pdf:hover{border-color:var(--navy);box-shadow:var(--shadow);transform:translateY(-1px)}
.pdf .ic{color:var(--orange-d)}
.pdf b{display:block;font-size:.95rem;color:var(--ink)}
.pdf small{display:block;font-size:.82rem;color:var(--mut)}

/* hero */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--navy-d)}
.hero .hbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s cubic-bezier(.4,0,.2,1)}
.hero .hbg.dang{opacity:1}
@media(prefers-reduced-motion:reduce){.hero .hbg{transition:none}}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,16,31,.96) 0%,rgba(3,16,31,.88) 38%,rgba(7,28,52,.30) 70%,rgba(7,28,52,0) 100%)}
/* Màn hẹp: chữ trải hết chiều ngang nên lớp phủ phải đều, không đổ nghiêng như desktop */
@media(max-width:760px){
  .hero::after{background:linear-gradient(90deg,rgba(3,16,31,.94) 0%,rgba(7,28,52,.78) 55%,rgba(7,28,52,0) 100%)}
}
.hero .wrap{position:relative;z-index:2;padding-top:104px;padding-bottom:104px}
@media(min-width:981px){.hero .wrap{padding-bottom:158px}}
.hero h1{font-size:clamp(2.05rem,4.6vw,3.5rem);font-weight:800;max-width:16ch}
.hero p{margin-top:20px;font-size:1.1rem;color:rgba(255,255,255,.88);max-width:56ch}
.hero .tag{display:inline-flex;align-items:center;gap:8px;background:rgba(253,64,1,.14);
  border:1px solid rgba(253,64,1,.40);color:var(--orange);font-size:.8rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:7px 15px;border-radius:100px;margin-bottom:22px}
.hero-cta{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap}

/* Thẻ dự án lệch góc trong hero — đổi theo ảnh đang chiếu.
   Học từ cgd.vn nhưng nối vào 43 trang dự án thật thay vì để trang trí. */
.hcards{position:absolute;right:0;bottom:-1px;width:min(392px,100%);pointer-events:none}
.hcard{position:absolute;right:0;bottom:0;width:100%;display:flex;flex-direction:column;gap:5px;
  padding:26px 28px 24px;background:rgba(3,16,31,.92);backdrop-filter:blur(6px);
  border-left:3px solid var(--orange);color:#fff;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.55s cubic-bezier(.4,0,.2,1)}
.hcard.dang{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hc-cat{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--orange)}
.hc-ten{font-size:1.06rem;font-weight:700;line-height:1.3}
.hc-meta{font-size:.85rem;color:rgba(255,255,255,.66)}
.hc-more{margin-top:10px;display:inline-flex;align-items:center;gap:9px;font-size:.86rem;font-weight:600;color:#fff}
.hc-more i{width:26px;height:1.5px;background:var(--orange);display:inline-block;transition:.2s}
.hcard:hover .hc-more i{width:38px}
/* Màn hẹp: bỏ định vị tuyệt đối, cho thẻ chạy theo dòng và chỉ hiện thẻ đang chọn —
   trước đây thẻ absolute trong khung thấp nên tràn ngược lên đè mất nút hero. */
@media(max-width:980px){
  .hcards{position:static;width:100%;margin-top:28px}
  .hcard{position:static;display:none;transform:none;transition:none;border-radius:2px}
  .hcard.dang{display:flex}
}

/* stats */
.stats{background:var(--navy);color:#fff}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(255,255,255,.14)}
.stat{background:var(--navy);padding:30px 24px}
.stat b{display:block;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;color:var(--orange);letter-spacing:-.02em}
.stat span{font-size:.9rem;color:rgba(255,255,255,.8)}

/* icon */
.ic{width:24px;height:24px;display:block;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:18px;height:18px;display:inline-block;vertical-align:-3px;margin-right:8px}
.icbox{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--navy-soft);color:var(--navy);margin-bottom:15px;transition:.2s}
.icbox.sm{width:40px;height:40px;border-radius:11px;margin-bottom:12px}
.icbox.accent{background:var(--orange-soft);color:var(--orange-d)}
.card:hover .icbox{background:var(--navy);color:#fff}
.nhom h3{display:flex;align-items:center;gap:0}
.nhom .ic-sm{color:var(--orange-d)}
.tdic{display:inline-flex;align-items:center}
.tdic .ic-sm{color:var(--mut)}

.grh{display:flex;align-items:center;gap:12px;font-size:1.02rem;font-weight:700;color:var(--ink-2);
  margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.grh:not(:first-of-type){margin-top:40px}
.grh span{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-d);
  background:var(--orange-soft);padding:4px 11px;border-radius:100px}

/* cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:.2s}
.card:hover{border-color:var(--navy-l);box-shadow:var(--shadow);transform:translateY(-2px)}
.card .num{font-size:.76rem;font-weight:800;letter-spacing:.12em;color:var(--orange-d)}
.card h3{margin:10px 0 9px;font-size:1.08rem;font-weight:700}
.card p{color:var(--slate);font-size:.94rem}
.card .more{margin-top:14px;display:inline-flex;align-items:center;gap:6px;color:var(--navy);font-weight:600;font-size:.9rem}

.h1ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;flex:none;
  background:rgba(253,64,1,.14);border:1px solid rgba(253,64,1,.40);color:var(--orange)}
.h1ic .ic{width:28px;height:28px}
.grph{display:flex;align-items:center;gap:14px;margin:46px 0 20px;padding-top:22px;border-top:1px solid var(--line)}
.grph .icbox{margin:0}
.side a.item{display:flex;align-items:center}
.side a.item .ic-sm{color:var(--orange-d)}
.side a.item.on .ic-sm{color:var(--orange)}

/* project cards */
.pj{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:.2s;display:flex;flex-direction:column}
.pj:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.pj .ph{aspect-ratio:16/10;overflow:hidden;background:var(--soft)}
.pj .ph img{width:100%;height:100%;object-fit:cover;transition:.4s}
.pj:hover .ph img{transform:scale(1.05)}
.pj .bd{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column}
.pj .cat{display:flex;align-items:center;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-d)}
.pj .cat .ic-sm{width:16px;height:16px;margin-right:7px;color:var(--orange-d)}
.pj h3{margin:8px 0 10px;font-size:1rem;font-weight:700;line-height:1.35}
.pj .meta{margin-top:auto;font-size:.86rem;color:var(--mut);display:flex;flex-direction:column;gap:3px}
.pj .meta b{color:var(--ink-2);font-weight:600}

/* lưới không được nở rộng hơn khung — bài học min-width:0 */
.grid-2>*,.grid-3>*,.grid-4>*,.steps>*{min-width:0}

/* dải chỉ số trong thẻ chuyên ngành, tính từ danh mục 37 dự án */
.cnso{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:12px 0 4px;
  font-size:.84rem;color:var(--mut)}
.cnso b{font-size:1.05rem;font-weight:800;color:var(--navy);margin-right:3px}
.cnso i{width:4px;height:4px;border-radius:50%;background:var(--line);display:inline-block}

/* bộ lọc danh mục dự án */
.floc-bang{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:26px;background:#fff}
.frow{display:flex;gap:16px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.frow:last-of-type{border-bottom:0}
.flab{flex:none;width:96px;padding-top:7px;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);font-weight:800}
.fnut{display:flex;flex-wrap:wrap;gap:8px}
.floc{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid var(--line);
  border-radius:100px;background:#fff;font:inherit;font-size:.88rem;color:var(--slate);cursor:pointer;transition:.15s}
.floc:hover{border-color:var(--navy-l);color:var(--navy)}
.floc span{font-size:.76rem;font-weight:700;color:var(--mut);background:var(--soft);
  padding:1px 7px;border-radius:100px}
.floc.on{background:var(--navy);border-color:var(--navy);color:#fff}
.floc.on span{background:rgba(255,255,255,.18);color:#fff}
.fket{display:flex;align-items:center;gap:14px;padding-top:13px;min-height:20px}
.fket span{font-size:.9rem;color:var(--slate);font-weight:600}
#fxoa{border:0;background:none;font:inherit;font-size:.9rem;color:var(--orange-d);cursor:pointer;
  font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pj[hidden],.grph[hidden]{display:none}
@media(max-width:700px){
  .frow{flex-direction:column;gap:8px}
  .flab{width:auto;padding-top:0}
}

/* danh sách dự án trong thẻ chuyên ngành */
.cn-list{list-style:none;margin-top:16px;padding-top:15px;border-top:1px solid var(--line);display:grid;gap:9px}
.cn-list li{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;line-height:1.45}
.cn-list li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--orange);margin-top:8px}
.cn-list a{color:var(--slate);text-decoration:none;border-bottom:1px solid transparent;transition:.15s}
.cn-list a:hover{color:var(--navy);border-bottom-color:var(--navy-l)}
.cn-list b{color:var(--ink-2);font-weight:600}
.cn-more{margin-top:15px;display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600;color:var(--navy)}
.card:hover .cn-more{gap:10px}
:target{scroll-margin-top:100px}
.pj:target{outline:2px solid var(--navy);outline-offset:4px}

/* dòng thời gian */
.tline{list-style:none;display:grid;gap:0;position:relative;padding-left:0}
.tline li{display:grid;grid-template-columns:132px 1fr;gap:26px;position:relative;
  padding:0 0 30px 0}
.tline li:last-child{padding-bottom:0}
.tline li>b{font-size:1.06rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;
  text-align:right;padding-top:1px}
.tline li>div{position:relative;padding-left:30px;border-left:2px solid var(--line);padding-bottom:4px}
.tline li:last-child>div{border-left-color:transparent}
.tline li>div::before{content:"";position:absolute;left:-8px;top:5px;width:14px;height:14px;
  border-radius:50%;background:#fff;border:3px solid var(--orange)}
.tline h3{font-size:1.02rem;font-weight:700;margin-bottom:6px}
.tline p{color:var(--slate);font-size:.94rem}
@media(max-width:640px){
  .tline li{grid-template-columns:1fr;gap:6px}
  .tline li>b{text-align:left}
  .tline li>div{padding-left:18px}
  .tline li>div::before{left:-8px}
}
.bignum{display:block;font-size:2.1rem;font-weight:800;color:var(--navy);line-height:1.1;
  letter-spacing:-.02em;margin-bottom:5px}
.card .bignum+span{font-size:.88rem;color:var(--slate)}

/* chip dịch vụ trên trang dự án */
.dvlist{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 8px}
.dvchip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--line);
  border-radius:100px;background:#fff;font-size:.9rem;color:var(--slate);transition:.18s}
.dvchip:hover{border-color:var(--navy-l);color:var(--navy);box-shadow:var(--shadow)}
.dvchip .ic-sm{color:var(--orange-d);margin-right:0}
.dvchip b{color:var(--ink);font-weight:700}
.pjfig{margin:18px 0 6px}
/* Nhiều phối cảnh xếp dọc: giãn cách rộng hơn giữa các ảnh để mắt tách được từng ô,
   và ảnh luôn tràn hết chiều rộng cột. */
.pjfig+.pjfig{margin-top:30px}
.pjfig img{width:100%;height:auto;display:block}
.pjfig img{border-radius:var(--r);border:1px solid var(--line)}
.pjfig figcaption{margin-top:10px;font-size:.86rem;color:var(--mut)}
.tbl-sm td{font-size:.9rem;padding:9px 0}
.pj-source-note{margin:12px 0 0;font-size:.78rem;line-height:1.45;color:var(--mut)}
a.pj{color:inherit;text-decoration:none}
a.pj .more{margin-top:12px}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:.94rem;table-layout:fixed}
.tbl td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.tbl td:first-child{color:var(--mut);width:38%;padding-right:16px}
.tbl td:last-child{font-weight:600}

@media(max-width:560px){
  .tbl{table-layout:auto}
  .tbl tr{display:block;border-bottom:1px solid var(--line);padding:11px 0}
  .tbl td{display:block;border:0;padding:0;overflow-wrap:break-word}
  .tbl td:first-child{width:auto;font-size:.84rem;margin-bottom:3px}
}

/* lưới logo khách hàng */
.khgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.khlogo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:142px;padding:22px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;text-align:center;transition:.2s}
.khlogo:hover{border-color:var(--navy-l);box-shadow:var(--shadow);transform:translateY(-2px)}
.khlogo img{max-height:50px;max-width:150px;width:auto;height:auto;object-fit:contain}
.khlogo span{font-size:.8rem;color:var(--slate);line-height:1.35}
@media(max-width:1000px){.khgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.khgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.khgrid{grid-template-columns:1fr}}

/* pill list */
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{background:#fff;border:1px solid var(--line);border-radius:100px;padding:8px 16px;font-size:.88rem;color:var(--slate)}
.pill b{color:var(--navy);font-weight:700}

/* form */
form{min-width:0}
form>*, form .row>*{min-width:0}
/* Chỉ ép rộng 100% cho trường NHẬP LIỆU trong form — trước đây quy tắc này áp cho
   mọi <button> nên nút lọc, nút ngôn ngữ đều bị kéo full chiều ngang. */
input,select,textarea{font-family:inherit;max-width:100%;width:100%}
button{font-family:inherit;max-width:100%}
form button[type="submit"]{width:100%}
.lead-status{font-size:.85rem;line-height:1.55;color:var(--slate);padding:11px 13px;background:var(--navy-soft);border-radius:9px}
.lead-status button{border:0;background:none;padding:0;color:var(--navy);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.lead-status a{font-weight:700}
input,select,textarea{padding:13px 15px;border:1px solid var(--line);border-radius:11px;font-size:.95rem;background:#fff;color:var(--ink)}
textarea{resize:vertical}
select{color:var(--slate)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy-l);outline-offset:1px;border-color:var(--navy-l)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:420px){.row2{grid-template-columns:1fr}}

/* footer */
footer{background:var(--navy-d);color:rgba(255,255,255,.72);padding:60px 0 28px;font-size:.92rem}
.footer-title{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;font-weight:700}
footer a:hover{color:var(--orange)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px}
.fbot{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem;color:rgba(255,255,255,.55)}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:1050px){.steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* Dải tràn viền — chỗ nghỉ thị giác giữa trang, dùng phối cảnh THẬT của CGD.
   Thay cho khối video: cgd.vn có nút play nhưng không có video nào phía sau,
   còn CGD chưa có video quay thật nên không dựng nút giả. */
.band{position:relative;overflow:hidden;background:var(--navy-d);padding:104px 0}
.band .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,16,31,.94) 0%,rgba(3,16,31,.84) 40%,rgba(7,28,52,.28) 70%,rgba(7,28,52,0) 100%)}
.band .wrap{position:relative;z-index:2;max-width:900px}
.band-q{color:#fff;font-family:"Aptos Display","Aptos",Inter,sans-serif;
  font-size:clamp(1.35rem,2.8vw,2.05rem);font-weight:700;line-height:1.35;letter-spacing:-.015em}
.band-q b{color:var(--orange);font-weight:800}
.band-s{margin-top:18px;color:rgba(255,255,255,.78);font-size:1.02rem;max-width:62ch}
.band-cta{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
@media(max-width:760px){.band{padding:72px 0}.band::after{background:linear-gradient(90deg,rgba(3,16,31,.92) 0%,rgba(7,28,52,.76) 55%,rgba(7,28,52,0) 100%)}}

/* misc */
.note{background:var(--orange-soft);border-left:3px solid var(--orange);padding:16px 20px;border-radius:0 12px 12px 0;font-size:.93rem;color:var(--ink-2)}
.callbar{display:none}
@media(max-width:980px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .stats .grid{grid-template-columns:repeat(2,1fr)}
  .readiness-grid{grid-template-columns:repeat(2,1fr)}
}
/* Menu có thêm trang Chuyên gia: thu gọn ở laptop nhỏ và chuyển sang nút menu
   sớm hơn để không va vào logo, nút ngôn ngữ hoặc CTA. */
@media(max-width:1120px) and (min-width:921px){
  .menu{gap:14px}
  .menu a{font-size:.86rem}
  .nav-cta .btn{display:none}
}
@media(max-width:920px) and (min-width:761px){
  .menu{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:10px 18px 22px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .menu.open{display:flex}
  .menu>li{border-bottom:1px solid var(--line)}
  .menu>li a{padding:13px 2px}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 10px 12px;min-width:0}
  .burger{display:flex}
  .nav-cta .btn{display:none}
}
@media(max-width:760px){
  section{padding:60px 0}
  .menu{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:10px 18px 22px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .menu.open{display:flex}
  .menu>li{border-bottom:1px solid var(--line)}
  .menu>li a{padding:13px 2px}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 10px 12px;min-width:0}
  .burger{display:flex}
  .nav-cta .btn{display:none}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70;border-top:1px solid var(--line);background:#fff}
  .callbar a{flex:1;text-align:center;padding:13px 6px;font-weight:600;font-size:.92rem;color:var(--navy)}
  .callbar a+a{border-left:1px solid var(--line);color:var(--orange-d)}
  body{padding-bottom:52px}
  .search-hit{grid-template-columns:1fr;gap:4px}
  .readiness-head,.ready-result.on{grid-template-columns:1fr}
  .readiness-grid{grid-template-columns:1fr}
}

/* ---- Khối giải thích khái niệm trên /cong-nghe ----
   Sơ đồ là SVG nội tuyến nên ăn theo biến màu; currentColor lấy từ .kn-hinh. */
.kn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:34px;
  align-items:center;padding:30px 0;border-top:1px solid var(--line)}
.kn:first-of-type{border-top:0}
.kn-txt h3{font-size:clamp(1.15rem,2vw,1.4rem);margin-bottom:6px}
.kn-dn{color:var(--orange-d);font-weight:600;font-size:.92rem;margin-bottom:12px}
.kn-txt p{color:var(--slate);font-size:.96rem;margin-bottom:12px}
.kn-nx{border-left:3px solid var(--orange);padding-left:14px;color:var(--ink-2)!important}
.kn-hinh{color:var(--navy-l);min-width:0}
.dgm{width:100%;height:auto;display:block}
@media(max-width:900px){
  .kn{grid-template-columns:1fr;gap:22px}
  .kn-hinh{order:-1}
}

/* ---- Dải ảnh thiết bị (Aubot) ----
   Ảnh render nền trắng nên đặt trên nền --soft và bo góc để không trôi vào trang.
   object-fit:contain giữ nguyên tỉ lệ máy móc, không cắt mất cần trục. */
.tb-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;margin-top:22px}
.tb{margin:0;background:var(--soft);border:1px solid var(--line);border-radius:12px;
  overflow:hidden}
.tb img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;display:block}
.tb figcaption{padding:10px 14px 12px;font-size:.85rem;color:var(--slate);line-height:1.45}
.tb-nguon{margin-top:14px;font-size:.82rem;color:var(--mut);line-height:1.5}

/* Bảng ràng buộc thiết bị: cột giá trị canh phải, không xuống dòng giữa số và đơn vị */
.tbl.rb th{text-align:left;padding:10px 12px 10px 0;font-size:.86rem;color:var(--mut);
  text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--line)}
.tbl.rb td{padding:14px 12px 14px 0}
.rb-so{white-space:nowrap;color:var(--orange-d);font-weight:700}
@media(max-width:640px){
  .tbl.rb, .tbl.rb tbody, .tbl.rb tr, .tbl.rb td{display:block;width:100%}
  .tbl.rb thead{display:none}
  .tbl.rb tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .tbl.rb td{padding:2px 0;border:0}
}

/* ---- Ô thay cho ảnh, dùng khi dự án chưa có phối cảnh phát hành được ----
   Cố ý KHÔNG giống ảnh chụp: nền navy phẳng, chỉ có icon loại hình và nhãn,
   để không ai nhầm là công trình đã xây. Mượn ảnh dự án khác cho đủ ô còn tệ
   hơn nhiều — người xem sẽ tưởng đó là công trình này. */
.khong-anh,
.pj .ph.khong-anh{   /* .pj .ph có độ ưu tiên 0,2,0 nên phải đọ ngang mới đè được */
  background:var(--navy);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;color:#fff}
.khong-anh .ka-ic .ic{width:34px;height:34px;opacity:.85}
.khong-anh .ka-nhom{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-on-dark);font-weight:700}
.sub-hero.khong-nen{background:var(--navy)}

/* Icon trong bộ lọc dự án: đứng trước chữ, cùng màu chữ, mờ bớt để không át nhãn.
   Nút đang bật thì icon sáng theo màu nhấn. */
.flab .ic-sm{width:16px;height:16px;margin-right:7px;vertical-align:-3px;opacity:.65}
.floc .ic-sm{width:15px;height:15px;margin-right:6px;vertical-align:-3px;opacity:.55}
.floc[aria-pressed="true"] .ic-sm,.floc.on .ic-sm{opacity:1;color:var(--accent-on-dark)}

/* ---- Thẻ thiết bị trên /cong-nghe: ảnh một bên, thông số một bên ----
   Ảnh render nền trắng nên để object-fit:contain trên nền trắng, không cắt
   mất cần trục hay càng nâng. */
.tbi{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:28px;
  align-items:start;padding:28px 0;border-top:1px solid var(--line)}
.tbi:first-of-type{border-top:0;padding-top:8px}
.tbi-anh{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tbi-anh img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;display:block}
.tbi-txt h3{font-size:clamp(1.1rem,1.9vw,1.35rem);margin:4px 0 8px}
.tbi-txt p{color:var(--slate);font-size:.95rem}
.tbi-ts{width:100%;border-collapse:collapse;margin:14px 0 12px}
.tbi-ts td{padding:7px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--slate)}
.tbi-ts td:last-child{text-align:right;color:var(--ink-2);font-weight:600;white-space:nowrap}
.tbi-cgd{border-left:3px solid var(--orange);padding-left:14px;color:var(--ink-2)!important;
  font-size:.92rem!important}
.pm{position:relative}
.pm-ma{font-size:1.6rem;font-weight:800;color:var(--orange);letter-spacing:-.02em;line-height:1}
.pm h3{font-size:1.02rem;margin:8px 0 8px}
.pm p{color:var(--slate);font-size:.93rem}
@media(max-width:820px){
  .tbi{grid-template-columns:1fr;gap:18px}
  .tbi-anh{order:-1}
}

/* Mục video trang chủ: chỉ có một iframe, danh sách còn lại là thumbnail cuộn ngang. */
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:820px){.vgrid{grid-template-columns:1fr}}
.vbox{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0e1726}
.vbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vfig{margin:0}
.vfig figcaption{margin-top:10px;font-size:.92rem;opacity:.75}
.vgrid-1{grid-template-columns:1fr;max-width:920px;margin-inline:auto}
.vidrail-head{display:flex;align-items:center;justify-content:space-between;margin-top:25px;gap:16px}
.vidrail-head p{margin:0;font-size:.9rem;font-weight:700;color:var(--ink-2)}
.vidrail-controls{display:flex;gap:8px}
.vidrail-controls button{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:50%;font:700 1rem/1 Inter,sans-serif;color:var(--navy);cursor:pointer}
.vidrail-controls button:hover{border-color:var(--orange);color:var(--orange)}
.vidrail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(205px,250px);gap:14px;overflow-x:auto;padding:2px 1px 12px;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin}
.vcard{display:block;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);text-decoration:none;scroll-snap-align:start;transition:border-color .18s,transform .18s}
.vcard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--navy)}
.vcard span{display:block;padding:10px 11px 11px;font-size:.84rem;font-weight:700;line-height:1.35}
.vcard::after{content:"▶";position:absolute;left:10px;top:calc(50% - 27px);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(7,28,52,.88);color:#fff;font-size:.8rem;padding-left:2px}
.vcard:hover,.vcard:focus-visible,.vcard.active{border-color:var(--orange);transform:translateY(-2px)}
.vcard:focus-visible{outline:3px solid rgba(237,91,0,.25);outline-offset:2px}
.vid-source{margin:2px 0 0;font-size:.82rem;color:var(--slate)}
.vid-source a{color:var(--navy);font-weight:700}