/* A¹ONE — design system, Phase 03
   Hướng thị giác A · The Architect
   Tokens đặt tên theo vai trò, không theo màu. */

/* ============ 1. TOKENS ============ */
:root{
  /* thương hiệu — Brand Guidelines V1.0 */
  --aone-navy:#202C47;
  --aone-teal:#18B7B0;
  --aone-charcoal:#252525;
  --aone-greige:#DCD6CC;
  --aone-sand:#E7DFD3;
  --aone-white:#F9F7F3;
  /* phái sinh — chỉ sống ở lớp giao diện web */
  /* #0E7D78 cũ chỉ được kiểm trên nền trắng (4,65:1) — trên sand còn 3,76 và
     trên greige còn 3,44, tức HỎNG ở phần lớn nơi nó thật sự xuất hiện.
     #0A605C đạt tối thiểu 5,12 trên cả bốn nền sáng của hệ màu. Xem §30. */
  --aone-teal-deep:#0A605C;
  --aone-line-strong:#8F877A;
  --aone-text-muted-raw:#5C5A55;
  --aone-error:#A8342A;
  --aone-kw:#0A605C;      /* teal đậm dành cho chữ nhấn, xem §24 */

  /* vai trò — nền */
  --aone-bg-base:var(--aone-white);
  --aone-bg-alt:var(--aone-greige);
  --aone-bg-raised:var(--aone-sand);
  --aone-bg-invert:var(--aone-navy);
  --aone-bg-deep:var(--aone-charcoal);
  /* vai trò — chữ */
  --aone-text-primary:var(--aone-navy);
  --aone-text-body:var(--aone-charcoal);
  --aone-text-muted:var(--aone-text-muted-raw);
  --aone-text-invert:var(--aone-white);
  --aone-text-invert-muted:#B8C0CE;
  /* vai trò — nhấn */
  --aone-accent-line:var(--aone-teal);
  --aone-accent-interactive:var(--aone-teal-deep);
  --aone-accent-subtle:rgba(24,183,176,.12);
  /* vai trò — viền */
  --aone-line-hairline:var(--aone-greige);
  --aone-line:var(--aone-line-strong);
  --aone-line-invert:rgba(249,247,243,.2);

  /* chữ */
  --aone-font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --aone-font-ui:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;

  /* khoảng cách — gốc 4px */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px;  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --space-24:96px; --space-32:128px; --space-40:160px;

  /* lưới */
  --content-max:1280px;
  --prose-max:720px;
  --gutter:80px;
  --hdr-gutter:32px;
  --header-h:80px;
  --header-h-sm:64px;

  /* khoảng đệm mục — chỉnh ở đây là cả site đổi theo */
  --sec-pad:80px;
  --sec-pad-invert:96px;

  /* chuyển động */
  --t-micro:150ms;
  --t-state:250ms;
  --t-move:300ms;
  --t-enter:400ms;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-enter:cubic-bezier(.16,1,.3,1);
}
@media (max-width:1439px){ :root{ --gutter:64px; --hdr-gutter:24px } }
@media (max-width:1279px){ :root{ --gutter:48px } }
@media (max-width:1023px){ :root{ --gutter:32px; --hdr-gutter:32px } }
@media (max-width:767px){  :root{ --gutter:16px; --hdr-gutter:16px; --header-h:64px; --header-h-sm:56px } }

/* ============ 2. NỀN TẢNG ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--aone-bg-base); color:var(--aone-text-body);
  font-family:var(--aone-font-ui); font-size:17px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
/* Trạng thái đang chọn / đang lấy tiêu điểm.
   Bản cũ vẽ một hộp viền teal 2px quanh nút — nhìn thô, không hợp hướng
   THE ARCHITECT. Nay: nền dịu + một gạch nhấn dưới, bo góc nhẹ. Vẫn là dấu
   hiệu thấy rõ (gạch 2px teal đậm đạt trên 3:1 so với nền), nhưng đọc như
   một chú thích trên bản vẽ chứ không như khung chọn của hệ điều hành. */
:focus-visible{outline:none}
:where(a,button,summary,[tabindex],.osd__node):focus-visible{
  outline:none;border-radius:3px;
  background:var(--aone-accent-subtle);
  box-shadow:inset 0 -2px 0 var(--aone-accent-interactive)}
.on-invert :where(a,button,summary,[tabindex]):focus-visible{
  background:rgba(24,183,176,.14);
  box-shadow:inset 0 -2px 0 var(--aone-accent-line)}
/* Nút trên sơ đồ là SVG — không nhận background, nên đổi nét vòng tròn */
.osd__node:focus-visible{background:none;box-shadow:none}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--aone-navy);
  color:var(--aone-white);padding:var(--space-3) var(--space-4);border-radius:4px}
.skip:focus{left:var(--space-4);top:var(--space-4)}

/* ============ 3. LƯỚI ============ */
.wrap{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:var(--prose-max)}

/* ============ 4. CHỮ ============ */
/* Playfair Display: chỉ Display → H3. Từ H4 xuống dùng Inter (ngưỡng 27px). */
.t-display,.t-h1,.t-h2,.t-h3{font-family:var(--aone-font-display);font-weight:400;
  color:var(--aone-text-primary);margin:0;text-wrap:balance}
.t-display{font-size:65px;line-height:1.20;letter-spacing:-.01em}
.t-h1{font-size:46px;line-height:1.2;letter-spacing:-.01em}
.t-h2{font-size:36px;line-height:1.24}
.t-h3{font-size:33px;line-height:1.30}
.t-h4{font-family:var(--aone-font-ui);font-weight:600;font-size:27px;line-height:1.35;
  color:var(--aone-text-primary);margin:0}
.t-bodyl{font-size:19px;line-height:1.55;margin:0}
.t-body{font-size:17px;line-height:1.60;margin:0}
.t-small{font-size:14px;line-height:1.50;letter-spacing:.01em;margin:0}
.t-label{font-family:var(--aone-font-ui);font-weight:500;font-size:13px;line-height:1.40;
  letter-spacing:.08em;text-transform:uppercase;color:var(--aone-text-muted);
  display:block;margin:0}
@media (max-width:767px){
  .t-display{font-size:36px} .t-h1{font-size:30px}
  .t-h2{font-size:25px}      .t-h3{font-size:23px}
  .t-h4{font-size:19px}      .t-bodyl{font-size:17px}
}
.t-muted{color:var(--aone-text-muted)}
.on-invert .t-display,.on-invert .t-h1,.on-invert .t-h2,
.on-invert .t-h3,.on-invert .t-h4{color:var(--aone-text-invert)}
.on-invert{color:var(--aone-text-invert)}
.on-invert .t-label,.on-invert .t-muted{color:var(--aone-text-invert-muted)}

/* nhãn đánh số — chữ ký của hướng A */
.sec-label{display:flex;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-4)}
.sec-label .n{font-family:var(--aone-font-ui);font-weight:500;font-size:13px;line-height:1;
  letter-spacing:.1em;color:var(--aone-accent-interactive);flex:0 0 auto}
.on-invert .sec-label .n{color:var(--aone-accent-line)}

/* ============ 5. SECTION ============ */
.sec{padding-block:var(--sec-pad)}
.sec--alt{background:var(--aone-bg-alt)}
.sec--raised{background:var(--aone-bg-raised)}
.sec--invert{background:var(--aone-bg-invert);padding-block:var(--sec-pad-invert)}
.sec--rule{border-top:1px solid var(--aone-line-hairline)}
@media (max-width:1023px){ :root{ --sec-pad:64px; --sec-pad-invert:72px } }
@media (max-width:767px){  :root{ --sec-pad:48px; --sec-pad-invert:56px } }

/* ============ 6. NÚT ============ */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--aone-font-ui);font-weight:500;font-size:17px;line-height:1;
  border:1px solid transparent;border-radius:4px;cursor:pointer;text-decoration:none;
  height:48px;padding-inline:var(--space-6);
  transition:background var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease),
             color var(--t-micro) var(--ease)}
.btn--lg{height:56px;padding-inline:var(--space-8)}
.btn--sm{height:40px;padding-inline:var(--space-4);font-size:15px}
.btn__arrow{transition:transform var(--t-micro) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

.btn--primary{background:var(--aone-navy);color:var(--aone-white)}
.btn--primary:hover{background:#2A3856}
.btn--primary:active{background:#18223A;transform:translateY(1px)}
.btn--secondary{background:transparent;border-color:var(--aone-line);color:var(--aone-text-primary)}
.btn--secondary:hover{border-color:var(--aone-navy);background:rgba(32,44,71,.04)}
.btn--secondary:active{background:rgba(32,44,71,.08)}
.btn--text{background:none;border:none;padding:0;height:auto;color:var(--aone-accent-interactive)}
.btn--text:hover{text-decoration:underline;text-underline-offset:4px}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--aone-line);color:var(--aone-text-muted);
  cursor:not-allowed;pointer-events:none}

.on-invert .btn--primary{background:var(--aone-white);color:var(--aone-navy)}
.on-invert .btn--primary:hover{background:#fff}
.on-invert .btn--secondary{border-color:var(--aone-line-invert);color:var(--aone-text-invert)}
.on-invert .btn--secondary:hover{border-color:var(--aone-white);background:rgba(249,247,243,.08)}
.on-invert .btn--text{color:var(--aone-accent-line)}

/* ============ 7. LOGO ============ */
.logo{display:block;color:var(--aone-text-primary)}
.logo svg{width:100%;height:auto;display:block}
.logo--invert{color:var(--aone-text-invert)}
.logo--mono{--swf:currentColor}
.logo--full{width:150px}
.logo--word{width:140px}
.logo--icon{width:120px}
@media (max-width:767px){ .logo--full{width:150px} .logo--word{width:132px} }

/* ============ 8. HEADER ============ */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  padding-top:env(safe-area-inset-top,0px);
  background:var(--aone-bg-base);
  border-bottom:1px solid transparent;
  transition:height var(--t-state) var(--ease),background var(--t-state) var(--ease),
             transform var(--t-move) var(--ease),border-color var(--t-state) var(--ease)}
/* Header là thanh chrome cố định, không phải nội dung trang: nó dùng trọn chiều
   ngang màn hình với lề riêng, thay vì bị bó trong khung nội dung 1280px.
   Không làm vậy thì 6 mục điều hướng tiếng Việt + CTA không có chỗ (đo ở Slice 2). */
.hdr__in{height:100%;display:flex;align-items:center;gap:var(--space-8);
  width:100%;padding-inline:var(--hdr-gutter)}
.hdr__logo{flex:0 0 auto;margin-right:36px}          /* khoảng trống ≥ chiều cao chữ A */
.hdr__logo .logo--word{display:none}
.hdr__nav{display:flex;align-items:center;gap:16px;flex:1 1 auto;justify-content:center;min-width:0}
.hdr__link{font-size:16px;font-weight:500;text-decoration:none;color:var(--aone-text-primary);
  padding-block:6px;border-bottom:2px solid transparent;white-space:nowrap;
  transition:border-color var(--t-micro) var(--ease)}
.hdr__link:hover{border-bottom-color:var(--aone-line)}
.hdr__link[aria-current="page"]{border-bottom-color:var(--aone-accent-interactive)}
.hdr__right{flex:0 0 auto;display:flex;align-items:center;gap:var(--space-4)}

/* trên hero navy */
.hdr--over{background:transparent;color:var(--aone-text-invert)}
.hdr--over .hdr__link{color:var(--aone-text-invert)}
.hdr--over .hdr__link:hover{border-bottom-color:var(--aone-line-invert)}
.hdr--over .hdr__link[aria-current="page"]{border-bottom-color:var(--aone-accent-line)}
.hdr--over .logo{color:var(--aone-text-invert)}
.hdr--over .lang__a{color:var(--aone-text-invert-muted)}
.hdr--over .lang__a[aria-current="true"]{color:var(--aone-text-invert)}
.hdr--over .lang__sep{color:var(--aone-line-invert)}
.hdr--over .btn--primary{background:var(--aone-white);color:var(--aone-navy)}
.hdr--over .burger span{background:var(--aone-text-invert)}
/* dải gradient tách logo khỏi ảnh hero (quyết định Phase 03) */
.hdr--over::before{content:"";position:absolute;inset:0 0 auto 0;height:180px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(32,44,71,.55),rgba(32,44,71,0));z-index:-1}

