/* Viraf responsive bridge. DMDC breakpoints: mobile <=700, tablet <=1024. */

/* >1920 (2K/4K/ultrawide): khối "Khách hàng nói về chúng tôi" tràn mép trái nên nếu chỉ
   chặn trần ở 1920 thì nó dồn về bên trái, chừa dải trắng chết bên phải. Neo tấm nền và
   dải thẻ theo lề khung nội dung đã căn giữa (Figma 4012:23: nền xám tới x=1271, thẻ từ
   x=824 khi khung ở 247 ⇒ +1024 và +577). Chỉ áp dụng >1920 nên các mốc đã nghiệm thu
   (≤1920) không đổi. */
@media (min-width: 1921px) {
  .viraf-testimonials__row > .viraf-testimonials__intro { width: calc(var(--viraf-gutter-left) + 1024px) !important; }
  .viraf-testimonials__row > .viraf-testimonials__slider { left: calc(var(--viraf-gutter-left) + 577px); width: calc(100vw - var(--viraf-gutter-left) - 577px) !important; }
  .viraf-testimonial-carousel .swiper { width: calc(100vw - var(--viraf-gutter-left) - 577px) !important; }
}
/* NT-06 vùng chết 1025–1199 + tablet/mobile: dưới 1200px `.container` rơi về bậc Bootstrap
   (960/720/540) nên khung nội dung tụt hẳn so với bề rộng màn hình. T1 chỉ cấp giá trị từ
   1200px trở lên, nên bậc dưới 1200 phải do theme xử lý (đúng chỗ theo tài liệu).
   Giữ đúng hành vi đã nghiệm thu trước đây: khung = bề rộng màn hình trừ 2×20px lề. */
@media (max-width: 1199.98px) {
  .container { max-width: calc(100vw - 40px); }
}
@media (min-width: 1025px) and (max-width: 1199.98px) {
  .viraf-header .dmdc-menu { gap: 14px; }
  .viraf-header .dmdc-menu .nav-link,
  .viraf-header .dmdc-menu-link { font-size: 15px; }
  .viraf-title .dmdc-heading-title { font-size: 44px; }
  .viraf-header__inner,
  .viraf-services .viraf-section__row,
  .viraf-why .viraf-section__row,
  .viraf-stats__columns,
  .viraf-news__row,
  .viraf-footer__newsletter-row,
  .viraf-footer__main-row,
  .viraf-footer__bottom-row { width: 80vw !important; max-width: 80vw !important; }
  .viraf-why { min-height: 0; padding: 64px 20px 72px; }
  .viraf-benefits { width: 100% !important; gap: 30px 40px; margin-top: 56px; }
  .viraf-benefit { flex-basis: calc((100% - 40px) / 2) !important; width: calc((100% - 40px) / 2) !important; height: auto; min-height: 340px; padding: 28px 24px 24px 105px !important; }
  .viraf-benefit::before { left: 42px; }
  .viraf-benefit__image { left: -10px; }
  .viraf-benefit__title .dmdc-heading-title { font-size: 21px !important; white-space: normal; }
  .viraf-benefit__text p,
  .viraf-benefit__text ul { font-size: 17px; line-height: 23px; }

  /* VÙNG CHẾT 1025–1199 (tablet ngang) — khối Số liệu.
     Hai cột trong khối này rộng CỨNG 698 + 696 = 1394px. Dải ≤1024 cho xếp chồng, dải
     1200–1459 cũng cho xếp chồng, nhưng dải ở GIỮA thì chỉ bó `.viraf-stats__columns` về
     80vw mà KHÔNG đụng tới hai cột ⇒ chúng vẫn 1394px và bị cắt cụt: đo được **mất 481px ở
     1199, 496px ở 1180, 560px ở 1100** — tấm vàng "Viraf đã tư vấn cho…" đứt ngang chữ.
     Không sinh thanh cuộn ngang nên bộ dò tràn báo "sạch", chỉ nhìn ảnh chụp mới thấy.
     Đây đúng là kiểu lỗi đã gặp ở Hokaido: dải giữa tier tablet và tier desktop bị bỏ quên. */
  .viraf-stats__columns { flex-direction: column !important; align-items: center; height: auto; gap: 30px; }
  .viraf-stats__left { flex-basis: auto !important; width: min(100%, 698px) !important; }
  .viraf-stats__right { flex-basis: auto !important; width: min(100%, 696px) !important; }
  .viraf-stats__left .viraf-stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
}
@media (max-width: 1024px) {
  :root { --viraf-section-y: 42px; }
  .viraf-service-slider { --viraf-service-inset: 15px; }
  .viraf-header__inner { width: 80vw !important; max-width: 80vw !important; justify-content: space-between !important; }
  .viraf-header__logo { flex: 0 0 auto !important; width: auto !important; }
  .viraf-header__nav { flex: 0 0 auto !important; width: auto !important; }
  .viraf-header .dmdc-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .viraf-header .dmdc-menu .nav-link,
  .viraf-header .dmdc-menu-link { color: var(--viraf-ink); font-size: 18px; line-height: 1.3; padding: 12px 18px !important; }
  .viraf-header .dropdown-menu { position: static !important; display: block; min-width: 0; box-shadow: none; padding-left: 16px; }
  .viraf-services .viraf-section__row,
  .viraf-why .viraf-section__row,
  .viraf-stats__columns,
  .viraf-news__row,
  .viraf-footer__newsletter-row,
  .viraf-footer__main-row,
  .viraf-footer__bottom-row { width: 80vw !important; max-width: 80vw !important; }
  .viraf-service-slider::before,
  .viraf-service-slider::after { width: calc(10vw + 15px); }
  .viraf-service-slider .swiper { width: calc(100% - 30px) !important; height: clamp(597px, calc(37.4vw + 266px), 650px) !important; min-height: clamp(597px, calc(37.4vw + 266px), 650px) !important; padding: 0; }
  .viraf-service-slider .swiper-button-prev { left: -25px; }
  .viraf-service-slider .swiper-button-next { right: -25px; }
  .viraf-why { min-height: 0; padding: 54px 20px 64px; }
  .viraf-benefits { width: 100% !important; gap: 30px; margin-top: 50px; }
  .viraf-benefit { flex-basis: calc((100% - 30px) / 2) !important; width: calc((100% - 30px) / 2) !important; height: auto; min-height: 360px; flex-direction: column !important; padding: 28px 22px 28px 94px !important; }
  .viraf-benefit::before { left: 42px; }
  .viraf-benefit__image { left: -10px; }
  .viraf-benefit__title .dmdc-heading-title { font-size: 20px !important; line-height: 28px !important; white-space: normal; }
  .viraf-benefit__text p,
  .viraf-benefit__text ul { font-size: 16px; line-height: 22px; }
  .viraf-stats { width: 100%; height: auto; min-height: 0; padding: 64px 20px; }
  .viraf-stats__columns { flex-direction: column !important; align-items: center; width: 100% !important; max-width: 100% !important; height: auto; gap: 30px; }
  .viraf-stats__left { flex-basis: auto !important; width: min(100%,698px) !important; }
  .viraf-stats__right { flex-basis: auto !important; width: min(100%,696px) !important; }
  .viraf-stats__left .viraf-stats__grid { grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; }
  .viraf-footer__newsletter-row { grid-template-columns: 20% 5% 30% 45%; }
}

