:root{
  --rung:#0B4824; --rung-2:#0F5C2E; --rung-sau:#052A14; --rung-nhat:#E4EFE8; --rung-mo:#F3F8F4;
  --nen:#F4F7F4; --the:#FFFFFF;
  --muc:#12211A; --muc-2:#3B4E44; --phu:#5C6E64;
  --do:#EE334C; --do-chu:#BC1B31; --do-nhat:#FCE8EB;
  --vang:#B8860B; --vien:#DBE4DD; --vien-2:#BCCAC0; --luoi:#E7EFE9; --noi:#A2B6A9;
  --bong:0 1px 2px rgba(11,72,36,.05), 0 10px 28px -20px rgba(11,72,36,.4);
  --bong-2:0 2px 8px rgba(11,72,36,.07), 0 30px 60px -34px rgba(11,72,36,.5);
  --r:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nen);color:var(--muc);
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.62;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:var(--rung)}
.co{max-width:1200px;margin:0 auto;padding:0 28px}
.hep{max-width:840px}
:focus-visible{outline:3px solid var(--rung);outline-offset:3px;border-radius:4px}

/* chữ */
.hd{font-family:Montserrat,Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.022em;
  color:var(--muc);text-wrap:balance}
.nhan{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rung);margin:0 0 14px}
h1.hd{font-size:clamp(34px,4.8vw,50px);line-height:1.14;margin:0 0 20px;letter-spacing:-.03em}
/* Vì sao trần chỉ còn 50px: đo lúc chạy cho thấy từ 1080px trở lên hero chia hai cột
   và cột chữ ĐỨNG YÊN ở 573px, trong khi `vw` vẫn kéo cỡ chữ to lên theo màn hình.
   Hệ quả ngược đời: 1024px hero gọn 2 dòng, 1280px thành 4 dòng, 1440px thành 5 dòng.
   Trần 50px là cỡ lớn nhất mà cột 573px còn chứa được ~20 ký tự một dòng. */
h2.hd{font-size:clamp(26px,3.3vw,40px);line-height:1.2;margin:0 0 14px;letter-spacing:-.026em}
section.kh > .co > h2.hd:first-child,.dau > h2.hd:first-child{position:relative;padding-top:20px}
section.kh > .co > h2.hd:first-child::before,.dau > h2.hd:first-child::before{
  content:"";position:absolute;top:0;left:0;width:44px;height:3px;background:var(--rung)}
h3.hd{font-size:21px;line-height:1.32;margin:0 0 10px;letter-spacing:-.016em}
h4.hd{font-size:17px;line-height:1.35;margin:0 0 8px}
p{margin:0 0 16px;color:var(--muc-2)}
.dan{font-size:18px;color:var(--muc-2);max-width:62ch;margin:0}
strong{color:var(--muc);font-weight:600}

/* nút */
.nut{display:inline-flex;align-items:center;gap:9px;border-radius:100px;padding:13px 26px;
  font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;font-family:inherit}
