/* CSS NỘI DUNG — nạp ở tin, SP/DV, trang tĩnh, Liên hệ. Điều kiện: Assets::needsContent().
   Bọc @layer components để NỐI vào layer của main.css; file rời không khai layer sẽ nằm
   ngoài mọi layer và thắng sạch main.css (DESIGN.md §16). */

@layer components{

  /* Khối đầu tự lo đệm trên bằng .vt-section, main không cần đệm nữa. */
  .vt-main--flush{padding-block:0}


  /* --- THÀNH PHẦN DÙNG CHUNG CẢ BA KHỐI --- */
  .vt-block__title{
    margin-bottom:var(--vt-s-5);
    font-size:var(--vt-fs-h2);
    font-weight:700;
    line-height:var(--vt-lh-h2);
    letter-spacing:var(--vt-ls-h2);
  }
  .vt-block__title--sm{font-size:var(--vt-fs-h3);line-height:var(--vt-lh-h3)}
  .vt-block__title a{color:inherit;text-decoration:none}
  .vt-block__title a:hover{color:var(--vt-brand-fg)}

  /* Nhãn chuyên mục: viên xám, chữ thường, cao theo NỘI DUNG — nó là liên kết trong dòng
     văn, không phải nút. Nhưng khi chip làm ĐÍCH BẤM chính (lọc danh sách, hành động liên
     hệ) thì phải đủ ngưỡng chạm; hai bộ chọn dưới là ngoại lệ đó. */
  .vt-filters .vt-chip,
  .vt-contact__cta .vt-chip{min-height:var(--vt-tap)}

  /* Chip hành động mang màu thương hiệu: Zalo và Email là lối liên hệ, không phải bộ lọc
     — để màu xám của chip thường thì trông như nút đã tắt. */
  .vt-contact__cta .vt-chip{background:var(--vt-brand-soft);color:var(--vt-brand-fg)}


  /* --- Trang Liên hệ: một cột, hai cột từ 1024px --- */
  .vt-contact{padding-block:var(--vt-s-6) var(--vt-section)}
  .vt-contact__head{margin-bottom:var(--vt-s-6)}
  .vt-contact__head .vt-lead{margin-top:var(--vt-s-3)}
  .vt-contact__cta{display:flex;flex-wrap:wrap;gap:var(--vt-s-3);margin-top:var(--vt-s-5)}
  /* KHÔNG align-items:start — hai cột phải cao bằng nhau thì bản đồ mới giãn được. */
  .vt-contact__grid{display:grid;gap:var(--vt-s-6)}

  /* Vạch thương hiệu mép trên — cùng ngôn ngữ với thẻ danh sách và hộp thoại biểu mẫu. */
  .vt-panel{
    padding:var(--vt-s-5);
    border:1px solid var(--vt-line);
    border-top:2px solid var(--vt-brand-fg);
    border-radius:var(--vt-r-sm);
  }
  .vt-panel + .vt-panel{margin-top:var(--vt-s-5)}
  .vt-panel > h2{
    margin-bottom:var(--vt-s-4);
    font-size:var(--vt-fs-h4);
    line-height:var(--vt-lh-h4);
  }
  .vt-panel__note{
    margin-top:var(--vt-s-4);
    padding-top:var(--vt-s-4);
    border-top:1px solid var(--vt-line);
    font-size:var(--vt-fs-small);
    color:var(--vt-ink-2);
  }

  /* Hàng thông tin: ô icon bắc qua hai dòng, nhãn nhỏ trên, giá trị đậm dưới — quét dọc
     nhanh hơn hai cột, và không vỡ khi địa chỉ dài. `dt` để display:contents nên ô icon
     và nhãn tách thành hai grid item riêng; không có nó thì cả cụm dt nằm gọn trong một
     ô lưới và icon không bắc xuống được. */
  .vt-dl{display:grid;gap:var(--vt-s-4)}
  .vt-dl > div{display:grid;grid-template-columns:var(--vt-tap) 1fr;gap:0 var(--vt-s-3)}
  .vt-dl dt{display:contents}
  .vt-dl .vt-ichip{grid-row:1 / span 2}
  .vt-dl__l{
    font-size:var(--vt-fs-eyebrow);
    letter-spacing:var(--vt-ls-eyebrow);
    text-transform:uppercase;
    color:var(--vt-ink-2);
  }
  /* flex-start chứ không center: địa chỉ xuống hai dòng thì nút chép phải nằm ngang
     dòng ĐẦU, không trôi xuống giữa khối. */
  .vt-dl dd{display:flex;align-items:flex-start;gap:var(--vt-s-2);margin:0;font-weight:600}

  /* Cùng bộ viền với .vt-panel, kể cả vạch thương hiệu mép trên. */
  .vt-contact__map{
    width:100%;
    aspect-ratio:var(--vt-ratio-hero);
    margin-top:var(--vt-s-5);
    border:1px solid var(--vt-line);
    border-top:2px solid var(--vt-brand-fg);
    border-radius:var(--vt-r-sm);
  }

  @media (min-width:1024px){
    .vt-contact__grid{grid-template-columns:1.15fr .85fr}

    /* Bản đồ giãn hết chỗ trống còn lại nên đáy hai cột thẳng hàng. CHỈ từ 1024px: một
       cột thì không có gì để kéo bằng, `flex:1` lúc đó cho chiều cao 0 vì iframe không
       có kích thước nội tại. */
    .vt-contact__grid > div{display:flex;flex-direction:column}
    .vt-contact__map{flex:1;aspect-ratio:auto;min-height:var(--vt-map-h)}
  }

  .vt-chip{
    display:inline-flex;
    align-items:center;
    align-self:flex-start;
    padding:var(--vt-s-1) var(--vt-s-3);
    border-radius:var(--vt-r-full);
    background:var(--vt-chip-bg);
    font-size:var(--vt-fs-eyebrow);
    font-weight:600;
    line-height:var(--vt-lh-eyebrow);
    color:var(--vt-ink);
    text-decoration:none;
    white-space:nowrap;
  }
  .vt-chip:hover{background:var(--vt-chip-bg-hi);color:var(--vt-brand-fg)}

  .vt-viewall{
    display:inline-flex;
    align-items:center;
    gap:var(--vt-s-1);
    min-height:var(--vt-tap);
    font-size:var(--vt-fs-small);
    font-weight:600;
    color:var(--vt-ink);
    text-decoration:none;
    white-space:nowrap;
  }
  .vt-viewall:hover{color:var(--vt-brand-fg)}
  .vt-viewall__arrow{font-size:1.35em;line-height:1;translate:0 -.06em}


  /* --- THẺ — bốn biến thể, dựng ở src/Render/Card.php --- */
  /* MỌI thẻ là một hộp có viền, ảnh và chữ nằm chung trong đó.
     `overflow:hidden` là điều kiện để góc ảnh bo theo góc thẻ — thiếu nó thì ảnh vuông
     góc chìa ra ngoài đường viền bo. */
  .vt-card{
    display:flex;
    flex-direction:column;
    min-width:0;
    background:var(--vt-surface);
    border:1px solid var(--vt-line);
    border-radius:var(--vt-r-lg);
    overflow:hidden;
  }

  /* 1200/630 cho MỌI ô ảnh của thẻ và bài. Ảnh đại diện phải tải lên đúng 1200×630 để
     Rank Math lấy làm ảnh OG (DESIGN.md §10), nên dùng lại chính tỉ lệ đó ở đây thì
     `cover` không cắt mất gì — cái người biên tập thấy lúc tải lên đúng bằng cái hiện ra. */
  .vt-card__media{
    display:block;
    overflow:hidden;
    aspect-ratio:var(--vt-ratio-share);
    background:var(--vt-surface-2);
  }
  .vt-card__img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 450ms var(--vt-ease);
  }
  .vt-card:hover .vt-card__img{transform:scale(1.04)}

  .vt-card__body{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--vt-s-2);
    padding:var(--vt-s-5);
  }

  /* pretty chứ KHÔNG balance (base đặt balance cho h1-h4): balance chia đều độ dài mọi
     dòng nên không dòng nào chạm mép phải — tiêu đề 4 dòng mất gần 1/4 bề ngang thẻ. */
  .vt-card__title{
    font-size:var(--vt-fs-h4);
    font-weight:700;
    line-height:var(--vt-lh-h4);
    letter-spacing:var(--vt-ls-h4);
    text-wrap:pretty;
  }
  .vt-card__title a{color:var(--vt-ink);text-decoration:none}
  .vt-card__title a:hover{color:var(--vt-brand-fg)}

  .vt-card__excerpt{
    font-size:var(--vt-fs-small);
    line-height:var(--vt-lh-body);
    color:var(--vt-ink-2);
  }

  .vt-card__date{
    font-size:var(--vt-fs-small);
    line-height:var(--vt-lh-small);
    color:var(--vt-ink-2);
  }

  /* --- hero: ảnh trái, chữ phải, có vạch nhấn dọc ở mép phải ảnh --- */
  .vt-card--hero .vt-card__body{gap:var(--vt-s-3)}
  .vt-card--hero .vt-card__title{font-size:var(--vt-fs-h3);line-height:var(--vt-lh-h3)}

  .vt-card--hero .vt-card__media{position:relative}
  .vt-card--hero .vt-card__media::after{
    content:"";
    position:absolute;
    inset-block:0;
    right:0;
    width:var(--vt-s-2);
    background:var(--vt-brand-fg);
  }

  /* --- row: ảnh trái cỡ cố định, chữ phải. Danh sách "Mới nhất". --- */
  .vt-card--row .vt-card__title{font-size:var(--vt-fs-h4)}
  .vt-card--row .vt-card__excerpt{font-size:var(--vt-fs-small)}

  /* --- text: không ảnh. Viền của .vt-card lo phần ngăn cách, không cần gạch dưới. --- */

  /* --- panel: NGÀY NẰM TRÊN tiêu đề. Viền và đệm đã ở .vt-card. --- */
  .vt-card--panel .vt-card__date{order:-1}
  .vt-card--panel .vt-card__title{font-size:var(--vt-fs-h4)}


  /* --- KHỐI 1 — Nổi bật | Tin mới nhất --- */
  /* Breadcrumb ngay trên đã chiếm chỗ đệm; giữ --vt-section là hở một khoảng lớn. */
  .vt-news-top{padding-top:var(--vt-s-6)}
  .vt-news-top__in{display:grid;gap:var(--vt-s-8)}

  .vt-news-feat__hero{margin-bottom:var(--vt-s-7)}
  .vt-news-feat__grid{display:grid;gap:var(--vt-s-6)}

  /* Thẻ nay là hộp có viền nên phải có khe; trước đây gạch chân lo việc ngăn cách. */
  .vt-news-recent__list{display:grid;gap:var(--vt-s-4);margin-bottom:var(--vt-s-3)}
  .vt-news-recent .vt-viewall{width:100%;justify-content:flex-end}


  /* --- KHỐI 2 — bốn cột chuyên mục --- */
  .vt-news-cols__grid{display:grid;gap:var(--vt-s-8) var(--vt-s-6)}

  .vt-newscol{display:flex;flex-direction:column;gap:var(--vt-s-4)}
  .vt-newscol .vt-viewall{align-self:center}


  /* --- TRANG LƯU TRỮ — chuyên mục, thẻ, tác giả, ngày
     Dùng lại lưới .vt-news-top__in của trang tin, không dựng lưới thứ hai. --- */
  .vt-arch-desc{margin:calc(var(--vt-s-5) * -1) 0 var(--vt-s-5);max-width:var(--vt-content)}

  .vt-arch-list__items{display:grid;gap:var(--vt-s-6)}
  .vt-arch-list .vt-pager{margin-top:var(--vt-s-7)}


  /* --- TRANG BÀI VIẾT — mục lục trái, cột đọc phải --- */
  /* .vt-main--flush bỏ hết đệm trên, bài viết phải tự chừa — không thì tiêu đề
     dính ngay dưới header dính. */
  .vt-article{padding-block:var(--vt-s-7) var(--vt-section)}

  /* text-wrap:balance của @layer base chia đều độ dài các dòng, nên tiêu đề dài
     ngắt sớm và chừa trống bên phải. Tiêu đề bài phải lấp đầy cột. */
  .vt-article__title{
    font-size:var(--vt-fs-h1);
    font-weight:700;
    line-height:var(--vt-lh-h1);
    letter-spacing:var(--vt-ls-h1);
    text-wrap:pretty;
  }

  /* --- Hàng meta. Khe ngang 24px vì hàng gộp năm mục; khe dọc 0 vì ô chạm 36px đã tự
     có khoảng thở, mà `gap` một giá trị áp cả hai chiều. */
  .vt-tools{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0 var(--vt-s-5);
    margin-top:var(--vt-s-5);
  }

  /* Ba nút chia sẻ liền nhau trong DOM — đẩy auto margin vào nút ĐẦU cụm là kéo luôn cả
     cụm dạt sang phải, không cần bọc thêm div hay đổi justify-content của cả hàng. */
  .vt-tool--brand:first-of-type{margin-inline-start:auto}

  .vt-tool a{color:inherit;text-decoration:none}
  .vt-tool a:hover{color:var(--vt-brand-fg)}

  .vt-tool{
    display:inline-flex;
    align-items:center;
    gap:var(--vt-s-2);
    min-height:var(--vt-tap-sm);
    font-size:var(--vt-fs-small);
    line-height:var(--vt-lh-small);
    color:var(--vt-ink-2);
    text-decoration:none;
    transition:color var(--vt-dur) var(--vt-ease);
  }
  a.vt-tool:hover,
  button.vt-tool:hover{color:var(--vt-brand-fg)}

  /* Phút đọc ẩn dưới 640px, hiện lại từ tablet. Dùng display chứ không phải `hidden`:
     thuộc tính hidden do JS quản (nút chia sẻ), trộn hai cơ chế vào một hàng là rối. */
  .vt-tool--read{display:none}

  .vt-tool svg{
    width:var(--vt-icon-sm);
    height:var(--vt-icon-sm);
    flex-shrink:0;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  /* Logo Facebook/Zalo TÔ ĐẶC — ngược với icon nét vẽ ở trên, cùng lý do đã ghi ở
     src/Icons.php. Rộng tự tràn theo viewBox riêng, không ép vuông. */
  .vt-tool--brand svg{width:auto;fill:currentColor;stroke:none}

  /* Chép liên kết: hai icon in sẵn, đảo hiện/ẩn bằng class — cùng cơ chế nút gập mở
     ở header (.vt-i--open/--close). */
  .vt-tool--copy .vt-i--close{display:none}
  .vt-tool--copy.is-done .vt-i--open{display:none}
  .vt-tool--copy.is-done .vt-i--close{display:block}



  /* --- Mục lục ---
     Vạch nhấn CHỈ ở tiêu đề và mục đang đọc. Kẻ dọc chạy suốt cả cột trông như
     một khung viền và làm vạch nhấn mất tác dụng chỉ chỗ. */
  /* Điện thoại: dock nổi lo mục lục, bản gập ở đầu bài thành thừa. DESIGN.md §12c. */
  .vt-toc{display:none}

  .vt-toc__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--vt-s-3);
    padding:var(--vt-s-2) var(--vt-s-4);
    box-shadow:inset 2px 0 0 0 var(--vt-brand-fg);
    cursor:pointer;
    list-style:none;
    font-size:var(--vt-fs-h4);
    font-weight:700;
    line-height:var(--vt-lh-h4);
    color:var(--vt-brand-fg);
  }
  .vt-toc__head::-webkit-details-marker{display:none}

  .vt-toc__mark{flex-shrink:0;color:var(--vt-ink-2)}
  .vt-toc__mark svg{
    width:var(--vt-icon-sm);
    height:var(--vt-icon-sm);
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:rotate var(--vt-dur) var(--vt-ease);
  }
  .vt-toc[open] .vt-toc__mark svg{rotate:180deg}

  .vt-toc__nav{
    max-height:40vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    margin-top:var(--vt-s-3);
  }
  .vt-toc__list{list-style:none}

  /* Mục thụt vào so với tiêu đề, chừa chỗ cho vạch nhấn xuất hiện khi đang đọc. */
  .vt-toc__item a{
    display:block;
    padding:var(--vt-s-2) var(--vt-s-4) var(--vt-s-2) var(--vt-s-3);
    font-size:var(--vt-fs-body);
    line-height:var(--vt-lh-body);
    color:var(--vt-ink-2);
    text-decoration:none;
    transition:color var(--vt-dur) var(--vt-ease);
  }
  .vt-toc__item a:hover{color:var(--vt-ink)}
  .vt-toc__item--h3 a{padding-left:var(--vt-s-5)}

  /* Mục đang đọc: chữ về màu đậm nhất, vạch nhấn lo phần màu.
     Tô chữ bằng màu thương hiệu nữa là hai tín hiệu chồng lên nhau, đọc rối. */
  .vt-toc__item a.is-current{
    color:var(--vt-ink);
    font-weight:600;
    box-shadow:inset 2px 0 0 0 var(--vt-brand-fg);
  }




  /* --- Chân bài: danh mục, thẻ --- */
  .vt-article__foot{
    margin-top:var(--vt-s-7);
    padding-top:var(--vt-s-5);
    border-top:1px solid var(--vt-line);
  }
  .vt-terms{display:flex;flex-wrap:wrap;align-items:center;gap:var(--vt-s-2)}
  .vt-terms + .vt-terms{margin-top:var(--vt-s-4)}
  .vt-terms__label{
    margin-right:var(--vt-s-1);
    font-size:var(--vt-fs-small);
    color:var(--vt-ink-2);
  }


  /* --- Bài viết liên quan — dải riêng, ngoài .vt-article, chạy hết bề ngang trang ---
     Dải có đệm riêng nên bài hạ đệm đáy: đủ tách hàng thẻ khỏi nền, không cộng đôi. */
  .vt-article:has(+ .vt-related){padding-bottom:var(--vt-s-7)}
  .vt-related .vt-block__title{margin-bottom:var(--vt-s-5)}
  .vt-related__grid{display:grid;gap:var(--vt-s-6)}

  /* Thẻ liên quan hẹp hơn thẻ ở trang danh sách nên tiêu đề hạ một bậc — 18px trong
     cột 230px thì tiêu đề bốn dòng, cao hơn cả cái ảnh phía trên nó.
     Dùng chung cho "Bài viết liên quan" và "Có thể bạn quan tâm" của trang sản phẩm. */
  .vt-related__grid .vt-card__title{
    font-size:var(--vt-fs-body);
    line-height:var(--vt-lh-h4);
  }


  /* --- KHỐI 3 — dải nền xám --- */
  .vt-news-band{background:var(--vt-surface-2)}

  .vt-band__head{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:space-between;
    gap:var(--vt-s-3);
  }
  .vt-band__head .vt-block__title{margin-bottom:0}

  .vt-band__grid{display:grid;gap:var(--vt-s-6);margin-top:var(--vt-s-6)}


  /* --- BREAKPOINT — 640 · 1024, đúng bộ mốc của DESIGN.md §13 --- */
  @media (min-width:640px){
    .vt-tool--read{display:inline-flex}

    :is(.vt-news-feat__grid,.vt-news-cols__grid,.vt-band__grid,.vt-related__grid){grid-template-columns:repeat(2,1fr)}

    /* Ảnh trái cỡ cố định, chữ chiếm phần còn lại. */
    .vt-card--row{
      display:grid;
      grid-template-columns:var(--vt-card-thumb) minmax(0,1fr);
      gap:0;
      align-items:start;
    }
  }

  @media (min-width:1024px){
    .vt-news-top__in{grid-template-columns:minmax(0,1fr) var(--vt-aside);gap:var(--vt-s-8)}

    /* Bài viết: mục lục bên TRÁI, ngược với các trang khác.
       gap:0 vì khoảng cách do đệm hai bên đường kẻ đứng lo — đặt gap nữa là
       đường kẻ lệch hẳn về một bên. */
    .vt-article{
      display:grid;
      grid-template-columns:var(--vt-aside) minmax(0,1fr);
      gap:0;
      align-items:start;
    }
    .vt-toc{padding-right:var(--vt-s-6)}

    .vt-article__main{
      border-left:1px solid var(--vt-line);
      padding-left:var(--vt-s-7);
    }

    /* Bài dưới 3 tiêu đề không có mục lục. Không hạ về một cột thì bài viết
       rơi vào cột 320px của mục lục và bó lại thành một sợi chữ. */
    .vt-article--solo{grid-template-columns:minmax(0,1fr)}
    /* Bài không mục lục và MỌI trang tĩnh: chặn đúng bằng bề ngang cột bài của bài CÓ
       mục lục rồi căn giữa, để hai loại trông như nhau. Suy từ token, không gõ số. */
    .vt-article--solo .vt-article__main{
      max-width:calc(var(--vt-wide) - var(--vt-aside) - var(--vt-s-7));
      margin-inline:auto;
      border-left:0;
      padding-left:0;
    }

    /* align-self:start là điều kiện để sticky có chỗ chạy trong ô lưới —
       để mặc định stretch thì phần tử cao bằng hàng và không dính được. */
    .vt-toc{
      display:block;
      position:sticky;
      top:calc(var(--vt-header-h) + var(--vt-s-4));
      align-self:start;
    }
    .vt-toc__nav{max-height:calc(100dvh - var(--vt-header-h) - var(--vt-s-8))}

    .vt-news-feat__grid{grid-template-columns:repeat(3,1fr);gap:var(--vt-s-6)}
    :is(.vt-news-cols__grid,.vt-band__grid,.vt-related__grid){grid-template-columns:repeat(4,1fr)}

    /* Ảnh trái, chữ phải. Chia đôi đúng như mẫu. */
    .vt-card--hero{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:0;
      align-items:start;
    }
  }
}