/* 1200–1781: khung nội dung vẫn là 80vw nên tấm vàng (22%) hẹp dần — H2 50px sẽ ngắt
   thành 3–4 dòng và đội cao tấm vàng. Co cỡ chữ theo viewport, cần !important vì module
   heading ghi inline style. Ở 1782+ clamp trả về đúng 50px của thiết kế. */
@media (min-width: 1200px) and (max-width: 1781.98px) {
  .viraf-news__heading .dmdc-heading-title { font-size: clamp(28px, 2.8vw, 50px) !important; line-height: 1.4 !important; }
}

/* 1280–1499: menu desktop (18px, gap 22) rộng ~941px, hơn cột nav 85% của khung 80vw
   nên xuống 3 dòng, header cao 182px. Dùng lại cách nén của dải 1025–1199. Lỗi có từ
   trước, không do đổi khung nội dung (ở các bề rộng này khung vẫn 80vw như cũ).
   Chặn tới 1499 để có biên an toàn: ở 1500 cột nav đã rộng 1020px. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
  .viraf-header .dmdc-menu { gap: 14px; }
  .viraf-header .dmdc-menu .nav-link,
  .viraf-header .dmdc-menu-link { font-size: 15px; }
}

/* 1200–1459: VÙNG CHẾT của khối số liệu. Bố cục desktop khoá cứng 698 + 31 + 696 = 1425px,
   nên dưới ~1460px tấm vàng bên phải thò ra ngoài và bị `.viraf-stats{overflow:hidden}`
   XÉN ÂM THẦM — đo được: mất 94px ở màn 1366, 260px ở 1200. Không ai thấy vì không sinh
   thanh cuộn ngang. Dải ≤1199 đã có nhánh xếp dọc từ trước, chỉ hở đúng khoảng này.
   Dùng lại y nguyên cách xếp của dải 1025–1199 (đã nghiệm thu). */