/* trạng thái cuộn */
.hdr--stuck{height:var(--header-h-sm);background:var(--aone-bg-base);
  border-bottom-color:var(--aone-line-hairline)}
.hdr--stuck.hdr--over{color:var(--aone-text-body)}
.hdr--stuck .hdr__link{color:var(--aone-text-primary)}
.hdr--stuck .logo{color:var(--aone-text-primary)}
.hdr--stuck .lang__a{color:var(--aone-text-muted)}
.hdr--stuck .lang__a[aria-current="true"]{color:var(--aone-text-primary)}
.hdr--stuck .btn--primary{background:var(--aone-navy);color:var(--aone-white)}
.hdr--stuck::before{opacity:0}
.hdr--stuck .hdr__logo .logo--full{display:none}
.hdr--stuck .hdr__logo .logo--word{display:block}
.hdr--hidden{transform:translateY(-100%)}

/* chuyển ngôn ngữ */
.lang{display:flex;align-items:center;gap:var(--space-2);font-size:14px;font-weight:500}
.lang__a{text-decoration:none;color:var(--aone-text-muted);
  transition:color var(--t-micro) var(--ease)}
.lang__a:hover{color:var(--aone-text-primary)}
.lang__a[aria-current="true"]{color:var(--aone-text-primary)}
.lang__sep{color:var(--aone-line);user-select:none}
.on-invert .lang__a{color:var(--aone-text-invert-muted)}
.on-invert .lang__a:hover,.on-invert .lang__a[aria-current="true"]{color:var(--aone-text-invert)}
.on-invert .lang__sep{color:var(--aone-line-invert)}
.ftr .lang__a{color:#9AA0A8}
.ftr .lang__a:hover,.ftr .lang__a[aria-current="true"]{color:var(--aone-white)}
.ftr .lang__sep{color:rgba(249,247,243,.3)}

/* burger */
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:1.5px;background:var(--aone-text-primary);
  transition:transform var(--t-state) var(--ease),opacity var(--t-state) var(--ease)}

/* Dưới 1350px điều hướng tiếng Việt không còn vừa — chuyển sang menu thay vì nén chữ.
   Ngưỡng này đo thực tế ở Slice 2, không phải ước lượng. */
@media (max-width:1349px){
  .hdr__nav,.hdr__right .btn{display:none}
  .burger{display:flex}
  .hdr__in{gap:var(--space-4);justify-content:space-between}
  .hdr__logo{margin-right:0}
}

/* đệm cho header cố định */
.page{padding-top:var(--header-h)}
.page--hero{padding-top:0}

/* ============ 9. MENU MOBILE ============ */
.mnav{position:fixed;inset:0;z-index:150;background:var(--aone-bg-invert);
  display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(-100%);transition:transform var(--t-move) var(--ease);
  overflow-y:auto}
.mnav[data-open="true"]{transform:translateY(0)}
.mnav__top{display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);padding-inline:var(--hdr-gutter);flex:0 0 auto}
.mnav__body{flex:1 1 auto;padding:var(--space-8) var(--gutter) var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-6)}
.mnav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-6)}
.mnav__list a{font-family:var(--aone-font-display);font-size:33px;line-height:1.3;
  color:var(--aone-text-invert);text-decoration:none;display:inline-block;
  opacity:0;transform:translateY(12px)}
.mnav[data-open="true"] .mnav__list a{opacity:1;transform:none;
  transition:opacity var(--t-state) var(--ease),transform var(--t-state) var(--ease)}
.mnav__rule{height:1px;background:var(--aone-line-invert);border:0;margin:var(--space-2) 0}
.mnav__minor{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6)}
.mnav__minor a{color:var(--aone-text-invert-muted);text-decoration:none;font-size:17px}
.mnav__foot{padding:var(--space-6) var(--gutter) var(--space-8);
  display:flex;flex-direction:column;gap:var(--space-4);flex:0 0 auto}
.mnav__foot .btn{width:100%;justify-content:center}
.close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:var(--aone-text-invert);font-size:26px;line-height:1}
body[data-lock="true"]{overflow:hidden}

/* ============ 10. KHỐI ĐIỀU HƯỚNG CUỐI TRANG ============ */
.next{background:var(--aone-bg-alt);padding-block:var(--space-24) var(--space-32)}
.next__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--aone-line-hairline);
  border:1px solid var(--aone-line-hairline);margin-block:var(--space-8)}
.next__card{background:var(--aone-bg-alt);padding:var(--space-8);text-decoration:none;
  display:flex;flex-direction:column;gap:var(--space-3);
  transition:background var(--t-micro) var(--ease)}
.next__card:hover{background:var(--aone-bg-raised)}
.next__card .t-h4{display:flex;align-items:baseline;gap:var(--space-3)}
.next__card .btn__arrow{color:var(--aone-accent-interactive)}
.next__why{color:var(--aone-text-body);font-size:17px}
@media (max-width:767px){ .next__grid{grid-template-columns:1fr} .next{padding-block:var(--space-16)} }

/* ============ 11. FOOTER ============ */
.ftr{background:var(--aone-bg-deep);color:var(--aone-text-invert);
  padding-block:var(--space-24) var(--space-8)}
