/* ==========================================================================
   Go AI Enterprise — lớp bố cục & typography (v2.3.0)
   Nạp CUỐI CÙNG (sau styles.css và goai-wp.css) nên thắng các quy tắc cũ.
   Nguyên tắc:
   1. Không bao giờ để chữ dính nhau: <br> trong tiêu đề chỉ ẩn khi đã có dấu cách.
   2. Tiêu đề cân dòng (text-wrap: balance), không còn chữ mồ côi ở dòng cuối.
   3. Không khóa cuộn ngang bằng overflow:hidden trên html/body (giữ sticky header).
   4. Thành phần nổi (hỗ trợ, cookie) không che nội dung đang đọc.
   ========================================================================== */

/* ---------- 1. Nền tảng: dòng chữ, ảnh, lưới ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  overflow-x: clip;                       /* chặn tràn ngang nhưng không phá position:sticky */
  overflow-wrap: break-word;              /* URL/ID dài được ngắt, từ tiếng Việt thường thì không bị cắt */
  word-break: normal;
  hyphens: manual;
  -webkit-font-smoothing: antialiased;
}
main, section, article, aside, .container { min-width: 0; }
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
.hero-visual img, .team-card > img, .founder-card > img, .book-cover img { height: 100%; }

h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
p, li, dd, blockquote, figcaption, summary { text-wrap: pretty; }
.eyebrow { text-wrap: balance; }

/* Bảng dữ liệu cuộn trong khung riêng, không làm rộng trang */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 2. Focus & tương tác thống nhất ---------- */
:focus-visible { outline: 2px solid #1455d6; outline-offset: 3px; border-radius: 6px; }
.cookie-consent:focus { outline: none; }                         /* tiêu điểm lập trình khi mở trang */
.menu-toggle { min-height: 44px; }

/* ---------- 3. Accordion / “Xem chi tiết” đồng nhất ---------- */
.faq summary,
.capability-grid summary,
.package-details summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker,
.capability-grid summary::-webkit-details-marker,
.package-details summary::-webkit-details-marker { display: none; }

.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-right: 0; line-height: 1.5;
}
.faq summary::after {
  content: "+"; flex: 0 0 auto; width: 26px; height: 26px; margin-top: -1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #edf3fa; color: #1455d6; font-weight: 600; line-height: 1;
}
.faq details[open] > summary::after { content: "–"; }
.capability-grid summary::after,
.package-details summary::after { content: " +"; }
.capability-grid details[open] > summary::after,
.package-details[open] > summary::after { content: " –"; }         /* không chồng lên banner cookie */