/* 1200–1279: VÙNG CHẾT của khối "Tại sao nên". Từ 1200px bố cục desktop có hiệu lực, nhưng
   khung nội dung mới rộng 1160 nên mỗi thẻ chỉ còn ~538px — không đủ cho `padding-left: 129px`
   cộng tiêu đề `white-space: nowrap` của bản desktop. Đo được: khối văn bản thẻ thứ hai
   chạy tới x=1534 trong khối rộng 1200 và bị `.viraf-why{overflow:hidden}` XÉN 334px — mất
   chữ mà không sinh thanh cuộn ngang nên rất dễ bỏ qua. Sạch trở lại từ 1280 (thẻ 578px).
   Lỗi CÓ TỪ TRƯỚC, không do sửa lần này; dùng lại y nguyên cách xếp của dải 1025–1199. */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .viraf-benefits { width: 100% !important; gap: 30px; margin-top: 50px; }
  .viraf-benefit { flex-basis: calc((100% - 30px) / 2) !important; width: calc((100% - 30px) / 2) !important; height: auto; min-height: 360px; flex-direction: column !important; padding: 28px 22px 28px 94px !important; }
  .viraf-benefit::before { left: 42px; }
  .viraf-benefit__image { left: -10px; }
  .viraf-benefit__title .dmdc-heading-title { font-size: 20px !important; line-height: 28px !important; white-space: normal; }
  .viraf-benefit__text p,
  .viraf-benefit__text ul { font-size: 16px; line-height: 22px; }
}

/* ĐÍNH CHÍNH 24/08 — biên trên nâng 1459.98 → 1499.98. Đo lại từng mốc: 1460 còn cắt 20px
   và 1465 còn cắt 15px, tới 1500 mới sạch (ở đó `.container` đã đủ chỗ cho 698 + khe + 696).
   Cứ chốt biên theo phép tính lý thuyết là hụt — phải đo. Dùng lại đúng mốc 1499.98 của khối
   nén menu ngay bên trên cho thống nhất. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
  .viraf-stats { width: 100%; height: auto; min-height: 0; padding: 64px 20px; }
  .viraf-stats__columns { flex-direction: column !important; align-items: center; width: 100% !important; max-width: 100% !important; height: auto; gap: 30px; }
  .viraf-stats__left { flex-basis: auto !important; width: min(100%,698px) !important; }
  .viraf-stats__right { flex-basis: auto !important; width: min(100%,696px) !important; }
}

/* ≤1199: khối tin tức xếp dọc — cột trái 22% chỉ còn ~180-210px, 3 thẻ sẽ bị bóp.
   Tấm vàng thành banner trên, bo đủ 4 góc; ô logo footer cũng tách thành khối riêng
   (không còn ghép mạch với .viraf-news__intro như ở desktop). */