.ftr__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--space-12)}
.ftr__brand .logo{width:200px;margin-bottom:var(--space-4)}
.ftr__desc{color:#C9CDD3;font-size:16px;max-width:320px}
.ftr__col h2{font:500 13px/1.4 var(--aone-font-ui);letter-spacing:.08em;text-transform:uppercase;
  color:#9AA0A8;margin:0 0 var(--space-4)}
.ftr__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.ftr__col a{color:#D6DCE6;text-decoration:none;font-size:16px;
  transition:color var(--t-micro) var(--ease)}
.ftr__col a:hover{color:var(--aone-white)}
.ftr .todo{border-color:rgba(249,247,243,.22);background:rgba(249,247,243,.04);padding:var(--space-3) var(--space-4)}
.ftr .todo__txt{color:#C9CDD3;font-size:14px}
.ftr .todo__who{color:#9AA0A8;font-size:12px}
.ftr .todo__tag{color:#E2857C;font-size:12px}
.ftr__bot .lang{font-size:14px}
.ftr__bot{margin-top:var(--space-16);padding-top:var(--space-6);
  border-top:1px solid var(--aone-line-invert);
  display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);align-items:center}
.ftr__bot a{color:#9AA0A8;text-decoration:none;font-size:14px}
.ftr__bot a:hover{color:var(--aone-white)}
.ftr__slogan{font-size:13px;letter-spacing:.08em;color:#9AA0A8;margin-left:auto}
@media (max-width:1023px){ .ftr__grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}
  .ftr__brand{grid-column:1/-1} .ftr__slogan{margin-left:0;flex-basis:100%} }
@media (max-width:767px){ .ftr__grid{grid-template-columns:1fr} .ftr{padding-block:var(--space-16) var(--space-8)} }

/* ============ 12. THANH CTA MOBILE ============ */
.mcta{position:fixed;inset:auto 0 0 0;z-index:90;display:none;
  background:var(--aone-bg-base);border-top:1px solid var(--aone-line-hairline);
  padding:var(--space-3) var(--gutter);
  padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform var(--t-move) var(--ease)}
.mcta[data-show="true"]{transform:translateY(0)}
.mcta .btn{width:100%;justify-content:center}
@media (max-width:1023px){ .mcta{display:block} body{padding-bottom:0} }

/* ============ 13. TIỆN ÍCH ============ */
.stack{display:flex;flex-direction:column}
.stack--2{gap:var(--space-2)} .stack--4{gap:var(--space-4)}
.stack--6{gap:var(--space-6)} .stack--8{gap:var(--space-8)}
.stack--12{gap:var(--space-12)}
.row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.hairline{height:1px;background:var(--aone-line-hairline);border:0;margin:0}
.on-invert .hairline{background:var(--aone-line-invert)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============ 14. TÔN TRỌNG prefers-reduced-motion ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .mnav__list a{opacity:1;transform:none}
}

/* ============ 15. SƠ ĐỒ OPERATING SYSTEM ============ */
/* Luôn đặt trên nền navy — teal đạt 5,58:1 ở đó, trên nền sáng chỉ 2,33:1. */
.osd{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:var(--space-12);align-items:center}
.osd__stage{position:relative;min-width:0}
.osd__svg{width:100%;max-width:640px;height:auto;margin-inline:auto;display:block;overflow:visible}
.osd--compact .osd__svg{max-width:520px}
.osd__hint{margin-top:var(--space-4);text-align:center;color:var(--aone-text-invert-muted)}
.osd.is-live[data-sel] .osd__hint{visibility:hidden}

/* vòng hở */
.osd__ring path{stroke:rgba(249,247,243,.28);stroke-width:1}

/* đường nối */
.osd__edge{stroke:var(--aone-accent-line);stroke-width:1;opacity:.40;
  transition:opacity var(--t-state) var(--ease),stroke-width var(--t-state) var(--ease)}
.osd.is-live .osd__edge{opacity:.30}
.osd.is-live .osd__edge.is-on{opacity:1;stroke-width:2}
.osd.is-live .osd__edge.is-dim{opacity:.12}

/* nút module */
.osd__hit{fill:transparent}
.osd__disc{fill:var(--aone-bg-invert);stroke:var(--aone-line-invert);stroke-width:1.5;
  transition:fill var(--t-state) var(--ease),stroke var(--t-state) var(--ease)}
/* Cỡ chữ đến từ thuộc tính style trên chính thẻ <svg>, do diagram.py ghi ra —
   cùng nguồn với viewBox, xem §28.1. Số 13px dưới đây chỉ là mức dự phòng. */
.osd__num{font:500 var(--osd-so,13px)/1 var(--aone-font-ui);letter-spacing:.06em;
  fill:var(--aone-text-invert-muted);transition:fill var(--t-state) var(--ease)}
.osd__name{font:500 var(--osd-nhan,13px)/1 var(--aone-font-ui);letter-spacing:.09em;
  fill:var(--aone-text-invert);transition:fill var(--t-state) var(--ease),opacity var(--t-state) var(--ease)}
.osd__node{cursor:pointer;outline:none}
.osd__node:focus-visible .osd__disc{stroke:var(--aone-accent-line);stroke-width:2}
.osd__node:focus-visible .osd__name{text-decoration:underline;text-underline-offset:3px}
.osd.is-live .osd__node.is-sel .osd__disc{fill:var(--aone-accent-line);stroke:var(--aone-accent-line)}
.osd.is-live .osd__node.is-sel .osd__num{fill:var(--aone-navy)}
.osd.is-live .osd__node.is-rel .osd__disc{stroke:var(--aone-accent-line)}
.osd.is-live .osd__node.is-dim .osd__disc{stroke:rgba(249,247,243,.12)}
.osd.is-live .osd__node.is-dim .osd__num,
.osd.is-live .osd__node.is-dim .osd__name{opacity:.45}

/* danh sách / bảng chi tiết */
.osd__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  border-top:1px solid var(--aone-line-invert)}
.osd__item{border-bottom:1px solid var(--aone-line-invert)}
.osd__itembtn{display:flex;align-items:baseline;gap:var(--space-4);width:100%;
  background:none;border:0;padding:var(--space-4) 0;cursor:pointer;text-align:left;
  color:var(--aone-text-invert);transition:color var(--t-micro) var(--ease)}
.osd__itemno{font:500 13px/1.4 var(--aone-font-ui);letter-spacing:.1em;
  color:var(--aone-text-invert-muted);flex:0 0 auto}
.osd__itemname{font:600 17px/1.4 var(--aone-font-ui);letter-spacing:.06em}
.osd__item.is-sel .osd__itemno{color:var(--aone-accent-line)}
.osd__itembtn:hover .osd__itemname{color:var(--aone-accent-line)}
.osd__body{padding:0 0 var(--space-6) 36px;display:flex;flex-direction:column;gap:var(--space-4)}
.osd__purpose{margin:0;font-size:17px;line-height:1.6;color:#D6DCE6;max-width:52ch}
.osd__rel{display:flex;flex-direction:column;gap:var(--space-2)}
.osd__chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.osd__chip{font:500 13px/1 var(--aone-font-ui);letter-spacing:.06em;
  background:none;color:var(--aone-accent-line);border:1px solid var(--aone-line-invert);
  border-radius:4px;padding:7px 10px;cursor:pointer;
  transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease)}
.osd__chip:hover{border-color:var(--aone-accent-line);background:rgba(24,183,176,.12)}

/* có JS: danh sách thu về một module đang chọn */
.osd.is-live .osd__body{display:none}
.osd.is-live .osd__item.is-sel .osd__body{display:flex}
.osd.is-live .osd__itembtn{padding-block:var(--space-3)}

@media (max-width:1023px){
  .osd{grid-template-columns:1fr;gap:var(--space-8)}
  .osd__svg{max-width:420px}
}
@media (max-width:767px){
  /* Sơ đồ thành BẢN ĐỒ CHẤM: ở 300px thì số trong nút chỉ còn ~4px, không đọc được —
     nên bỏ số và tên, để các chấm chỉ vị trí. Danh sách bên dưới là thứ điều khiển. */
  .osd__svg{max-width:300px}
  .osd__name,.osd__num{display:none}
  .osd__disc{stroke-width:3}
  .osd.is-live .osd__node.is-rel .osd__disc{stroke-width:4}
  .osd.is-live .osd__edge.is-on{stroke-width:3}
  .osd.is-live .osd__stage{pointer-events:none}
  .osd__hint{display:none}
  .osd__itemname{font-size:16px}
  .osd__body{padding-left:34px}
}

/* ============ 16. TRANG CHỦ — CÁC SECTION ============ */

/* --- khối cần nội dung (chỉ hiện ở bản nội bộ, không được ship) --- */
.todo{border:1px dashed var(--aone-line);border-radius:4px;padding:var(--space-4) var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-2);background:rgba(143,135,122,.06)}
.todo__tag{font:500 12px/1 var(--aone-font-ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--aone-error)}
.todo__txt{margin:0;font-size:16px;line-height:1.55;color:var(--aone-text-body)}
.todo__who{font:500 12px/1.4 var(--aone-font-ui);letter-spacing:.06em;color:var(--aone-text-muted)}
.on-invert .todo{border-color:var(--aone-line-invert);background:rgba(249,247,243,.05)}
.on-invert .todo__txt{color:#D6DCE6}
.on-invert .todo__who{color:var(--aone-text-invert-muted)}
.on-invert .todo__tag{color:#E2857C}

/* --- H02 Fragmented → Connected --- */
.fc{--p:1}
.fc__intro{margin-top:var(--space-6);color:var(--aone-text-body)}
.fc__stage{margin-top:var(--space-16);position:relative}
.fc__svg{width:100%;max-width:900px;margin-inline:auto;height:auto;display:block;overflow:visible}
.fc__spine,.fc__stub{stroke:var(--aone-accent-interactive);stroke-width:1;fill:none;
  stroke-dasharray:var(--len);stroke-dashoffset:calc(var(--len) * (1 - var(--p)))}
.fc__dot{fill:var(--aone-accent-interactive);opacity:var(--p)}
.fc__label{font:500 13px/1 var(--aone-font-ui);letter-spacing:.09em;fill:var(--aone-text-primary);
  opacity:calc(.45 + .55 * var(--p));
  transform:translate(calc(var(--dx) * (1 - var(--p))),calc(var(--dy) * (1 - var(--p))))}
.fc__states{display:flex;align-items:center;justify-content:center;gap:var(--space-4);
  margin-top:var(--space-8)}
.fc__state{font:500 13px/1 var(--aone-font-ui);letter-spacing:.14em;text-transform:uppercase}
.fc__state--a{color:var(--aone-text-muted);opacity:calc(1 - var(--p) * .75)}
.fc__state--b{color:var(--aone-accent-interactive);opacity:calc(.25 + var(--p) * .75)}
.fc__arrow{color:var(--aone-line);font-size:15px}
.fc__out{margin-top:var(--space-12);color:var(--aone-text-body)}
@media (max-width:767px){ .fc__stage{margin-top:var(--space-12)} .fc__label{font-size:19px} }

/* --- H03 AONE là gì --- */
.wia{margin-top:var(--space-12);display:flex;flex-direction:column;
  border-top:1px solid var(--aone-line-hairline)}
.wia__row{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,1.2fr);gap:var(--space-8);
  padding-block:var(--space-6);border-bottom:1px solid var(--aone-line-hairline)}
.wia__no{font:500 17px/1.45 var(--aone-font-ui);color:var(--aone-text-muted)}
.wia__ma{font-size:17px;line-height:1.6;color:var(--aone-text-primary)}
.wia + .btn{margin-top:var(--space-8)}
@media (max-width:767px){ .wia__row{grid-template-columns:1fr;gap:var(--space-2)} }

/* --- H05 trục ba giai đoạn --- */
.ax{margin-top:var(--space-12);position:relative;padding-top:var(--space-4)}
.ax__track{position:absolute;left:0;right:0;top:calc(var(--space-4) + 6px);height:1px;
  background:var(--aone-line-hairline)}
.ax__steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr)}
.ax__step{background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--space-3);text-align:left}
.ax__dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--aone-line);
  background:var(--aone-bg-base);transition:background var(--t-state) var(--ease),
  border-color var(--t-state) var(--ease)}
.ax__name{font:500 13px/1 var(--aone-font-ui);letter-spacing:.12em;color:var(--aone-text-muted);
  transition:color var(--t-state) var(--ease)}
.ax__step[aria-pressed="true"] .ax__dot{background:var(--aone-accent-interactive);
  border-color:var(--aone-accent-interactive)}
.ax__step[aria-pressed="true"] .ax__name{color:var(--aone-text-primary)}
.tbl3{width:100%;border-collapse:collapse;margin-top:var(--space-12);min-width:640px}
.stage-table{overflow-x:auto}
.tbl3 th,.tbl3 td{text-align:left;padding:var(--space-4) var(--space-6);
  border-bottom:1px solid var(--aone-line-hairline);vertical-align:top;font-size:17px}
.tbl3 thead th{font:500 13px/1.4 var(--aone-font-ui);letter-spacing:.12em;
  color:var(--aone-text-muted);border-bottom-color:var(--aone-line)}
.tbl3 tbody th{font:500 13px/1.4 var(--aone-font-ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--aone-text-muted);width:180px}
.tbl3 [data-stage].is-on{color:var(--aone-text-primary)}
.tbl3 thead th[data-stage].is-on{color:var(--aone-accent-interactive)}
.tbl3 td[data-stage]{color:var(--aone-text-muted);transition:color var(--t-state) var(--ease)}
.stgs{display:none}
@media (max-width:767px){
  .ax__steps{grid-template-columns:1fr;gap:var(--space-4)}
  .ax__track{display:none}
  .stage-table{display:none}
  .stgs{display:flex;flex-direction:column;gap:var(--space-6);margin-top:var(--space-8)}
  .stg{background:var(--aone-bg-raised);padding:var(--space-6);border-left:2px solid var(--aone-accent-line)}
  .stg__h{font:600 19px/1.3 var(--aone-font-ui);letter-spacing:.08em;margin:0 0 var(--space-4);
    color:var(--aone-text-primary)}
  .stg__dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-4)}
  .stg__dl dt{font:500 12px/1.5 var(--aone-font-ui);letter-spacing:.06em;text-transform:uppercase;
    color:var(--aone-text-muted)}
  .stg__dl dd{margin:0;font-size:16px;line-height:1.5;color:var(--aone-text-primary)}
}

/* --- H06: bảy luồng công việc. Lưới hai cột cũ đã bỏ ở Slice 9 —
   nay là danh sách khối cuộn, xem §24. --- */

/* --- H07 bốn mô hình hợp tác --- */
.pm{margin-top:var(--space-16)}
.pm__axis{position:relative;padding-top:var(--space-6)}
.pm__track{position:absolute;left:0;right:0;top:calc(var(--space-6) + 6px);height:1px;
  background:var(--aone-line-invert)}
.pm__end{position:absolute;top:0;font:500 12px/1 var(--aone-font-ui);letter-spacing:.1em;
  text-transform:uppercase;color:var(--aone-text-invert-muted)}
.pm__end--l{left:0} .pm__end--r{right:0}
.pm__steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.pm__step{background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--space-3);text-align:left}
.pm__dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--aone-line-invert);
  background:var(--aone-bg-invert);transition:background var(--t-state) var(--ease),
  border-color var(--t-state) var(--ease)}
.pm__name{font:600 15px/1.2 var(--aone-font-ui);letter-spacing:.1em;
  color:var(--aone-text-invert-muted);transition:color var(--t-state) var(--ease)}
.pm__step[aria-pressed="true"] .pm__dot{background:var(--aone-accent-line);
  border-color:var(--aone-accent-line)}
.pm__step[aria-pressed="true"] .pm__name{color:var(--aone-text-invert)}
.pm__hint{margin-top:var(--space-8);color:var(--aone-text-invert-muted)}
.pm.is-live[data-sel] .pm__hint{visibility:hidden}
.pm__panels{margin-top:var(--space-8)}
.pm__panel{display:flex;flex-direction:column;gap:var(--space-4);max-width:760px}
.pm.is-live .pm__panel{display:none}
.pm.is-live .pm__panel.is-on{display:flex}
.pm__claim{margin:0;font-family:var(--aone-font-display);font-size:33px;line-height:1.3;
  color:var(--aone-text-invert)}