/* ===== NGOÀI MỌI @layer — BẮT BUỘC, ĐỪNG GOM VÀO LAYER =====
   Rule dưới đây nhắm THẺ TRẦN (figure, ul, ol, table, img) trong nội dung bài.
   CSS block lõi in ra ngoài mọi layer, mà khai báo không-layer thắng MỌI khai báo
   có layer bất kể độ cụ thể — `.vt-entry figure` vẫn thua `figure{margin:0 0 1em}`.
   Đo trên site thật: trong layer ra 0/16px, ngoài layer ra 64/48px. DESIGN.md §16. */
/* --- Breadcrumb: dãy viên trong một viên bao. Cả khối ở ngoài @layer vì `ol`/`li` bị
   CSS block lõi nhắm thẳng (§2.3). Dấu ngăn dựng bằng ::before nên không phải thẻ thật,
   trình đọc màn hình không đọc ra một mớ dấu gạch chéo.
   Nền viên bao là --vt-brand-soft (trong suốt) chứ không phải màu đặc: trang sản phẩm
   đặt breadcrumb trên ảnh hero, màu đặc sẽ thành mảng chắn ngang ảnh.
   `width:fit-content` để viên bao ôm sát nội dung — `ol` là thẻ khối nên mặc định chiếm
   trọn bề ngang; `max-width:100%` để tên chuyên mục dài vẫn xuống dòng trong cột. */