@media (max-width: 1199.98px) {
  .viraf-news__row { flex-direction: column !important; flex-wrap: nowrap !important; }
  .viraf-news__intro { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; padding: 34px 24px !important; border-radius: 20px; }
  .viraf-news__slider { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; padding: 24px 0 0 !important; }
  .viraf-news__heading .dmdc-heading-title { max-width: none; margin-bottom: 14px; }
  .viraf-news__copy, .viraf-news__copy .dmdc-text-editor { max-width: none; }
  .viraf-footer__newsletter-logo { align-self: center; height: auto; padding: 18px 24px; border-radius: 20px; }
  .viraf-news { margin-top: 90px; }
  /* ≤1199: 3 cột footer còn quá hẹp cho chữ 20px → gộp về 2 cột (thông tin | kênh liên hệ) */
  .viraf-footer__main-row { grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 34px; }
  .viraf-footer__about { grid-column: 1 / 3; }
  .viraf-footer__bottom-row { grid-template-columns: 1fr; }
  .viraf-footer__copyright { grid-column: 1; }
}
@media (max-width: 768px) {
  .viraf-testimonials__row { min-height: 0; }
  .viraf-testimonials__row > .viraf-testimonials__intro { position: relative !important; z-index: 1 !important; inset: auto; display: block !important; width: 100% !important; height: auto; min-height: 255px; padding: 20px; overflow: hidden !important; }
  .viraf-testimonials__intro > .viraf-testimonials__mark { position: absolute !important; z-index: 1 !important; top: 20px; left: -30px; width: 107px; }
  .viraf-testimonials__mark img { width: 107px !important; max-width: none; }
  .viraf-testimonials__heading { margin-top: 10vw; }
  .viraf-testimonials__heading .dmdc-heading-title { margin: 15px 0 10px; font-size: 30px; line-height: 1.2; }
  .viraf-testimonials__copy p { font-size: 18px; }
  .viraf-testimonials__row > .viraf-testimonials__slider { position: relative !important; left: 0; width: 100% !important; padding: 50px 20px; overflow: hidden !important; }
  .viraf-testimonial-carousel .swiper { width: 100% !important; max-width: 100% !important; }
  .viraf-testimonial-carousel .swiper-slide { padding: 20px 20px 0 !important; }
  .viraf-testimonial-carousel .swiper-button-prev { left: 0 !important; right: auto !important; }
  .viraf-testimonial-carousel .swiper-button-next { left: 60px !important; right: auto !important; }
  .viraf-testimonial-carousel .tc-avatar { width: 70px !important; height: 70px !important; flex-basis: 70px; }
  .viraf-testimonial-carousel .tc-name { font-size: 15px !important; }
}
@media (max-width: 700px) {
  :root { --viraf-section-y: 36px; --viraf-gutter: 20px; }
  body.viraf-site { font-size: 16px; }
  .viraf-header__inner { width: calc(100vw - 40px) !important; max-width: calc(100vw - 40px) !important; }
  .viraf-services .viraf-section__row,
  .viraf-why .viraf-section__row,
  .viraf-stats__columns,
  .viraf-news__row { width: 100% !important; max-width: 100% !important; }
  .viraf-eyebrow .dmdc-heading-title { font-size: 24px; }
  .viraf-title .dmdc-heading-title { margin-bottom: 0; font-size: 30px; }
  /* Bỏ override 19vh: chiều cao hero giờ do aspect-ratio 12/5 ở style.css quyết định nên tự co
     theo bề rộng (≈156px ở màn 375px — xấp xỉ 19vh cũ) và KHÔNG phụ thuộc chiều cao viewport,
     nhờ đó canvas Builder không còn phình. */
  .viraf-services .viraf-eyebrow .dmdc-heading-title { font-size: 24px !important; line-height: 26px !important; letter-spacing: 4px; }
  .viraf-services .viraf-title .dmdc-heading-title { font-size: 30px !important; line-height: 42px !important; }
  .viraf-service-slider { margin-top: 28px; }
  .viraf-service-slider::before,
  .viraf-service-slider::after { display: none; }
  .viraf-service-slider .swiper { width: calc(100vw - 40px) !important; height: clamp(570px, calc((100vw - 40px) * .93466 + 268px), 620px) !important; min-height: clamp(570px, calc((100vw - 40px) * .93466 + 268px), 620px) !important; margin: 0; padding: 0; overflow: hidden; }
  /* Figma 4059:29 (mobile) KHÔNG có nhãn số "01/02/03" trên thẻ. Nhãn này do T2 vẽ bằng
     `::before` (style.css) cho khớp Figma DESKTOP — không có ô cài đặt nào, nên ẩn ở đây là
     đúng tầng. Mũi tên thì NGƯỢC LẠI: đó là cài đặt `show_arrows` của widget, đã tắt bằng
     `show_arrows_mobile: 'no'` chứ không đè bằng CSS. */
  .viraf-service-slider .dmdc-slider-content-overlay::before { content: none !important; }
  .viraf-service-slider .swiper-button-prev { left: 10px; }
  .viraf-service-slider .swiper-button-next { right: 10px; }
  .viraf-why { padding: 42px 20px 56px; }
  .viraf-why .viraf-title .dmdc-heading-title { font-size: 30px !important; line-height: 42px !important; }
  /* --- THẺ "TẠI SAO NÊN", bố cục Figma 4060:30 (khung mobile) ---
     Bản cũ đẩy biểu tượng lên GÓC TRÊN thẻ (`top:0; left:20px`, thẻ lùi xuống 40px) — khác
     hẳn thiết kế. Đo trên khung Figma 430 (nền be nên thấy rõ biên thẻ):
       · thẻ trắng x 61..409, cao 343, các thẻ cách nhau 37px
       · vòng tròn 80×80 tại x 20..99 ⇒ TÂM x=60 nằm ĐÚNG mép trái thẻ (nửa trong nửa ngoài)
       · tâm tròn cách đỉnh thẻ 172px ở CẢ 4 thẻ = 343/2 ⇒ CĂN GIỮA theo chiều dọc
       · chữ bắt đầu x=119 ⇒ lề trong trái của thẻ = 58px
     Quy ra hệ toạ độ của `.viraf-benefit` (đã nằm trong lề 20px của `.viraf-why`):
     thẻ lùi trái 40px, biểu tượng ở left:0, chữ cách trái 40+58 = 98px.
     Đây cũng ĐÚNG mẫu mà desktop đang dùng (thẻ lùi 52px, icon 105px căn giữa dọc) — mobile
     chỉ là bản thu nhỏ, không phải bố cục khác. */
  .viraf-benefits { flex-direction: column !important; gap: 37px; margin-top: 40px; }
  .viraf-benefit { flex: 0 0 100% !important; width: 100% !important; height: auto; min-height: 0; padding: 34px 20px 34px 98px !important; }
  .viraf-benefit::before { inset: 0 0 0 40px; }
  /* Bề ngang/chiều cao của biểu tượng KHÔNG đặt ở đây: đó là CÀI ĐẶT của widget ảnh
     (`width: {size:105,unit:'px'}`), style-engine phát rule `.uid-…` nằm trong <style> cuối
     trang nên luôn thắng CSS theme cùng độ ưu tiên. Đã đặt `width_mobile`/`height_mobile`
     = 80px thẳng vào cài đặt widget (đúng tầng, xem L-26). T2 chỉ lo VỊ TRÍ. */
  /* `height` VẪN do theme giữ: engine chỉ phát `width` cho widget ảnh (đã kiểm rule phát ra),
     nên bỏ trống là còn nguyên 105px của desktop và khung ra 80×105 méo. */
  .viraf-benefit__image { top: 50%; left: 0; height: 80px; transform: translateY(-50%); }
  /* `.viraf-section__row` mang luôn class `.container` ⇒ dính `padding: 0 15px`, cộng 20px
     lề của khối thành 35px, trong khi Figma cho lề 20. Nâng độ ưu tiên lên (0,2,0) để thắng
     `.container` (cùng 0,1,0 nhưng nạp sau) — không dùng `!important`. */
  .viraf-why .viraf-section__row { padding-left: 0; padding-right: 0; }
  /* Ba dòng dưới là thứ theme THẬT SỰ sở hữu: bản desktop ghi cứng 105px cho các thẻ bọc
     bên trong, không có ô cài đặt nào — không gỡ thì ảnh 105px tràn khỏi khung 80px. */
  .viraf-benefit__image .dmdc-widget-container,
  .viraf-benefit__image .dmdc-image-wrapper { width: 100%; height: 100%; }
  .viraf-benefit__image img { width: 100% !important; height: 100% !important; }
  .viraf-benefit__title .dmdc-heading-title { font-size: 20px !important; line-height: 28px !important; white-space: normal; }
  .viraf-benefit__divider { margin: 12px 0 14px; }
  .viraf-benefit__text p, .viraf-benefit__text ul { font-size: 16px; text-align: left; }
  /* --- KHỐI SỐ LIỆU, bố cục Figma 4059:29 (khung mobile 430) ---
     Đo từ ảnh dựng: lề 20, vùng nội dung 390; hàng 1 hai thẻ cạnh nhau cao 169; hàng 2 một
     thẻ TRÀN NGANG cao 169 (1.000+); hàng 3 một thẻ TRÀN NGANG cao 198 (40+ Quốc gia, số và
     chữ CÙNG MỘT HÀNG, đoạn mô tả nằm luôn trong thẻ); bảng vàng lưới 2×2 có vạch trắng
     chia dọc giữa + ngang dưới hàng 1; khoảng cách các thẻ 36px.
     Bản trước xếp 2×2 đều nhau và tách đoạn mô tả ra ngoài — không khớp thiết kế.
     BẪY: container Builder luôn chèn `.dmdc-bg-layer` làm CON ĐẦU, nên counter là
     `:nth-child(2..5)`. Nó `position:absolute` nên không chiếm ô lưới nhưng VẪN bị đếm. */
  .viraf-stats { padding: 48px 20px; }
  /* `height: 374px` của bản desktop PHẢI trả về auto, không chỉ `min-height`. Bố cục Figma
     mobile cao ~712px; giữ nguyên 374px thì phần dư TRÀN RA NGOÀI khung và bảng vàng (đứng
     ngay sau trong dòng chảy) VẼ ĐÈ lên thẻ 40+ cùng đoạn mô tả — đo được: nội dung tới
     y=712 trong khung cao 374, bảng vàng bắt đầu ở y=452. Nhìn ra như "mất hẳn 2 khối". */
  /* `padding: 0 15px` (gutter kiểu Bootstrap của hàng) cộng thêm 20px lề của khối làm thẻ
     bắt đầu ở x=35 và chỉ rộng 360. Figma cho thẻ tràn đủ 390 với lề 20 ⇒ bỏ gutter, để
     duy nhất lề của `.viraf-stats` quyết định. */
  /* Bộ chọn phải có HAI class: hàng này cũng mang class `.container`, mà rule `.container`
     (đặt `--content-padding-x`) cùng độ ưu tiên (0,1,0) lại nạp sau nên thắng. Không dùng
     `!important` — chỉ cần nâng độ ưu tiên lên (0,2,0) là đủ. */
  .viraf-stats .viraf-stats__columns { height: auto; padding-left: 0; padding-right: 0; }
  /* Bề ngang phải bằng đúng vùng nội dung (Figma: thẻ tràn hết 390px của khung 430, lề 20).
     Bỏ trống thì cột thừa hưởng `width: min(100%,698px)` của dải trên và ra 360px. */
  .viraf-stats__left { width: 100% !important; height: auto; min-height: auto; }
  .viraf-stats__right { width: 100% !important; height: auto; min-height: 0; }
  .viraf-stats__left .viraf-stats__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 36px 30px; height: auto; }
  .viraf-stats__left .viraf-stat { padding: 24px 14px 26px; }
  .viraf-stats__left .viraf-stat .dmdc-counter-wrapper { height: auto; }
  .viraf-stats__left .viraf-stat .dmdc-counter-number-wrapper { margin-top: 0; }
  .viraf-stats__left .viraf-stat .dmdc-counter-title { width: 100%; }
  /* 1.000+ và 40+ tràn ngang */
  .viraf-stats__left .viraf-stat:nth-child(4) { grid-column: 1 / -1; }
  /* 40+ : bo góc trên, đoạn mô tả bên dưới bo góc dưới ⇒ nhìn ra MỘT thẻ liền mạch
     (desktop dựng bằng toạ độ absolute, ở đây trả hết về dòng chảy) */
  .viraf-stats__left .viraf-stat:last-child { grid-column: 1 / -1; display: block; padding: 22px 20px 8px; border-radius: 20px 20px 0 0; }
  /* Số và chữ "Quốc gia" trên CÙNG MỘT HÀNG (Figma). Flex phải đặt ở `.dmdc-counter` —
     `.dmdc-counter-wrapper` chỉ bọc đúng MỘT `.dmdc-counter`, đặt flex ở đó thì không có
     gì để xếp hàng ngang (đã đo: wrapper có 1 con duy nhất rộng 320px). */
  .viraf-stats__left .viraf-stat:last-child .dmdc-counter { position: static; display: flex; align-items: baseline; justify-content: center; gap: 12px; height: auto; }
  .viraf-stats__left .viraf-stat:last-child .dmdc-counter-wrapper { width: 100%; }
  .viraf-stats__left .viraf-stat:last-child .dmdc-counter-number-wrapper { position: static; width: auto; margin: 0; }
  .viraf-stats__left .viraf-stat:last-child .dmdc-counter-title { position: static; width: auto; margin: 0; white-space: normal; }
  .viraf-stats__left > .viraf-stats__copy { position: static !important; inset: auto !important; width: 100%; margin: 0 !important; padding: 0 20px 24px; border-radius: 0 0 20px 20px; background: #393838; }
  .viraf-stats__copy p { font-size: 16px; line-height: 24px; }
  .viraf-stats__right { height: auto; min-height: 0; padding: 26px 0 30px; }
  /* Hoa văn nền đặt theo toạ độ tuyệt đối 621×265 — ở khổ hẹp nó lệch hẳn. Vạch chia của
     Figma mobile vẽ lại bằng border dưới đây, nên bỏ hẳn ảnh. */
  .viraf-stats__right::after { content: none; }
  .viraf-stats__heading { position: relative !important; inset: auto; width: 100%; height: auto; padding: 0 24px 18px; }
  .viraf-stats__right .viraf-stats__grid { position: relative !important; inset: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; width: 100%; height: auto; margin: 0; }
  .viraf-stats__right .viraf-stat { padding: 16px 12px 22px; }
  /* Bản desktop cho `.dmdc-counter-title` bề ngang CỐ ĐỊNH 273.6px; ở ô rộng 180px của
     mobile, cả cụm số+chữ phình ra ngoài ô rồi bị `.viraf-stats__right{overflow:hidden}`
     XÉN. Đo được: số cột phải kết thúc ở x=408 trong khi bảng vàng hết ở x=395 ⇒ mất dấu
     "+" và đuôi chữ ("sức"→"sứ", "giới"→"gi"). Ép cả nhánh con về đúng bề ngang ô. */
  .viraf-stats__right .viraf-stat .dmdc-counter,
  .viraf-stats__right .viraf-stat .dmdc-counter-wrapper { width: 100%; max-width: 100%; }
  .viraf-stats__right .viraf-stat .dmdc-counter-number-wrapper { width: 100%; text-align: center; }
  .viraf-stats__right .viraf-stat .dmdc-counter-title { width: 100%; max-width: 100%; }
  /* HAI thứ phải sửa cùng lúc, thiếu một là vẫn tràn:
     (1) Cỡ số. Bản desktop ghi `font: 700 50px/70px … !important` với bộ chọn (0,3,0);
         rule gọn `.viraf-stat .dmdc-counter-number-wrapper { font-size: 36px }` ở dưới THUA
         cả về `!important` lẫn độ ưu tiên, nên số vẫn dựng ở 50px.
     (2) `min-width` của ô lưới. Ô grid mặc định `min-width: auto` = không co dưới min-content;
         cộng `white-space: nowrap` của số ⇒ khi counter chạy xong tới "20.000+" thì min-content
         thành 183px và ÉP hai cột `1fr` phình 180 → 208 (tổng 416 > bảng 360).
     Đo được lúc chưa cuộn thì vừa khít (chữ mới là "0+"), cuộn xong mới vỡ — nên chỉ chụp
     màn hình tĩnh ở đầu trang là KHÔNG thấy lỗi. */
  .viraf-stats__right .viraf-stat { min-width: 0; }
  .viraf-stats__right .viraf-stat .dmdc-counter-number-wrapper { font: 700 30px/40px var(--viraf-font-display) !important; }
  .viraf-stats__left .viraf-stat { min-width: 0; }
  .viraf-stats__left .viraf-stat .dmdc-counter-number-wrapper { font: 700 40px/50px var(--viraf-font-display) !important; }
  .viraf-stats__right .viraf-stat:nth-child(2),
  .viraf-stats__right .viraf-stat:nth-child(4) { border-right: 1px solid rgba(255,255,255,0.75); }
  .viraf-stats__right .viraf-stat:nth-child(2),
  .viraf-stats__right .viraf-stat:nth-child(3) { border-bottom: 1px solid rgba(255,255,255,0.75); }
  .viraf-stat .dmdc-counter-number-wrapper { font-size: 36px; }
  .viraf-stat .dmdc-counter-title { font-size: 14px; }
  /* ---- MẪU CHI TIẾT BÀI VIẾT ----
     BREADCRUMB ("menu điều hướng") vỡ nát: `ul` đã là flex `nowrap`, nhưng mỗi `li` có
     `min-width: 0` nên CO LẠI và CHỮ TỰ XUỐNG DÒNG BÊN TRONG — đo được "Trang chủ" cao 52px
     (2 dòng), "Tin Nổi Bật" cao 78px (3 dòng), nhìn ra như mấy cột chữ chồng lên nhau ở góc
     trái. Chữa: cấm ngắt dòng trong từng mục rồi cho cả dải cuộn ngang khi không đủ chỗ. */
  body.viraf-site .viraf-post__crumbs .dmdc-breadcrumbs-list {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body.viraf-site .viraf-post__crumbs .dmdc-breadcrumbs-list::-webkit-scrollbar { display: none; }
  body.viraf-site .viraf-post__crumbs .dmdc-breadcrumb-item { flex: 0 0 auto; white-space: nowrap; }
  /* Mục cuối (tên bài) có thể rất dài — cho phép co và cắt bằng dấu … thay vì đẩy dài mãi. */
  body.viraf-site .viraf-post__crumbs .dmdc-breadcrumb-item.active { flex: 0 1 auto; min-width: 0; }
  body.viraf-site .viraf-post__crumbs .dmdc-breadcrumb-item.active .dmdc-breadcrumb-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Tiêu đề: bản desktop quá lớn ở khổ hẹp (đo: 4 dòng, tràn sát mép). */
  body.viraf-site .viraf-post__title h1 { font-size: 26px !important; line-height: 34px !important; }
  /* Thanh chia sẻ nằm ngang: giãn đều, chừa khoảng thở trên/dưới. */
  body.viraf-site .viraf-post__share .dmdc-share-bar { gap: 12px !important; }
  body.viraf-site .viraf-post__meta { margin: 6px 0 18px; }

  /* ---- TRANG TÀI LIỆU ----
     Trước đây KHÔNG có nhánh mobile nào, nên thẻ giữ nguyên `flex: 0 0 48.21% !important`
     của desktop: ở màn 430 thành **174px** — nửa phải trang bỏ trống, chữ vỡ vụn. Kèm theo
     `max-height: 5 dòng` của danh sách khiến nội dung BỊ CẮT CỤT giữa dòng (đo: thẻ
     174×297px, `overflow: hidden`).
     Mobile: mỗi thẻ một hàng, danh sách hiện HẾT (bỏ cuộn lồng — cuộn trong cuộn trên điện
     thoại rất khó dùng, và khi mỗi hàng chỉ còn một thẻ thì lý do "hai thẻ cao bằng nhau"
     không còn). Kéo chồm lên băng vàng giảm còn 40px vì băng ở mobile chỉ cao ~170px. */
  body.viraf-site .viraf-doc-hero { min-height: 0; padding: 40px 0 76px; }
  body.viraf-site .viraf-doc-hero__title h1 { font-size: 26px; line-height: 34px; }
  body.viraf-site .viraf-doc-grid { padding-bottom: 48px; }
  body.viraf-site .viraf-doc-grid__row { gap: 24px; margin-top: -40px; }
  body.viraf-site .viraf-doc-card { flex: 0 0 100% !important; max-width: 100% !important; padding: 22px 20px 24px !important; }
  body.viraf-site .viraf-doc-card__title h2 { font-size: 20px; line-height: 28px; }
  body.viraf-site .viraf-doc-list { max-height: none; overflow-y: visible; padding-right: 0; }

  .viraf-brands { padding: 50px 20px; }
  .viraf-brands .viraf-section__row { width: 100% !important; max-width: 100% !important; }
  /* Figma 4059:29 (mobile): logo xếp LƯỚI 3 CỘT đều nhau + chấm phân trang, KHÔNG phải
     "logo cloud" thả trôi như desktop. Bản desktop ép `display:flex` + `grid-template-columns:
     none !important` nên ở đây phải trả về grid, cũng bằng `!important` (cùng độ ưu tiên
     (0,2,0), thắng nhờ đứng sau).
     Số cột lấy từ `--lg-cols-mobile` — biến do style-engine phát từ CHÍNH ô cài đặt `columns`
     của widget, nên chỉnh trong Builder vẫn ăn; 3 chỉ là giá trị dự phòng. */
  .viraf-logo-group .dmdc-logo-grid-container {
    display: grid !important;
    grid-template-columns: repeat(var(--lg-cols-mobile, 3), minmax(0, 1fr)) !important;
    gap: 30px 12px !important;
    justify-items: center;
    align-items: center;
  }
  .viraf-logo-group .dmdc-logo-item { width: 100% !important; }
  .viraf-logo-group .dmdc-logo-img { max-width: 100% !important; max-height: 46px !important; }
  .viraf-brands .viraf-eyebrow .dmdc-heading-title { font-size: 24px !important; line-height: 28px !important; }
  .viraf-brands .viraf-title .dmdc-heading-title { font-size: 30px !important; line-height: 36px !important; }
  .viraf-brand-label .btn { width: 100%; padding: 0 !important; font-size: 18px !important; line-height: 40px !important; }
  .viraf-testimonials__slider { padding: 42px 20px; }
  /* ≤700 (Figma Mobile 192:364): tấm vàng 390x332 bo 20px, 3 thẻ xếp dọc khe 30px */
  .viraf-news { margin-top: 30px; padding: 0 20px; }
  .viraf-news__intro { padding: 20px 29px 24px !important; }
  .viraf-news__slider { padding: 20px 0 0 !important; }
  .viraf-news-slider .post-title,
  .viraf-news-slider .post-title a { font-size: 20px !important; line-height: 26px !important; }
  .viraf-news-slider .post-excerpt { font-size: 18px !important; line-height: 24px !important; }
  .viraf-testimonials__heading .dmdc-heading-title,
  .viraf-news__heading .dmdc-heading-title { font-size: 30px; line-height: 40px; }
  .viraf-footer__newsletter-row { display: grid !important; grid-template-columns: 1fr; }
  .viraf-footer__newsletter-logo, .viraf-footer__newsletter-copy, .viraf-footer__newsletter-form { grid-column: 1; }
  .viraf-footer__newsletter-logo { border-radius: 20px; }
  /* Widget Liên hệ nổi: thu nhỏ nút và sát mép hơn trên điện thoại. Đặt ở :root để nút
     "Lên đầu trang" tính lại vị trí theo cùng bộ số. */
  :root { --cw-size: 44px; --cw-gap: 10px; --cw-edge: 14px; }
  .dmdc-contact-widget.cw-mode-both .cw-label,
  .dmdc-contact-widget.cw-mode-text .cw-label { font-size: 14px; }
  .dmdc-contact-widget.cw-layout-horizontal { flex-wrap: wrap; justify-content: flex-end; }
  .viraf-footer__newsletter-row, .viraf-footer__main-row,
  .viraf-footer__bottom-row { width: 100% !important; max-width: 100% !important; flex-direction: column !important; }
  /* thân + đáy footer là GRID nên phải đổi grid-template-columns, flex-direction vô tác dụng */
  .viraf-footer__main-row { grid-template-columns: 1fr !important; row-gap: 30px !important; }
  /* phải huỷ grid-column: 1/3 của dải ≤1199: span 2 track sẽ TẠO CỘT NGẦM thứ hai,
     khiến grid-template-columns: 1fr không có tác dụng và 2 cột kênh vẫn nằm cạnh nhau */
  .viraf-footer__about,
  .viraf-footer__channels,
  .viraf-footer__hotlines { grid-column: 1 !important; }
  .viraf-footer__bottom-row { grid-template-columns: 1fr !important; }
  .viraf-footer__copyright { grid-column: 1; }
  .viraf-footer__copyright::before { display: none; }
  .viraf-footer__copyright p { text-align: left; white-space: normal; }
  .viraf-footer__newsletter-logo, .viraf-footer__newsletter-copy,
  .viraf-footer__about, .viraf-footer__channels, .viraf-footer__hotlines { flex: 0 0 100% !important; width: 100% !important; }
  /* Figma Mobile 192:364 giữ nguyên dạng viên thuốc ngang (390x43, nút 114px).
     Không xếp dọc: khung .dmdc-form-fields cao cố định 43px + overflow:hidden nên
     flex-direction:column sẽ cắt mất nút Đăng ký. */
  .viraf-newsletter-form .dmdc-form-fields { flex-direction: row; gap: 0; }
  .viraf-newsletter-form .dmdc-field-wrap { width: auto; }
  /* 130px (không phải 114px của Figma): module đặt min-width 120px cho nút và
     padding 12/24 qua selector ID + !important nên không co nhỏ hơn được. */
  .viraf-newsletter-form .dmdc-field-submit_button { flex: 0 0 130px; }
  .viraf-newsletter-form .dmdc-submit-btn { width: 100%; }
}