@media (max-width:767px){
  .pm__steps{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
  .pm__track,.pm__end{display:none}
  .pm__axis{padding-top:0}
  .pm__claim{font-size:26px}
}

/* --- H08 sáu ngành --- */
.inds{margin-top:var(--space-12);display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--space-8)}
.ind{text-decoration:none;display:flex;flex-direction:column;gap:var(--space-4)}
.ind__img{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;width:100%;
  background:var(--aone-bg-raised);border:1px solid var(--aone-line-hairline);border-radius:4px;
  transition:border-color var(--t-micro) var(--ease)}
.ind__imgtag{font:500 12px/1 var(--aone-font-ui);letter-spacing:.14em;color:var(--aone-text-muted)}
.ind:hover .ind__img{border-color:var(--aone-line)}
.ind__name{font:600 21px/1.3 var(--aone-font-ui);margin:0;color:var(--aone-text-primary)}
.ind__why{margin:0;font-size:16px;line-height:1.55;color:var(--aone-text-muted)}
@media (max-width:1023px){ .inds{grid-template-columns:repeat(2,1fr);gap:var(--space-6)} }

/* --- H09 hệ sinh thái --- */
.eco{margin-top:var(--space-16);display:flex;flex-direction:column;align-items:center}
.eco__root,.eco__node{border:1px solid var(--aone-line);border-radius:4px;
  padding:var(--space-4) var(--space-6);display:flex;flex-direction:column;gap:var(--space-1);
  background:var(--aone-bg-base);text-align:center;align-items:center}
.eco__root{border-color:var(--aone-accent-interactive);padding-inline:var(--space-12)}
.eco__name{font:600 19px/1.3 var(--aone-font-ui);color:var(--aone-text-primary)}
.eco__role{font:400 13px/1.4 var(--aone-font-ui);letter-spacing:.04em;color:var(--aone-text-muted)}
.eco__link{width:1px;height:var(--space-12);background:var(--aone-accent-interactive)}
.eco__row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);width:100%;
  position:relative;padding-top:var(--space-8)}
.eco__row::before{content:"";position:absolute;top:0;left:12.5%;right:12.5%;height:1px;
  background:var(--aone-accent-interactive)}
.eco__row .eco__node{position:relative}
.eco__row .eco__node::before{content:"";position:absolute;top:calc(-1 * var(--space-8));left:50%;
  width:1px;height:var(--space-8);background:var(--aone-accent-interactive)}
.eco__bound{margin-top:var(--space-12);max-width:64ch}
@media (max-width:767px){
  .eco__row{grid-template-columns:1fr;gap:var(--space-3);padding-top:var(--space-4)}
  .eco__row::before,.eco__row .eco__node::before{display:none}
  .eco__link{height:var(--space-4)}
}

/* --- H10 bằng chứng --- */
.proof{margin-top:var(--space-12);display:flex;flex-direction:column;gap:var(--space-4);
  max-width:760px}

/* --- H11 CTA chủ doanh nghiệp --- */
.owner{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-12)}
.owner__h{max-width:20ch}

/* ============ 17. TRANG OPERATING SYSTEM ============ */

/* --- bố cục hai cột: thanh dính 4/12, nội dung 8/12 --- */
.osw__grid{margin-top:var(--space-12);display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:var(--space-16);align-items:start}

/* --- thanh dính bên trái --- */
.osrail{position:sticky;top:calc(var(--header-h-sm) + var(--space-8));align-self:start}
.osrail__in{display:flex;flex-direction:column;gap:var(--space-6)}
.osmini{max-width:236px}
.osmini__svg{width:100%;height:auto;display:block}
/* Nền sáng: teal thương hiệu chỉ đạt 2,33:1, nên bản nhỏ dùng teal đậm. */
.osmini__edge{stroke:var(--aone-accent-interactive);stroke-width:1.4;opacity:.22;
  transition:opacity var(--t-state) var(--ease),stroke-width var(--t-state) var(--ease)}
.osmini__disc{fill:var(--aone-bg-base);stroke:var(--aone-line);stroke-width:1.6;
  transition:fill var(--t-state) var(--ease),stroke var(--t-state) var(--ease)}
[data-osrail][data-cur] .osmini__edge.is-on{opacity:.85;stroke-width:2.2}
[data-osrail][data-cur] .osmini__disc.is-rel{stroke:var(--aone-accent-interactive);stroke-width:2.6}
[data-osrail][data-cur] .osmini__disc.is-cur{fill:var(--aone-accent-interactive);
  stroke:var(--aone-accent-interactive)}

.osrail__list{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--aone-line-hairline)}
.osrail__i{border-bottom:1px solid var(--aone-line-hairline)}
.osrail__a{display:flex;align-items:baseline;gap:var(--space-3);
  padding:var(--space-3) 0;text-decoration:none;
  transition:color var(--t-micro) var(--ease)}
.osrail__no{font:500 12px/1.4 var(--aone-font-ui);letter-spacing:.1em;
  color:var(--aone-text-muted);flex:0 0 auto}
.osrail__ten{font:600 15px/1.4 var(--aone-font-ui);letter-spacing:.05em;
  color:var(--aone-text-primary)}
.osrail__a:hover .osrail__ten{color:var(--aone-accent-interactive)}
.osrail__i.is-cur .osrail__no,
.osrail__i.is-cur .osrail__ten{color:var(--aone-accent-interactive)}
.osrail__i.is-cur{box-shadow:inset 2px 0 0 var(--aone-accent-interactive)}
.osrail__i.is-cur .osrail__a{padding-left:var(--space-3)}

/* --- khối module --- */
.osw__main{min-width:0;display:flex;flex-direction:column}
.osm{padding-block:var(--space-16);border-top:1px solid var(--aone-line-hairline);
  scroll-margin-top:calc(var(--header-h-sm) + var(--space-8))}
.osm:first-child{border-top:0;padding-top:0}
.osm__head{display:flex;align-items:baseline;gap:var(--space-4)}
.osm__no{font:500 13px/1 var(--aone-font-ui);letter-spacing:.1em;
  color:var(--aone-accent-interactive);flex:0 0 auto}
.osm__ten{letter-spacing:.01em}
.osm__purpose{color:var(--aone-text-body);max-width:52ch}

.osm__f{margin-top:var(--space-4);border-top:1px solid var(--aone-line-hairline);
  padding-top:var(--space-2)}
.osm__f--static{border-top:0;padding-top:0;margin-top:var(--space-6)}
.osm__f--static .t-label{margin-bottom:var(--space-3)}
.osm__sum{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);cursor:pointer;list-style:none;
  min-height:44px;padding-block:var(--space-3)}
.osm__sum::-webkit-details-marker{display:none}
.osm__caret{width:10px;height:10px;flex:0 0 auto;display:none;
  border-right:1.5px solid var(--aone-text-muted);border-bottom:1.5px solid var(--aone-text-muted);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t-micro) var(--ease)}
.osm__f[open] .osm__caret{transform:rotate(-135deg) translate(-2px,-2px)}
.osm__fb{margin-top:var(--space-3)}

.osm__ul{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:var(--space-2)}
.osm__ul li{font-size:17px;line-height:1.6;color:var(--aone-text-body)}
.osm__ul li::marker{color:var(--aone-accent-interactive)}

.osm__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.osm__tag{font:500 14px/1 var(--aone-font-ui);letter-spacing:.02em;
  color:var(--aone-text-primary);background:var(--aone-bg-raised);
  border:1px solid var(--aone-line-hairline);border-radius:4px;padding:9px 12px}

.osm__cap{margin:0;font:600 17px/1.5 var(--aone-font-ui);display:inline-flex;
  align-items:center;gap:var(--space-2)}
.osm__cap.is-eco{color:var(--aone-accent-interactive)}
.osm__cap.is-eco::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--aone-accent-interactive);flex:0 0 auto}
.osm__cap.is-own{color:var(--aone-text-muted);font-weight:500}

.osm__out{margin-top:var(--space-8);padding:var(--space-6);
  background:var(--aone-bg-alt);border-left:2px solid var(--aone-accent-interactive);
  border-radius:0 4px 4px 0;display:flex;flex-direction:column;gap:var(--space-3)}
.osm__out p{color:var(--aone-text-primary);max-width:48ch}

.osm__rel{margin-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.osm__chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.osm__chip{font:500 13px/1 var(--aone-font-ui);letter-spacing:.06em;text-decoration:none;
  color:var(--aone-accent-interactive);border:1px solid var(--aone-line-hairline);
  border-radius:4px;padding:8px 11px;
  transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease)}
.osm__chip:hover{border-color:var(--aone-accent-interactive);background:var(--aone-accent-subtle)}

/* --- chu trình --- */
.oscy__list{list-style:none;margin:var(--space-16) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}
.oscy__s{display:flex;flex-direction:column;gap:var(--space-3);
  padding-top:var(--space-4);border-top:1px solid var(--aone-line);position:relative}
.oscy__s::after{content:"→";position:absolute;top:-14px;right:calc(var(--space-6) * -.5);
  transform:translateX(50%);font-size:15px;color:var(--aone-accent-interactive);
  line-height:1}
.oscy__s:last-child::after{display:none}
/* Vòng khép lại: một thanh quay về dưới bốn bước, thay vì nhét mũi tên ↺ vào
   giữa hai bước — ở đó nó đọc thành "đi tiếp rồi quay lại", sai ý. */
.oscy__back{margin:var(--space-8) 0 0;display:flex;align-items:center;gap:var(--space-3);
  font:500 13px/1 var(--aone-font-ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--aone-accent-interactive);padding-top:var(--space-4);
  border-top:1px solid var(--aone-accent-interactive)}
.oscy__back span{font-size:16px;line-height:1}
.oscy__n{font:500 12px/1 var(--aone-font-ui);letter-spacing:.1em;
  color:var(--aone-accent-interactive)}
.oscy__lb{font:600 19px/1.3 var(--aone-font-ui);color:var(--aone-text-primary)}
.oscy__d{font-size:15px;line-height:1.55;color:var(--aone-text-muted)}

@media (max-width:1023px){
  .osw__grid{grid-template-columns:1fr;gap:var(--space-8)}
  .osrail{position:static}
  .osrail__in{gap:var(--space-4)}
  .osmini{display:none}          /* sơ đồ đầy đủ đã ở ngay trên, không lặp lại */
  .osrail__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--space-6);border-top:0}
  .osm{padding-block:var(--space-12)}
  .oscy__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
  .oscy__s:nth-child(2)::after{content:"↓";right:auto;left:0;transform:none;top:auto;
    bottom:calc(var(--space-8) * -1 - 4px)}
  .oscy__back{margin-top:var(--space-12)}
}
@media (max-width:767px){
  .osrail__list{grid-template-columns:1fr}
  .osm__ten{letter-spacing:0}
  .osm__out{padding:var(--space-4)}
  .oscy__list{grid-template-columns:1fr;gap:var(--space-6)}
  .oscy__s::after{content:"↓";right:auto;left:0;transform:none;top:auto;
    bottom:calc(var(--space-6) * -1 - 2px)}
}
/* Chỉ hiện mũi tên gập khi JavaScript đóng bớt trường — không JS thì mở hết. */
.osw.is-live .osm__caret{display:block}