.vt-crumbs{margin-bottom:var(--vt-s-4)}

/* HÀNG BREADCRUMB — một hàng riêng, chạy hết bề ngang trang, đứng trên mọi thứ khác.
   Dùng ở lưu trữ, trang tin, bài viết và trang tĩnh. Trước đây bài viết đặt breadcrumb
   trong `.vt-article__head` nên nó thụt vào theo cột đọc, lệch hẳn với ba loại trang kia.

   Đứng ngoài mọi .vt-section nên phải tự lo đệm trên. */
.vt-crumbrow{padding-top:var(--vt-s-6)}

/* Trang dải đặt breadcrumb TRONG dải mở đầu, không tách hàng riêng — dải đó ăn
   --vt-section (tới 96px) nên hở gấp ba mọi trang khác. :has() để KHÔNG chạm dải hero của
   Landing: dải đó cũng đứng đầu <main> nhưng không có breadcrumb, và nó cần hở rộng thật. */
.vt-main--flush > .vt-section:first-child:has(.vt-crumbs){padding-top:var(--vt-s-6)}

/* Bài viết và trang tĩnh: hàng breadcrumb đã chừa đệm trên rồi, và `.vt-crumbs` còn có
   margin-bottom 16px riêng. Cộng thêm --vt-s-7 của .vt-article nữa là 64px giữa breadcrumb
   và tiêu đề. Rule này KHÔNG chạm lưu trữ/trang tin — ở đó sau hàng crumb là .vt-section. */