/* ---------- 5. Máy tính bảng & màn hình vừa (≤1023px) ---------- */
@media (max-width: 1023px) {
  /* Ngắt dòng cứng chỉ dành cho màn hình rộng; ở đây để trình duyệt tự cân dòng. */
  h1 br, h2 br, h3 br { display: none !important; }
  /* Ngoại lệ: tiêu đề gồm hai ý/hai câu có chủ ý (hero, Founder) giữ ngắt dòng để không tách cụm từ như "Tự động hóa". */
  .hero-photo h1 br, .founder-headline br { display: inline !important; }
  .team-grid, .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 6. Điện thoại (≤760px) ---------- */
@media (max-width: 760px) {
  .container { width: min(100% - 32px, var(--max, 1180px)); }

  /* Thang chữ tiêu đề: gọn, dễ đọc, đồng nhất giữa các trang */
  body .hero-photo h1,
  body .hero h1            { font-size: clamp(1.85rem, 7.6vw, 2.35rem); line-height: 1.22; letter-spacing: -.015em; margin-bottom: 14px; }
  body .page-hero h1,
  body .about-hero h1,
  body .founder-headline   { font-size: clamp(1.7rem, 7vw, 2.15rem);  line-height: 1.24; letter-spacing: -.015em; margin-bottom: 12px; }
  body .section-heading h2,
  body .security-intro h2,
  body .why-ai h2          { font-size: clamp(1.45rem, 5.8vw, 1.8rem); line-height: 1.28; letter-spacing: -.01em; margin-bottom: 8px; }
  body .contact-layout aside h2,
  body .survey-gate h2,
  body .purpose-card h2    { font-size: clamp(1.35rem, 5.4vw, 1.65rem); line-height: 1.3; }
  h3 { line-height: 1.35; }
  .eyebrow { font-size: .78rem; letter-spacing: .07em; line-height: 1.4; margin-bottom: 10px; }
  .lead, .hero-photo .lead { font-size: 1rem; line-height: 1.65; max-width: none; }

  /* Khối tiêu đề: thanh nhấn mảnh, đệm vừa phải, nền nhẹ */
  .section-heading,
  .page-hero .container,
  .founder-header {
    padding: 14px 16px 14px 18px;
    border-left-width: 3px;
  }
  .section-heading:before,
  .page-hero .container:before { border-radius: 0 16px 16px 0; }
  .page-hero { padding-block: 22px 20px; }
  .section { padding-block: 26px; }

  /* Nút bấm: rộng đủ chạm, chữ căn giữa, không xuống dòng lẻ */
  .hero-actions, .hero-buttons, .cta .button, .section-end .button { width: 100%; }
  .hero-actions .button, .hero-buttons .button { width: 100%; justify-content: center; text-align: center; }
  .button { min-height: 48px; }

  /* Biểu mẫu: 16px để iOS không tự phóng to, một cột */
  .field input, .field select, .field textarea, input, select, textarea { font-size: 16px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Thẻ & lưới: một cột, khoảng cách đều */
  .package-grid, .use-grid, .assessment-grid, .two-columns, .purpose-grid, .values-grid,
  .knowledge-grid, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .package, .assessment-card, .survey-gate, .service-panel { padding: 20px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .feature-grid, .security .feature-grid { grid-template-columns: minmax(0, 1fr); }

  /* Bộ sách: 3 + 2, tên sách thẳng hàng, ô đều nhau */
  .books-section .book-level { min-height: 2.6em; display: flex; align-items: flex-end; justify-content: center; text-align: center; }
  .books-section .book-title { min-height: 3.4em; text-wrap: balance; }
  .books-section .books-tabs { justify-content: center; }
  .books-section .book-panel { grid-template-columns: minmax(0, 1fr) !important; padding: 18px; }

  /* Chân trang: hai cột gọn, vùng chạm ≥ 40px */
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .footer a { padding-block: 6px; margin: 2px 0; line-height: 1.45; }
  .copyright { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* Banner cookie gọn: không chiếm gần nửa màn hình */
  .cookie-consent {
    left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto; padding: 14px 16px; gap: 10px; border-radius: 16px;
    max-height: 60dvh; overflow-y: auto;
  }
  .cookie-consent h2 { font-size: 1rem; margin: 0 0 4px; }
  .cookie-consent p  { font-size: .83rem; line-height: 1.5; margin: 0 0 4px; }
  .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cookie-actions .button, .cookie-secondary { padding: 10px 8px; font-size: .86rem; white-space: normal; text-align: center; justify-content: center; min-height: 44px; }

  /* Hộp thoại & khung chat theo chiều cao thực của màn hình */
  .detail-dialog { width: calc(100vw - 24px); max-height: 88dvh; }
}

/* ---------- 7. Điện thoại nhỏ (≤400px) ---------- */
@media (max-width: 400px) {
  .container { width: min(100% - 24px, var(--max, 1180px)); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .books-section .book-tab { flex-basis: calc((100% - 20px) / 3); padding-inline: 4px; }
}

/* Màn hình rộng (≥1024px): giữ nguyên bố cục gốc; tiêu đề đã được cân dòng ở mục 1
   và các <br> có chủ ý vẫn hoạt động. */

/* ==========================================================================
   8. Thang chữ tiêu đề cho máy tính bảng & desktop (v2.5.0)
   Trước đây chỉ điện thoại có thang chữ riêng; trên desktop H1 các trang trong
   lên tới 83px (chiếm 3–4 dòng) và H2 mục lớn 48px làm khối tiêu đề quá nặng.
   Nguyên tắc: H1 trang trong ≤ 42px, H1 trang chủ ≤ 50px, H2 mục ≤ 34px;
   tiêu đề gồm hai ý (có <br>) luôn vừa đúng 2 dòng; khối nền/viền tiêu đề gọn.
   Bọc trong min-width:761px để không ảnh hưởng thang chữ điện thoại ở mục 6.
   ========================================================================== */
@media (min-width: 761px) {
  /* --- H1 trang trong --- */
  body .page-hero h1,
  body.inner-page .page-hero h1,
  body.inner-page .go-ai-overview .page-hero h1,
  .go-ai-overview .page-hero h1 {
    font-size: clamp(1.9rem, 2.9vw, 2.6rem);
    line-height: 1.22; letter-spacing: -.02em; font-weight: 600;
    max-width: 40ch; margin-bottom: 12px;
  }
  /* Tiêu đề hai ý có <br>: cho phép rộng hơn để mỗi ý nằm trọn một dòng */
  body .page-hero h1:has(br) { max-width: 34ch; }
  body .page-hero .eyebrow { font-size: .78rem; margin-bottom: 8px; }
  body .page-hero .lead    { font-size: 1.05rem; line-height: 1.7; max-width: 780px; margin-bottom: 0; }
  body .page-hero .hero-actions { margin-top: 18px; }

  /* Khối hero trang trong: đệm gọn, thanh nhấn mảnh */
  body .page-hero .container { padding: 20px 30px; border-left-width: 3px; }
  body.inner-page .page-hero { padding-block: 24px 22px; }

  /* --- Trang Giới thiệu --- */
  body .about-hero h1,
  body .founder-headline { font-size: clamp(1.95rem, 3vw, 2.7rem); line-height: 1.22; letter-spacing: -.02em; max-width: 24ch; }

  /* --- H1 trang chủ: ba dòng cân đối, không còn chữ mồ côi "Nam" --- */
  body .hero-photo h1,
  body .hero h1 { font-size: clamp(2.05rem, 3.5vw, 3.1rem); line-height: 1.2; letter-spacing: -.025em; margin-bottom: 18px; }
  body .hero-photo h1 span { display: block; font-size: .86em; margin-top: .18em; text-wrap: balance; }
  body .hero-photo .hero-copy { width: 58%; max-width: 720px; }
  body .hero-photo .lead { font-size: 1.05rem; max-width: 520px; }

  /* --- H2 tiêu đề mục --- */
  body .section-heading { padding: 14px 24px; max-width: 980px; margin-bottom: 22px; }
  body .section-heading h2,
  body .inner-page .section-heading h2 { font-size: clamp(1.6rem, 2.4vw, 2.15rem); line-height: 1.25; letter-spacing: -.015em; margin-bottom: 6px; }
  body .section-heading .eyebrow { font-size: .76rem; margin-bottom: 6px; }
  body .section-heading .lead   { font-size: 1.02rem; margin-bottom: 0; }
  body .security-intro h2,
  body .dcs-overview-head h2,
  body .level-preview-head h2,
  body .books-section .section-heading h2 { font-size: clamp(1.6rem, 2.3vw, 2.05rem); line-height: 1.25; }
  body .contact-layout aside h2,
  body .survey-gate h2   { font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.3; }
  body .values-heading h2 { font-size: 1.55rem; }
  body .purpose-card h2   { font-size: 1.4rem; }
  body .cta h2            { font-size: clamp(1.5rem, 2.1vw, 1.9rem); line-height: 1.3; }

  /* Ngắt dòng cứng trong H2 chỉ giữ khi tiêu đề thực sự có hai ý */
  body .section-heading h2 br, body .security-intro h2 br { display: none; }
}

/* Máy tính bảng dọc: hero trang chủ trải đủ chiều ngang, ảnh nền không đè chữ */
@media (min-width: 761px) and (max-width: 1023px) {
  body .hero-photo .hero-copy { width: 64%; }
  body .page-hero h1, body .page-hero h1:has(br) { max-width: none; }
}

/* =====================================================================
   v2.5.5 — Thẻ "Sáu nhóm ứng dụng" (.use-grid) và "Cách triển khai" (.steps)
   Trang trí đậm hơn, gọn hơn, dòng liên kết cuối thẻ thẳng hàng.
   ===================================================================== */

/* 1) Bỏ khoảng trống thừa: section không còn cao bằng cả màn hình */
body .section:has(.use-grid),
body .section:has(.steps) { min-height: 0 !important; padding-block: 30px; }
body .section:has(.use-grid) .section-heading,
body .section:has(.steps) .section-heading { margin-bottom: 16px; }

/* 2) Thẻ chung: bố cục lưới [chip số | tiêu đề] / mô tả / liên kết ở đáy */
body .use-grid { gap: 16px; align-items: stretch; }
body .steps    { gap: 22px;  align-items: stretch; }

body .use-grid article,
body .steps .step-trigger {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;   /* hàng cuối = liên kết, luôn nằm đáy → cùng hàng giữa các thẻ */
  column-gap: 14px;
  row-gap: 10px;
  align-items: center;
  text-align: left;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Bảng màu riêng cho từng thẻ */
body .use-grid article { --ac:#1858be; --tint:#e9f1ff; --glow:#1858be26; }
body .use-grid article:nth-child(2) { --ac:#087969; --tint:#e5f6f0; --glow:#08796926; }
body .use-grid article:nth-child(3) { --ac:#6e41b0; --tint:#f1eafa; --glow:#6e41b026; }
body .use-grid article:nth-child(4) { --ac:#975500; --tint:#fff3dc; --glow:#97550026; }
body .use-grid article:nth-child(5) { --ac:#ad395d; --tint:#fceaf0; --glow:#ad395d26; }
body .use-grid article:nth-child(6) { --ac:#0b6e99; --tint:#e4f4fb; --glow:#0b6e9926; }

body .step-1 { --step-accent:#1858be; --step-tint:#e9f1ff; --glow:#1858be26; }
body .step-2 { --step-accent:#087969; --step-tint:#e5f6f0; --glow:#08796926; }
body .step-3 { --step-accent:#6e41b0; --step-tint:#f1eafa; --glow:#6e41b026; }
body .step-4 { --step-accent:#975500; --step-tint:#fff3dc; --glow:#97550026; }

/* Khung thẻ */
body .use-grid article {
  padding: 20px 22px 16px;
  border: 1px solid #d5e2f2;
  border-top: 4px solid var(--ac);
  border-radius: 16px;
  background: linear-gradient(165deg, var(--tint) 0, #fff 62%);
  transition: transform .2s, box-shadow .2s;
}
body .steps .step {
  position: relative;
  border: 1px solid #d5e2f2 !important;
  border-top: 4px solid var(--step-accent) !important;
  border-radius: 16px;
  background: linear-gradient(165deg, var(--step-tint) 0, #fff 65%);
  transition: transform .2s, box-shadow .2s;
}
body .steps .step-trigger { padding: 18px 20px 14px; border-radius: 12px; height: 100%; }

/* Vầng sáng trang trí ở góc phải trên */
body .use-grid article::before,
body .steps .step-trigger::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -50px; right: -50px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0, transparent 68%);
}

/* Hover */
body .use-grid article:hover { transform: translateY(-4px); box-shadow: 0 14px 30px var(--glow); }
body .steps .step:hover      { transform: translateY(-4px); box-shadow: 0 14px 30px var(--glow) !important; }
body .steps .step-trigger:hover { transform: none; box-shadow: none; }

/* Chip số */
body .use-grid .number,
body .steps .step .number {
  grid-column: 1; grid-row: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0;
  border-radius: 12px;
  font-size: .95rem; font-weight: 700; letter-spacing: .02em;
  color: #fff;
}
body .use-grid article .number { background: var(--ac);        box-shadow: 0 6px 14px var(--glow); }
body .steps .step .number      { background: var(--step-accent); box-shadow: 0 6px 14px var(--glow); }

/* Tiêu đề: nằm cạnh chip số */
body .use-grid h3,
body .steps .step h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.2rem; line-height: 1.3; }
body .use-grid h3      { color: var(--ac); }
body .steps .step h3   { color: var(--step-accent); }

/* Mô tả */
body .use-grid p,
body .steps .step p {
  grid-column: 1 / -1; grid-row: 2;
  align-self: start;
  margin: 0;
  font-size: .93rem; line-height: 1.6;
  color: #41556e;
}

/* Dòng liên kết cuối thẻ: luôn ở đáy, ngăn cách bằng đường nét đứt */
body .use-grid .text-link,
body .steps .step-more {
  grid-column: 1 / -1; grid-row: 3;
  align-self: end;
  margin: 4px 0 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px dashed #c3d4ea;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .9rem; font-weight: 700;
}
body .use-grid .text-link  { color: var(--ac); }
body .steps .step-more     { color: var(--step-accent); }

/* Mũi tên ↗ thành nút tròn */
body .use-grid .text-link span {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ac); color: #fff;
  font-size: .8rem; line-height: 1;
  transition: transform .2s;
}
body .use-grid article:hover .text-link span { transform: translate(2px, -2px); }

/* Đường nối giữa các bước (chỉ khi đủ 4 cột) */
@media (min-width: 1001px) {
  body .steps .step:not(:last-child)::after {
    content: "\203A";
    position: absolute; top: 28px; right: -21px; z-index: 2;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff; border: 1px solid #d5e2f2;
    color: var(--step-accent);
    font-size: 1rem; font-weight: 700; line-height: 1;
    pointer-events: none;
  }
}

/* Điện thoại: thu gọn thêm */
@media (max-width: 760px) {
  body .use-grid { gap: 12px; }
  body .steps    { gap: 12px; }
  body .use-grid article { padding: 16px 16px 14px; }
  body .steps .step-trigger { padding: 14px 16px 12px; }
  body .section:has(.use-grid),
  body .section:has(.steps) { padding-block: 24px; }
}

/* =====================================================================
   v2.5.6 — Nâng cấp nhẹ thẻ: biểu tượng, focus bàn phím, giảm chuyển động
   ===================================================================== */
body .use-grid article,
body .steps .step-trigger { grid-template-columns: auto 1fr auto; }

/* Ô biểu tượng ở góc phải hàng tiêu đề (chỉ trang trí, không ảnh hưởng nội dung/dịch) */
body .use-grid article::after,
body .steps .step-trigger::after {
  content: "";
  grid-column: 3; grid-row: 1;
  width: 36px; height: 36px;
  border-radius: 11px;
  border: 1px solid var(--glow);
  background-color: #ffffffb3;
  background-repeat: no-repeat; background-position: center; background-size: 19px;
  transition: transform .25s;
}
body .use-grid article:hover::after,
body .steps .step:hover .step-trigger::after { transform: rotate(-6deg) scale(1.06); }
body .use-grid article:nth-child(1)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231858be'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='22%207%2013.5%2015.5%208.5%2010.5%202%2017'/%3E%3Cpolyline%20points='16%207%2022%207%2022%2013'/%3E%3C/svg%3E"); }
body .use-grid article:nth-child(2)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23087969'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m3%2011%2018-5v12L3%2014v-3z'/%3E%3Cpath%20d='M11.6%2016.8a3%203%200%201%201-5.8-1.6'/%3E%3C/svg%3E"); }
body .use-grid article:nth-child(3)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236e41b0'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='9'%20cy='7'%20r='4'/%3E%3Cpath%20d='M22%2021v-2a4%204%200%200%200-3-3.87'/%3E%3Cpath%20d='M16%203.13a4%204%200%200%201%200%207.75'/%3E%3C/svg%3E"); }
body .use-grid article:nth-child(4)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23975500'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='2'%20width='16'%20height='20'%20rx='2'/%3E%3Cline%20x1='8'%20y1='6'%20x2='16'%20y2='6'/%3E%3Cpath%20d='M8%2010h.01M12%2010h.01M16%2010h.01M8%2014h.01M12%2014h.01M16%2014h.01M8%2018h.01M12%2018h.01M16%2018h.01'/%3E%3C/svg%3E"); }
body .use-grid article:nth-child(5)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ad395d'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='M12%202v3M12%2019v3M4.9%204.9l2.1%202.1M17%2017l2.1%202.1M2%2012h3M19%2012h3M4.9%2019.1%207%2017M17%207l2.1-2.1'/%3E%3C/svg%3E"); }
body .use-grid article:nth-child(6)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230b6e99'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2018v-6a9%209%200%200%201%2018%200v6'/%3E%3Cpath%20d='M21%2019a2%202%200%200%201-2%202h-1a2%202%200%200%201-2-2v-3a2%202%200%200%201%202-2h3zM3%2019a2%202%200%200%200%202%202h1a2%202%200%200%200%202-2v-3a2%202%200%200%200-2-2H3z'/%3E%3C/svg%3E"); }
body .steps .step-1 .step-trigger::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231858be'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='8'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.65'%20y2='16.65'/%3E%3C/svg%3E"); }
body .steps .step-2 .step-trigger::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23087969'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'/%3E%3Cline%20x1='3'%20y1='9'%20x2='21'%20y2='9'/%3E%3Cline%20x1='9'%20y1='21'%20x2='9'%20y2='9'/%3E%3C/svg%3E"); }
body .steps .step-3 .step-trigger::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236e41b0'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%202v7.31'/%3E%3Cpath%20d='M14%209.3V1.99'/%3E%3Cpath%20d='M8.5%202h7'/%3E%3Cpath%20d='M14%209.3a6.5%206.5%200%201%201-4%200'/%3E%3C/svg%3E"); }
body .steps .step-4 .step-trigger::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23975500'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='15%203%2021%203%2021%209'/%3E%3Cpolyline%20points='9%2021%203%2021%203%2015'/%3E%3Cline%20x1='21'%20y1='3'%20x2='14'%20y2='10'/%3E%3Cline%20x1='3'%20y1='21'%20x2='10'%20y2='14'/%3E%3C/svg%3E"); }

/* Bàn phím: viền focus rõ ràng trên thẻ có liên kết */
body .use-grid article:focus-within { box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--ac); }
body .use-grid .text-link:focus-visible { outline: none; }
body .steps .step:focus-within { box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--step-accent) !important; }
body .steps .step-trigger:focus-visible { outline: none; }

/* Người dùng bật "giảm chuyển động" */
@media (prefers-reduced-motion: reduce) {
  body .use-grid article,
  body .steps .step,
  body .use-grid article::after,
  body .steps .step-trigger::after,
  body .use-grid .text-link span { transition: none; }
  body .use-grid article:hover,
  body .steps .step:hover,
  body .use-grid article:hover::after,
  body .steps .step:hover .step-trigger::after,
  body .use-grid article:hover .text-link span { transform: none; }
}

/* =====================================================================
   v2.6.1 — Nâng cấp thẻ: "Trung tâm kiến thức" (.knowledge-grid) và
   "Từ tín hiệu đến hành động" (.signal-grid); sửa header trong suốt.
   ===================================================================== */

/* Lỗi: header nền ~97% trong suốt → nút/ảnh phía sau lộ mờ xuyên qua logo và menu khi cuộn. */
body .header { background: #f8fafd; }

/* Section chứa hai nhóm thẻ: bỏ khoảng trống thừa như các nhóm thẻ khác */
body .section:has(.knowledge-grid) { min-height: 0 !important; padding-block: 30px; }
body .section:has(.knowledge-grid) .section-heading { margin-bottom: 18px; }

/* ---------- Thẻ kiến thức ---------- */
body .knowledge-grid { gap: 16px; align-items: stretch; }
body .knowledge-grid article {
  --ac:#1858be; --tint:#e9f1ff; --glow:#1858be26;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto 1fr auto;   /* hàng cuối = liên kết → luôn nằm đáy, thẳng hàng giữa các thẻ */
  column-gap: 12px; row-gap: 10px;
  align-items: center;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 20px 22px 16px;
  border: 1px solid #d5e2f2;
  border-top: 4px solid var(--ac);
  border-radius: 16px;
  background: linear-gradient(165deg, var(--tint) 0, #fff 58%);
  transition: transform .2s, box-shadow .2s;
}
body .knowledge-grid article::before {   /* vầng sáng góc phải trên */
  content: ""; position: absolute; z-index: -1; top: -55px; right: -55px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0, transparent 68%);
}
body .knowledge-grid article:hover { transform: translateY(-4px); box-shadow: 0 14px 30px var(--glow); }
body .knowledge-grid article:focus-within { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ac); }
body .knowledge-grid .number {
  grid-column: 1; grid-row: 1; justify-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px; margin: 0;
  border-radius: 12px; background: var(--ac); color: #fff;
  font-size: .92rem; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 6px 14px var(--glow);
}
body .knowledge-grid article::after {     /* ô biểu tượng (chỉ trang trí) */
  content: ""; grid-column: 2; grid-row: 1;
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--glow); background-color: #ffffffb8;
  background-repeat: no-repeat; background-position: center; background-size: 20px;
  transition: transform .25s;
}
body .knowledge-grid article:hover::after { transform: rotate(-6deg) scale(1.06); }
body .knowledge-grid h2 {
  grid-column: 1 / -1; grid-row: 2; margin: 2px 0 0;
  font-size: 1.14rem; line-height: 1.35; color: var(--ink);
}
body .knowledge-grid p {
  grid-column: 1 / -1; grid-row: 3; align-self: start; margin: 0;
  font-size: .93rem; line-height: 1.6; color: #41556e;
}
body .knowledge-grid .text-link {
  grid-column: 1 / -1; grid-row: 4; align-self: end;
  margin: 4px 0 0; padding: 12px 0 0; width: 100%;
  border: 0; border-top: 1px dashed #c3d4ea; text-decoration: none;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--ac); font-size: .9rem; font-weight: 700;
}
body .knowledge-grid .text-link::before {  /* cả thẻ là vùng bấm */
  content: ""; position: absolute; inset: 0; z-index: 1;
}
body .knowledge-grid .text-link span {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--ac); color: #fff;
  font-size: .8rem; line-height: 1; transition: transform .2s;
}
body .knowledge-grid article:hover .text-link span { transform: translate(2px, -2px); }
body .knowledge-grid .text-link:focus-visible { outline: none; }
body .knowledge-grid article:nth-child(6n+1) { --ac:#1858be; --tint:#e9f1ff; --glow:#1858be26; }
body .knowledge-grid article:nth-child(6n+2) { --ac:#087969; --tint:#e5f6f0; --glow:#08796926; }
body .knowledge-grid article:nth-child(6n+3) { --ac:#6e41b0; --tint:#f1eafa; --glow:#6e41b026; }
body .knowledge-grid article:nth-child(6n+4) { --ac:#975500; --tint:#fff3dc; --glow:#97550026; }
body .knowledge-grid article:nth-child(6n+5) { --ac:#ad395d; --tint:#fceaf0; --glow:#ad395d26; }
body .knowledge-grid article:nth-child(6n+6) { --ac:#0b6e99; --tint:#e4f4fb; --glow:#0b6e9926; }
body .knowledge-grid article:nth-child(1)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231858be'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m12%203-1.9%205.8a2%202%200%200%201-1.3%201.3L3%2012l5.8%201.9a2%202%200%200%201%201.3%201.3L12%2021l1.9-5.8a2%202%200%200%201%201.3-1.3L21%2012l-5.8-1.9a2%202%200%200%201-1.3-1.3Z'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(2)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23087969'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolygon%20points='13%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(3)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236e41b0'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='11'%20width='18'%20height='10'%20rx='2'/%3E%3Ccircle%20cx='12'%20cy='5'%20r='2'/%3E%3Cpath%20d='M12%207v4M8%2016h.01M16%2016h.01'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(4)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23975500'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='6'%20x2='6'%20y1='3'%20y2='15'/%3E%3Ccircle%20cx='18'%20cy='6'%20r='3'/%3E%3Ccircle%20cx='6'%20cy='18'%20r='3'/%3E%3Cpath%20d='M18%209a9%209%200%200%201-9%209'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(5)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ad395d'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cellipse%20cx='12'%20cy='5'%20rx='9'%20ry='3'/%3E%3Cpath%20d='M3%205V19A9%203%200%200%200%2021%2019V5'/%3E%3Cpath%20d='M3%2012A9%203%200%200%200%2021%2012'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(6)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230b6e99'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m12%2014%204-4'/%3E%3Cpath%20d='M3.34%2019a10%2010%200%201%201%2017.32%200'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(7)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231858be'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z'/%3E%3Cpath%20d='m9%2012%202%202%204-4'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(8)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23087969'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.5%2016.5c-1.5%201.26-2%205-2%205s3.74-.5%205-2c.71-.84.7-2.13-.09-2.91a2.18%202.18%200%200%200-2.91-.09z'/%3E%3Cpath%20d='m12%2015-3-3a22%2022%200%200%201%202-3.95A12.88%2012.88%200%200%201%2022%202c0%202.72-.78%207.5-6%2011a22.35%2022.35%200%200%201-4%202z'/%3E%3Cpath%20d='M9%2012H4s.55-3.03%202-4c1.62-1.08%205%200%205%200'/%3E%3Cpath%20d='M12%2015v5s3.03-.55%204-2c1.08-1.62%200-5%200-5'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(9)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236e41b0'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%209a2%202%200%200%201-2%202H6l-4%204V4a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202z'/%3E%3Cpath%20d='M18%209h2a2%202%200%200%201%202%202v11l-4-4h-6a2%202%200%200%201-2-2v-1'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(10)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23975500'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m3%2017%202%202%204-4'/%3E%3Cpath%20d='m3%207%202%202%204-4'/%3E%3Cpath%20d='M13%206h8M13%2012h8M13%2018h8'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(11)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ad395d'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M16%208h-6a2%202%200%201%200%200%204h4a2%202%200%201%201%200%204H8'/%3E%3Cpath%20d='M12%2018V6'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(12)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230b6e99'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='18'%20height='11'%20x='3'%20y='11'%20rx='2'%20ry='2'/%3E%3Cpath%20d='M7%2011V7a5%205%200%200%201%2010%200v4'/%3E%3C/svg%3E"); }

/* ---------- Thẻ tín hiệu Đỏ / Vàng / Xanh ---------- */
body .use-grid.signal-grid { gap: 18px; }
body .use-grid.signal-grid article {
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  column-gap: 16px; row-gap: 12px;
  padding: 22px 24px 20px;
  border-top-width: 5px;
}
body .use-grid.signal-grid .signal-red   { --ac:#c4302b; --tint:#fdeceb; --glow:#c4302b26; --lamp:#f0524a; }
body .use-grid.signal-grid .signal-amber { --ac:#94590a; --tint:#fff4d9; --glow:#e0a10033; --lamp:#f7b52c; }
body .use-grid.signal-grid .signal-green { --ac:#137a4a; --tint:#e3f6ec; --glow:#137a4a26; --lamp:#34c37e; }
/* Đèn: thay vầng sáng bằng "bóng đèn" phát sáng cạnh tiêu đề */
body .use-grid.signal-grid article::before {
  position: static; z-index: auto; top: auto; right: auto;
  grid-column: 1; grid-row: 1;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffffc4 0 9%, transparent 10%), var(--lamp);
  box-shadow: 0 0 0 6px var(--glow), 0 0 22px -2px var(--lamp);
}
body .use-grid.signal-grid h3 { grid-column: 2; grid-row: 1; font-size: 1.4rem; }
body .use-grid.signal-grid p  { font-size: .98rem; line-height: 1.65; }
body .use-grid.signal-grid article.signal-red::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23c4302b'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3'/%3E%3Cpath%20d='M12%209v4M12%2017h.01'/%3E%3C/svg%3E"); }
body .use-grid.signal-grid article.signal-amber::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2394590a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%202v7.527a2%202%200%200%201-.211.896L4.72%2020.55a1%201%200%200%200%20.9%201.45h12.76a1%201%200%200%200%20.9-1.45l-5.069-10.127A2%202%200%200%201%2014%209.527V2'/%3E%3Cpath%20d='M8.5%202h7M7%2016h10'/%3E%3C/svg%3E"); }
body .use-grid.signal-grid article.signal-green::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23137a4a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='m9%2012%202%202%204-4'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  body .knowledge-grid article,
  body .knowledge-grid article::after,
  body .knowledge-grid .text-link span { transition: none; }
  body .knowledge-grid article:hover,
  body .knowledge-grid article:hover::after,
  body .knowledge-grid article:hover .text-link span { transform: none; }
}
@media (max-width: 760px) {
  body .knowledge-grid { gap: 12px; }
  body .knowledge-grid article { padding: 16px 16px 14px; }
  body .section:has(.knowledge-grid) { padding-block: 24px; }
}

/* =====================================================================
   v2.6.2 — Thẻ "Cách triển khai" (.steps) và "Trung tâm kiến thức"
   (.knowledge-grid): bỏ màu nền / màu chữ riêng từng thẻ, dùng tông mặc
   định của website (nền trắng, viền --line, chữ --ink/--muted, nhấn --blue).
   Chỉ đổi màu; nội dung và bố cục (lưới, kích thước, vị trí) giữ nguyên.
   ===================================================================== */

/* Một bảng màu chung cho mọi thẻ */
body .steps .step,
body .steps .step-1, body .steps .step-2, body .steps .step-3, body .steps .step-4,
body .knowledge-grid article,
body .knowledge-grid article:nth-child(n) {
  --step-accent: var(--blue);
  --step-tint: #fff;
  --ac: var(--blue);
  --tint: #fff;
  --glow: #06339e14;
}

/* Nền + viền: trắng, viền mảnh đồng nhất (viền trên vẫn dày 4px để giữ kích thước) */
body .steps .step {
  background: #fff;
  border-color: #cfdeee !important;
  border-top-color: #cfdeee !important;
}
body .knowledge-grid article {
  background: #fff;
  border-color: #cfdeee;
  border-top-color: #cfdeee;
}

/* Bỏ vầng sáng màu ở góc thẻ */
body .steps .step-trigger::before,
body .knowledge-grid article::before { background: none; }

/* Chip số: kiểu mặc định của website (nền xanh nhạt, chữ xanh thương hiệu) */
body .steps .step .number,
body .knowledge-grid .number {
  background: #eaf2fc;
  color: var(--blue);
  box-shadow: none;
}

/* Chữ: tiêu đề --ink, mô tả --muted, liên kết --blue */
body .steps .step h3,
body .knowledge-grid h2 { color: var(--ink); }
body .steps .step p,
body .knowledge-grid p { color: var(--muted); }
body .steps .step-more,
body .knowledge-grid .text-link { color: var(--blue); }

/* Đường nét đứt, ô biểu tượng và nút ↗ dùng màu trung tính / xanh thương hiệu */
body .steps .step-more,
body .knowledge-grid .text-link { border-top-color: var(--line); }
body .steps .step-trigger::after,
body .knowledge-grid article::after {
  border-color: var(--line);
  background-color: var(--soft);
}
body .knowledge-grid .text-link span { background: var(--blue); color: #fff; }

/* Bóng khi rê chuột / focus: xám-xanh nhẹ thay cho bóng màu */
body .steps .step:hover { box-shadow: 0 8px 20px #173d690d !important; }
body .knowledge-grid article:hover { box-shadow: 0 8px 20px #173d690d; }
body .steps .step:focus-within { box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--blue) !important; }
body .knowledge-grid article:focus-within { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue); }

/* Nút nối giữa các bước */
@media (min-width: 1001px) {
  body .steps .step:not(:last-child)::after { color: var(--blue); border-color: var(--line); }
}

/* Biểu tượng: cùng một màu xanh thương hiệu */
body .steps .step-1 .step-trigger::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='8'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.65'%20y2='16.65'/%3E%3C/svg%3E"); }
body .steps .step-2 .step-trigger::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'/%3E%3Cline%20x1='3'%20y1='9'%20x2='21'%20y2='9'/%3E%3Cline%20x1='9'%20y1='21'%20x2='9'%20y2='9'/%3E%3C/svg%3E"); }
body .steps .step-3 .step-trigger::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%202v7.31'/%3E%3Cpath%20d='M14%209.3V1.99'/%3E%3Cpath%20d='M8.5%202h7'/%3E%3Cpath%20d='M14%209.3a6.5%206.5%200%201%201-4%200'/%3E%3C/svg%3E"); }
body .steps .step-4 .step-trigger::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='15%203%2021%203%2021%209'/%3E%3Cpolyline%20points='9%2021%203%2021%203%2015'/%3E%3Cline%20x1='21'%20y1='3'%20x2='14'%20y2='10'/%3E%3Cline%20x1='3'%20y1='21'%20x2='10'%20y2='14'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(1)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m12%203-1.9%205.8a2%202%200%200%201-1.3%201.3L3%2012l5.8%201.9a2%202%200%200%201%201.3%201.3L12%2021l1.9-5.8a2%202%200%200%201%201.3-1.3L21%2012l-5.8-1.9a2%202%200%200%201-1.3-1.3Z'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(2)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolygon%20points='13%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(3)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='11'%20width='18'%20height='10'%20rx='2'/%3E%3Ccircle%20cx='12'%20cy='5'%20r='2'/%3E%3Cpath%20d='M12%207v4M8%2016h.01M16%2016h.01'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(4)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='6'%20x2='6'%20y1='3'%20y2='15'/%3E%3Ccircle%20cx='18'%20cy='6'%20r='3'/%3E%3Ccircle%20cx='6'%20cy='18'%20r='3'/%3E%3Cpath%20d='M18%209a9%209%200%200%201-9%209'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(5)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cellipse%20cx='12'%20cy='5'%20rx='9'%20ry='3'/%3E%3Cpath%20d='M3%205V19A9%203%200%200%200%2021%2019V5'/%3E%3Cpath%20d='M3%2012A9%203%200%200%200%2021%2012'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(6)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m12%2014%204-4'/%3E%3Cpath%20d='M3.34%2019a10%2010%200%201%201%2017.32%200'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(7)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z'/%3E%3Cpath%20d='m9%2012%202%202%204-4'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(8)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.5%2016.5c-1.5%201.26-2%205-2%205s3.74-.5%205-2c.71-.84.7-2.13-.09-2.91a2.18%202.18%200%200%200-2.91-.09z'/%3E%3Cpath%20d='m12%2015-3-3a22%2022%200%200%201%202-3.95A12.88%2012.88%200%200%201%2022%202c0%202.72-.78%207.5-6%2011a22.35%2022.35%200%200%201-4%202z'/%3E%3Cpath%20d='M9%2012H4s.55-3.03%202-4c1.62-1.08%205%200%205%200'/%3E%3Cpath%20d='M12%2015v5s3.03-.55%204-2c1.08-1.62%200-5%200-5'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(9)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%209a2%202%200%200%201-2%202H6l-4%204V4a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202z'/%3E%3Cpath%20d='M18%209h2a2%202%200%200%201%202%202v11l-4-4h-6a2%202%200%200%201-2-2v-1'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(10)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m3%2017%202%202%204-4'/%3E%3Cpath%20d='m3%207%202%202%204-4'/%3E%3Cpath%20d='M13%206h8M13%2012h8M13%2018h8'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(11)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M16%208h-6a2%202%200%201%200%200%204h4a2%202%200%201%201%200%204H8'/%3E%3Cpath%20d='M12%2018V6'/%3E%3C/svg%3E"); }
body .knowledge-grid article:nth-child(12)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='18'%20height='11'%20x='3'%20y='11'%20rx='2'%20ry='2'/%3E%3Cpath%20d='M7%2011V7a5%205%200%200%201%2010%200v4'/%3E%3C/svg%3E"); }

/* =====================================================================
   v2.6.2 (tiếp) — Thẻ "Sáu nhóm ứng dụng" (.use-grid): về tông màu mặc định
   và thu gọn để vừa vặn, ít khoảng trống. Không đổi chữ/HTML. Thẻ tín hiệu
   Đỏ/Vàng/Xanh (.signal-grid) giữ nguyên vì màu mang ý nghĩa.
   ===================================================================== */
body .use-grid:not(.signal-grid) article,
body .use-grid:not(.signal-grid) article:nth-child(n) {
  --ac: var(--blue); --tint: #fff; --glow: #06339e14;
  background: #fff;
  border-color: #cfdeee;
  border-top-color: #cfdeee;
}
body .use-grid:not(.signal-grid) article::before { background: none; }
body .use-grid:not(.signal-grid) article .number { background: #eaf2fc; color: var(--blue); box-shadow: none; }
body .use-grid:not(.signal-grid) h3 { color: var(--ink); }
body .use-grid:not(.signal-grid) p { color: var(--muted); }
body .use-grid:not(.signal-grid) .text-link { color: var(--blue); border-top-color: var(--line); }
body .use-grid:not(.signal-grid) .text-link span { background: var(--blue); color: #fff; }
body .use-grid:not(.signal-grid) article::after { border-color: var(--line); background-color: var(--soft); }
body .use-grid:not(.signal-grid) article:hover { box-shadow: 0 8px 20px #173d690d; }
body .use-grid:not(.signal-grid) article:focus-within { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue); }
body .use-grid:not(.signal-grid) article:nth-child(1)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='22%207%2013.5%2015.5%208.5%2010.5%202%2017'/%3E%3Cpolyline%20points='16%207%2022%207%2022%2013'/%3E%3C/svg%3E"); }
body .use-grid:not(.signal-grid) article:nth-child(2)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m3%2011%2018-5v12L3%2014v-3z'/%3E%3Cpath%20d='M11.6%2016.8a3%203%200%201%201-5.8-1.6'/%3E%3C/svg%3E"); }
body .use-grid:not(.signal-grid) article:nth-child(3)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='9'%20cy='7'%20r='4'/%3E%3Cpath%20d='M22%2021v-2a4%204%200%200%200-3-3.87'/%3E%3Cpath%20d='M16%203.13a4%204%200%200%201%200%207.75'/%3E%3C/svg%3E"); }
body .use-grid:not(.signal-grid) article:nth-child(4)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='2'%20width='16'%20height='20'%20rx='2'/%3E%3Cline%20x1='8'%20y1='6'%20x2='16'%20y2='6'/%3E%3Cpath%20d='M8%2010h.01M12%2010h.01M16%2010h.01M8%2014h.01M12%2014h.01M16%2014h.01M8%2018h.01M12%2018h.01M16%2018h.01'/%3E%3C/svg%3E"); }
body .use-grid:not(.signal-grid) article:nth-child(5)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='M12%202v3M12%2019v3M4.9%204.9l2.1%202.1M17%2017l2.1%202.1M2%2012h3M19%2012h3M4.9%2019.1%207%2017M17%207l2.1-2.1'/%3E%3C/svg%3E"); }
body .use-grid:not(.signal-grid) article:nth-child(6)::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306339e'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2018v-6a9%209%200%200%201%2018%200v6'/%3E%3Cpath%20d='M21%2019a2%202%200%200%201-2%202h-1a2%202%200%200%201-2-2v-3a2%202%200%200%201%202-2h3zM3%2019a2%202%200%200%200%202%202h1a2%202%200%200%200%202-2v-3a2%202%200%200%200-2-2H3z'/%3E%3C/svg%3E"); }

/* Thu gọn: bớt đệm, chữ và khoảng cách; vẫn giữ liên kết thẳng hàng ở đáy thẻ */
body .section:has(.use-grid:not(.signal-grid)) { padding-block: 24px; }
body .use-grid:not(.signal-grid) { gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .use-grid:not(.signal-grid) article {
  padding: 14px 16px 12px;
  column-gap: 12px; row-gap: 8px;
  border-top-width: 3px;
}
body .use-grid:not(.signal-grid) article .number { width: 36px; height: 36px; font-size: .88rem; border-radius: 10px; }
body .use-grid:not(.signal-grid) article::after { width: 32px; height: 32px; border-radius: 10px; background-size: 17px; }
body .use-grid:not(.signal-grid) h3 { font-size: 1.1rem; }
body .use-grid:not(.signal-grid) p { font-size: .88rem; line-height: 1.5; }
body .use-grid:not(.signal-grid) .text-link { margin-top: 0; padding-top: 10px; font-size: .86rem; }
body .use-grid:not(.signal-grid) .text-link span { width: 24px; height: 24px; }

/* Màn hình trung bình: 2 cột; điện thoại: 1 cột */
@media (max-width: 1000px) {
  body .use-grid:not(.signal-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body .use-grid:not(.signal-grid) { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body .use-grid:not(.signal-grid) article { padding: 12px 14px 10px; }
  body .use-grid:not(.signal-grid) p { font-size: .9rem; }
}

/* =====================================================================
   v2.6.3 — Thu gọn khoảng trống ở hai mục:
   (1) "Bảo mật dữ liệu DCS — Tài liệu được chia sẻ. Quyền kiểm soát vẫn
       thuộc về bạn." (trang /data-security/, section.security)
   (2) "Nền tảng kiến thức — Từ hiểu đúng đến triển khai đúng."
       (trang /kien-thuc/ và Góc nhìn, section có .knowledge-grid)
   Chỉ chỉnh khoảng cách / kích thước. Không đổi chữ, HTML, màu, bản dịch,
   số cột hay các phần khác của website.
   ===================================================================== */

/* ---------- (2) Nền tảng kiến thức — mọi kích thước ---------- */
body .section:has(.knowledge-grid) { padding-block: 22px; }
body .section:has(.knowledge-grid) .section-heading { padding: 10px 20px; margin-bottom: 14px; }
body .section:has(.knowledge-grid) .section-heading .eyebrow { margin-bottom: 4px; }
body .section:has(.knowledge-grid) .section-heading h2 { margin-bottom: 0; line-height: 1.2; }

body .knowledge-grid { gap: 12px; }
body .knowledge-grid article {
  padding: 14px 18px 12px;
  row-gap: 6px;
  border-top-width: 3px;
}
body .knowledge-grid .number { min-width: 34px; height: 34px; font-size: .85rem; border-radius: 10px; }
body .knowledge-grid article::after { width: 34px; height: 34px; border-radius: 10px; background-size: 18px; }
body .knowledge-grid h2 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
body .knowledge-grid p { font-size: .9rem; line-height: 1.5; }
body .knowledge-grid .text-link { margin: 2px 0 0; padding-top: 8px; font-size: .88rem; }
body .knowledge-grid .text-link span { width: 24px; height: 24px; }

/* ---------- (1) Bảo mật dữ liệu DCS — máy tính: bỏ dải trống trên/dưới ---------- */
@media (min-width: 1101px) {
  body .security.section { min-height: 0; padding-block: 30px; align-items: stretch; }
}

/* ---------- Điện thoại / máy tính bảng nhỏ (≤ 760px) ---------- */
@media (max-width: 760px) {

  /* (2) Thẻ kiến thức: số – tiêu đề – biểu tượng trên CÙNG một hàng */
  body .section:has(.knowledge-grid) { padding-block: 18px; }
  body .section:has(.knowledge-grid) .section-heading { padding: 10px 14px 10px 16px; margin-bottom: 12px; }
  body .section:has(.knowledge-grid) .section-heading h2 { font-size: clamp(1.35rem, 5.4vw, 1.6rem); }
  body .knowledge-grid { gap: 10px; }
  body .knowledge-grid article {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    column-gap: 10px; row-gap: 6px;
    padding: 12px 14px 10px;
  }
  body .knowledge-grid .number  { grid-column: 1; grid-row: 1; min-width: 32px; height: 32px; padding: 0 8px; font-size: .8rem; }
  body .knowledge-grid h2       { grid-column: 2; grid-row: 1; font-size: 1.02rem; align-self: center; }
  body .knowledge-grid article::after { grid-column: 3; grid-row: 1; width: 32px; height: 32px; background-size: 17px; }
  body .knowledge-grid p        { grid-column: 1 / -1; grid-row: 2; font-size: .9rem; line-height: 1.5; }
  body .knowledge-grid .text-link { grid-column: 1 / -1; grid-row: 3; padding-top: 8px; }

  /* (1) DCS: logo thu nhỏ nằm cạnh tiêu đề, thẻ tính năng gọn lại */
  body .security.section { padding-block: 18px; }
  body .security-intro {
    display: grid; grid-template-columns: minmax(0, 1fr) 56px;
    align-items: start; gap: 12px; margin-bottom: 12px;
  }
  body .security-intro h2 { margin-bottom: 6px; }
  body .security-intro h2 br { display: none; }
  body .security-intro p { margin-bottom: 0; }
  body .security-intro img { width: 56px; height: auto; padding: 5px; border-radius: 12px; }

  body .security .feature-grid { gap: 10px; }
  body .security .feature-trigger {
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 12px; row-gap: 4px; align-items: center; justify-items: start;
    width: 100%; min-height: 0; padding: 12px 14px 10px; text-align: left;
  }
  body .security .feature-icon { grid-column: 1; grid-row: 1 / span 2; width: 38px; height: 38px; padding: 8px; margin: 0; border-radius: 10px; }
  body .security .feature-no   { grid-column: 2; grid-row: 1; margin: 0; align-self: end; }
  body .security .feature-trigger h3 { grid-column: 2; grid-row: 2; margin: 0; align-self: start; font-size: 1.02rem; }
  body .security .feature-trigger p  { grid-column: 1 / -1; grid-row: 3; margin: 2px 0 0; font-size: .9rem; line-height: 1.5; display: block; -webkit-line-clamp: unset; overflow: visible; }
  body .security .feature-more { grid-column: 1 / -1; grid-row: 4; padding-top: 2px; font-size: .86rem; }

  body .security .feature-grid + .fine { margin: 8px 0 0; }
  body .security .section-end { margin-top: 10px; padding-top: 12px; gap: 10px; }
  body .security .section-end p { margin: 0; }
}

/* =====================================================================
   v2.6.3 (tiếp) — Điện thoại: thu gọn khoảng trống ở hai mục trang chủ
   (1) "Vì sao chuyển đổi AI? — AI đang thay đổi cách doanh nghiệp vận hành."
       (section.why-ai, thẻ .outcome-grid)
   (2) "Một hành trình · Năm năng lực — Bắt đầu đúng câu hỏi."
       (thẻ .capability-grid)
   Chỉ đổi khoảng cách / kích thước / cách xếp bên trong thẻ khi ≤ 760px.
   Không đổi chữ, màu, bản dịch, số cột hay máy tính.
   ===================================================================== */
@media (max-width: 760px) {

  /* Khối tiêu đề + câu dẫn */
  body .section.why-ai,
  body .section:has(.capability-grid) { padding-block: 18px; }
  body .section.why-ai .section-heading,
  body .section:has(.capability-grid) .section-heading { padding: 10px 14px 10px 16px; margin-bottom: 10px; }
  body .section.why-ai .section-heading .eyebrow,
  body .section:has(.capability-grid) .section-heading .eyebrow { margin-bottom: 4px; }
  body .section.why-ai .section-heading h2,
  body .section:has(.capability-grid) .section-heading h2 { margin-bottom: 0; line-height: 1.22; }
  body .section.why-ai > .container > .lead,
  body .section:has(.capability-grid) > .container > .lead { margin: 0 0 12px; font-size: .95rem; line-height: 1.55; }

  /* (1) Thẻ "Vì sao chuyển đổi AI?": biểu tượng cạnh tiêu đề + tóm tắt */
  body .why-ai .outcome-grid { gap: 10px !important; margin-top: 0; }
  body .why-ai .outcome-trigger {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px; row-gap: 0; align-items: center; justify-items: start;
    padding: 12px 14px 10px; border-radius: 16px; text-align: left;
  }
  body .why-ai .outcome-icon { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; padding: 10px; border-radius: 12px; margin: 0; }
  body .why-ai .outcome-trigger h3 { grid-column: 2; grid-row: 1; margin: 0 0 2px; align-self: end; font-size: 1.08rem; }
  body .why-ai .outcome-summary { grid-column: 2; grid-row: 2; align-self: start; font-size: .92rem; line-height: 1.45; }
  body .why-ai .outcome-desc { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; padding-top: 8px; font-size: .88rem; line-height: 1.5; }
  body .why-ai .outcome-more { grid-column: 1 / -1; grid-row: 4; margin-top: 0 !important; padding-top: 8px; font-size: .86rem; }

  /* (2) Thẻ "Năm năng lực": số – nhãn/tiêu đề – biểu tượng cùng một hàng */
  body .capability-grid { gap: 10px !important; margin-top: 0; }
  body .capability-grid > article.capability {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 12px; row-gap: 0; align-items: center; align-content: start;
    height: auto; padding: 12px 14px 10px !important;
  }
  body .capability-head { display: contents; }
  body .capability-head .number { grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; font-size: 1rem; border-radius: 10px; }
  body .capability-head .capability-art { grid-column: 3; grid-row: 1 / span 2; width: 40px; height: 40px; padding: 9px; border-radius: 11px; }
  body .capability-grid .capability-tag { grid-column: 2; grid-row: 1; margin: 0; align-self: end; font-size: .8rem; }
  body .capability-grid h3 { grid-column: 2; grid-row: 2; margin: 0 !important; align-self: start; font-size: 1.08rem; }
  body .capability-grid article > p { grid-column: 1 / -1; margin: 8px 0 0; font-size: .94rem; line-height: 1.45; }
  body .capability-desc { grid-column: 1 / -1; margin: 8px 0 0 !important; padding: 8px 10px; font-size: .85rem !important; line-height: 1.5 !important; }
  body .capability-grid details { grid-column: 1 / -1; margin-top: 0 !important; padding-top: 8px; }
  body .capability-grid details[open] { padding-top: 8px; }
}

/* =====================================================================
   v2.6.4 — Tiêu đề đầu trang (.page-hero h1) hiển thị MỘT dòng, chữ to vừa khung
   (≥ 761px). Cỡ chữ do app.js tính theo độ dài tiêu đề; bỏ ngắt dòng <br> và
   giới hạn bề rộng cũ. Điện thoại (≤ 760px) giữ nguyên.
   ===================================================================== */
@media (min-width: 761px) {
  body .page-hero h1,
  body.inner-page .page-hero h1,
  body.inner-page .go-ai-overview .page-hero h1,
  .go-ai-overview .page-hero h1,
  body .page-hero h1:has(br) { max-width: none !important; }
  body .page-hero h1 br { display: none; }
  body .page-hero h1[data-fit="one"] { white-space: nowrap; }
}

/* =====================================================================
   v2.6.6 — Đoạn mô tả đầu trang (.page-hero .lead) dàn trải hết bề ngang khung
   (≥ 761px): bỏ giới hạn bề rộng cũ (780–860px) để đoạn văn nằm gọn trong khối
   hero thay vì dồn thành cột hẹp 3–4 dòng. Không đổi chữ hay bản dịch.
   Điện thoại (≤ 760px) giữ nguyên.
   ===================================================================== */
@media (min-width: 761px) {
  body .page-hero .lead,
  body.inner-page .page-hero .lead,
  body.inner-page .go-ai-overview .page-hero .lead,
  .go-ai-overview .page-hero .lead { max-width: none !important; width: 100%; text-wrap: pretty; }
}

/* ===== COMPACT LAYOUT (bắt đầu) ===== */
/* Máy tính (≥ 1101px): section cao theo nội dung, đệm trên/dưới vừa phải theo chiều cao màn hình.
   Giữ nguyên khung hero trang chủ và khối Bảo mật DCS (đã có quy tắc riêng). */
@media (min-width: 1101px) {
  body .section { min-height: 0 !important; padding-block: clamp(26px, 5vh, 52px); }
}
/* ===== COMPACT LAYOUT (kết thúc) ===== */