/* ============ 18. TRANG MÔ HÌNH HỢP TÁC ============ */
/* Brief cấm xếp hạng: bốn cột rộng BẰNG NHAU, không cột nào được tô nổi,
   không có huy hiệu "nên chọn". Ô ghi ai làm, không ghi nhiều/ít. */
.pmx__wrap{margin-top:var(--space-8);overflow-x:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.pmx{width:100%;min-width:880px;border-collapse:collapse;table-layout:fixed}
.pmx__cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.pmx__corner{width:18%;border:0}
.pmx__h{width:20.5%;text-align:left;vertical-align:bottom;padding:0 var(--space-4) var(--space-4);
  border-bottom:2px solid var(--aone-navy)}
.pmx__no{display:block;font:500 12px/1 var(--aone-font-ui);letter-spacing:.1em;
  color:var(--aone-accent-interactive);margin-bottom:var(--space-2)}
.pmx__name{display:block;font:600 19px/1.25 var(--aone-font-ui);letter-spacing:.05em;
  color:var(--aone-text-primary)}
.pmx__cau{display:block;margin-top:var(--space-2);font:400 13px/1.45 var(--aone-font-ui);
  color:var(--aone-text-muted)}
.pmx__rh{text-align:left;vertical-align:top;padding:var(--space-6) var(--space-4) var(--space-6) 0;
  font:500 13px/1.4 var(--aone-font-ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--aone-text-muted);border-bottom:1px solid var(--aone-line-hairline)}
.pmx__c{vertical-align:top;padding:var(--space-6) var(--space-4);
  border-bottom:1px solid var(--aone-line-hairline);
  border-left:1px solid var(--aone-line-hairline);
  transition:background var(--t-micro) var(--ease)}
.pmx__r:hover .pmx__c,.pmx__r:hover .pmx__rh{background:rgba(24,183,176,.05)}
.pmx__r.is-on .pmx__c,.pmx__r.is-on .pmx__rh{background:var(--aone-accent-subtle)}
.pmx__ai{display:inline-block;font:500 12px/1 var(--aone-font-ui);letter-spacing:.08em;
  text-transform:uppercase;padding:5px 8px;border-radius:3px;
  border:1px solid var(--aone-line-hairline);background:transparent;
  color:var(--aone-text-muted)}
/* Ba màu chỉ để phân biệt AI làm, không phải thang điểm — nên cả ba cùng độ đậm. */
.pmx__c[data-ai="chu"] .pmx__ai,.pmx__k[data-ai="chu"] .pmx__ai{
  border-color:var(--aone-line);color:var(--aone-text-primary);background:transparent}
.pmx__c[data-ai="aone"] .pmx__ai,.pmx__k[data-ai="aone"] .pmx__ai{
  border-color:var(--aone-accent-interactive);color:var(--aone-accent-interactive);
  background:transparent}
/* Ba nhãn phải CÙNG ĐỘ ĐẬM. Bản đầu tô nền navy đặc cho "cùng làm" — nhìn vào
   thấy ngay cột MANAGED nặng hơn ba cột kia, tức là mắt tự xếp hạng, đúng thứ
   brief cấm. Nay cả ba đều viền rỗng, chỉ khác màu chữ. */
.pmx__c[data-ai="cung"] .pmx__ai,.pmx__k[data-ai="cung"] .pmx__ai{
  border-color:var(--aone-navy);color:var(--aone-navy);background:transparent}
.pmx__t{display:block;margin-top:var(--space-3);font-size:15px;line-height:1.5;
  color:var(--aone-text-body)}
.pmx__todo{display:inline-block;font:500 12px/1 var(--aone-font-ui);letter-spacing:.1em;
  text-transform:uppercase;color:var(--aone-error);
  border:1px dashed var(--aone-error);border-radius:3px;padding:6px 9px}
.pmx__keys{list-style:none;margin:var(--space-6) 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:var(--space-3)}
.pmx__count{margin:var(--space-8) 0 0;font-size:15px;line-height:1.55;
  color:var(--aone-text-muted);max-width:60ch}
.pmx__count strong{color:var(--aone-error);font-weight:600}

.pmds{margin-top:var(--space-12);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-12)}
.pmd{padding-top:var(--space-6);border-top:2px solid var(--aone-navy)}
.pmd__head{display:flex;align-items:baseline;gap:var(--space-3)}
.pmd__no{font:500 12px/1 var(--aone-font-ui);letter-spacing:.1em;
  color:var(--aone-accent-interactive)}
.pmd__cau{margin:var(--space-3) 0 0;font:400 17px/1.5 var(--aone-font-display);
  color:var(--aone-text-primary)}
.pmd__todos{margin-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}

@media (max-width:1023px){
  .pmds{grid-template-columns:1fr;gap:var(--space-8)}
}
@media (max-width:767px){
  .pmx{min-width:720px}
  .pmx__h{padding-inline:var(--space-3)}
  .pmx__c{padding:var(--space-4) var(--space-3)}
}

/* ============ 19. TRANG DỊCH VỤ ============ */
.svj__lead{margin-top:var(--space-12);color:var(--aone-text-invert-muted)}
.svj{margin-top:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-2)}
.svj__a{display:inline-flex;align-items:baseline;gap:var(--space-2);text-decoration:none;
  font:500 13px/1 var(--aone-font-ui);letter-spacing:.06em;color:var(--aone-text-invert);
  border:1px solid var(--aone-line-invert);border-radius:4px;padding:9px 12px;
  transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease)}
.svj__a:hover{border-color:var(--aone-accent-line);background:rgba(24,183,176,.12)}
.svj__no{font-size:12px;color:var(--aone-accent-line)}
.sv__total{margin:var(--space-8) 0 0;color:var(--aone-text-invert-muted);font-size:15px}
.sv__total strong{color:var(--aone-white);font-weight:600;font-size:19px}

.svs{display:flex;flex-direction:column}
.sv{padding-block:var(--space-16);border-top:1px solid var(--aone-line-hairline);
  scroll-margin-top:calc(var(--header-h-sm) + var(--space-8))}
.sv:first-child{border-top:0;padding-top:0}
.sv__head{display:flex;align-items:baseline;gap:var(--space-4)}
.sv__no{font:500 13px/1 var(--aone-font-ui);letter-spacing:.1em;
  color:var(--aone-accent-interactive)}
.sv__ten{letter-spacing:.02em}
.sv__count{margin-left:auto;font:500 13px/1 var(--aone-font-ui);color:var(--aone-text-muted)}
.sv__grid{margin-top:var(--space-8);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--space-12);align-items:start}
.sv__col{display:flex;flex-direction:column;gap:var(--space-3)}
.sv__prob{margin:0;font:400 21px/1.5 var(--aone-font-display);color:var(--aone-text-primary)}
.sv__act{margin:0;font-size:17px;line-height:1.6;color:var(--aone-text-body)}
.sv__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-2)}
.sv__item{font:500 15px/1.35 var(--aone-font-ui);color:var(--aone-text-primary);
  background:var(--aone-bg-raised);border:1px solid var(--aone-line-hairline);
  border-radius:4px;padding:12px 14px}
.sv__impact{margin:var(--space-8) 0 0;display:flex;align-items:baseline;gap:var(--space-4);
  padding-top:var(--space-4);border-top:1px solid var(--aone-accent-interactive)}
.sv__impact .t-label{flex:0 0 auto}
.sv__impacttxt{font:400 19px/1.5 var(--aone-font-ui);color:var(--aone-text-primary)}

@media (max-width:1023px){
  .sv__grid{grid-template-columns:1fr;gap:var(--space-8)}
  .sv{padding-block:var(--space-12)}
}
@media (max-width:767px){
  .sv__prob{font-size:19px}
  .sv__impact{flex-direction:column;gap:var(--space-2)}
  .sv__impacttxt{font-size:17px}
  .sv__list{grid-template-columns:1fr}
  .sv__count{display:none}
}

/* ============ 20. TRANG VÌ SAO AONE ============ */
.ba{width:100%;margin-top:var(--space-12);border-collapse:collapse;table-layout:fixed}
.ba th{text-align:left;padding:0 var(--space-6) var(--space-4) 0;
  font:500 13px/1.4 var(--aone-font-ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--aone-text-muted);border-bottom:2px solid var(--aone-navy);width:50%}
.ba th:last-child{color:var(--aone-accent-interactive);
  border-bottom-color:var(--aone-accent-interactive);padding-left:var(--space-6);padding-right:0}
.ba td{vertical-align:top;padding:var(--space-6) var(--space-6) var(--space-6) 0;
  font-size:17px;line-height:1.55;border-bottom:1px solid var(--aone-line-hairline)}
.ba__l{color:var(--aone-text-muted)}
.ba__r{color:var(--aone-text-primary);padding-left:var(--space-6)!important;padding-right:0!important;
  border-left:1px solid var(--aone-line-hairline)}

.dfs{margin-top:var(--space-12);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-12)}
.df{padding-top:var(--space-6);border-top:2px solid var(--aone-navy)}
.df__khong{margin:0;font:600 21px/1.3 var(--aone-font-ui);color:var(--aone-text-primary)}
.df__ma{margin:var(--space-3) 0 0;font:400 19px/1.5 var(--aone-font-display);
  color:var(--aone-accent-interactive)}
.df__dai{margin:var(--space-4) 0 0;font-size:16px;line-height:1.6;color:var(--aone-text-body)}

/* ============ 21. TRANG NGÀNH NGHỀ ============ */
.igs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16)}
.ig{scroll-margin-top:calc(var(--header-h-sm) + var(--space-8))}
.ig__head{display:flex;flex-direction:column;gap:var(--space-4)}
.ig__img{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;
  background:var(--aone-bg-alt);border:1px solid var(--aone-line-hairline);border-radius:4px}
.ig__imgtag{font:500 12px/1 var(--aone-font-ui);letter-spacing:.14em;color:var(--aone-text-muted)}
.ig__ten{letter-spacing:.02em}
.ig__dong{margin:var(--space-6) 0 0;display:flex;flex-direction:column;gap:var(--space-2)}
.ig__dongtxt{font:400 19px/1.5 var(--aone-font-display);color:var(--aone-text-primary)}
.ig__todo{margin-top:var(--space-6)}
.todo__qs{margin:var(--space-2) 0 0;padding-left:1.25em;display:flex;flex-direction:column;
  gap:var(--space-1)}
.todo__qs li{font-size:15px;line-height:1.5;color:var(--aone-text-body)}
.todo__qs li::marker{color:var(--aone-error);font-weight:500}

/* ============ 22. TRANG HỆ SINH THÁI ============ */
.ecx{margin-top:var(--space-16);display:flex;flex-direction:column;align-items:center}
.ecx__root,.ecx__node{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  text-align:center;padding:var(--space-6) var(--space-4);border-radius:4px;
  border:1px solid var(--aone-line-invert)}