.vt-crumbrow + .vt-article{padding-top:0}
/* CUỘN NGANG thay vì xuống dòng: viên bao bo tròn hết cỡ mà vỡ hai hàng thì bo góc
   méo thành một khối không đều — cùng lý do đã sửa ở dải lọc SP/DV. */
.vt-crumbs ol{
  display:flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  gap:var(--vt-s-1);
  margin:0;
  padding:var(--vt-s-1);
  border:1px solid var(--vt-line);
  border-radius:var(--vt-r-full);
  background:var(--vt-brand-soft);
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
}
.vt-crumbs ol::-webkit-scrollbar{display:none}
.vt-crumbs li{display:flex;align-items:center;gap:var(--vt-s-1);flex-shrink:0}

/* Ngăn cách bằng ký tự, không phải SVG: nó nằm trong ::before nên không tốn thẻ nào
   trong HTML, và dùng lại đúng cách .vt-viewall__arrow đang làm. */
.vt-crumbs li + li::before{
  content:"›";
  font-size:1.2em;
  line-height:1;
  color:var(--vt-ink-2);
  translate:0 -.06em;
}

.vt-crumb{
  display:inline-flex;
  align-items:center;
  gap:var(--vt-s-1);
  padding:var(--vt-s-1) var(--vt-s-2);
  border-radius:var(--vt-r-full);
  font-size:var(--vt-fs-eyebrow);
  font-weight:600;
  line-height:var(--vt-lh-small);
  color:var(--vt-ink);
  text-decoration:none;
  white-space:nowrap;
  transition:background var(--vt-dur) var(--vt-ease),color var(--vt-dur) var(--vt-ease);
}
.vt-crumb:hover{background:var(--vt-chip-bg-hi)}