.nut-1{background:var(--rung);color:#fff;box-shadow:var(--bong)}
.nut-1:hover{background:var(--rung-sau);transform:translateY(-1px);box-shadow:var(--bong-2)}
.nut-2{background:var(--the);color:var(--rung);border-color:var(--vien-2)}
.nut-2:hover{border-color:var(--rung);transform:translateY(-1px)}
.nut-3{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.nut-3:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.cta{display:flex;gap:12px;flex-wrap:wrap}

/* điều hướng */
.top{position:sticky;top:0;z-index:60;background:rgba(244,247,244,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--vien)}
.top .co{display:flex;align-items:center;gap:18px;padding-top:13px;padding-bottom:13px}
.top img.lg{width:109px;height:32px;object-fit:contain;flex:0 0 auto;min-width:109px}
.top .lg-a{flex:0 0 auto;display:inline-flex}
nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.mi{position:relative}
.mi > a{font-size:14.5px;color:var(--muc-2);text-decoration:none;padding:9px 13px;border-radius:100px;
  font-weight:500;display:inline-flex;align-items:center;gap:5px;transition:background .16s,color .16s}
.mi > a:hover,.mi > a:focus-visible,.mi.on > a{background:var(--rung-nhat);color:var(--rung)}
.mi.co-con > a::after{content:"";width:5px;height:5px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55}
.con{position:absolute;top:100%;left:0;min-width:262px;background:var(--the);border:1px solid var(--vien);
  border-radius:var(--r);box-shadow:var(--bong-2);padding:8px;display:none;z-index:70}
.mi:hover .con,.mi:focus-within .con{display:block}
.con a{display:block;padding:10px 13px;border-radius:7px;text-decoration:none;color:var(--muc);font-size:14.5px}
.con a:hover{background:var(--rung-mo)}
.con a b{display:block;font-weight:600}
.con a span{display:block;font-size:12.5px;color:var(--phu);margin-top:2px}
.top .nut{padding:11px 20px;font-size:14.5px;white-space:nowrap}

/* mảnh URL thật (chỉ có trong mẫu) */
.url-that{background:#FFF9E6;border-bottom:1px solid #E8D48A;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;color:#7A6314;padding:7px 0}
.url-that .co{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.url-that b{color:#4A3D0C}

/* dải sáng/tối */
.toi{background:var(--rung);color:#fff}
.toi h2,.toi h3{color:#fff}
.toi p{color:#C6DED2}
.toi .nhan{color:#93C4A8}
.rat-toi{background:var(--rung-sau);color:#fff}
.trang{background:var(--the)}
section.kh{padding:76px 0}
section.kh.gon{padding:56px 0}
.dau{max-width:64ch;margin-bottom:36px}

/* hero */
.hero{padding:70px 0 60px}
.hero-2c{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center}
.tren{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--phu);
  padding-top:22px;margin-top:26px;border-top:1px solid var(--vien)}
.nt{display:inline-flex;align-items:center;gap:7px;color:var(--muc-2);font-size:13.5px;font-weight:500}
.nt img{width:22px;height:22px;border-radius:5px}

/* thẻ so sánh trong hero */
.ss{background:var(--the);border:1px solid var(--vien);border-radius:var(--r);padding:26px 28px;box-shadow:var(--bong-2)}
.ss-d{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:15px;
  margin-bottom:20px;border-bottom:1px solid var(--vien)}
.ss-d b{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.ss-d span{font-size:12px;color:var(--phu)}
.ss-r{display:grid;gap:16px}
.ss-r > div{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:baseline}
.ss-r .t{font-size:14px;font-weight:600;color:var(--muc)}
.ss-r .v{font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.ss-r .bar{grid-column:1/-1;height:9px;border-radius:100px;background:var(--luoi);overflow:hidden}
.ss-r .bar i{display:block;height:100%;border-radius:100px}
.ss-r .m{grid-column:1/-1;font-size:12.5px;color:var(--phu);margin-top:-2px}
.g1 .v{color:var(--rung)} .g1 .bar i{background:var(--rung)}
.g2 .v{color:var(--vang)} .g2 .bar i{background:var(--vang)}
.g3 .v{color:var(--do-chu)} .g3 .bar i{background:var(--do)}
.ss-c{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--vien);font-size:13px;color:var(--phu)}


/* báo chí */
.luoi-bao{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bao{display:flex;flex-direction:column;gap:14px;background:var(--the);border:1px solid var(--vien);
  border-radius:var(--r);padding:24px;text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s}
.bao:hover{border-color:var(--rung);transform:translateY(-2px);box-shadow:var(--bong)}
.bao-lg{height:36px;display:flex;align-items:center}
.bao-lg img{height:36px;width:130px;object-fit:contain;object-position:left center}
.mast{font-family:Montserrat,Inter,sans-serif;font-size:17px;font-weight:700;color:var(--muc);letter-spacing:-.01em}
.bao-tit{font-size:15px;line-height:1.45;color:var(--muc);font-weight:500;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bao-di{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--rung)}

/* dịch vụ */
.dv4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dv4-2{grid-template-columns:repeat(2,1fr)}
.dv4-3{grid-template-columns:repeat(3,1fr)}
.dv{background:var(--the);border:1px solid var(--vien);border-radius:var(--r);padding:28px 26px;
  display:flex;flex-direction:column;text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s}
.dv:hover{border-color:var(--rung);transform:translateY(-3px);box-shadow:var(--bong-2)}
.dv.nb{background:var(--rung);border-color:var(--rung);color:#fff;grid-row:span 1}
.dv.nb h3,.dv.nb .dv-s{color:#fff} .dv.nb p{color:#C6DED2} .dv.nb .dv-l{color:#93C4A8}
.dv.nb .dv-di{color:#fff}
.dv-s{font-family:Montserrat,Inter,sans-serif;font-weight:700;font-size:34px;line-height:1;letter-spacing:-.03em;
  color:var(--rung);margin:0 0 4px;font-variant-numeric:tabular-nums}
.dv-l{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--phu);margin:0 0 18px}
.dv p{font-size:14.5px;margin:0 0 18px;flex:1}
.dv-di{margin-top:auto;font-size:14px;font-weight:600;color:var(--rung);display:inline-flex;gap:7px}

/* dự án nổi bật */
.luoi-da{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.da{background:var(--the);border:1px solid var(--vien);border-radius:var(--r);padding:24px;text-align:center}
.da-lg{height:66px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.da-lg img{max-height:66px;width:auto;object-fit:contain}
.da h3{font-family:Montserrat,Inter,sans-serif;font-size:16px;font-weight:700;margin:0 0 5px;letter-spacing:-.01em}
.da-ceo{font-size:12.5px;color:var(--phu);margin:0 0 8px}
.da-goi{font-size:13px;color:var(--rung);font-weight:600;margin:0;line-height:1.4}

/* tường logo */
.tuong{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tuong ul{display:flex;gap:12px;margin:0;padding:8px 0;list-style:none;width:max-content;animation:chay 86s linear infinite}
.tuong.n2 ul{animation-duration:104s;animation-direction:reverse}
.tuong:hover ul,.tuong:focus-within ul{animation-play-state:paused}
.tuong li{display:flex;align-items:center;gap:11px;background:var(--the);border:1px solid var(--vien);
  border-radius:100px;padding:8px 18px 8px 8px;white-space:nowrap}
.tuong li img{width:36px;height:36px;border-radius:100px;object-fit:contain;background:#fff}
.tuong li span{font-size:13.5px;font-weight:500;color:var(--muc-2)}
@keyframes chay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .tuong ul{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .tuong{mask-image:none;-webkit-mask-image:none}}

/* bài viết */
.luoi-bv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bv{background:var(--the);border:1px solid var(--vien);border-radius:var(--r);overflow:hidden;
  text-decoration:none;display:flex;flex-direction:column;transition:border-color .18s,transform .18s,box-shadow .18s}
.bv:hover{border-color:var(--rung);transform:translateY(-3px);box-shadow:var(--bong)}
.bv-anh{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--luoi)}
.bv-anh img{width:100%;height:100%;object-fit:cover}
.bv-in{padding:18px 20px 22px;display:flex;flex-direction:column;gap:7px}
.bv-ngay{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--phu)}
.bv-tit{font-size:15.5px;font-weight:600;color:var(--muc);line-height:1.4}
.bv-mo{font-size:14px;color:var(--muc-2);line-height:1.55}
.bv-to{grid-column:span 2}
.bv-to .bv-anh{aspect-ratio:16/8}
.bv-to .bv-tit{font-size:21px}

/* đánh giá */
.luoi-dg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dg{margin:0;background:var(--the);border:1px solid var(--vien);border-radius:var(--r);padding:24px}
.dg-d{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sao{color:var(--vang);letter-spacing:2px;font-size:14px}
.dg-n{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--phu)}
.dg{display:flex;flex-direction:column}
.dg blockquote{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--muc-2);flex:1;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.dg figcaption{font-size:14px;font-weight:600;color:var(--muc)}
.dg figcaption span{font-weight:400;color:var(--phu);font-size:12.5px}

/* CEO */
.ceo{background:var(--rung-sau);color:#fff;border-radius:12px;overflow:hidden}
.ceo-in{display:grid;grid-template-columns:320px 1fr}
.ceo-a{background:var(--rung)}
.ceo-a img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ceo-c{padding:48px 44px}
.ceo-c blockquote{margin:0 0 22px;font-family:Montserrat,Inter,sans-serif;font-weight:600;
  font-size:clamp(20px,2.2vw,27px);line-height:1.3;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.ceo-c .ai b{display:block;font-size:17px;color:#fff;margin-bottom:3px}
.ceo-c .ai{font-size:14.5px;color:#AECFBC;margin:0 0 24px}
.bcs{display:flex;gap:26px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.bcs div b{display:block;font-family:Montserrat,Inter,sans-serif;font-size:22px;letter-spacing:-.02em}
.bcs div span{font-size:12.5px;color:#93C4A8}

/* bảng */
.cuon{overflow-x:auto;border:1px solid var(--vien);border-radius:var(--r);background:var(--the)}
.goi-cuon{display:none;font-size:12.5px;color:var(--phu);margin:0 0 8px}
@media (max-width:760px){.goi-cuon{display:block}}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--vien);color:var(--muc-2)}
thead th{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--phu);font-weight:500;border-bottom:1px solid var(--vien-2);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}

/* bậc tự chấm */
.bac{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--vien);
  border-radius:var(--r);overflow:hidden;background:var(--the)}
.bac > div{padding:26px 28px;border-right:1px solid var(--vien)}
.bac > div:last-child{border-right:none}
.bac .m{font-family:Montserrat,Inter,sans-serif;font-weight:700;font-size:27px;letter-spacing:-.02em;margin:0 0 5px}
.bac .t{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;margin:0 0 11px}
.bac p{margin:0;font-size:14px}
.b1{background:var(--rung-nhat)} .b1 .m,.b1 .t{color:var(--rung)}
.b2 .m,.b2 .t{color:var(--vang)}
.b3{background:var(--do-nhat)} .b3 .m,.b3 .t{color:var(--do-chu)}

/* biểu đồ */
.bd{background:var(--the);border:1px solid var(--vien);border-radius:var(--r);padding:24px 22px 16px}
.bd-cuon{overflow-x:auto}
.bd svg{display:block;min-width:520px;width:100%;height:auto}
.truc{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--phu)}
.tencot{font-family:Inter,sans-serif;font-size:11px;fill:var(--muc-2)}
.sonhan{font-family:"IBM Plex Mono",monospace;font-size:13.5px;font-weight:600}
.sonhan.xanh{fill:var(--rung)} .sonhan.do{fill:var(--do-chu)}

/* danh sách kiểm */
ul.diem{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:10px}
ul.diem li{position:relative;padding-left:19px;font-size:15px;line-height:1.55;color:var(--muc-2)}
ul.diem li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  border-radius:100px;background:var(--rung)}
.toi ul.diem li{color:#C6DED2} .toi ul.diem li::before{background:#7FBF9A}

/* chốt */
.chot{background:var(--rung);color:#fff;border-radius:12px;padding:54px 48px;text-align:center}
.chot h2{color:#fff} .chot p{color:#C6DED2;font-size:17.5px;max-width:58ch;margin:0 auto 28px}
.chot .nut-1{background:#fff;color:var(--rung)} .chot .nut-1:hover{background:var(--rung-nhat)}
.chot .cta{justify-content:center}

/* form */
.fm{display:grid;gap:16px;background:var(--the);border:1px solid var(--vien);border-radius:var(--r);padding:30px}
.fm label{display:grid;gap:6px;font-size:13.5px;font-weight:600;color:var(--muc)}
.fm input,.fm select,.fm textarea{font-family:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--vien-2);
  border-radius:8px;background:var(--nen);color:var(--muc)}
.fm textarea{min-height:96px;resize:vertical}

/* chân trang */
footer{background:var(--rung-sau);color:#AECFBC;margin-top:0;padding:58px 0 32px}
.f4{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:38px}
footer img.lg{width:136px;height:40px;object-fit:contain;margin-bottom:16px}
footer p{font-size:14px;line-height:1.7;margin:0 0 12px;color:#AECFBC}
/* h3 chứ không phải h4: chân trang đứng sau <h2> của nội dung, dùng h4 là nhảy
   cấp H2→H4 và trình đọc màn hình mất một bậc khi điều hướng theo tiêu đề. */
footer h3{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#7FBF9A;margin:0 0 15px;font-weight:500}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{color:#DCEBE2;text-decoration:none;font-size:14px}
footer a:hover{color:#fff;text-decoration:underline}
.f-day{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:20px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#7FBF9A}

/* đường dẫn phân cấp */
.bc a{color:var(--phu);text-decoration:none} .bc a:hover{color:var(--rung);text-decoration:underline}
.bc span{margin:0 8px;opacity:.5}

/* trang con: đầu trang — nền chuyển sắc nhạt + vạch nhấn, để không phẳng như trang giấy */
.dau-trang{padding:44px 0 52px;position:relative;
  background:linear-gradient(180deg,var(--rung-mo) 0%,var(--nen) 100%);
  border-bottom:1px solid var(--vien)}
.dau-trang::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--rung) 0%,var(--rung) 22%,var(--do) 22%,var(--do) 30%,transparent 30%)}
.dau-trang .nhan{margin-bottom:16px}
.dau-trang h1{margin-bottom:16px}
.dau-trang .dan{font-size:19px;line-height:1.55}

/* đường dẫn phân cấp nằm trên nền nhạt cùng đầu trang */
.bc{font-size:13px;color:var(--phu);padding:18px 0 0}

/* ghi chú */
.gc{background:#FFF9E6;border:1px solid #E8D48A;border-radius:12px;padding:30px 32px;margin:52px 0}
.gc h3{margin:0 0 6px;font-family:Montserrat,Inter,sans-serif;font-size:20px;color:#6B5309}
.gc > p{font-size:14px;color:#7A6314;margin:0 0 18px}
.gc ol{margin:0;padding-left:20px;display:grid;gap:10px}
.gc li{font-size:14.5px;color:#4A3D0C;line-height:1.6}
.gc li b{color:#2E2606}
.gc code{background:#F5EBC4;padding:1px 5px;border-radius:3px;font-size:12.5px}

.tr{display:none} .tr.on{display:block}

@media (max-width:1180px){
  /* 7 thẻ báo: 3 cột thì thẻ cuối lẻ loi -> cho nó chiếm trọn hàng */
  /* 8 thẻ dự án: GIỮ 4 cột tới 860px. Chen bước 3 cột vào là ra 3+3+2 */
  .dv4{grid-template-columns:repeat(3,1fr)}
  .dv4 > *:last-child{grid-column:1/-1}
  .dv4-2,.dv4-3{grid-column:auto}
}
@media (max-width:1080px){
  /* BẪY ĐÃ DÍNH: trước đây chỉ ẩn nav mà KHÔNG có gì thay thế — site 16 trang mà
     điện thoại và máy tính bảng không còn lối điều hướng nào ngoài chân trang. */
  nav{display:none}
  .hero-2c{grid-template-columns:1fr;gap:36px}
  .ceo-in{grid-template-columns:1fr} .ceo-a{max-height:320px}
  .f4{grid-template-columns:1fr 1fr}
  .bv-to{grid-column:span 1}
}
@media (max-width:860px){
  .luoi-bao{grid-template-columns:repeat(2,1fr)}
  .luoi-bao > *:last-child{grid-column:1/-1}
  .luoi-da,.dv4,.luoi-dg,.luoi-bv{grid-template-columns:repeat(2,1fr)}
  .luoi-bv > *:last-child{grid-column:1/-1}   /* 3 và 9 thẻ đều lẻ khi chia 2 */
  .dv4 > *:last-child{grid-column:auto}       /* 4 thẻ chia hết cho 2, để nguyên */
  .luoi-da > *:last-child{grid-column:auto}   /* 8 chia hết cho 2, không cần */
  .dv4-3{grid-template-columns:1fr}           /* 3 không chia hết cho 2 */
  .bac{grid-template-columns:repeat(2,1fr)}
  .bac > div:last-child{grid-column:1/-1}
}
@media (max-width:620px){
  .co{padding:0 18px}
  .luoi-bao{grid-template-columns:1fr}
  .luoi-bao > *:last-child{grid-column:auto}
  .luoi-da,.dv4,.dv4-2,.dv4-3,.luoi-dg,.luoi-bv{grid-template-columns:1fr}
  .bac{grid-template-columns:1fr}
  .ceo-c{padding:32px 24px} .chot{padding:38px 22px}
  .f4{grid-template-columns:1fr}
  .bac > div{border-right:none;border-bottom:1px solid var(--vien)}
}

.uy{background:var(--rung-sau);color:#AECFBC}
.uy .co{display:grid;grid-template-columns:1.28fr 1.18fr .84fr;gap:0;padding-top:34px;padding-bottom:34px}
.uy-g{padding:0 34px;border-left:1px solid rgba(255,255,255,.15)}
.uy-g:first-child{padding-left:0;border-left:0}
.uy-g:last-child{padding-right:0}
.uy-k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#7FBF9A;margin:0 0 16px}
/* BẪY đã dính: .uy-s dùng flex-wrap nên nhóm 3 ô rớt xuống hàng hai, ô thứ ba đứng lẻ
   dưới hai ô kia trong khi hai nhóm bên cạnh chỉ có một hàng — dải số liệu trông vỡ.
   Nay mỗi nhóm là lưới cột cố định, luôn đúng một hàng. */
.uy-s{display:grid;gap:22px;align-items:start}
.uy-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.uy-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.uy-s b{display:block;font-family:Montserrat,Inter,sans-serif;font-weight:700;font-size:27px;line-height:1;white-space:nowrap;
  letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;margin-bottom:6px}
.uy-s span{display:block;font-size:12.5px;line-height:1.4;color:#8FBFA2}
@media (max-width:1000px){.uy .co{grid-template-columns:1fr;gap:26px}
  .uy-g{padding:0;border-left:0;border-top:1px solid rgba(255,255,255,.15);padding-top:22px}
  .uy-g:first-child{border-top:0;padding-top:0}}
/* .uy-3 có đúng 3 ô: ép về 2 cột là đẻ hàng lẻ, nên giữ 3 cột và thu chữ lại */
@media (max-width:560px){.uy-s{gap:14px}.uy-s b{font-size:19px}
  .uy-s span{font-size:11.5px}}

/* khối 4 dịch vụ trên trang chủ — cùng một khuôn, có giá, không còn số vô nghĩa */
.gv{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gv-o{background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:30px 28px 26px;
  display:flex;flex-direction:column;text-decoration:none;position:relative;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.gv-o:hover{border-color:var(--rung);transform:translateY(-3px);box-shadow:var(--bong-2)}
.gv-ai{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--phu);display:block;margin-bottom:16px;min-height:26px}
.gv-o h3{font-size:21px;margin:0 0 12px;letter-spacing:-.02em}
.gv-o p{font-size:14.5px;margin:0 0 20px;flex:1;color:var(--muc-2)}
.gv-g{display:block;font-size:14px;color:var(--muc);padding:14px 0;margin-bottom:6px;
  border-top:1px solid var(--vien)}
.gv-g b{font-family:Montserrat,Inter,sans-serif;font-size:17px;letter-spacing:-.02em}
.gv-di{font-size:14px;font-weight:600;color:var(--rung);display:inline-flex;gap:7px}
.gv-nb{background:var(--rung);border-color:var(--rung);color:#fff}
.gv-nb h3{color:#fff} .gv-nb p{color:#C6DED2} .gv-nb .gv-ai{color:#93C4A8}
.gv-nb .gv-g{color:#fff;border-top-color:rgba(255,255,255,.2)} .gv-nb .gv-di{color:#fff}
@media (max-width:1080px){.gv{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.gv{grid-template-columns:1fr}.gv-ai{min-height:0}}
/* Khối quy mô danh mục — cột dựng bằng CSS, không dùng thư viện biểu đồ */
.qm{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:end;
  height:220px;padding:0 2px;margin-bottom:26px}
.qm-c{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:6px}
.qm-v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;font-weight:600;color:var(--muc)}
.qm-t{display:block;width:100%;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,var(--rung) 0%,rgb(11, 72, 36) 100%);min-height:6px}
.qm-c:last-child .qm-t{background:linear-gradient(180deg,#EE334C 0%,#c4172f 100%)}
.qm-n{font-size:12px;color:var(--phu)}
.qm-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--vien);
  border:1px solid var(--vien);border-radius:var(--r);overflow:hidden}
.qm-g > div{background:var(--the);padding:20px 22px}
.qm-g b{display:block;font-size:26px;line-height:1.1;color:var(--muc);margin-bottom:4px}
.qm-g span{font-size:13px;color:var(--phu)}
.qm-c2{font-size:13px;color:var(--phu);margin:16px 0 0}
@media (max-width:660px){.qm{height:170px;gap:5px}.qm-v{font-size:11px}.qm-n{font-size:10.5px}
  .qm-g{grid-template-columns:1fr}}
/* Khối cảnh báo của bàn SEO — vàng là "hiểu đúng trước", đỏ là "đừng làm" */
.cb-y,.cb-d{border-radius:var(--r);padding:22px 26px;border:1px solid var(--vien)}
.cb-y{background:#FFF8E6;border-color:#E8D9A8}
.cb-d{background:#FDF0F2;border-color:#F2C4CC}
.cb-k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 10px;color:var(--phu)}
.cb-y p:last-child,.cb-d ul:last-child{margin-bottom:0}
.cb-d .diem li::marker{color:var(--do)}
/* CSS hình minh hoạ */
/* Khung hình minh hoạ dùng chung */
.mh{margin:30px 0 0;border:1px solid var(--vien);border-radius:var(--r);background:var(--the);
  padding:26px 28px 22px}
.mh-k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--phu);margin:0 0 16px}
.mh svg{display:block;width:100%;height:auto}
.mh-c{font-size:12.5px;color:var(--phu);margin:14px 0 0}
.mh-cuon{overflow-x:auto}
.mh-cuon svg{min-width:520px}
@media (max-width:660px){.mh{padding:20px 18px 16px}}
/* Lưới hai cột của trang Sách / Dịch vụ / CEO — trước dùng style inline nên
   @media không với tới và ở 390px cột cứng 300px làm tràn trang. */
.lg-sach{display:grid;grid-template-columns:300px minmax(0,1fr);gap:46px;align-items:start}
.lg-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px}
.lg-ceo{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:46px;align-items:start}
@media (max-width:900px){.lg-sach,.lg-2,.lg-ceo{grid-template-columns:minmax(0,1fr);gap:30px}}
.dd{display:inline-block;margin-left:8px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--phu);vertical-align:super}
/* ── Căn hàng giữa các thẻ cùng lưới ──────────────────────────────────────
   Tiêu đề thẻ này 1 dòng, thẻ kia 2 dòng thì đoạn chữ bên dưới lệch nhau
   20–30px — nhìn ra ngay là mất cân. `subgrid` cho các ô con của mọi thẻ
   dùng CHUNG một bộ hàng của lưới cha, nên số / tiêu đề / chữ luôn thẳng
   hàng dù dài ngắn khác nhau. Mỗi thẻ phải có đúng 3 phần tử con. */
/* ⚠ CHỈ áp subgrid cho lưới mà MỌI ô có ĐÚNG 3 phần tử con.
   Đã dính lỗi thật: `.gv` có 5 con và `.dv4` có 4 con, ghim span 3 làm các con
   thứ 4–5 dồn vào cùng hàng với con thứ 3 → chữ chồng lên nhau. */
.khac, .nd, .sm{grid-auto-rows:auto}
.khac > div, .nd > div, .sm > div{
  display:grid; grid-template-rows:subgrid; grid-row:span 3; align-content:start}
/* `.nd4` (bốn lớp phòng thủ ở bàn SEO) có 4 con: nhãn, tiêu đề, đoạn, danh sách.
   Ghim span 3 thì danh sách đè lên đoạn — đúng lỗi vừa dính ở `.gv`. */
.nd.nd4 > div{grid-row:span 4}
@supports not (grid-template-rows:subgrid){
  .khac > div, .nd > div, .sm > div{display:block}
  .khac h3, .nd h3, .sm h3{min-height:2.5em}
}
/* `.dv4` và `.gv` vẫn là thẻ flex như thiết kế gốc — phần dưới đã tự canh bằng
   `flex:1` trên đoạn chữ. Chỉ cần cho tiêu đề một chiều cao tối thiểu hai dòng
   để đoạn chữ bên dưới bắt đầu cùng hàng. */
/* `.dv` lệch vì DÒNG NHÃN phía trên tiêu đề xuống 2 dòng, không phải vì tiêu đề.
   `min-height` trên h3 không chạm được gốc lỗi. Thẻ `.dv` có 3 hoặc 4 con tuỳ khối,
   nên đặt span theo `:has()` để mọi ô trong cùng lưới dùng chung bộ hàng. */
.dv4{grid-auto-rows:auto}
.dv4 > .dv{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start}
.dv4 > .dv:has(.dv-di){grid-row:span 4}
@supports not (grid-template-rows:subgrid){
  .dv4 > .dv{display:block}
  .dv4 > .dv > .dv-s, .dv4 > .dv > .dv-l{min-height:2.4em}
  .dv4 > .dv > h3{min-height:2.5em}
}
.gv-o h3{min-height:2.5em}
@media (max-width:620px){.gv-o h3{min-height:0}
  .dv4 > .dv{display:block}
  .dv4 > .dv > .dv-s,.dv4 > .dv > .dv-l,.dv4 > .dv > h3{min-height:0}}
/* ── Trang Sách ─────────────────────────────────────────────────────────── */
.sach-cot{position:sticky;top:96px;align-self:start}
.sach-bia{width:100%;border-radius:10px;box-shadow:var(--bong-2);display:block}
.sach-mua{margin-top:18px;text-align:center}
.sach-gia{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.sach-gia-moi{font-family:Montserrat,Inter,sans-serif;font-weight:700;font-size:32px;color:var(--rung);letter-spacing:-.03em}
.sach-gia-cu{font-size:15px;color:var(--phu);text-decoration:line-through}
.sach-giam{font-size:11.5px;font-weight:700;color:#fff;background:var(--do-chu);border-radius:4px;padding:3px 7px}
.sach-tang{font-size:13.5px;color:var(--muc-2);margin:0 0 16px;line-height:1.5}
.nd3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Tám chương — mở từng chương, không đổ hết chữ ra một lần */
.ch8{border:1px solid var(--vien);border-radius:var(--r);overflow:hidden;background:var(--the)}
.ch8 details{border-bottom:1px solid var(--vien)}
.ch8 details:last-child{border-bottom:0}
.ch8 summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;gap:14px;align-items:baseline;
  transition:background .15s}
.ch8 summary::-webkit-details-marker{display:none}
.ch8 summary::after{content:"+";margin-left:auto;font-size:18px;color:var(--phu);line-height:1}
.ch8 details[open] summary::after{content:"−"}
.ch8 summary:hover{background:var(--rung-mo)}
.ch8 summary b{font-size:15.5px;color:var(--muc);line-height:1.4}
.ch8-n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rung);white-space:nowrap;min-width:74px}
.ch8 details > p{margin:0;padding:0 20px 18px 108px;font-size:14.5px;color:var(--muc-2);line-height:1.65}
@media (max-width:900px){.sach-cot{position:static}.nd3{grid-template-columns:1fr}
  .ch8 details > p{padding-left:20px}
  .ch8 summary{flex-direction:column;gap:5px}}
/* ── Nút menu cho tablet/điện thoại ─────────────────────────────────────── */
.mnu{display:none;margin-left:auto;background:none;border:1px solid var(--vien);border-radius:9px;
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;padding:0}
.mnu span{display:block;width:19px;height:2px;background:var(--muc);position:relative}
.mnu span::before,.mnu span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--muc)}
.mnu span::before{top:-6px}.mnu span::after{top:6px}
.mnu[aria-expanded="true"] span{background:transparent}
.mnu[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.mnu[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.mnu-bang{display:none;border-top:1px solid var(--vien);background:var(--the)}
.mnu-bang.mo{display:block}
.mnu-bang a{display:block;padding:14px 0;font-size:16px;color:var(--muc);text-decoration:none;
  border-bottom:1px solid var(--vien)}
.mnu-bang a:last-child{border-bottom:0}
@media (min-width:1081px){.mnu-bang{display:none !important}}
/* BẪY thứ tự nạp: css2.py ra TRƯỚC pg4.py, nên quy tắc bật .mnu phải nằm ở đây,
   nếu đặt bên css2 thì `.mnu{display:none}` ở dưới ghi đè và nút không bao giờ hiện. */
@media (max-width:1080px){.mnu{display:flex}}
/* Header ở khổ hẹp: giấu nút CTA để logo + bộ ngôn ngữ + nút menu vừa một hàng */
@media (max-width:560px){.top .cta-top{display:none}
  .top .co{gap:10px}
  .nn button{min-width:40px;padding:0 6px}}

/* Lưới quy trình — trước ghim bằng style inline nên @media không với tới,
   bản tiếng Anh dài hơn làm tràn ngang cả trang ở khổ 390. */
/* Dùng `.qt.qt-N` chứ không phải `.qt-N`: cùng độ đặc hiệu thì `.qt` định nghĩa
   sau sẽ thắng — đúng cái bẫy vừa dính ở `.nd4`. */
.qt.qt-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.qt.qt-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.qt.qt-5{grid-template-columns:repeat(5,minmax(0,1fr))}
/* 5 bước rơi vào lưới 3 cột thì thành 3+2, hàng cuối hụt. Quy trình đánh số đọc dọc
   vẫn rõ, nên xuống thẳng 1 cột. */
@media (max-width:900px){.qt.qt-5{grid-template-columns:1fr}}
@media (max-width:620px){.qt.qt-2,.qt.qt-3,.qt.qt-5{grid-template-columns:1fr}}

/* Thẻ "Báo cáo điều hành": `.kh7 > div` (0-1-1) thắng `.kh7-t` (0-1-0) nên nền xanh
   không bao giờ áp, mà chữ vẫn hoá trắng → trắng trên trắng, tương phản 1.00:1. */
.kh7 > div.kh7-t{background:var(--rung);border-color:var(--rung)}

/* Tương phản: ba chỗ chưa đạt AA */
.ceo .nhan{color:#8FD0AB}
.sao{color:#8A6508}
.nn button{min-width:44px;min-height:44px}
.c2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.88fr);gap:46px;align-items:start}
/* BẪY: track `1fr` có min-width:auto, nên bảng học phí rộng 560px thổi cả trang
   lên 580px ở khổ 390. minmax(0,…) + min-width:0 mới cho .cuon cuộn được. */
.c2>*{min-width:0}
.cuon{max-width:100%}
.canh{background:#FFF9E6;border:1px solid #E8D48A;border-radius:9px;padding:18px 22px;margin:22px 0 0}
.canh b{display:block;font-size:14.5px;color:#6B5309;margin-bottom:6px}
.canh p{margin:0;font-size:14px;color:#4A3D0C;line-height:1.6}
.canh a{color:#6B5309;font-weight:600}
.ph{background:var(--rung-mo);border:1px solid var(--vien);border-radius:12px;padding:30px 32px;margin-top:26px}
.ph-in{display:grid;grid-template-columns:.85fr 1.3fr;gap:32px;align-items:center}
.ph-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ph-3 a{background:var(--the);border:1px solid var(--vien);border-radius:9px;padding:16px 18px;
  text-decoration:none;display:block;transition:border-color .18s,transform .18s}
.ph-3 a:hover{border-color:var(--rung);transform:translateY(-2px)}
.ph-3 b{display:block;font-size:14.5px;color:var(--muc);line-height:1.35;margin-bottom:5px}
.ph-3 span{display:block;font-size:12.5px;color:var(--phu)}
.so2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.so2 b{display:block;font-family:Montserrat,Inter,sans-serif;font-size:26px;font-weight:700;
  color:var(--rung);letter-spacing:-.02em;line-height:1}
.so2 span{display:block;font-size:12.5px;color:var(--phu);margin-top:4px}
.mt{background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:32px 34px}
.mt-so{display:grid;gap:1px;background:var(--vien);
  border:1px solid var(--vien);border-radius:9px;overflow:hidden;margin-bottom:28px}
.mt-so > div{background:var(--rung-mo);padding:18px 20px}
.mt-so b{display:block;font-family:Montserrat,Inter,sans-serif;font-size:30px;font-weight:700;color:var(--rung);
  letter-spacing:-.03em;line-height:1}
.mt-so span{display:block;font-size:12.5px;color:var(--phu);margin-top:5px}
.mt-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.mt-ds{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mt-ds li{background:var(--rung-nhat);color:var(--rung);border-radius:100px;padding:6px 14px;
  font-size:13.5px;font-weight:500}
.tuong li.chu{padding:14px 20px}
@media (max-width:800px){.mt-2{grid-template-columns:1fr;gap:26px}}
.khac{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:var(--vien);
  border:1px solid var(--vien);border-radius:12px;overflow:hidden}
.khac > div{background:var(--the);padding:28px 30px;grid-column:span 4}
.khac > div:nth-child(n+4){grid-column:span 6}
.mt-so{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.khac > div,.khac > div:nth-child(n+4){grid-column:span 6}
  .khac > div:last-child{grid-column:span 12}}
@media (max-width:620px){.khac > div,.khac > div:nth-child(n+4){grid-column:span 12}
  .mt-so{grid-template-columns:repeat(2,1fr)}}
.khac-n{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--rung);
  display:block;margin-bottom:12px;font-weight:600}
.khac h3{font-size:19px;margin-bottom:8px}
.khac p{font-size:14.5px;margin:0}
ol.chuong{margin:0;padding-left:22px;display:grid;gap:9px;counter-reset:c}
ol.chuong li{font-size:15px;color:var(--muc-2);line-height:1.5}
ol.chuong li b{color:var(--muc);font-weight:600}

/* quy trình 4 bước — dải ngang có đường nối, khác hẳn lưới thẻ */
.qt{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:b;margin:8px 0}
.qt > div{position:relative;padding:26px 24px 26px 0}
.qt > div::before{counter-increment:b;content:counter(b,decimal-leading-zero);
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--rung);
  display:block;margin-bottom:12px}
.qt > div::after{content:"";position:absolute;top:6px;left:0;right:14px;height:2px;background:var(--vien)}
.qt > div:first-child::after{background:var(--rung)}
.qt h4{font-size:17px;margin:0 0 7px}
.qt p{font-size:14px;margin:0}

/* hỏi đáp — chi tiết bung ra, không phải thẻ */
.hd-ol{border-top:1px solid var(--vien)}
.hd-ol details{border-bottom:1px solid var(--vien)}
.hd-ol summary{padding:18px 40px 18px 0;font-size:16.5px;font-weight:600;color:var(--muc);
  cursor:pointer;list-style:none;position:relative}
.hd-ol summary::-webkit-details-marker{display:none}
.hd-ol summary::after{content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--phu);border-bottom:2px solid var(--phu);transform:rotate(45deg);
  transition:transform .2s}
.hd-ol details[open] summary::after{transform:rotate(-135deg)}
.hd-ol details > div{padding:0 40px 20px 0;font-size:15px;color:var(--muc-2);line-height:1.65}
.hd-ol details > div p{margin:0 0 10px}
.hd-ol details > div p:last-child{margin:0}

/* hộp phù hợp / không phù hợp */
.pk{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0}
.pk > div{border:1px solid var(--vien);border-radius:var(--r);padding:24px 26px;background:var(--the)}
.pk > div.co-{border-left:3px solid var(--rung)}
.pk > div.khong{border-left:3px solid var(--do)}
.pk h4{font-size:16px;margin:0 0 12px}
.pk ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pk li{font-size:14.5px;color:var(--muc-2);line-height:1.5;position:relative;padding-left:19px}
.pk li::before{position:absolute;left:0;top:0;font-weight:700}
.pk .co- li::before{content:"✓";color:var(--rung)}
.pk .khong li::before{content:"×";color:var(--do-chu)}

/* dải số trong trang con */
.ch{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--vien);
  border:1px solid var(--vien);border-radius:var(--r);overflow:hidden}
.ch > div{background:var(--the);padding:24px 26px;display:flex;gap:16px;align-items:flex-start}
.ch > div:last-child{grid-column:1/-1;background:var(--rung-mo)}
.ch-n{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--rung);flex:none;padding-top:2px}
.ch p{margin:0;font-size:16px;line-height:1.5;color:var(--muc)}
@media (max-width:760px){.ch{grid-template-columns:1fr}.ch > div:last-child{grid-column:auto}}
/* dải logo báo một dòng — tin cậy rẻ, không lặp cả khối thẻ */
.db{background:var(--the);border-top:1px solid var(--vien);border-bottom:1px solid var(--vien)}
.db .co{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.db-l{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--phu)}
.db img{height:29px;width:104px;object-fit:contain;opacity:.9}
.db-t{font-family:Montserrat,Inter,sans-serif;font-size:15px;font-weight:700;color:var(--muc-2)}
.db-x{margin-left:auto;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
@media (max-width:860px){.db .co{gap:18px}.db-x{margin-left:0}}

/* lời khách gắn đúng dịch vụ đang xem */
.lk{margin:0;background:var(--rung-mo);border-left:3px solid var(--rung);border-radius:0 10px 10px 0;
  padding:26px 30px}
.lk blockquote{margin:0 0 16px;font-family:Montserrat,Inter,sans-serif;font-size:19px;
  line-height:1.5;color:var(--muc);font-style:italic}
.lk figcaption{font-size:14px;color:var(--phu)}
.lk figcaption b{color:var(--muc);font-weight:600;margin-right:8px}

/* tuyên ngôn định vị — khối mở đầu trang Về chúng tôi */
.tn{background:var(--rung);color:#fff;padding:74px 0 78px;position:relative;overflow:hidden}
.tn::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.07),transparent 68%)}
.tn .co{position:relative;max-width:980px}
.tn-k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#93C4A8;margin:0 0 22px}
.tn-h{font-size:clamp(28px,4.2vw,50px);line-height:1.12;color:#fff;margin:0 0 24px;letter-spacing:-.025em}
.tn-h em{font-style:normal;color:#8FD0AB}
.tn-p{font-size:19px;color:#C6DED2;margin:0;max-width:62ch}
.tn-p strong{color:#fff}

/* sứ mệnh · tầm nhìn · văn hoá */
.sm{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--vien);
  border:1px solid var(--vien);border-radius:12px;overflow:hidden}
.sm > div{background:var(--the);padding:32px 30px}
.sm-k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--do-chu);display:block;margin-bottom:14px}
.sm h3{font-size:20px;margin:0 0 12px;line-height:1.3}
.sm p{font-size:14.5px;margin:0}

/* framework GMV + COST% */
.fw{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
.fw-o{background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:30px 32px}
.fw-nb{background:var(--rung);border-color:var(--rung)}
.fw-nb h3{color:#fff} .fw-nb p{color:#C6DED2} .fw-nb .fw-n{color:#8FD0AB}
.fw-n{font-family:Montserrat,Inter,sans-serif;font-weight:700;font-size:34px;letter-spacing:-.03em;
  color:var(--rung);display:block;margin-bottom:12px}
.fw-o h3{font-size:19px;margin:0 0 10px}
.fw-o p{font-size:14.5px;margin:0}
.fw-x{display:flex;align-items:center;font-family:Montserrat,Inter,sans-serif;font-size:34px;
  font-weight:700;color:var(--vien-2)}
@media (max-width:820px){.fw{grid-template-columns:1fr}.fw-x{justify-content:center;padding:4px 0}}

/* ba mức độ tham gia */
.bm{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bm-o{background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:30px 28px;
  text-decoration:none;display:flex;flex-direction:column;transition:border-color .18s,transform .18s,box-shadow .18s}
.bm-o:hover{border-color:var(--rung);transform:translateY(-3px);box-shadow:var(--bong-2)}
.bm-k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--phu);margin-bottom:14px}
.bm-o h3{font-size:22px;margin:0 0 12px}
.bm-o p{font-size:14.5px;margin:0 0 20px;flex:1;color:var(--muc-2)}
.bm-g{font-size:14px;font-weight:600;color:var(--rung);padding-top:14px;border-top:1px solid var(--vien)}
.bm-nb{background:var(--rung);border-color:var(--rung)}
.bm-nb h3{color:#fff} .bm-nb p{color:#C6DED2} .bm-nb .bm-k{color:#93C4A8}
.bm-nb .bm-g{color:#fff;border-top-color:rgba(255,255,255,.2)}

/* sáu nỗi đau trang ERP */
.nd{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--vien);
  border:1px solid var(--vien);border-radius:12px;overflow:hidden}
.nd > div{background:var(--the);padding:28px 30px}
.nd-n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;font-weight:600;
  color:var(--do-chu);display:block;margin-bottom:12px}
.nd h3{font-size:18px;margin:0 0 10px;line-height:1.32}
.nd p{font-size:14.5px;margin:0}

/* tám khối ERP */
.kh7{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kh7 > div{background:var(--the);border:1px solid var(--vien);border-radius:10px;padding:24px 24px 26px}
.kh7-n{display:block;font-family:Montserrat,Inter,sans-serif;font-weight:700;font-size:17px;
  letter-spacing:-.015em;color:var(--rung);margin-bottom:10px}
.kh7 p{font-size:14px;margin:0}
.kh7-t{background:var(--rung);border-color:var(--rung)}
.kh7-t .kh7-n{color:#fff} .kh7-t p{color:#C6DED2}

/* danh sách bước có số trong hộp bên */
ol.qt-d{margin:0;padding-left:20px;display:grid;gap:12px}
ol.qt-d li{font-size:14.5px;color:var(--muc-2);line-height:1.55}
ol.qt-d li b{color:var(--muc)}

@media (max-width:1000px){.nd:not(.nd3){grid-template-columns:1fr 1fr}.kh7{grid-template-columns:repeat(2,1fr)}
  /* .sm có đúng 3 ô (Sứ mệnh/Tầm nhìn/Văn hoá) — 2 cột đẻ ra hàng lẻ, nên xuống thẳng 1 cột */
  .sm{grid-template-columns:1fr}
  .bm{grid-template-columns:1fr}}
@media (max-width:660px){.sm,.nd,.kh7,.ph-3{grid-template-columns:1fr}}
.nd.nd4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:660px){.nd.nd4{grid-template-columns:1fr}}

/* BẪY: quy tắc chung `p strong{color:var(--muc)}` lấy màu mực TỐI, nên chữ đậm
   nằm trong mọi khối nền xanh đậm gần như tàng hình. Ghi đè một lần cho tất cả. */
.tn strong,.tn b,.toi strong,.toi b,.chot strong,.chot b,
.fw-nb strong,.fw-nb b,.gv-nb strong,.gv-nb b,.bm-nb strong,.bm-nb b,
.kh7-t strong,.kh7-t b,.dv.nb strong,.dv.nb b,.ceo-c strong,.ceo-c b,
.uy strong,.uy b,.so-dai strong,.so-dai b{color:#fff}
.tn em,.toi em,.chot em,.fw-nb em,.kh7-t em{color:#8FD0AB}

.so4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--vien);
  border:1px solid var(--vien);border-radius:var(--r);overflow:hidden;margin:26px 0}
.so4 > div{background:var(--rung-mo);padding:22px 24px}
.so4 b{display:block;font-family:Montserrat,Inter,sans-serif;font-size:29px;font-weight:700;
  color:var(--rung);letter-spacing:-.03em;line-height:1}
.so4 span{display:block;font-size:12.5px;color:var(--phu);margin-top:6px;line-height:1.4}

@media (max-width:900px){.qt{grid-template-columns:repeat(2,1fr)}.so4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.qt,.pk,.so4{grid-template-columns:1fr}}
@media (max-width:1000px){.c2{grid-template-columns:1fr;gap:32px}.ph-in{grid-template-columns:1fr;gap:22px}}

.nn{display:flex;gap:2px;background:var(--rung-nhat);border-radius:100px;padding:3px;margin-left:6px}
.nn button{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.05em;border:0;background:transparent;color:var(--rung);cursor:pointer;
  padding:6px 11px;border-radius:100px;transition:background .16s,color .16s}
.nn button:hover{background:rgba(11,72,36,.09)}
.nn button[aria-pressed="true"]{background:var(--rung);color:#fff}
@media (max-width:1080px){.nn{margin-left:auto}}
.k0{background-image:url(../img/909fc5fdef250dd8.webp)}
.k1{background-image:url(../img/6f34191368de898d.webp)}
.k2{background-image:url(../img/66aa0d5122f7e568.webp)}
.k3{background-image:url(../img/9d8e5c8d77ed5a0c.webp)}
.k4{background-image:url(../img/e2cac15054608757.webp)}
.k5{background-image:url(../img/d37be5eb78fa4b89.webp)}
.k6{background-image:url(../img/194b8069df1eb5b4.webp)}
.k7{background-image:url(../img/12b041e79bd6754f.webp)}
.k8{background-image:url(../img/e9fedea84ba891c7.webp)}
.k9{background-image:url(../img/15dfac02c7d6d6be.webp)}
.k10{background-image:url(../img/66d4799c448957be.webp)}
.k11{background-image:url(../img/5153b78664bad73a.webp)}
.k12{background-image:url(../img/7b1ffee352c683ec.webp)}
.k13{background-image:url(../img/c7ece8139b044a1d.webp)}
.k14{background-image:url(../img/ad7ef8af391c4b84.webp)}
.k15{background-image:url(../img/5cc0a6b203b2dc66.webp)}
.k16{background-image:url(../img/7378cb346d43f504.webp)}
.k17{background-image:url(../img/aa1c85b075a2531f.webp)}
.k18{background-image:url(../img/ccde9973cdacca7f.webp)}
.k19{background-image:url(../img/562db8968c63aff9.webp)}
.k20{background-image:url(../img/88ffeb4b6ee856df.webp)}
.k21{background-image:url(../img/68a44ac635e63317.webp)}
.k22{background-image:url(../img/46e4b36ab170c3ae.webp)}
.k23{background-image:url(../img/de55380863c23afa.webp)}
.k24{background-image:url(../img/61b1c73b81167d47.webp)}
.k25{background-image:url(../img/6e513aa3c673039a.webp)}
.k26{background-image:url(../img/b404fcfc1deb8c5e.webp)}
.k27{background-image:url(../img/2fff51df3c678f4d.webp)}
.k28{background-image:url(../img/07df5110abc768a6.webp)}
.k29{background-image:url(../img/5deb6dc60243131e.webp)}
.k30{background-image:url(../img/59b5475fdcf6db4d.webp)}
.k31{background-image:url(../img/e2f71d43be660808.webp)}
.k32{background-image:url(../img/f12f6473b79fad8c.webp)}
.k33{background-image:url(../img/32f9eb3f2e9e9084.webp)}
.k34{background-image:url(../img/081a7a2202196bd8.webp)}
.k35{background-image:url(../img/22bd9fabb22fec77.webp)}
.k36{background-image:url(../img/b6c6e592c7d1ff17.webp)}
.k37{background-image:url(../img/d5b156af25740a51.webp)}
.k38{background-image:url(../img/1ade03b4ae050aab.webp)}
.k39{background-image:url(../img/726af745d115b259.webp)}
.k40{background-image:url(../img/838e3341f4207eab.webp)}
.k41{background-image:url(../img/7dfe447172a5199c.webp)}
.k42{background-image:url(../img/06cda49ea8e1448e.webp)}
.k43{background-image:url(../img/bedcff02724ca307.webp)}
.k44{background-image:url(../img/7f29ff936fbc1b4f.webp)}
.k45{background-image:url(../img/d80a5374d6c1f2e8.webp)}
.k46{background-image:url(../img/0e98d9d593f85a54.webp)}
.lgo{background-size:contain;background-repeat:no-repeat;background-position:center;display:block}
.url-that{display:none!important}

/* ═══ Bổ sung cho theme WordPress ══════════════════════════════════════════
   Mẫu tĩnh không có bài viết thật, trang giỏ hàng hay phân trang, nên các lớp
   dưới đây không tồn tại trong mẫu. Chúng dùng đúng bộ biến màu ở :root để
   không lệch khỏi hệ thiết kế đã duyệt. */

/* Liên kết bỏ qua điều hướng — bắt buộc cho người dùng bàn phím. Ẩn cho tới khi
   được focus, không dùng display:none vì thế thì bàn phím cũng không tới được. */
.bo-qua{position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--rung);color:#fff;padding:10px 18px;border-radius:0 0 var(--r) 0;
  font-weight:600;text-decoration:none}
.bo-qua:focus{left:0}

/* Bài chưa đặt ảnh đại diện. Giữ đúng khối để lưới không so le. */
.bv-trong{display:block;width:100%;height:100%;min-height:150px;
  background:linear-gradient(135deg,var(--rung-nhat),var(--rung-mo));
  border-bottom:1px solid var(--vien)}

/* Thân bài viết và nội dung trang thường (Elementor, WooCommerce in vào đây). */
.bai-nd{font-size:16px;line-height:1.75;color:var(--muc-2);max-width:72ch}
.bai-nd > *:first-child{margin-top:0}
.bai-nd p{margin:0 0 16px}
.bai-nd h2,.bai-nd h3,.bai-nd h4{color:var(--muc);font-family:Montserrat,Inter,sans-serif;
  line-height:1.25;margin:30px 0 12px;text-wrap:balance}
.bai-nd h2{font-size:25px}
.bai-nd h3{font-size:20px}
.bai-nd h4{font-size:16px;color:var(--muc-2)}
.bai-nd ul,.bai-nd ol{margin:0 0 16px;padding-left:22px}
.bai-nd li{margin-bottom:7px}
.bai-nd a{color:var(--rung-2);text-underline-offset:3px}
.bai-nd img{height:auto;border-radius:var(--r)}
.bai-nd figure{margin:22px 0}
.bai-nd figcaption{font-size:13px;color:var(--phu);margin-top:8px}
.bai-nd blockquote{margin:24px 0;padding:18px 22px;background:var(--rung-mo);
  border-left:3px solid var(--rung);border-radius:0 8px 8px 0}
.bai-nd blockquote p:last-child{margin-bottom:0}
/* Bảng trong bài do người khác dán vào — luôn cho cuộn ngang trong khung của nó,
   nếu không một bảng rộng sẽ đẩy cả trang lệch trên điện thoại. */
.bai-nd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 18px}
.bai-nd table th,.bai-nd table td{border:1px solid var(--vien);padding:9px 11px;text-align:left}
.bai-nd table th{background:var(--rung-mo);color:var(--muc);font-weight:600}
.bai-nd .wp-block-table{display:block;overflow-x:auto;max-width:100%}
.bai-nd pre{overflow-x:auto;max-width:100%;background:var(--rung-sau);color:#E4EFE8;
  padding:14px 16px;border-radius:var(--r);font-size:13px}

/* Cột phải của trang bài viết */
.cot-ben{display:flex;flex-direction:column;gap:18px}
.hop-cta{background:var(--rung);color:#fff;border-radius:var(--r);padding:22px}
.hop-cta .nhan{color:#8FD0AB;margin:0 0 8px}
.hop-cta p{color:#D7E8DD;font-size:14.5px;line-height:1.6;margin:0 0 16px}
.hop-cta .nut{width:100%;justify-content:center}
.lq{background:var(--the);border:1px solid var(--vien);border-radius:var(--r);padding:20px}
.lq .nhan{margin:0 0 12px}
.lq-i{display:block;padding:10px 0;border-top:1px solid var(--luoi);
  font-size:14.5px;line-height:1.45;color:var(--muc);font-weight:500}
.lq-i:first-of-type{border-top:0;padding-top:0}
.lq-i:hover{color:var(--rung-2)}

/* Phân trang. 178 bài chia trang thì đây là đường duy nhất máy tìm kiếm đi tới
   các bài cũ, nên phải là thẻ <a> thật chứ không phải nút chạy bằng JS. */
.phan-trang{margin-top:34px}
.phan-trang .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.phan-trang .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 13px;border:1px solid var(--vien);
  border-radius:var(--r);background:var(--the);color:var(--muc);
  font-size:14.5px;font-weight:600;text-decoration:none}
.phan-trang .page-numbers:hover{border-color:var(--rung);color:var(--rung)}
.phan-trang .page-numbers.current{background:var(--rung);border-color:var(--rung);color:#fff}
.phan-trang .page-numbers.dots{border-color:transparent;background:transparent}

/* WooCommerce: chỉ nắn cho khớp màu, để nguyên bố cục mặc định của plugin.
   Viết đè bố cục của WooCommerce là tự nhận việc bảo trì mỗi lần nó cập nhật. */
.woo-nd{max-width:none}
.woo-nd .button,.woo-nd button.button,.woo-nd a.button,
.woo-nd .woocommerce-button{background:var(--rung)!important;color:#fff!important;
  border-radius:var(--r)!important;font-weight:600!important;padding:12px 20px!important}
.woo-nd .button:hover,.woo-nd a.button:hover{background:var(--rung-2)!important}
.woo-nd .price{color:var(--muc)!important;font-weight:700}
.woo-nd .woocommerce-message,.woo-nd .woocommerce-info{border-top-color:var(--rung)!important}
.woo-nd .woocommerce-message::before,.woo-nd .woocommerce-info::before{color:var(--rung)!important}
.woo-nd .woocommerce-error{border-top-color:var(--do)!important}
.woo-nd table.shop_table{border-radius:var(--r)}

/* Ô tìm kiếm mặc định của WordPress */
.search-form{display:flex;gap:8px}
.search-form label{flex:1;min-width:0}
.search-form .search-field{width:100%;padding:12px 14px;border:1px solid var(--vien-2);
  border-radius:var(--r);font:inherit;font-size:15px;background:var(--the);color:var(--muc)}
.search-form .search-field:focus{outline:2px solid var(--rung);outline-offset:1px;border-color:var(--rung)}
.search-form .search-submit{padding:12px 20px;border:0;border-radius:var(--r);
  background:var(--rung);color:#fff;font:inherit;font-weight:600;cursor:pointer}

@media (max-width:900px){
  .cot-ben{margin-top:26px}
}

/* Mẫu tĩnh luôn có 3 hoặc 9 thẻ nên bẻ thẻ cuối thành full-width cho cân. Blog thật
   có số bài thay đổi theo trang, nên luật đó làm thẻ cuối bị kéo dài vô cớ. Gỡ. */
@media (max-width:900px){
  .luoi-bv > *:last-child{grid-column:auto}
}

/* Contact Form 7 in ra cấu trúc riêng, không giống form tĩnh của mẫu. Nắn lại cho
   khớp thay vì sửa mẫu form trong CF7 — sửa ở CF7 thì lần sau cập nhật plugin hoặc
   ai đó chỉnh form là hỏng giao diện, còn CSS thì nằm trong theme. */
.fm-cf7 .wpcf7-form p{margin:0 0 14px}
.fm-cf7 label{display:block;font-size:13.5px;font-weight:600;color:var(--muc);margin-bottom:6px}
.fm-cf7 .wpcf7-form-control-wrap{display:block;margin-top:6px}
.fm-cf7 input[type=text],.fm-cf7 input[type=email],.fm-cf7 input[type=tel],
.fm-cf7 select,.fm-cf7 textarea{
  width:100%;padding:12px 14px;border:1px solid var(--vien-2);border-radius:var(--r);
  font:inherit;font-size:15px;background:var(--the);color:var(--muc);
  -webkit-appearance:none;appearance:none}
.fm-cf7 select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235C6E64' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px}
.fm-cf7 textarea{min-height:120px;resize:vertical}
.fm-cf7 input:focus,.fm-cf7 select:focus,.fm-cf7 textarea:focus{
  outline:2px solid var(--rung);outline-offset:1px;border-color:var(--rung)}
.fm-cf7 .wpcf7-submit{width:100%;padding:14px 22px;border:0;border-radius:var(--r);
  background:var(--rung);color:#fff;font:inherit;font-weight:600;font-size:15.5px;cursor:pointer}
.fm-cf7 .wpcf7-submit:hover{background:var(--rung-2)}
/* Thông báo lỗi phải đọc được — mặc định của CF7 là chữ đỏ trên nền đỏ nhạt, mờ. */
.fm-cf7 .wpcf7-not-valid-tip{color:var(--do-chu);font-size:13px;margin-top:5px;font-weight:500}
.fm-cf7 .wpcf7-response-output{margin:14px 0 0!important;padding:12px 14px!important;
  border-radius:var(--r)!important;border-width:1px!important;font-size:14px}
.fm-cf7 form.invalid .wpcf7-response-output,.fm-cf7 form.failed .wpcf7-response-output{
  border-color:var(--do)!important;background:var(--do-nhat);color:var(--do-chu)}
.fm-cf7 form.sent .wpcf7-response-output{
  border-color:var(--rung)!important;background:var(--rung-mo);color:var(--rung-sau)}

/* ── Nội dung cũ do người khác dán vào: phải ép về khung ─────────────────────
   Đo lúc chạy ở 390px: bài /tu-van-chien-luoc-fnb/ có scrollWidth 1618px vì các
   thẻ <figure class="wp-caption"> mang style="width:1600px" gán cứng từ trình soạn
   thảo cũ. Inline style luôn thắng luật theo lớp, nên chỗ này BẮT BUỘC dùng
   !important — đây là một trong số ít trường hợp nó đúng chứ không phải lười.
   Không có luật này thì 178 bài cũ đều đẩy trang lệch ngang trên điện thoại. */
.bai-nd img,.bai-nd video,.bai-nd iframe,.bai-nd embed,.bai-nd object,.bai-nd svg{
  max-width:100%!important;height:auto}
.bai-nd figure,.bai-nd .wp-caption,.bai-nd .wp-block-image{
  max-width:100%!important;width:auto!important;margin-left:0;margin-right:0}
.bai-nd figcaption,.bai-nd .wp-caption-text{max-width:100%}
/* URL dài và từ khoá không dấu cách làm vỡ khung y như ảnh. */
/* Bẻ chuỗi dài chỉ áp cho văn bản, không áp cho khối của WooCommerce — nếu không
   số tiền "29.990.000 ₫" bị bẻ giữa dòng. */
.bai-nd p,.bai-nd li,.bai-nd h1,.bai-nd h2,.bai-nd h3,.bai-nd h4,.bai-nd blockquote{
  overflow-wrap:anywhere}
/* Bảng lồng sâu trong bài cũng phải cuộn được, không chỉ bảng ở cấp một. */
/* Bảng trong bài phải cuộn được — NHƯNG loại trừ bảng của WooCommerce.
   Đo lúc chạy: đặt display:block lên `.wc-block-cart-items` làm giỏ hàng phình từ
   248px lên 560px ở màn 390px, vì WooCommerce Blocks tự đổi sang bố cục dọc bằng
   layout của bảng thật. Sửa layout của plugin là tự nhận lỗi của plugin. */
.bai-nd table:not([class*="wc-block"]):not([class*="woocommerce"]):not(.shop_table):not(.cart){
  display:block;overflow-x:auto;max-width:100%}

/* Nhãn "Giảm giá!" của WooCommerce neo tuyệt đối với `right:-.5em`, cố ý thò ra
   ngoài thẻ sản phẩm. Trên màn 390px nó đẩy cả trang ra 397px và sinh cuộn ngang.
   Kéo vào trong, và nhân tiện cho nó màu đỏ nhận diện thay vì màu mặc định. */
.woo-nd ul.products li.product{position:relative}
.woo-nd span.onsale{
  position:absolute!important;top:10px!important;right:10px!important;left:auto!important;
  margin:0!important;min-height:0!important;min-width:0!important;line-height:1!important;
  padding:6px 11px!important;border-radius:999px!important;
  /* --do (#EE334C) với chữ trắng chỉ đạt 4,03:1, dưới ngưỡng 4,5:1 cho chữ 12px.
     --do-chu đạt 6,29:1. Phần còn lại của site đã dùng --do-chu cho chữ đỏ, đây
     là chỗ sót lại. */
  background:var(--do-chu)!important;color:#fff!important;
  font-size:12px!important;font-weight:600!important}

/* ── Nút liên hệ nổi ────────────────────────────────────────────────────────
   Plugin cũ neo cụm nút vào GIỮA cạnh phải, đúng chỗ bảng số liệu trang chủ, nên
   nó che mất con số 40,4%. Ở đây nút nằm góc dưới phải; dưới 720px thì rút xuống
   thành một hàng ngang ở đáy — vẫn bấm được mà không đè lên chữ. */
.nlh{position:fixed;right:16px;bottom:16px;z-index:90;
  display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.nlh-n{display:flex;align-items:center;gap:0;
  width:46px;height:46px;padding:0;border-radius:999px;overflow:hidden;
  background:var(--nlh-mau);color:#fff;text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.16),0 10px 24px -14px rgba(0,0,0,.5);
  transition:width .22s ease,padding .22s ease}
.nlh-n svg{width:22px;height:22px;flex:0 0 22px;margin:0 12px}
.nlh-ten{white-space:nowrap;font-size:14px;font-weight:600;opacity:0;
  transition:opacity .16s ease;padding-right:16px}
/* Chỉ nở khi trỏ chuột vào hoặc focus bàn phím — đứng yên thì chỉ là 4 chấm tròn nhỏ. */
@media (hover:hover){
  .nlh-n:hover,.nlh-n:focus-visible{width:auto;padding-right:0}
  .nlh-n:hover .nlh-ten,.nlh-n:focus-visible .nlh-ten{opacity:1}
}
.nlh-n:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:720px){
  .nlh{right:0;left:0;bottom:0;flex-direction:row;justify-content:center;gap:10px;
    padding:9px 12px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
    border-top:1px solid var(--vien)}
  .nlh-n{width:42px;height:42px}
  .nlh-n svg{width:20px;height:20px;flex-basis:20px;margin:0 11px}
  .nlh-ten{display:none}
  /* Chừa chỗ cho thanh nút, không thì nó đè lên chân trang. */
  body{padding-bottom:60px}
}
@media (prefers-reduced-motion:reduce){.nlh-n,.nlh-ten{transition:none}}

/* ── Giỏ hàng WooCommerce Blocks trên màn hẹp ───────────────────────────────
   Đo trên site đang chạy ở 390px: `.wc-block-cart-items` giữ `min-width:560px`
   nên trang phình ra 578px và sinh cuộn ngang. Lớp `is-small` mà WooCommerce dùng
   để đổi bố cục KHÔNG được gán trong phiên bản đang cài (kiểm cả ở 1512px lẫn
   390px đều không có), nên không thể trông chờ vào nó.
   Đã xác nhận khối VẪN hydrate bình thường — ô số lượng, nút xoá, nút thanh toán
   đều hoạt động — nên đây thuần tuý là chuyện bề rộng, không đụng tới chức năng. */
@media (max-width:768px){
  .wp-block-woocommerce-cart .wc-block-cart-items{min-width:0!important}
  .wp-block-woocommerce-cart .wc-block-cart-items th,
  .wp-block-woocommerce-cart .wc-block-cart-items td{padding-left:0;padding-right:0}
  .wp-block-woocommerce-cart .wc-block-cart-item__image{width:64px}
  .wp-block-woocommerce-cart .wc-block-cart-item__image img{width:64px;height:auto}
  /* Lưới hai cột của WooCommerce cũng ép về một cột cho khỏi chật. */
  .wp-block-woocommerce-cart .wc-block-components-sidebar-layout{display:block}
  .wp-block-woocommerce-cart .wc-block-components-main,
  .wp-block-woocommerce-cart .wc-block-components-sidebar{width:100%;padding:0}
}

/* ── Cân chỉnh sau khi đổi sang Montserrat + Inter ──────────────────────────
   Inter mang sẵn bộ số đều bề ngang. Bật ở mọi nơi có số xếp cột thì các chữ số
   thẳng hàng dọc, thứ mà font tỉ lệ không làm được — đúng nhu cầu bảng doanh thu. */
table,.ss-r .v,.bac .m,.uy-s b,.dv-s,.sonhan,.bcs div b{font-variant-numeric:tabular-nums}

/* Montserrat ở cỡ nhỏ và in hoa cần nới chữ, nếu không các nét tròn dính vào nhau. */
.da h3,.gv-g b{letter-spacing:-.008em}

/* Nhãn in hoa: Inter ở cỡ nhỏ in hoa chật hơn Be Vietnam Pro nên NỚI — cả cỡ chữ
   lẫn khoảng cách. Bản vá trước viết "nới nhẹ" nhưng lại hạ cỡ 11,5px xuống 11px,
   tức làm đúng điều ngược với lý do sửa. Nhãn này lặp trên mọi khối nên đây là
   chỗ ảnh hưởng rộng nhất trang. */
.nhan{font-size:12px;letter-spacing:.15em}

/* ── Cụm từ không được bẻ đôi ───────────────────────────────────────────────
   `text-wrap:balance` cân độ dài hai dòng nhưng không biết nghĩa, nên câu
   "Năm cam kết chúng tôi ghi thành văn" bị bẻ ở giữa chữ "chúng tôi".
   Mỗi <span class="cum"> là một cụm có nghĩa; trình duyệt chỉ được xuống hàng
   GIỮA các cụm. Dùng inline chứ không inline-block để không sinh khoảng hở. */
.cum{white-space:nowrap}
/* Lối thoát: nếu một cụm dài hơn cả khung (màn rất hẹp, chữ phóng to), cho phép
   bẻ chứ không để nó đẩy vỡ trang. Thà xấu một dòng còn hơn cuộn ngang cả trang. */
/* Mốc 340px, KHÔNG phải 480px. Đã thử 480px và đo lại: nó tắt luôn việc gom cụm
   trên chính nhóm máy cần nhất, 390px bẻ thành "Chi phí Food / Apps" — cắt đôi tên
   thương hiệu, tệ hơn cả trước khi sửa.
   Mốc này chỉ để cứu trường hợp cụm rộng hơn khung. Cụm dài nhất toàn site là
   "300 khách hàng" = 14 ký tự; ở 390px chữ 34px nó chiếm ~262px trong khung ~334px,
   nên còn dư. Zoom trình duyệt 200% thu viewport theo px (390 → 195) nên vẫn lọt
   vào mốc 340px này.
   CỐ Ý KHÔNG dùng body{overflow-x:hidden} làm lưới an toàn: nó giấu tràn chứ không
   sửa, mà hôm nay chính phép đo scrollWidth đã lôi ra 3 lỗi tràn thật. */
@media (max-width:340px){ .cum{white-space:normal} }

/* ── Đường vào trang Liên hệ trên điện thoại ────────────────────────────────
   LỖI ĐÃ ĐO ĐƯỢC: ở màn ≤560px, `.cta-top` ("Chẩn đoán miễn phí") bị ẩn — mà đó
   là liên kết DUY NHẤT tới /lien-he/ trong đầu trang. Bảng menu điện thoại thì
   không có mục Liên hệ, chân trang cột "Liên hệ" chỉ có số điện thoại và mạng xã
   hội. Kết quả: khách dùng điện thoại KHÔNG còn đường nào tới form đăng ký —
   chính là đường lead chảy về ERP.
   Cách chữa: thêm mục "Liên hệ" vào menu chính, gắn lớp `chi-mobile`, và ẩn nó ở
   máy tính (nơi đã có nút CTA). Mục này nằm trong menu WordPress nên người quản
   trị sửa được, không phải sửa code. */
@media (min-width:1081px){ .mi.chi-mobile{display:none} }