.ecx__root{border-color:var(--aone-accent-line);background:rgba(24,183,176,.10);min-width:280px}
.ecx__name{font:600 21px/1.2 var(--aone-font-ui);letter-spacing:.04em;color:var(--aone-text-invert)}
.ecx__role{font:500 12px/1.4 var(--aone-font-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--aone-accent-line)}
.ecx__node .ecx__name{font-size:17px}
.ecx__node .ecx__role{color:var(--aone-text-invert-muted)}
.ecx__link{width:1px;height:var(--space-12);background:var(--aone-accent-line)}
.ecx__row{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);
  position:relative;padding-top:var(--space-8)}
.ecx__row::before{content:"";position:absolute;top:0;left:12.5%;right:12.5%;height:1px;
  background:var(--aone-line-invert)}
.ecx__row .ecx__node{position:relative}
.ecx__row .ecx__node::before{content:"";position:absolute;top:calc(var(--space-8) * -1);
  left:50%;width:1px;height:var(--space-8);background:var(--aone-line-invert)}
.ecx__bound{max-width:30ch;color:var(--aone-text-primary)}

.eces{margin-top:var(--space-12);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-12)}
.ece{padding-top:var(--space-6);border-top:2px solid var(--aone-navy)}
.ece__role{margin:var(--space-2) 0 0;font:500 12px/1.4 var(--aone-font-ui);letter-spacing:.1em;
  text-transform:uppercase;color:var(--aone-accent-interactive)}
.ece__mo{margin:var(--space-4) 0 0;font-size:17px;line-height:1.6;color:var(--aone-text-body)}
.ece__mod{margin:var(--space-6) 0 0;padding-top:var(--space-3);
  border-top:1px solid var(--aone-line-hairline);display:flex;flex-direction:column;gap:var(--space-2)}
.ece__modv{font:500 15px/1.4 var(--aone-font-ui);color:var(--aone-text-primary)}

@media (max-width:1023px){
  .dfs,.igs,.eces{grid-template-columns:1fr;gap:var(--space-12)}
  .igs{gap:var(--space-16)}
  .ecx__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
  .ecx__row::before{display:none}
  .ecx__row .ecx__node::before{display:none}
}
@media (max-width:767px){
  .ba,.ba thead,.ba tbody,.ba tr,.ba th,.ba td{display:block;width:auto}
  .ba thead{display:none}
  .ba tr{padding-block:var(--space-4);border-bottom:1px solid var(--aone-line-hairline)}
  .ba td{border:0;padding:0}
  /* Mobile không có hai cột: gắn nhãn vào từng ô để vẫn biết đâu là trước, đâu là sau. */
  .ba__l::before,.ba__r::before{display:block;margin-bottom:var(--space-2);
    font:500 12px/1 var(--aone-font-ui);letter-spacing:.1em;text-transform:uppercase}
  .ba__l::before{content:attr(data-nhan);color:var(--aone-text-muted)}
  .ba__r{padding-left:0!important;margin-top:var(--space-4);border-left:0}
  .ba__r::before{content:attr(data-nhan);color:var(--aone-accent-interactive)}
  .ecx__row{grid-template-columns:1fr}
  .ecx__root{min-width:0;width:100%}
}

/* ============ 23. KHỐI BẢN NHÁP CLAUDE (hổ phách) ============ */
/* Ba trạng thái nội dung trên site:
     đỏ (.todo)   — chưa có gì, CEO phải viết
     hổ phách     — Claude soạn nháp, CEO duyệt là xong
     không màu    — đã chốt
   Hổ phách #8A5A00 trên nền sáng đạt 5,6:1, đọc được cho cả người mù màu
   đỏ–lục, nên dấu hiệu không chỉ dựa vào màu: luôn có nhãn chữ đi kèm. */
:root{ --aone-nhap:#7A4F00; --aone-nhap-nen:rgba(138,90,0,.07) }
.draft{border-left:2px solid var(--aone-nhap);background:var(--aone-nhap-nen);
  border-radius:0 4px 4px 0;padding:var(--space-4) var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-3)}
.draft__tag{font:500 12px/1 var(--aone-font-ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--aone-nhap)}
.draft__body{display:flex;flex-direction:column;gap:var(--space-6)}
.on-invert .draft{border-left-color:#E0B25E;background:rgba(224,178,94,.10)}
.on-invert .draft__tag{color:#E0B25E}

/* dấu chấm hổ phách trong ô bảng so sánh */
.pmx__nhapdau{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--aone-nhap);margin-left:var(--space-2);vertical-align:middle}
.pmx__c[data-nhap] .pmx__t{color:var(--aone-text-body)}
.pmx__count{display:flex;align-items:baseline;gap:var(--space-2)}
.pmx__count strong{color:var(--aone-nhap)}

/* --- bốn khối chi tiết mô hình --- */
.pmd__mo{margin:0;font-size:17px;line-height:1.6;color:var(--aone-text-body)}
.pmd__f{display:flex;flex-direction:column;gap:var(--space-2)}
.pmd__ul{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:var(--space-2)}
.pmd__ul li{font-size:16px;line-height:1.55;color:var(--aone-text-body)}
.pmd__ul li::marker{color:var(--aone-accent-interactive)}
.pmd__f--khong .pmd__ul li::marker{color:var(--aone-line)}
.pmd__tn{margin:0;font-size:16px;line-height:1.6;color:var(--aone-text-body)}

/* --- bốn trường nháp trong thẻ ngành --- */
.ig__f{display:flex;flex-direction:column;gap:var(--space-2)}
.ig__ul{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:var(--space-1)}
.ig__ul li{font-size:16px;line-height:1.55;color:var(--aone-text-body)}
.ig__ul li::marker{color:var(--aone-accent-interactive)}
.ig__giup{margin:0;font-size:16px;line-height:1.6;color:var(--aone-text-body)}
.ig__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);
  padding-top:var(--space-4);border-top:1px solid rgba(138,90,0,.2)}
.ig__v{font:500 14px/1.45 var(--aone-font-ui);color:var(--aone-text-primary)}
.ig__todo{margin-top:var(--space-4)}
@media (max-width:767px){
  .ig__meta{grid-template-columns:1fr}
  .draft{padding:var(--space-4)}
}

/* --- khối pháp nhân ở chân trang --- */
.ftr__col--ct{display:flex;flex-direction:column;gap:var(--space-4)}
.ftr__ct{margin:0;display:flex;flex-direction:column;gap:var(--space-1)}
.ftr__ctten{font:600 15px/1.4 var(--aone-font-ui);color:var(--aone-text-invert)}
.ftr__ctd{margin:0;font-size:14px;line-height:1.5;color:var(--aone-text-invert-muted);
  display:flex;flex-direction:column;gap:var(--space-1)}
.ftr__ctdc{color:#D6DCE6}
.ftr .draft{padding:var(--space-3) var(--space-4)}
.ftr__slogan{flex-basis:100%}

/* ============ 24. KHỐI CUỘN (roll) + NHẤN TỪ KHOÁ ============ */
/* --- nhấn từ khoá: chú thích trên bản vẽ, không phải bút dạ quang --- */
/* Quyết định của CEO 21/09/2026: KHÔNG gạch chân, chỉ đổi màu và đậm hơn.
   Giữ được hai dấu hiệu (màu + nét chữ) nên bản in đen trắng và người mù màu
   vẫn phân biệt được. */
.kw{font-weight:600;color:var(--aone-kw)}
.on-invert .kw{color:var(--aone-accent-line)}
/* Trên nền teal nhạt của ô đang chọn, giữ đủ tương phản */
.pmx__c[data-ai="aone"] .kw{color:var(--aone-text-primary)}

/* --- khối cuộn --- */
.roll{border-bottom:1px solid var(--aone-line-hairline)}
.roll__sum{display:grid;grid-template-columns:auto minmax(0,1fr) 20px;
  align-items:baseline;gap:var(--space-4);
  padding:var(--space-5) 0;cursor:pointer;list-style:none}
.roll__mid{min-width:0}   /* bọc tiêu đề + câu tóm tắt vào ĐÚNG MỘT ô lưới */
.roll__sum::-webkit-details-marker{display:none}
.roll__sum:hover .wf__name{color:var(--aone-accent-interactive)}
.roll__caret{width:9px;height:9px;justify-self:end;align-self:center;
  border-right:1.5px solid var(--aone-text-muted);border-bottom:1.5px solid var(--aone-text-muted);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t-micro) var(--ease)}
.roll[open] .roll__caret{transform:rotate(-135deg) translate(-2px,-2px)}
.roll__body{padding:0 0 var(--space-8) 0}
/* Hàng cuộn: gạch nhấn bên trái thay cho hộp viền quanh cả hàng */
.roll:has(> .roll__sum:focus-visible){box-shadow:inset 3px 0 0 var(--aone-accent-interactive)}
.roll__sum:focus-visible{box-shadow:none;background:var(--aone-accent-subtle)}

/* --- h06: bảy luồng công việc --- */
.wfs__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  margin-top:var(--space-12);padding-bottom:var(--space-3);
  border-bottom:1px solid var(--aone-line)}
.wfs__all{background:none;border:0;padding:0;cursor:pointer;
  font:500 13px/1.4 var(--aone-font-ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--aone-accent-interactive)}
.wfs__all:hover{text-decoration:underline;text-underline-offset:4px}
.wfs{display:block}
.roll--wf .wf__no{font:500 13px/1.5 var(--aone-font-ui);letter-spacing:.1em;
  color:var(--aone-accent-interactive)}
.roll--wf .wf__name{font:600 19px/1.4 var(--aone-font-ui);letter-spacing:.04em;
  color:var(--aone-text-primary);display:block;
  transition:color var(--t-micro) var(--ease)}
.roll--wf .wf__van{display:block;margin-top:var(--space-2);font-size:17px;line-height:1.55;
  color:var(--aone-text-body);max-width:64ch}
.roll--wf .roll__body{padding-left:calc(13px + var(--space-4))}
.wf__dl{margin:0;display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:var(--space-3) var(--space-8)}
.wf__dl dt{font:500 12px/1.5 var(--aone-font-ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--aone-text-muted)}
.wf__dl dd{margin:0;font-size:16px;line-height:1.6;color:var(--aone-text-body)}
.wf__deliv{font-family:var(--aone-font-ui);font-size:15px;color:var(--aone-text-primary)}
.wf__impact{color:var(--aone-text-primary)}
@media (max-width:767px){
  .roll__sum{grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);
    padding-block:var(--space-4)}
  .roll__caret{grid-column:2;justify-self:end;margin-top:var(--space-2)}
  .roll--wf .wf__name{font-size:17px}
  .roll--wf .roll__body{padding-left:0}
  .wf__dl{grid-template-columns:1fr;gap:var(--space-1) 0}
  .wf__dl dd{margin-bottom:var(--space-4)}
}
.roll--pmd{border-bottom:0;margin-top:var(--space-4)}
.roll--pmd .roll__sum{padding-block:var(--space-4);min-height:44px;
  border-top:1px solid var(--aone-line-hairline);grid-template-columns:minmax(0,1fr) 20px}
.pmd__more{font:500 13px/1.4 var(--aone-font-ui);letter-spacing:.06em;
  color:var(--aone-accent-interactive)}
.roll--pmd .roll__body{padding-bottom:0;display:flex;flex-direction:column;gap:var(--space-6)}