/* Icon lấy màu chính, chữ giữ màu mực — đúng mẫu, và giữ được tương phản của chữ. */
.vt-crumb svg{
  width:var(--vt-icon-sm);
  height:var(--vt-icon-sm);
  flex-shrink:0;
  fill:none;
  stroke:var(--vt-brand-fg);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Mắt xích cuối tô đặc. Dùng --vt-btn-* chứ KHÔNG phải --vt-brand/--vt-on-brand:
   trên dải tối --vt-brand-fg đổi thành bản sáng, chữ trắng lên đó là trượt tương phản.
   Cặp --vt-btn-* đã tự đảo sẵn theo dải. */
.vt-crumb--here{background:var(--vt-btn-bg);color:var(--vt-btn-fg)}
.vt-crumb--here svg{stroke:currentColor}
.vt-crumb--here:hover{background:var(--vt-btn-bg);opacity:.88}

/* Mặc định là bản GỌN cho điện thoại: chữ 13px — sàn tiếng Việt của DESIGN.md §5,
   không hạ thấp hơn — khe icon↔chữ và đệm ngang đều lùi một bậc thang.
   Từ 640px lên đủ chỗ thì trả cả ba về cỡ thường. */
@media (min-width:640px){
  .vt-crumb{
    gap:var(--vt-s-2);
    padding:var(--vt-s-1) var(--vt-s-3);
    font-size:var(--vt-fs-small);
  }
}

.vt-article__figure{margin-block:var(--vt-s-6) var(--vt-s-7)}
.vt-article__thumb{
  width:100%;
  aspect-ratio:var(--vt-ratio-share);
  object-fit:cover;
  border-radius:var(--vt-r);
}

/* --- Thân bài. KHÔNG chặn bề ngang: ảnh đại diện nằm ngoài .vt-entry nên không chặn
   cùng được, chặn mỗi chữ thì hai thứ so le nhau. */
.vt-entry{
  font-size:var(--vt-fs-body);
  line-height:var(--vt-lh-read);
}
.vt-entry > * + *{margin-top:var(--vt-s-5)}

/* Căn đều hai bên. LOẠI TRỪ block đã tự khai căn lề để has-text-align-* của lõi tự lo —
   thắng bằng cách không đụng tới. Chỉ p và li: căn đều tiêu đề hai dòng là hở toác chữ. */
.vt-entry :is(p,li):not([class*="has-text-align"]){text-align:justify}

/* Như tiêu đề bài: lấp đầy cột đọc, không để balance ngắt sớm chừa trống phải. */
.vt-entry :is(h2,h3,h4){text-wrap:pretty}

.vt-entry h2{margin-top:var(--vt-s-8);font-size:var(--vt-fs-h3);line-height:var(--vt-lh-h3)}
.vt-entry h3{margin-top:var(--vt-s-7);font-size:var(--vt-fs-h4);line-height:var(--vt-lh-h4)}

/* Header dính che mất tiêu đề khi nhảy từ mục lục nếu thiếu dòng này. */
.vt-entry :is(h2,h3){scroll-margin-top:calc(var(--vt-header-h) + var(--vt-s-5))}

.vt-entry a{color:var(--vt-brand-fg);text-decoration:underline;text-underline-offset:.18em}
.vt-entry a:hover{color:var(--vt-brand-fg)}

.vt-entry :is(ul,ol){padding-left:var(--vt-s-6)}
.vt-entry ul{list-style:disc}
.vt-entry ol{list-style:decimal}
.vt-entry li + li{margin-top:var(--vt-s-2)}

.vt-entry img{border-radius:var(--vt-r)}
.vt-entry figure{margin-block:var(--vt-s-6)}
.vt-entry figcaption{
  margin-top:var(--vt-s-3);
  font-size:var(--vt-fs-small);
  line-height:var(--vt-lh-body);
  color:var(--vt-ink-2);
}

.vt-entry blockquote{
  padding-left:var(--vt-s-5);
  border-left:2px solid var(--vt-brand-fg);
  font-size:var(--vt-fs-lead);
  line-height:var(--vt-lh-lead);
}

/* Nội dung rộng phải tự cuộn trong khung của nó, không đẩy cả trang tràn ngang. */
.vt-entry pre,
.vt-entry .wp-block-table{overflow-x:auto;overscroll-behavior-x:contain}
.vt-entry pre{
  padding:var(--vt-s-4);
  border-radius:var(--vt-r);
  background:var(--vt-surface-2);
  font-size:var(--vt-fs-small);
  line-height:var(--vt-lh-body);
}
.vt-entry table{width:100%;border-collapse:collapse}
.vt-entry th,
.vt-entry td{
  padding:var(--vt-s-3);
  border:1px solid var(--vt-line);
  text-align:left;
}
.vt-entry th{background:var(--vt-surface-2);font-weight:600}

/* Cột đọc đã bị giới hạn bề ngang nên khối "rộng" chỉ tràn hết cột, không hơn. */
.vt-entry .alignwide,
.vt-entry .alignfull{max-width:none;width:100%}

/* ===== Trang dải — page-band.php, page-landing.php =====
   NGOÀI @layer và phải đứng SAU rule .vt-entry .alignfull ở trên: rule dưới nhắm con
   trực tiếp bất kỳ, mà `figure{margin:0 0 1em}` của block lõi cũng không-layer. §2.3 */
.vt-entry--band{max-width:none;padding-block:var(--vt-section)}
.vt-entry--band > *{max-width:var(--vt-narrow);margin-inline:auto;padding-inline:var(--vt-gutter)}
.vt-entry--band > .alignwide{max-width:var(--vt-wide)}
.vt-entry--band > .alignfull{max-width:none;padding-inline:0}

@layer components{
  /* Landing: đầu trang hai ô thay vì ba. */
  .vt-header--bare .vt-header__in{grid-template-columns:1fr auto}
  .vt-header--bare .vt-brand{justify-self:start}
  .vt-header--bare .vt-btn{margin-inline-start:auto}
  .vt-landing__form{scroll-margin-top:var(--vt-header-h)}
}

/* ===== FAQ — Liên hệ + bài SP/DV (Nhóm class `vt-faq`). NGOÀI @layer: thẻ trần, §2.3. */
.vt-faq{display:grid;gap:var(--vt-s-3);margin-top:var(--vt-s-5)}
.vt-faq details{border-radius:var(--vt-r-lg);background:var(--vt-surface-2);transition:background var(--vt-dur) var(--vt-ease)}
.vt-faq details:hover{background:var(--vt-chip-bg)}
/* Safari cần CẢ list-style lẫn ::-webkit-details-marker. */
.vt-faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--vt-s-4);padding:var(--vt-s-5);list-style:none;cursor:pointer;font-size:var(--vt-fs-lead);font-weight:600;line-height:var(--vt-lh-lead);color:var(--vt-ink)}
.vt-faq summary::-webkit-details-marker{display:none}
/* Dấu + là 2 gradient, không phải ký tự: ký tự lệch theo font, xoay ra × bị méo. */
.vt-faq summary::after{content:"";flex-shrink:0;width:var(--vt-s-5);height:var(--vt-s-5);background:linear-gradient(currentColor 0 0) center/100% calc(var(--vt-s-1)/2) no-repeat,linear-gradient(currentColor 0 0) center/calc(var(--vt-s-1)/2) 100% no-repeat;transition:rotate var(--vt-dur) var(--vt-ease)}
.vt-faq details[open] summary::after{rotate:45deg}
/* .vt-entry: thắng luật căn đều của bài. */
.vt-faq p,.vt-entry .vt-faq p{padding:0 var(--vt-s-5) var(--vt-s-5);line-height:var(--vt-lh-body);color:var(--vt-ink-2);white-space:pre-line;text-align:left}