/* ============ 25. CHỮ THƯƠNG HIỆU A¹ONE TRONG VĂN BẢN ============ */
/* Ăn theo cỡ chữ của đoạn văn quanh nó — không đặt cỡ tuyệt đối. */
.bm{white-space:nowrap;letter-spacing:.01em}
.bm__1{font-size:.56em;line-height:0;vertical-align:.52em;
  font-weight:inherit;letter-spacing:0;margin-left:.02em;margin-right:.04em}
/* Trong tiêu đề Playfair, chữ 1 mảnh hơn nên nhích nhẹ cho cân */
.t-display .bm__1,.t-h1 .bm__1,.t-h2 .bm__1,.t-h3 .bm__1{font-size:.52em;vertical-align:.56em}

/* ============ 26. TÊN TIẾNG VIỆT CỦA MODULE ============ */
/* Tên module là tiếng Anh (thuật ngữ thương hiệu); tên tiếng Việt đi kèm
   ngay dưới, nhỏ hơn và nhạt hơn — người đọc Việt hiểu ngay mà không làm
   mờ tên gốc. Chỉ có ở bản tiếng Việt. */
.ten-vi,.osd__itemvi{display:block;margin-top:2px;
  font:400 14px/1.35 var(--aone-font-ui);letter-spacing:0;text-transform:none;
  color:var(--aone-text-muted)}
.osm__ten .ten-vi{font-size:17px;margin-top:var(--space-2)}
.sv__ten .ten-vi{font-size:15px}
.osrail__ten .ten-vi{font-size:12px;margin-top:1px}
.osd__itemwrap{display:block;min-width:0}
.osd__itemvi{color:var(--aone-text-invert-muted);font-size:13px}
.roll--wf .wf__name .ten-vi{font-size:14px;font-weight:400}
.on-invert .ten-vi{color:var(--aone-text-invert-muted)}

/* ============ 27. MỖI MỤC TRANG CHỦ GỌN TRONG MỘT MÀN HÌNH ============ */
/* Yêu cầu CEO 21/09/2026. Đo bằng máy ở verify9: mọi mục phải ≤900px trên
   1440×900 và ≤844px trên 390×844. Mỗi dòng dưới đây gắn với một mục cụ thể
   đã đo được là vượt khung. */

/* 02 — Rời rạc → Kết nối: thu sơ đồ, bớt lề */
.fc__stage{margin-top:var(--space-8)}
.fc__svg{max-width:720px}
.fc__intro{margin-top:var(--space-4)}
.fc__out{margin-top:var(--space-6)}

/* 03 — AONE là gì: bốn điểm khác biệt sít lại */
.wia{gap:var(--space-4)}
.wia__row{padding-block:var(--space-3)}

/* 04 — sơ đồ hệ điều hành trên trang chủ */
.osd--compact .osd__svg{max-width:420px}
.osd--compact .osd__itembtn{padding-block:var(--space-2)}
.osd--compact .osd__list{border-top-width:1px}

/* 06 — bảy luồng công việc */
.roll--wf .roll__sum{padding-block:var(--space-3)}
.roll--wf .wf__van{margin-top:1px;font-size:16px}

/* 08 — sáu thẻ ngành: ảnh thấp hơn, khoảng cách hẹp hơn */
.inds{gap:var(--space-8)}
.ind__img{aspect-ratio:3/2}

@media (max-width:767px){
  /* 04 — sơ đồ nhỏ lại, danh sách module chỉ hiện tên */
  .osd--compact .osd__svg{max-width:210px}
  .osd--compact .osd__itembtn{padding-block:6px}
  .osd--compact .osd__hint{display:none}

  /* 05 — trục ba giai đoạn: bảng xếp dọc, thu lề */
  .ax{margin-top:var(--space-6)}
  .tbl3{margin-top:var(--space-6)}
  .tbl3 td,.tbl3 th{padding-block:var(--space-2)}

  /* 06 — mobile chỉ hiện tên module; câu vấn đề nằm trong phần mở ra.
     Bảy dòng vừa một màn hình; ai muốn đọc vấn đề thì mở dòng đó. */
  .roll--wf .wf__van{display:none}
  .roll--wf[open] .wf__van{display:block;margin-top:var(--space-2)}
  .roll--wf .roll__sum{padding-block:var(--space-2);min-height:44px}

  /* 08 — sáu thẻ ngành thành dải vuốt ngang, vừa một màn hình */
  .inds{display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:var(--space-3);
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .inds .ind{flex:0 0 72%;scroll-snap-align:start}

  /* 09 — hệ sinh thái: bốn nhánh thành lưới 2×2 */
  .eco__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
  .eco{margin-top:var(--space-8)}
  .eco__bound{margin-top:var(--space-6)}
}

/* --- §27b: chỉnh theo số đo từng khối (xem chú thích §27) --- */
/* 02 */ .fc__svg{max-width:640px}
/* 04 */ .osd--compact .osd__svg{max-width:400px}
/* 06 */ .roll--wf .roll__sum{padding-block:var(--space-2)}
         .wfs__top{margin-top:var(--space-6)}
         .wfs + .btn{margin-top:var(--space-6)!important}
/* 08 */ .ind__img{aspect-ratio:2/1}
         .inds{gap:var(--space-6);margin-top:var(--space-6)!important}

@media (max-width:767px){
  /* 03 */ .wia{gap:var(--space-2);margin-top:var(--space-6)!important}
           .wia__row{padding-block:var(--space-2)}
  /* 04 — trên mobile chỉ giữ sơ đồ chấm + nút; danh sách bảy module đã có
     đầy đủ ở trang Hệ điều hành, không lặp lại ở đây. */
           .osd--compact .osd__list{display:none}
           .osd--compact{gap:var(--space-4)}
  /* 05 — ba giai đoạn thành dải vuốt ngang */
           .stgs{display:flex;gap:var(--space-4);overflow-x:auto;
             scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
             margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
             padding-bottom:var(--space-3)}
           .stgs > *{flex:0 0 78%;scroll-snap-align:start}
           .ax{margin-top:var(--space-4)}
  /* 06 */ .roll--wf .roll__sum{padding-block:6px}
  /* 09 */ .eco{margin-top:var(--space-6)}
           .eco__bound{margin-top:var(--space-4);font-size:13px}
}

/* --- §27c: lượt siết cuối, theo số đo --- */
/* 04 desktop */ .osd--compact .osd__svg{max-width:340px}
                 .osd--compact .osd__itembtn{padding-block:5px}
                 .osd--compact .osd__itemname{font-size:16px}
                 .osd--compact .osd__itemvi{font-size:12px}
/* 06 desktop */ .roll--wf .wf__name{font-size:17px}
                 .roll--wf .wf__van{font-size:15px}
                 .roll--wf .roll__sum{padding-block:var(--space-2);min-height:0}
/* 08 desktop */ .inds{gap:var(--space-4)}
                 .ind__why{font-size:15px}

@media (max-width:767px){
  /* 03 */ .wia__row{padding-block:6px}
           .wia__ma{font-size:15px}
  /* 05 — dải vuốt PHẢI nằm ngang: luật ở dòng 530 đang đặt cột */
           .stgs{flex-direction:row!important;gap:var(--space-4);margin-top:var(--space-6)}
           .stgs > .stg{flex:0 0 76%;padding:var(--space-4)}
  /* 06 */ .roll--wf .roll__sum{min-height:44px;padding-block:4px}
           .wfs + .btn{margin-top:var(--space-4)!important}
  /* 09 */ .eco__bound{font-size:12px;line-height:1.5}
           .eco__row{gap:var(--space-2)}
}

/* --- §27d: hai mục cuối --- */
/* 04 — nhãn mục + tiêu đề sát lại, sơ đồ nhỏ thêm chút */
.sec--invert .sec-label{margin-bottom:var(--space-3)}
.osd--compact{gap:var(--space-8)}
.osd--compact .osd__svg{max-width:310px}
/* 06 — tiêu đề mục và danh sách sát lại */
.wfs__top{margin-top:var(--space-4);padding-bottom:var(--space-2)}
.roll--wf .wf__van{line-height:1.45}
@media (max-width:767px){
  /* 06 */ .wfs__top{margin-top:var(--space-3)}
  /* 09 */ .eco__node,.eco__root{padding:var(--space-3)}
           .eco__link{height:var(--space-4)}
}

/* --- §27e: hai mục bảy phần tử --- */
/* 04 — danh sách bảy module: một dòng mỗi module, tên Việt nằm cùng dòng */
.osd--compact .osd__itembtn{padding-block:3px;align-items:baseline}
.osd--compact .osd__itemwrap{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.osd--compact .osd__itemvi{display:inline;margin-top:0}
.osd--compact .osd__list{border-top:0}
/* 06 — tên và câu vấn đề cùng một dòng khi còn chỗ */
.roll--wf .roll__mid{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap}
.roll--wf .wf__name{display:inline-flex;align-items:baseline;gap:var(--space-2)}
.roll--wf .wf__name .ten-vi{display:inline;margin-top:0}
.roll--wf .wf__van{display:inline;margin-top:0;flex:1 1 320px}
@media (max-width:767px){
  .roll--wf .roll__mid{gap:var(--space-1)}
  .roll--wf .wf__name{flex-wrap:wrap}
}
@media (max-width:767px){
  /* Bố cục một dòng chỉ hợp desktop; trên 390px nó xuống dòng lởm chởm
     và cao hơn bản xếp dọc. Trả về xếp dọc, câu vấn đề nằm trong phần mở. */
  .roll--wf .roll__mid{display:block}
  .roll--wf .wf__name{display:flex;flex-wrap:wrap;gap:var(--space-2)}
  .roll--wf .wf__van{display:none;flex:none}
  .roll--wf[open] .wf__van{display:block;margin-top:var(--space-2)}
}

/* --- khung ảnh khi đã có ảnh thật --- */
.ind__img--co,.ig__img--co{padding:0;border:0;background:none;overflow:hidden;display:block}
.ind__img--co img,.ig__img--co img{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:4px}

/* ============================================================
   §28 — YÊU CẦU CEO 21/09/2026
   1. Sơ đồ ma trận ONE SYSTEM ở trang chủ phải to hơn.
   2. Chọn giai đoạn nào thì phần nội dung của giai đoạn đó đổi màu nền.
   ============================================================ */

/* --- 28.1 Sơ đồ ONE SYSTEM to hơn --- */
/* Khung nhìn SVG đã được ôm sát nét vẽ trong diagram.py (bỏ 14% thừa ngang,
   22% thừa dọc). Phần còn lại là bề rộng CSS. Mục 04 hạ đệm trên dưới từ 96px
   xuống 72px để nhường chỗ, vẫn gọn trong một màn hình 900px. */
.sec--os{--sec-pad-invert:64px}
.os-slot{margin-top:var(--space-4)}
.osd--compact .osd__hint{margin-top:var(--space-2)}
/* Sơ đồ bị chặn bởi CHIỀU CAO chứ không phải bề ngang, nên cỡ đặt theo vh rồi
   nhân tỷ lệ ngang/dọc của khung nhìn. 1.336 = W/H của khung nhìn bản gọn
   (cỡ chữ NHAN_GON=20) — đổi cỡ chữ hay hình dạng sơ đồ thì phải tính lại số
   này; verify12.py đo lại tỷ lệ thật và báo hỏng nếu lệch.
   Đặt theo vh nên màn hình thấp (1280×800, 1024×768) sơ đồ tự nhỏ lại. */
/* 44vh chứ không phải 46: đo trên laptop 1280×800 thì 46vh đẩy mục 04 lên 812px,
   quá một màn hình 12px. 44vh cho 796px, và trên 1440×900 chỉ nhỏ đi 4%. */
.osd--compact .osd__svg{max-width:min(560px, calc(44vh * 1.336))}
/* Danh sách bảy module hẹp lại một chút, nhường bề ngang cho sơ đồ.
   CHỈ ở desktop: từ 1023px trở xuống lưới đã là một cột, đè lên là sơ đồ teo lại. */
@media (min-width:1024px){
  .osd--compact{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)}
}

@media (max-width:1023px){
  /* Máy tính bảng: lưới xuống một cột, sơ đồ và danh sách xếp chồng nên mục 04
     cao vọt. Ẩn danh sách y như trên điện thoại — bảy module có đủ ở trang
     Hệ điều hành — và để sơ đồ chiếm trọn bề ngang. */
  .sec--os{--sec-pad-invert:64px}
  .osd--compact .osd__list{display:none}
  .osd--compact{gap:var(--space-6)}
  .osd--compact .osd__svg{max-width:min(560px, calc(46vh * 1.336))}
}
@media (max-width:767px){
  /* Trên điện thoại nhãn chữ bị ẩn (dòng 445), nên khoảng trống khung nhìn dành
     cho nhãn thành đất chết: vòng tròn chỉ chiếm 67% bề ngang thẻ SVG. Cho thẻ
     tràn ra đúng phần đất chết đó rồi cắt ở .osd__stage — không có chữ nào ở
     đấy để mà cắt mất, còn vòng tròn thì to thêm 44%.
     Chỉ làm ở đây: máy tính bảng thừa bề ngang, không cần tràn. */
  .sec--os{--sec-pad-invert:56px}
  .osd--compact .osd__stage{overflow:hidden}
  .osd--compact .osd__svg{max-width:none;width:132%;margin-inline:-16%}
  /* Số trong đĩa hiện lại trên điện thoại. Trước đây phải ẩn vì ở cỡ cũ nó chỉ
     hiện ra 4,9px; nay sơ đồ to gấp rưỡi nên 21 đơn-vị-vẽ ra 12,2px, đọc được.
     Số nằm trong đĩa nên KHÔNG ảnh hưởng khung nhìn — sửa ở CSS là đủ.
     21 là trần: "01" rộng 2 × 0,877 × 21 = 36,8 đơn vị, vừa trong đĩa 44 đơn vị. */
  .osd--compact .osd__num{display:block;font-size:21px}
}
/* Điện thoại màn hình thấp (iPhone SE 375×667): bỏ phần tràn, về đúng bề ngang
   cột, nếu không mục 04 cao hơn một màn hình. */
@media (max-width:767px) and (max-height:700px){
  .osd--compact .osd__svg{width:100%;margin-inline:0}
}

/* --- 28.2 Nền vùng giai đoạn đang chọn --- */
/* #CCEAE6 = teal thương hiệu 20% trên nền trắng ngà, tính sẵn thành mã đặc để
   chồng lên nền nào cũng ra đúng màu. Độ tương phản đo bằng Python:
   với nền trắng ngà 1,19:1 (thấy rõ như nền sand 1,23:1);
   chữ navy 10,89:1 · chữ mờ 5,41:1 · teal đậm --aone-kw 5,80:1 — đều đạt AA.
   KHÔNG dùng --aone-accent-interactive trên nền này: chỉ còn 3,90:1. */
:root{ --aone-bg-selected:#CCEAE6 }

/* bảng ba cột — desktop */
.tbl3 td[data-stage]{transition:color var(--t-state) var(--ease),
  background-color var(--t-state) var(--ease)}
.tbl3 thead th[data-stage]{transition:color var(--t-state) var(--ease),
  background-color var(--t-state) var(--ease),box-shadow var(--t-state) var(--ease)}
.tbl3 td[data-stage].is-on,
.tbl3 thead th[data-stage].is-on{background:var(--aone-bg-selected)}
.tbl3 thead th[data-stage].is-on{color:var(--aone-kw);
  box-shadow:inset 0 3px 0 var(--aone-accent-interactive)}
.tbl3 tbody tr:last-child td[data-stage].is-on{
  box-shadow:inset 0 -1px 0 var(--aone-accent-line)}
/* Vạch ngăn dòng đang là greige ấm, cắt ngang nền xanh thành những khe trắng.
   Trong cột được chọn đổi sang vạch xanh mờ: vẫn tách được dòng, nhưng cả cột
   đọc ra một khối liền. */
.tbl3 td[data-stage].is-on,
.tbl3 thead th[data-stage].is-on{border-bottom-color:rgba(14,125,120,.22)}

/* chấm trên trục cũng nhận cùng một màu nền, để mắt nối được hai chỗ */
.ax__step[aria-pressed="true"] .ax__name{background:var(--aone-bg-selected);
  color:var(--aone-kw);padding:3px var(--space-2);margin:-3px calc(var(--space-2) * -1)}

/* thẻ giai đoạn — điện thoại */
/* Dải vuốt neo theo mép trong: không có dòng này thẻ được chọn dính sát mép
   màn hình, mất cả lề lẫn vạch nhấn bên trái. */
.stgs{scroll-padding-inline-start:var(--gutter)}
.stg{transition:background-color var(--t-state) var(--ease),
  border-color var(--t-state) var(--ease)}
.stg.is-on{background:var(--aone-bg-selected);
  border-left-color:var(--aone-accent-interactive);border-left-width:3px}
.stg.is-on .stg__h{color:var(--aone-kw)}

/* --- 28.1b Nét vẽ dày theo khung nhìn mới --- */
/* stroke-width tính bằng đơn vị vẽ nên co cùng khung nhìn: khung mới nhỏ hơn
   khung cũ, 1 đơn vị chỉ còn 0,68px trên trang chủ — mạng 12 liên kết mờ đi
   đúng lúc nó cần nổi nhất. Nhân lên cho nét về lại khoảng 1,1–1,5px. */
.osd__edge{stroke-width:1.6}
.osd.is-live .osd__edge.is-on{stroke-width:3}
.osd__disc{stroke-width:2.2}
.osd__node:focus-visible .osd__disc{stroke-width:3}
.osd.is-live .osd__node.is-sel .osd__disc,
.osd.is-live .osd__node.is-rel .osd__disc{stroke-width:2.6}

/* ============================================================
   §29 — TRANG VỀ A¹ONE · đội ngũ
   ============================================================ */
.ngs{display:flex;flex-direction:column;gap:0}
.ng{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-12);
  padding-block:var(--space-12);border-top:1px solid var(--aone-line-hairline)}
.ng:first-child{border-top:0;padding-top:0}
.ng__anh{aspect-ratio:4/5;background:var(--aone-bg-raised);
  border:1px solid var(--aone-line-hairline);display:grid;place-items:center}
.ng__anh span{font:500 12px/1 var(--aone-font-ui);letter-spacing:.16em;
  color:var(--aone-text-muted)}
.ng__ten{font:600 26px/1.2 var(--aone-font-display);letter-spacing:.01em;
  color:var(--aone-text-primary);margin:0}
.ng__chuc{margin-top:var(--space-2);font:500 13px/1.4 var(--aone-font-ui);
  letter-spacing:.1em;text-transform:uppercase;color:var(--aone-accent-interactive)}
.ng__mo{margin-top:var(--space-4);max-width:58ch;color:var(--aone-text-body)}
.ng__vai{margin-top:var(--space-4);padding-left:var(--space-4);
  border-left:2px solid var(--aone-accent-line);font-size:15px;
  color:var(--aone-text-muted);max-width:52ch}

/* pháp nhân */
.pn{display:grid;grid-template-columns:200px minmax(0,1fr);
  gap:var(--space-3) var(--space-12);margin:0;max-width:760px}
.pn dt{font:500 12px/1.5 var(--aone-font-ui);letter-spacing:.12em;
  text-transform:uppercase;color:var(--aone-text-muted)}
.pn dd{margin:0;font-size:17px;color:var(--aone-text-primary)}

@media (max-width:1023px){
  .ng{grid-template-columns:150px minmax(0,1fr);gap:var(--space-8)}
}
@media (max-width:767px){
  .ng{grid-template-columns:1fr;gap:var(--space-5);padding-block:var(--space-8)}
  .ng__anh{aspect-ratio:3/2;max-width:none}
  .ng__ten{font-size:23px}
  .pn{grid-template-columns:1fr;gap:var(--space-1) 0}
  .pn dd{margin-bottom:var(--space-4)}
}

/* ============================================================
   §30 — LƯỢT RÀ SOÁT GIAO DIỆN 21/09/2026
   ============================================================ */
/* Các chip nhảy tới dịch vụ ở trang Dịch vụ cao 33px trên điện thoại.
   Chuẩn cảm ứng là 44px (WCAG 2.2). Trên chuột giữ nguyên 33px — chuột
   chỉ cần 24px, mà chip thấp thì hàng chip gọn hơn. */
@media (max-width:1023px){
  .svj__a{min-height:44px;align-items:center;padding-block:0}
}

/* Vùng bấm — lượt rà soát tìm thấy sáu chỗ dưới chuẩn.
   verify8 vốn có kiểm mục này nhưng chỉ quét thẻ <summary>, nên sáu chỗ dùng
   <a> và <button> lọt qua suốt từ Slice 9. Chuẩn WCAG 2.2: 24px trên chuột,
   44px trên cảm ứng. Chỉ tăng CHIỀU CAO VÙNG BẤM, không tăng cỡ chữ — nên
   bố cục và luật "mỗi mục gọn trong một màn hình" không đổi. */
.btn--text,.wfs__all{min-height:24px;display:inline-flex;align-items:center}
@media (max-width:1023px){
  .btn--text,.wfs__all{min-height:44px}
  .ax__step{min-height:44px;justify-content:center}
  .pm__step{min-height:44px}
  .osm__chip{min-height:44px;display:inline-flex;align-items:center}
}

/* ---- Slice 2: hero + checklist ---- */

.hero{display:flex;align-items:center;min-height:min(92vh,880px);
  padding-top:calc(var(--header-h) + var(--space-16))}
.hero__h{margin-top:var(--space-6);max-width:16ch}
.hero__sub{margin-top:var(--space-6);color:var(--aone-text-invert-muted);max-width:44ch}
.hero__cta{margin-top:var(--space-12);gap:var(--space-4)}
.axis{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-12);flex-wrap:wrap}
.axis__step{font:500 13px/1 var(--aone-font-ui);letter-spacing:.14em;color:var(--aone-text-invert)}
.axis__arrow{color:var(--aone-accent-line);font-size:16px;line-height:1}
@media (max-width:767px){
  .hero{min-height:88vh;padding-top:calc(var(--header-h) + var(--space-12))}
  .axis{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
  .axis__arrow{transform:rotate(90deg)}
}
.checklist{margin:var(--space-6) 0 0;padding-left:1.3em;display:flex;flex-direction:column;gap:var(--space-3)}
.checklist li{font-size:17px;line-height:1.6}
.checklist li::marker{color:var(--aone-accent-interactive);font-weight:500}