/* Viraf reusable component layer. Builder hooks use stable viraf-* classes. */
body.viraf-site { overflow-x: clip; }
body.viraf-site a { transition: color var(--viraf-transition), background-color var(--viraf-transition), opacity var(--viraf-transition); }
/* px chứ không phải 40vh: trong canvas Builder `vh` tính theo chiều cao iframe (= cả trang) nên
   40vh thành hơn 11000px, góp phần làm canvas phình và tạo vòng lặp cao dần. */
body.viraf-site .stch-main-wrapper { min-height: 420px; }
body.viraf-site #site-footer { margin-top: 0 !important; }
.viraf-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* ---------------------------------------------------------------------------
   L-19 — ẢNH WIDGET DỰNG RA 0×0 (đo 20/08: 151/493 ảnh trên 31/52 trang).

   Chuỗi nhân quả:
     1. style-engine.mjs:57 đặt `.dmdc-widget .dmdc-image-wrapper{display:inline-block}`
        ⇒ khung bọc CO THEO nội dung (shrink-to-fit).
     2. image.ejs:41 khi người dùng KHÔNG đặt Chiều rộng/Chiều rộng tối đa/Chiều cao thì
        tự thêm inline `width:100%` cho chính thẻ <img>.
     3. `width:100%` của con quy chiếu về khung bọc, mà khung bọc lại đang đo theo con
        ⇒ vòng tròn. Thẻ <img> có `loading="lazy"` nên lúc dàn trang chưa biết kích thước
        nội tại, phần trăm rơi về 0 ⇒ khung 0px ⇒ ảnh 0×0 ⇒ KHÔNG BAO GIỜ lọt vào tầm
        nhìn ⇒ bộ tải lười không kích hoạt ⇒ mãi mãi không có kích thước nội tại.
     4. Không hề có 404: tệp ảnh vẫn tốt (kiểm: /uploads/2024/09/image-19.webp là webp
        440×302 hợp lệ). Nên soi Network sẽ tưởng mọi thứ bình thường.

   image.ejs:88 ĐÃ vá đúng bệnh này nhưng CHỈ cho trường hợp người dùng tự gõ chiều rộng
   dạng %/vw; nhánh mặc định — nhánh chiếm đa số — vẫn hở. Sửa ở lõi được 1 dòng nhưng
   đổi cách dựng ảnh của cả 5 site nên để lại trong bảng nợ, chưa tự ý làm.

   Ở đây vá tại T2, phạm vi đúng theme Viraf. Loại trừ `.viraf-benefit__image` vì khối đó
   CỐ Ý ghim khung 105×105. */
body.viraf-site .dmdc-el--image:not(.viraf-benefit__image) > .dmdc-image-wrapper { display: block; width: 100%; }

/* Header */
#site-header.dmdc-site-header { position: sticky; inset: 0 0 auto; z-index: var(--stch-z-header); min-height: 80px; margin: 0; background: var(--viraf-black); box-shadow: none; }
.viraf-header { min-height: 80px; background: var(--viraf-black); }
.viraf-header__inner { min-height: 80px; margin: 0 auto; }
.viraf-header__logo { flex: 0 0 15% !important; width: 15% !important; }
.viraf-header__nav { flex: 0 0 85% !important; width: 85% !important; min-width: 0; }
.viraf-header .dmdc-site-logo img { display: block; }
.viraf-header .dmdc-nav-menu-wrapper, .viraf-header .navbar, .viraf-header .navbar-collapse { width: 100%; }
.viraf-header .navbar { padding: 0; }
.viraf-header .dmdc-menu { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 22px; margin: 0; padding: 0; list-style: none; }
.viraf-header .dmdc-menu > li { position: relative; white-space: nowrap; }
.viraf-header .dmdc-menu .nav-link, .viraf-header .dmdc-menu-link { color: var(--viraf-white); font: 600 18px/80px var(--viraf-font-body); padding: 0 !important; text-decoration: none; }
.viraf-header .dmdc-menu a:hover, .viraf-header .dmdc-menu a:focus-visible, .viraf-header .dmdc-menu .active > a { color: var(--viraf-yellow) !important; }
/* Menu xổ THƯỜNG (2–3 cấp). Panel mega menu CŨNG là `.dropdown-menu` nhưng có bố cục riêng
   theo Figma 106:500, nên phải loại nó ra bằng `:not(.dmdc-megamenu-panel)` — nếu không, 3
   dòng dưới (đều `!important`) sẽ đè chết padding/màu/cỡ chữ của panel. Đã dính: chữ trong
   panel bị đẩy về x18 thay vì x44 và dòng cao 56px thay vì 47px. */
.viraf-header .dropdown-menu:not(.dmdc-megamenu-panel) { top: 100% !important; min-width: 280px; margin: 0; padding: 10px 0; border: 0; border-radius: 0; background: var(--viraf-white); box-shadow: var(--viraf-shadow); }
.viraf-header .dropdown-menu:not(.dmdc-megamenu-panel) a { display: block; padding: 10px 18px !important; color: var(--viraf-copy) !important; font-size: 16px; font-weight: 400; line-height: 1.35 !important; white-space: normal; transition: background-color .15s ease, color .15s ease; }
/* HOVER + ĐANG XEM của menu cấp 2 phải GIỐNG MEGAMENU (yêu cầu 22/08).
   Đo trạng thái cũ: rê chuột chỉ đổi nền sang vàng NHẠT #fff7d4 còn chữ giữ nguyên #282828;
   và KHÔNG có kiểu dáng nào cho mục đang xem — đứng ở /chuyen-gia thì mục "Chuyên gia"
   trong menu "Về chúng tôi" trông y hệt mục thường (đo: màu rgb(40,40,40), nền trong suốt).
   Ngôn ngữ của megamenu (đo tại `.viraf-mm__list`):
     · nghỉ      #464646, đậm 400
     · rê chuột  nền vàng #FFCB05 + chữ ĐEN, cả dòng
     · đang xem  chữ ĐEN + đậm 600, nền trong suốt
   Chép đúng bộ ba đó sang đây. Đổi luôn màu nghỉ về `--viraf-copy` và đậm 400: giữ 600 như
   cũ thì mục "đang xem" (cũng 600) không còn gì để phân biệt với mục thường. */
.viraf-header .dropdown-menu:not(.dmdc-megamenu-panel) a:hover,
.viraf-header .dropdown-menu:not(.dmdc-megamenu-panel) a:focus-visible {
  background: var(--viraf-yellow);
  color: var(--viraf-black) !important;
}
.viraf-header .dropdown-menu:not(.dmdc-megamenu-panel) a.active,
.viraf-header .dropdown-menu:not(.dmdc-megamenu-panel) li.active > a {
  color: var(--viraf-black) !important;
  font-weight: 600 !important;
}

/* Shared section headings */
.viraf-section { width: 100%; padding: var(--viraf-section-y) var(--viraf-gutter); }
/* NT-10/NT-01: bề rộng khung do T1 quyết định (4 mốc `style.container_max_width*` = 1455px ⇒
   vùng nội dung 1425px sau khi trừ 2×15px padding của `.container`). Theme KHÔNG được ép
   width/max-width lên các hàng boxed nữa — trước đây ép `var(--viraf-page-grid)` là giải
   thuộc tính ở sai tầng, và ở >2K thì 80vw không có trần nên khung phình ra 2048px. */
.viraf-section__row { width: 100%; margin: 0 auto; }
.viraf-eyebrow, .viraf-title { text-align: center; }
.viraf-eyebrow .dmdc-heading-title { margin: 0 0 6px; color: var(--viraf-yellow); font-size: 30px; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.viraf-title .dmdc-heading-title { margin: 0; color: var(--viraf-ink); font-size: 50px; font-weight: 700; }
.viraf-title--display .dmdc-heading-title { font-family: var(--viraf-font-display); font-weight: 600; }

/* Hero */
.viraf-home-hero, .viraf-home-hero > .dmdc-el--container { width: 100%; max-width: none !important; padding: 0; }
/* Chiều cao hero suy từ CHIỀU RỘNG, không dùng `vh`.
   Ảnh banner gốc 1920x800 (cả 5 file) ⇒ aspect-ratio 12/5: ở 1920 ra đúng 800px của thiết kế
   và ảnh không bị cắt ở bất kỳ bề rộng nào.
   Vì sao KHÔNG dùng vh: iframe canvas Builder cao bằng CẢ TRANG (đo được 29353px) chứ không phải
   một viewport, nên `80vh` giải ra 23482px — hero phình 23 nghìn pixel, ảnh `cover` bị kéo giãn
   cực đại chỉ còn một vùng màu ô liu. Nó còn tạo vòng lặp: vh lớn → trang cao → iframe cao hơn →
   vh lớn hơn. Chiều cao cũ (80vh) cũng lệch thiết kế: màn cao 1200px cho 960px thay vì 800px. */
.viraf-hero-slider { width: 100%; aspect-ratio: 12 / 5; }
.viraf-hero-slider .dmdc-image-slider-wrapper,
.viraf-hero-slider .swiper,
.viraf-hero-slider .swiper-wrapper,
.viraf-hero-slider .swiper-slide { width: 100%; height: 100% !important; min-height: 0 !important; }
.viraf-hero-slider .swiper-pagination-bullet { background: var(--viraf-white); opacity: .6; }
.viraf-hero-slider .swiper-pagination-bullet-active { width: 24px; border-radius: 8px; background: var(--viraf-yellow); opacity: 1; }

/* Services */
.viraf-services { background: var(--viraf-white); }
/* L-17: style-engine đặt `overflow: hidden` cho MỌI container có `width` riêng ⇒ 2 mũi tên đặt
   ngoài mép swiper (inset − 78px) bị cắt mất 13/25px mỗi bên. Phải mở overflow ở CẢ 3 tầng tổ
   tiên (wrapper → hàng boxed → cột), không chỉ ở widget slider.
   `.viraf-services__col` do fix-viraf-services-clip-v6.mjs gắn vào container cột — trước đó cột
   chỉ có `dmdc-container-flex w-100`, không có class ổn định nào để CSS theme bắt (NT-20). */
/* Hàng + cột mở overflow để mũi tên (nằm ngoài mép swiper) không bị cắt; còn WRAPPER thì
   `overflow-x: clip` để các slide kế tiếp tràn sang phải KHÔNG làm trang có thanh cuộn ngang.
   Wrapper rộng đúng viewport nên mũi tên (luôn nằm trong viewport) vẫn hiện đủ.
   Dùng `clip` chứ không `hidden`: `hidden` một trục sẽ biến trục còn lại thành `auto`. */
.viraf-services { overflow-x: clip !important; overflow-y: visible !important; }
.viraf-services .viraf-section__row,
.viraf-services__col { overflow: visible !important; }
/* Bỏ padding-x 15px của cột để swiper rộng đúng 1425px (Figma: 4 thẻ 352px, mạch 357.6px,
   trải từ x=65 đến 1490 trong khung 1556 = trùng vùng nội dung 1425px). */
.viraf-services__col { padding: 0 !important; }
.viraf-services .viraf-eyebrow .dmdc-heading-title { margin: 0 !important; font: 700 30px/26px var(--viraf-font-body) !important; letter-spacing: 6px; }
.viraf-services .viraf-title .dmdc-heading-title { margin: 8px 0 0 !important; font: 700 50px/70px var(--viraf-font-display) !important; }
/* `inset` = phần mặt nạ trắng ăn VÀO trong swiper. Figma cho 4 thẻ hiện đủ trong khung 1425 nên
   ở khung đủ rộng inset phải là 0; bản cũ khoá sàn `max(55px, …)` nên mặt nạ liếm 55px và CẮT MẤT
   mép trái thẻ 01 (đã thấy trên ảnh chụp). Vẫn giữ 55px cho khung hẹp để mũi tên không ra ngoài
   màn hình — chuyển mốc bằng media query ở cuối khối này. */
/* `bleed` = bề rộng mặt nạ trắng chạy ra NGOÀI mép swiper để che các slide kế tiếp.
   Phải phủ tới mép màn hình: ở 1920 cần 247px, ở 2560 cần 567px — bản cũ dùng `vw/10`
   (192px ở 1920) nên còn hở ~55px và lộ một phần thẻ thứ 5. Cho 50vw là luôn đủ ở mọi
   độ phân giải; phần thừa đã bị `overflow-x: clip` của `.viraf-services` cắt nên vô hại.
   Mặt nạ có z-index 5, mũi tên z-index 20 nên mũi tên vẫn nằm trên. */
.viraf-service-slider { --viraf-service-bleed: 50vw; --viraf-service-inset: 55px; position: relative; margin-top: 39px; overflow: visible !important; }
.viraf-service-slider::before,
.viraf-service-slider::after { content: ''; position: absolute; z-index: 5; top: 0; bottom: 0; width: calc(var(--viraf-service-bleed) + var(--viraf-service-inset)); background: var(--viraf-white); pointer-events: none; }
.viraf-service-slider::before { left: calc(-1 * var(--viraf-service-bleed)); }
.viraf-service-slider::after { right: calc(-1 * var(--viraf-service-bleed)); }
.viraf-service-slider .dmdc-image-slider-wrapper { position: static !important; overflow: visible; }
/* Bề rộng slider = khung nội dung chuẩn (1425px ở ≥1782px). Trước đây trừ 110px chỗ mũi tên
   nên ở 1920 chỉ còn 1396px; mũi tên nằm NGOÀI .swiper (inset - 78px) nên không cần trừ. */
.viraf-service-slider .swiper { position: static !important; width: 100% !important; max-width: 100% !important; height: 597px !important; min-height: 597px !important; margin: 0 auto; padding: 0; box-sizing: border-box; background: transparent !important; overflow: visible; }
.viraf-service-slider .swiper-slide { position: relative; isolation: isolate; display: flex !important; flex-direction: column; justify-content: flex-start !important; align-items: stretch !important; height: 100% !important; overflow: hidden; border-radius: 20px; background-color: var(--viraf-black); background-position: top center !important; background-size: 100% auto !important; }
.viraf-service-slider .swiper-slide::before { content: ''; position: relative; z-index: 2; display: block; flex: 0 0 auto; width: 100%; aspect-ratio: 352 / 329; overflow: hidden; border-radius: 20px; background-image: inherit; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; box-shadow: none; }
.viraf-service-slider .swiper-slide::after { content: ''; position: absolute; z-index: 4; top: calc(100% - 298px); left: 50%; width: 60px; height: 60px; transform: translateX(-50%); background: url('../../assets/2024/09/Group-693632.svg') center/60px 60px no-repeat; box-shadow: none; }
.viraf-service-slider .dmdc-slider-content-overlay { position: relative !important; inset: auto !important; z-index: 1; display: block !important; flex: 0 0 309px; height: 309px; min-height: 309px; margin-top: -41px; padding: 78px 30px 17px !important; border-radius: 20px; text-align: left !important; background: var(--viraf-black) !important; color: var(--viraf-white) !important; }
.viraf-service-slider .dmdc-slider-content-overlay::before { content: '01'; display: block; margin-bottom: 6px; color: var(--viraf-white); font: 400 25px/30px var(--viraf-font-display); }
.viraf-service-slider .dmdc-slider-content-overlay::after { content: ''; position: absolute; top: 101px; left: 64px; width: 40px; height: 1.5px; border-radius: 20px; background: var(--viraf-white); }
.viraf-service-slider .swiper-slide:nth-child(2) .dmdc-slider-content-overlay::before { content: '02'; }
.viraf-service-slider .swiper-slide:nth-child(3) .dmdc-slider-content-overlay::before { content: '03'; }
.viraf-service-slider .swiper-slide:nth-child(4) .dmdc-slider-content-overlay::before { content: '04'; }
.viraf-service-slider .swiper-slide:nth-child(5) .dmdc-slider-content-overlay::before { content: '05'; }
.viraf-service-slider .swiper-slide[data-swiper-slide-index='1'] .dmdc-slider-content-overlay::before { content: '02'; }
.viraf-service-slider .swiper-slide[data-swiper-slide-index='2'] .dmdc-slider-content-overlay::before { content: '03'; }
.viraf-service-slider .swiper-slide[data-swiper-slide-index='3'] .dmdc-slider-content-overlay::before { content: '04'; }
.viraf-service-slider .swiper-slide[data-swiper-slide-index='4'] .dmdc-slider-content-overlay::before { content: '05'; }
.viraf-service-slider .dmdc-slider-content-overlay > .container { width: 100%; max-width: none !important; padding: 0; }
.viraf-service-slider .slide-title { min-height: 60px; margin: 0 0 9px !important; color: var(--viraf-yellow) !important; font: 700 22px/30px var(--viraf-font-display) !important; }
.viraf-service-slider .slide-desc { width: calc(100% + 9px); margin: 0 0 0 -9px !important; color: var(--viraf-white) !important; opacity: 1 !important; font: 400 20px/26px var(--viraf-font-body) !important; }
.viraf-service-slider .viraf-service-desc { padding-left: 30px !important; list-style: disc outside; }
.viraf-service-slider .viraf-service-desc li { margin: 0; padding: 0; }
.viraf-service-slider .swiper-pagination { display: none !important; }
.viraf-service-slider .swiper-button-prev,
.viraf-service-slider .swiper-button-next { position: absolute !important; z-index: 20 !important; top: calc(100% - 298px); width: 45px; height: 25px; margin-top: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; color: transparent !important; opacity: 1 !important; cursor: pointer; pointer-events: auto !important; }
.viraf-service-slider .swiper-button-prev { left: calc(var(--viraf-service-inset) - 78px); transform: translateY(-50%) rotate(90deg); }
.viraf-service-slider .swiper-button-next { right: calc(var(--viraf-service-inset) - 78px); transform: translateY(-50%) rotate(-90deg); }
.viraf-service-slider .swiper-button-prev::before,
.viraf-service-slider .swiper-button-next::before { content: ''; display: block; width: 45px; height: 25px; background-color: var(--viraf-copy); -webkit-mask: url('../../assets/2024/09/Group-19276.svg') center/45px 25px no-repeat; mask: url('../../assets/2024/09/Group-19276.svg') center/45px 25px no-repeat; transition: background-color .2s ease; }
.viraf-service-slider .swiper-button-prev:hover::before,
.viraf-service-slider .swiper-button-next:hover::before { background-color: var(--viraf-yellow); }
/* ≥1782px khung đạt đủ 1425px: mặt nạ dừng đúng mép swiper (inset 0) để 4 thẻ hiện trọn,
   mũi tên lùi ra ngoài khung 45px như Figma 4003:20 (thẻ 65..1490 trong khung 1556).
   Phần tử rộng 45x25 quay 90° nên hộp bao dịch phải 10px ⇒ trừ thêm 10px khi tính left/right. */
@media (min-width: 1782px) {
  .viraf-service-slider { --viraf-service-inset: 0px; }
  .viraf-service-slider .swiper-button-prev { left: -80px; }
  .viraf-service-slider .swiper-button-next { right: -80px; }
}
.viraf-service-slider .swiper-button-prev::after,
.viraf-service-slider .swiper-button-next::after { content: none; }

/* Why Viraf — Figma 4008:21 */
.viraf-why { min-height: 998px; padding: 77px var(--viraf-gutter) 90px; box-sizing: border-box; background: var(--viraf-beige); }
.viraf-why .viraf-eyebrow .dmdc-heading-title { margin: 0 !important; font: 700 30px/26px var(--viraf-font-body) !important; letter-spacing: 6px; }
.viraf-why .viraf-title .dmdc-heading-title { margin: 8px 0 0 !important; color: var(--viraf-black) !important; font: 700 50px/70px var(--viraf-font-display) !important; }
.viraf-benefits { display: flex; flex-wrap: wrap !important; justify-content: flex-start; width: min(calc(100vw - 40px), 1424.26px) !important; max-width: none !important; gap: 30px 84.96px; margin: 77px auto 0; overflow: visible !important; }
.viraf-benefit { position: relative; flex: 0 0 calc((100% - 84.96px) / 2) !important; width: calc((100% - 84.96px) / 2) !important; height: 310px; min-height: 310px; padding: 28px 35px 17px 129px !important; overflow: visible !important; background: transparent; }
.viraf-benefit::before { content: ''; position: absolute; z-index: 0; inset: 0 0 0 52px; border-radius: 20px; background: var(--viraf-white); }
/* `> *` KHONG duoc ap len .dmdc-bg-layer: engine dat lop nen bang
   `position:absolute; inset:0` (style-engine.mjs:20), doi thanh `relative` la no
   thanh 0x0 va ANH NEN MAT HAN (do duoc 15/08: hero /tam-nhin box 0x0, bang chi con
   mau nen phang). Chinh engine cung dung `:not(.dmdc-bg-layer)` cho rule tuong duong. */
.viraf-benefit > :not(.dmdc-bg-layer) { position: relative; z-index: 1; }
.viraf-benefit__image { position: absolute !important; z-index: 2 !important; top: 103px; left: 0; display: grid !important; place-items: center; width: 105px; height: 105px; margin: 0; }
.viraf-benefit__image .dmdc-widget-container,
.viraf-benefit__image .dmdc-image-wrapper { width: 105px; height: 105px; }
.viraf-benefit__image img { display: block; width: 105px !important; height: 105px !important; max-width: none !important; object-fit: contain; }
.viraf-benefit__title { flex: 0 0 35px; width: 100%; max-width: 436.772px; }
.viraf-benefit__title .dmdc-heading-title { margin: 0 !important; color: var(--viraf-black); font: 700 25px/35px var(--viraf-font-display) !important; white-space: nowrap; }
.viraf-benefit__divider { flex: 0 0 3.4px; width: 62px !important; height: 3.4px; margin: 15px 0 15.6px; overflow: hidden; }
.viraf-benefit__divider .dmdc-divider-wrapper,
.viraf-benefit__divider .dmdc-divider { width: 62px; height: 3.4px; }
.viraf-benefit__divider .dmdc-divider-separator { width: 62px !important; border-top: 3.4px solid var(--viraf-yellow) !important; }
.viraf-benefit__text { width: calc(100% + 8px); margin-left: -8px; }
.viraf-benefit__text p,
.viraf-benefit__text ul { width: 100%; margin: 0; color: var(--viraf-copy); font: 400 20px/26px var(--viraf-font-body); text-align: left; }
.viraf-benefit__text ul { padding-left: 30px; list-style: disc outside; }
.viraf-benefit__text li { margin: 0; padding: 0; }

/* Statistics — Figma 68:32 */
.viraf-stats { position: relative; overflow: hidden; width: 100%; height: 551px; min-height: 551px; padding: 89px var(--viraf-gutter) 88px; box-sizing: border-box; background-color: var(--viraf-black); }
.viraf-stats::before { content: none; }
.viraf-stats > .dmdc-bg-layer { opacity: 1; background-position: center !important; background-size: cover !important; }
.viraf-stats > *:not(.dmdc-bg-layer) { position: relative; z-index: 1; }
/* 698 + 31 (gap) + 696 = 1425 = đúng vùng nội dung của `.container` (T1) ⇒ không ép width nữa. */
.viraf-stats__columns { display: flex; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch; box-sizing: border-box; height: 374px; margin: 0 auto; gap: 31px; color: var(--viraf-white); overflow: visible !important; }
.viraf-stats__left { position: relative; flex: 0 0 698px !important; width: 698px !important; min-width: 698px; max-width: none !important; height: 374px; min-height: 374px; }
.viraf-stats__right { flex: 0 0 696px !important; width: 696px !important; min-width: 696px; max-width: none !important; height: 373.435px; min-height: 373.435px; }
.viraf-stats__left .viraf-stats__grid { display: grid !important; grid-template-columns: repeat(3,212px); grid-template-rows: 203px 152px; gap: 19px 31px; width: 698px; height: 374px; overflow: visible !important; }
.viraf-stats__left .viraf-stat { display: block; padding: 0; border-radius: 20px; background: #393838; overflow: hidden; }
.viraf-stat .dmdc-counter-number-wrapper { display: flex; align-items: baseline; justify-content: center; gap: 0; }
.viraf-stat .dmdc-counter-number-prefix,
.viraf-stat .dmdc-counter-number,
.viraf-stat .dmdc-counter-number-suffix { margin: 0; padding: 0; }
.viraf-stats__left .viraf-stat .dmdc-counter-wrapper { width: 100%; height: 100%; }
.viraf-stats__left .viraf-stat .dmdc-counter-number-wrapper { margin-top: 30px; color: var(--viraf-yellow) !important; font: 700 50px/70px var(--viraf-font-display) !important; white-space: nowrap; }
.viraf-stats__left .viraf-stat .dmdc-counter-title { width: 176px; margin: 0 auto; color: var(--viraf-white) !important; font: 400 20px/26px var(--viraf-font-body); text-align: center; }
.viraf-stats__left .viraf-stat:last-child { position: relative; grid-column: 1 / 4; padding: 0; }
.viraf-stats__left .viraf-stat:last-child .dmdc-counter { position: relative; width: 100%; height: 152px; }
.viraf-stats__left .viraf-stat:last-child .dmdc-counter-number-wrapper { position: absolute; top: 27px; left: 42px; width: 81px; margin: 0; text-align: center; }
.viraf-stats__left .viraf-stat:last-child .dmdc-counter-title { position: absolute; top: 52px; left: 136px; width: auto; margin: 0; white-space: nowrap; }
.viraf-stats__left > .viraf-stats__copy { position: absolute !important; z-index: 4 !important; top: 269px; left: 251.66px; display: block !important; width: 411.338px; margin: 0 !important; visibility: visible !important; opacity: 1 !important; }
.viraf-stats__copy p { margin: 0; color: var(--viraf-white); font: 400 20px/26px var(--viraf-font-body); }
.viraf-stats__right { position: relative; overflow: hidden; padding: 0; border-radius: 20px; background-color: var(--viraf-yellow) !important; }
.viraf-stats__right > .dmdc-bg-layer { z-index: 0; opacity: 1; background-position: center !important; background-size: cover !important; }
.viraf-stats__right::before { content: none; }
.viraf-stats__right::after { content: ''; position: absolute; z-index: 1; top: 92.49px; left: 37.95px; width: 621.607px; height: 265.692px; background: url('../../assets/2024/09/Group-693612.svg') center/100% 100% no-repeat; pointer-events: none; }
.viraf-stats__right > *:not(.dmdc-bg-layer) { position: relative; z-index: 2; }
.viraf-stats__heading { position: absolute !important; top: 23.69px; left: 129.8px; width: 436.373px; height: 38.359px; }
.viraf-stats__heading .dmdc-heading-title { margin: 0 !important; color: var(--viraf-black) !important; font: 700 22px/35px var(--viraf-font-display) !important; text-align: center; }
.viraf-stats__right .viraf-stats__grid { position: absolute !important; z-index: 2; top: 62px; left: 0; display: grid !important; grid-template-columns: repeat(2,1fr); grid-template-rows: 176.03px 135.405px; width: 696px; height: 311.435px; gap: 0; overflow: visible !important; }
.viraf-stats__right .viraf-stat { display: block; padding: 0; border: 0; background: transparent; }
.viraf-stats__right .viraf-stat .dmdc-counter-number-wrapper { margin: 0; color: var(--viraf-white) !important; font: 700 50px/70px var(--viraf-font-display) !important; white-space: nowrap; }
.viraf-stats__right .viraf-stat .dmdc-counter-title { width: 273.607px; margin: 2px auto 0; color: var(--viraf-white) !important; font: 400 20px/26px var(--viraf-font-body); text-align: center; }

/* Representative brands — Figma 4010:22 */
.viraf-brands { box-sizing: border-box; padding: 50px 20px; background: var(--viraf-white); }
/* Figma 4010:22: nhóm logo rộng 1426px đặt tại x=247 = đúng vùng nội dung của `.container` (T1). */
.viraf-brands .viraf-eyebrow .dmdc-heading-title { margin: 0 0 6px !important; color: var(--viraf-yellow) !important; font: 700 30px/33px var(--viraf-font-body) !important; text-transform: uppercase; }
.viraf-brands .viraf-title .dmdc-heading-title { margin: 0 !important; color: var(--viraf-black) !important; font: 700 50px/58px var(--viraf-font-body) !important; }
.viraf-brand-label { display: block !important; width: 100% !important; margin: 0; text-align: center; }
.viraf-brand-label--cosmetics { margin-top: 40px; }
.viraf-brand-label .dmdc-button-wrapper { display: flex; justify-content: center; width: 100%; }
.viraf-brand-label .btn { display: inline-flex !important; align-items: center; justify-content: center; width: auto; min-width: 0; padding: 5px 50px 10px !important; border: 0 !important; border-radius: 50px !important; background: var(--viraf-yellow-hover) !important; box-shadow: none !important; color: var(--viraf-black) !important; font: 700 30px/40px var(--viraf-font-body) !important; text-decoration: none; white-space: normal; pointer-events: none; }
.viraf-brand-label .btn:hover,
.viraf-brand-label .btn:focus { background: var(--viraf-yellow-hover) !important; box-shadow: none !important; color: var(--viraf-black) !important; transform: none; }
.viraf-logo-group { display: block !important; width: 100% !important; margin: 30px 0; overflow: visible !important; }
.viraf-logo-group .dmdc-logo-grid-wrapper,
.viraf-logo-group .dmdc-logo-grid-container { width: 100%; }
/* Figma 4010:22 xếp 37 logo TỰ DO theo 5 dải, mỗi logo giữ tỉ lệ gốc với cỡ khác nhau
   (rộng 62–235px, cao 18–83px) — không phải lưới ô đều 100x80. Dùng flex-wrap canh giữa +
   giới hạn theo cả 2 chiều để mỗi logo tự lấy kích thước tự nhiên: logo ngang-dẹt bị chặn
   theo chiều rộng, logo vuông bị chặn theo chiều cao ⇒ ra bố cục nhiều cỡ như thiết kế. */
.viraf-logo-group .dmdc-logo-grid-container { display: flex !important; flex-wrap: wrap !important; align-items: center; justify-content: center; gap: 44px 56px !important; grid-template-columns: none !important; }
.viraf-logo-group .dmdc-logo-item { display: flex !important; flex: 0 0 auto !important; align-items: center; justify-content: center; width: auto !important; min-width: 0; min-height: 0; padding: 0 !important; aspect-ratio: auto !important; background: transparent !important; }
.viraf-logo-group .dmdc-logo-img { display: block; width: auto !important; height: auto !important; max-width: 235px !important; max-height: 72px !important; object-fit: contain !important; opacity: 1 !important; filter: none !important; transform: none !important; }

/* Testimonials — Figma 4012:23 */
.viraf-testimonials { position: relative; overflow: hidden; padding: 0; background: var(--viraf-white); }
.viraf-testimonials__row { position: relative; display: block !important; width: 100% !important; max-width: none !important; min-height: 560px; overflow: visible !important; }
/* Khối tràn mép: mọi kích thước neo vào --viraf-vw (trần 1920) để >2K giữ đúng dáng
   thiết kế thay vì giãn theo viewport. Figma 4012:23: tấm nền xám rộng 1271/1920 = 66.2%. */
.viraf-testimonials__row > .viraf-testimonials__intro { position: absolute !important; z-index: 1 !important; inset: 0 auto 0 0; display: grid !important; grid-template-columns: calc(var(--viraf-vw) * .08) calc(var(--viraf-vw) * .30); grid-template-rows: auto auto; align-content: start; column-gap: calc(var(--viraf-vw) * .03); flex: none !important; width: calc(var(--viraf-vw) * .60) !important; height: auto; padding: 100px 150px 100px 0; overflow: visible !important; background: var(--viraf-soft); }
.viraf-testimonials__mark { grid-row: 1 / 3; align-self: start; width: calc(var(--viraf-vw) * .08); }
.viraf-testimonials__mark img { display: block; width: calc(var(--viraf-vw) * .08) !important; max-width: 179px; height: auto; }
.viraf-testimonials__heading { grid-column: 2; }
.viraf-testimonials__copy { grid-column: 2; }
.viraf-testimonials__heading .dmdc-heading-title { margin: 0 0 20px; color: var(--viraf-black); font: 700 48px/1.12 var(--viraf-font-display); white-space: pre-line; }
.viraf-testimonials__copy p { margin: 0; color: var(--viraf-black); font: 400 18px/1.45 var(--viraf-font-body); }
.viraf-testimonials__row > .viraf-testimonials__slider { position: relative !important; left: calc(var(--viraf-vw) * .40); z-index: 3 !important; flex: none !important; width: calc(var(--viraf-vw) * .50) !important; min-width: 0; padding: 50px 0; overflow: visible !important; }
.viraf-testimonial-carousel,
.viraf-testimonial-carousel .dmdc-testi-carousel { width: 100%; max-width: none; }
.viraf-testimonial-carousel .swiper { width: calc(var(--viraf-vw) * .70) !important; max-width: none !important; overflow: hidden; }
.viraf-testimonial-carousel .swiper-wrapper { align-items: stretch; }
.viraf-testimonial-carousel .swiper-slide { display: flex; height: auto !important; padding: 20px 20px 0 !important; border-radius: 20px; background: var(--viraf-black); }
.viraf-testimonial-carousel .tc-slide,
.viraf-testimonial-carousel .tc-card { width: 100%; height: 100%; }
.viraf-testimonial-carousel .tc-card { display: flex !important; flex-direction: column; justify-content: space-between; padding: 0 0 20px !important; border-radius: 20px !important; background: var(--viraf-black) !important; }
.viraf-testimonial-carousel .tc-content { display: flex; flex: 1 1 auto; flex-direction: column; margin: 0 !important; color: var(--viraf-white) !important; font: 400 18px/1.55 var(--viraf-font-body) !important; font-style: normal !important; overflow-wrap: anywhere; }
.viraf-testimonial-carousel .tc-content::before,
.viraf-testimonial-carousel .tc-content::after { content: ''; display: block; flex: 0 0 auto; width: 36px; height: 23px; background: url('/uploads/2024/09/Vector.png') center/contain no-repeat; }
.viraf-testimonial-carousel .tc-content::before { margin: 0 0 10px; }
.viraf-testimonial-carousel .tc-content::after { margin: 10px 0 0 auto; transform: rotate(180deg); }
.viraf-testimonial-carousel .tc-footer { display: flex; align-items: center; gap: 15px; margin-top: 15px; }
.viraf-testimonial-carousel .tc-avatar { width: 97px; height: 97px; margin: 0; border-radius: 50%; object-fit: cover; flex: 0 0 97px; }
.viraf-testimonial-carousel .tc-meta { min-width: 0; }
.viraf-testimonial-carousel .tc-name { margin: 0 0 3px; color: var(--viraf-white) !important; font: 600 16px/1.3 var(--viraf-font-display) !important; }
.viraf-testimonial-carousel .tc-title { margin: 0; color: var(--viraf-white) !important; font: 400 15px/1.3 var(--viraf-font-display) !important; }
.viraf-testimonial-carousel .swiper-pagination { display: none !important; }
.viraf-testimonial-carousel .swiper-button-prev,
.viraf-testimonial-carousel .swiper-button-next { top: auto !important; bottom: 0 !important; z-index: 20; display: flex !important; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--viraf-yellow) !important; box-shadow: none !important; color: var(--viraf-white) !important; text-shadow: none !important; transform: none; transition: color .2s ease, background-color .2s ease; }
.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 .swiper-button-prev::after,
.viraf-testimonial-carousel .swiper-button-next::after { font-size: 24px !important; font-weight: 700; }
.viraf-testimonial-carousel .swiper-button-prev:hover,
.viraf-testimonial-carousel .swiper-button-next:hover { background: var(--viraf-white) !important; color: var(--viraf-yellow) !important; }

/* ===== News and Events — Figma 68:93 =====
   Số đo gốc (viewport 1920, khung 1425 tại x=247):
     tấm vàng   316x665 r20 tại x=247,y=0 — tràn 114px xuống footer (nền tối cao 478 bắt đầu y=551)
     H2         Raleway 700 50/70, đen, x=276 (padding-left 29), y=44
     mô tả      Afacad 400 20/26, #464646, y=207, rộng 244
     thẻ        3 cột 337px, khe 24px, x=613 → mép phải 1672
     ảnh        337x232 (aspect 337/232) r20
     tiêu đề    Raleway 700 22/28, đen, canh đều, cách ảnh 22px
     ngày       Raleway 400 14/30, #848484
     mô tả thẻ  Afacad 400 20/26, #464646, canh đều, 4 dòng
   Thứ tự DOM của post_grid là ngày → tiêu đề → mô tả, thiết kế cần tiêu đề → ngày → mô tả
   nên dùng flex order. Module ghi inline style (font-size/line-height) ⇒ cần !important. */
/* Figma: đáy tấm xám testimonials y=5228, đỉnh thẻ tin tức y=5413 ⇒ khoảng trắng 185px */
.viraf-news { margin-top: 185px; padding: 0 var(--viraf-gutter); overflow: visible !important; background: var(--viraf-white); }
.viraf-news__row { display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important; margin: 0 auto !important; overflow: visible !important; }
/* Tấm vàng cao 665px tràn xuống footer được ghép từ HAI nửa abut nhau — không dùng
   margin âm/z-index vì hai nửa nằm ở hai document khác nhau (page vs template footer):
     nửa trên = .viraf-news__intro       cao 551px, bo góc trên
     nửa dưới = .viraf-footer__newsletter-logo cao 114px, bo góc dưới (chứa logo)
   Hai nửa cùng bề rộng --viraf-left-rail và cùng khung boxed nên khít mạch. */
.viraf-news__intro { align-self: stretch; flex: 0 0 var(--viraf-left-rail) !important; width: var(--viraf-left-rail) !important; max-width: var(--viraf-left-rail) !important; padding: 44px 29px 0 !important; border-radius: 20px 20px 0 0; background: var(--viraf-yellow); }
/* Khe 50px giữa tấm vàng (mép phải 563) và thẻ đầu (x=613): dùng padding-left để
   vùng thẻ còn đúng 1059px ⇒ mỗi thẻ (1059 - 2*24)/3 = 337px. */
/* Không đặt padding-bottom ở đây: dải 34px đáy do `.viraf-news-slider .swiper` giữ (dot nằm
   trong đó). Đặt cả hai chỗ là cộng đôi 68px và đội cao khối. */
.viraf-news__slider { align-self: stretch; display: block !important; box-sizing: border-box; flex: 0 0 calc(100% - var(--viraf-left-rail)) !important; width: calc(100% - var(--viraf-left-rail)) !important; max-width: calc(100% - var(--viraf-left-rail)) !important; min-width: 0; padding: 0 0 0 50px !important; overflow: visible !important; }
/* Cỡ chữ/line-height của H2 nằm ở T3 (settings typography của widget) vì module heading
   ghi inline style — CSS thường không thắng được. Ở đây chỉ giữ màu/font/khoảng cách. */
.viraf-news__heading .dmdc-heading-title { max-width: 244px; margin: 0 0 23px; color: var(--viraf-black); font-family: var(--viraf-font-display); font-weight: 700; letter-spacing: 0; }
/* margin-top ở vỏ widget: module heading tự đặt margin cho <h2> nên margin-bottom
   khai ở .dmdc-heading-title không ăn. Figma: mô tả cách H2 23px (y=184 → 207). */
.viraf-news__copy { margin-top: 23px; }
.viraf-news__copy, .viraf-news__copy .dmdc-text-editor { max-width: 244px; }
.viraf-news__copy p { margin: 0; color: var(--viraf-copy); font: 400 20px/26px var(--viraf-font-body); }
/* Slider bài mới nhất: 3 thẻ/khung, khe 24px, 6 bài = 2 trang, điều hướng bằng dot.
   Figma không vẽ dot nhưng slider phải có điều khiển, nếu không 3 bài sau không tới được.
   Module post_slider tự phát <style> trong <body> (mục 10 của bảng cascade) nên các giá trị
   mặc định của nó (`.swiper{padding:10px 0 50px}`, `#wrapper-X .post-card-thumb{height:200px}`)
   thắng CSS theme ở <head> khi cùng độ đặc hiệu ⇒ phải !important. */
/* font-size/line-height 0: module in các dòng trắng giữa <style> và vỏ slider, chúng thành một
   dòng chữ cao ~28px (18px × 1.55) và đẩy cả dải thẻ xuống. Trả lại cỡ chữ ở vỏ bên trong. */
.viraf-news-slider { display: block !important; width: 100% !important; padding: 0 !important; font-size: 0; line-height: 0; }
.viraf-news-slider > .dmdc-widget-container { width: 100%; font-size: 18px; line-height: 1.55; }
/* Đáy 34px = khoảng trắng Figma từ đáy mô tả (y=517) tới hết khối trắng (y=551); dot nằm gọn
   trong dải này nên tổng chiều cao khối vẫn đúng 551px và tấm vàng cao đủ theo. */
.viraf-news-slider .swiper { width: 100%; padding: 0 0 34px !important; overflow: hidden; }
.viraf-news-slider .swiper-slide { height: auto; }
.viraf-news-slider .swiper-pagination { bottom: 0 !important; display: flex; align-items: center; justify-content: center; height: 12px; line-height: 0; }
.viraf-news-slider .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 4px !important; border-radius: 8px; background: #d3d3d3; opacity: 1; transition: width .25s ease, background-color .25s ease; }
.viraf-news-slider .swiper-pagination-bullet-active { width: 24px; background: var(--viraf-yellow) !important; }
.viraf-news-slider .post-card { border: 0 !important; border-radius: 0 !important; background: var(--viraf-white) !important; box-shadow: none !important; overflow: visible !important; }
.viraf-news-slider .post-card:hover { transform: none; border-color: transparent; box-shadow: none !important; }
.viraf-news-slider .post-card:hover .transition-transform { transform: none; }
.viraf-news-slider .post-card-thumb { height: auto !important; aspect-ratio: 337 / 232 !important; border-radius: 20px !important; overflow: hidden !important; background: #f3f3f3; }
.viraf-news-slider .post-card-thumb img { width: 100%; height: 100%; object-fit: cover !important; }
.viraf-news-slider .post-card-body { padding: 22px 0 0 !important; }
.viraf-news-slider .category-badge,
.viraf-news-slider .post-footer,
.viraf-news-slider .meta-icon { display: none !important; }
.viraf-news-slider .post-title { order: 1; margin: 0 !important; font-family: var(--viraf-font-display) !important; }
.viraf-news-slider .post-title,
.viraf-news-slider .post-title a { color: var(--viraf-black) !important; font: 700 22px/28px var(--viraf-font-display) !important; text-align: justify; text-decoration: none; }
.viraf-news-slider .post-title { -webkit-line-clamp: 3; }
.viraf-news-slider .post-title a:hover { color: var(--viraf-yellow-hover) !important; }
.viraf-news-slider .post-meta-top { order: 2; margin: 14px 0 0 !important; color: #848484 !important; font: 400 14px/30px var(--viraf-font-display) !important; opacity: 1 !important; }
.viraf-news-slider .post-excerpt { order: 3; margin: 6px 0 0 !important; color: var(--viraf-copy) !important; font: 400 20px/26px var(--viraf-font-body) !important; text-align: justify; opacity: 1 !important; -webkit-line-clamp: 4; }

/* Footer */
.viraf-footer { background: var(--viraf-black); color: var(--viraf-white); }
.viraf-footer__newsletter { padding: 0 var(--viraf-gutter); border-bottom: 0; }
/* Bề rộng do T1 quyết định; 3 hàng footer thẳng mép với .viraf-news__row vì cùng là `.container`
   (cùng max-width 1455px và cùng padding-x 15px ⇒ vùng nội dung 1425px bắt đầu tại x=247). */
.viraf-footer__newsletter-row, .viraf-footer__main-row, .viraf-footer__bottom-row { margin: 0 auto; }
/* Figma 68:93 — 4 cột theo px của khung 1425: 316 (tấm vàng) | 252 (khe) | 390 (chữ) | 467 (form).
   Dùng fr để giữ đúng tỉ lệ ở mọi bề rộng; tổng cũ 20+15+25+40=102% từng gây tràn. */
.viraf-footer__newsletter-row { display: grid !important; grid-template-columns: 316fr 252fr 390fr 467fr; align-items: center; min-height: 140px; gap: 0; }
/* Nửa dưới tấm vàng: cao đúng 114px, dính mép trên của footer (xem .viraf-news__intro). */
.viraf-footer__newsletter-logo { align-self: start; grid-column: 1; display: grid !important; place-items: center; box-sizing: border-box; width: 100% !important; height: 114px; padding: 0 24px 20px; border-radius: 0 0 20px 20px; background: var(--viraf-yellow); }
/* L-19 tập 2: logo trong tấm vàng có setting Chiều rộng = 226px nên KHÔNG đi qua nhánh
   `width:100%` ở trên, nhưng `height:auto` + `loading="lazy"` vẫn cho hộp 226×0. Hộp
   DIỆN TÍCH BẰNG 0 thì Chrome không coi là lọt tầm nhìn ⇒ ảnh không tải ⇒ vĩnh viễn 0
   (đo: naturalWidth=0, complete=false sau khi đã cuộn hết trang). Logo do đó MẤT ở
   footer của MỌI trang mà không hề có 404 nào. Khai `aspect-ratio` để đặt chỗ chiều cao
   trước khi ảnh về, cắt vòng khoá. 226×80 là kích thước thật của Logo-2.png. */
body.viraf-site .viraf-footer__newsletter-logo img { aspect-ratio: 226 / 80; height: auto; }
/* L-19 tập 3 — TABLET: cùng cái `width: 226px` cứng đó, nhưng lần này hỏng theo chiều NGƯỢC
   LẠI. Ô vàng rộng theo % của lưới (316fr) nên co dần: 316px ở 1920 → 268 ở 1280 → 203 ở
   1180 → 158 ở 1024 → 117 ở 768. Ảnh vẫn nằm ì ở 226px, mà container có `width` nên
   style-engine gắn `overflow: hidden` ⇒ **logo bị CẮT CỤT**: mất 47px ở 1180 và 133px ở 768,
   tức quá nửa chữ "viraf". `max-width: 100%` của `.img-fluid` KHÔNG cứu được vì hai tầng bọc
   (`.dmdc-el--image`, `.dmdc-image-wrapper`) cũng đang 226px, nên 100% của chúng vẫn là 226.
   Phải cho CẢ HAI tầng bọc co theo ô thì ảnh mới thu nhỏ theo. */
body.viraf-site .viraf-footer__newsletter-logo .dmdc-el--image,
body.viraf-site .viraf-footer__newsletter-logo .dmdc-image-wrapper {
  width: 100% !important;
  max-width: 226px;
}
body.viraf-site .viraf-footer__newsletter-logo img { width: 100%; }
.viraf-footer__newsletter-copy { grid-column: 3; width: 100% !important; }
.viraf-footer__newsletter-form { grid-column: 4; width: 100% !important; min-width: 0; }
/* Figma 68:93: dòng 1 vàng, dòng 2 trắng, Raleway 19/25 */
.viraf-footer__newsletter-title .dmdc-heading-title { margin: 0; color: var(--viraf-yellow); font-family: var(--viraf-font-display); font-weight: 700; }
.viraf-footer__newsletter-text p { margin: 0; color: var(--viraf-white); font: 400 19px/25px var(--viraf-font-body); }
/* Ô nhập dạng viên thuốc: nền đen, viền 1px vàng, r30; nút vàng 136x43 chữ TRẮNG đậm */
.viraf-newsletter-form .dmdc-form-container { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.viraf-newsletter-form .dmdc-form-fields { display: flex; align-items: stretch; box-sizing: border-box; height: 43px; gap: 0; overflow: hidden; border: 1px solid var(--viraf-yellow); border-radius: 30px; background: var(--viraf-black); }
.viraf-newsletter-form .dmdc-field-wrap { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
/* Nút submit bị cắt: vỏ .dmdc-submit-button-wrap mang .mt-3 (16px) và nút tự cao 57px,
   vượt khung 43px có overflow:hidden. Ép cả chuỗi field → vỏ → nút về đúng 100% chiều cao. */
.viraf-newsletter-form .dmdc-field-submit_button { display: flex; flex: 0 0 136px; }
.viraf-newsletter-form .dmdc-submit-button-wrap { width: 100%; height: 100%; margin: 0 !important; }
.viraf-newsletter-form .form-control { height: 100%; padding: 0 22px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--viraf-white) !important; font: 400 19px/25px var(--viraf-font-body); }
.viraf-newsletter-form .form-control::placeholder { color: var(--viraf-white); opacity: 1; }
.viraf-newsletter-form .dmdc-submit-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; padding: 0 !important; border: 0; border-radius: 0; background: var(--viraf-yellow); box-shadow: none !important; color: var(--viraf-white); font: 700 20px/25px var(--viraf-font-body); text-transform: uppercase; }
.viraf-newsletter-form .dmdc-submit-btn:hover { background: var(--viraf-yellow-hover); color: var(--viraf-white); }
/* ===== Thân footer — Figma 68:93 =====
   3 cột theo px của khung 1425: 568 (thông tin công ty) | 492 (Zalo/Facebook) | 365 (hotline/Telegram).
   Dùng GRID chứ không flex + gap: bản cũ là flex `35% + 65% + gap 36px` > 100% nên cột phải
   XUỐNG DÒNG và footer chừa trắng nửa phải. Figma không có cột menu ở footer. */
/* padding-bottom 0: Figma cho thanh copyright NGANG HÀNG với dòng cuối cột 1 (cùng kết thúc
   ở y=957). Ở luồng thường thanh này nằm dưới cả 3 cột nên bỏ đệm để nó sát nhất có thể. */
.viraf-footer__main { padding: 12px var(--viraf-gutter) 0; }
.viraf-footer__main-row { display: grid !important; grid-template-columns: 568fr 492fr 365fr; align-items: start; gap: 0 !important; }
.viraf-footer__about,
.viraf-footer__channels,
.viraf-footer__hotlines { flex: none !important; width: 100% !important; max-width: 100% !important; min-width: 0; padding: 0 !important; }
/* Dòng có icon: icon vẽ bằng ::before (asset SVG xuất từ Figma), chữ thụt 37px (247→284) */
.viraf-footer__row,
.viraf-footer__chan { position: relative; padding-left: 37px !important; }
/* Figma: tiêu đề công ty y=703, 3 dòng y=739/820/901 (bước 81px, dòng cao 52 ⇒ cách 29px).
   Cột 2/3 bắt đầu ở y=738 — thẳng với DÒNG ĐẦU của cột 1, không thẳng với tiêu đề ⇒ đệm 36px. */
/* KHÔNG dùng :first-of-type — anh em cùng cấp đều là <div> (kể cả .dmdc-bg-layer và vỏ
   widget heading) nên bộ chọn đó không bao giờ khớp dòng đầu. */
.viraf-footer__row { margin-top: 11px; }
.viraf-footer__row + .viraf-footer__row { margin-top: 29px; }
.viraf-footer__channels,
.viraf-footer__hotlines { padding-top: 36px !important; }
.viraf-footer__chan { min-height: 52px; padding-left: 74px !important; }
.viraf-footer__chan + .viraf-footer__chan { margin-top: 29px; }
.viraf-footer__row::before,
.viraf-footer__chan::before { content: ''; position: absolute; left: 0; background-repeat: no-repeat; background-position: center; }
.viraf-footer__row--location::before { top: 8px; width: 18px; height: 22px; background-image: url('../../assets/2024/09/ico-location.svg'); background-size: 18px 22px; }
.viraf-footer__row--phone::before { top: 8px; width: 17px; height: 18px; background-image: url('../../assets/2024/09/ico-phone.svg'); background-size: 17px 18px; }
.viraf-footer__row--mail::before { top: 10px; width: 20px; height: 16px; background-image: url('../../assets/2024/09/ico-mail.svg'); background-size: 20px 16px; }
.viraf-footer__chan::before { top: 0; width: 52px; height: 52px; background-size: contain; }
.viraf-footer__chan--zalo::before { background-image: url('../../assets/2024/09/ico-zalo.svg'); }
.viraf-footer__chan--facebook::before { background-image: url('../../assets/2024/09/ico-facebook.svg'); }
.viraf-footer__chan--hotline::before { width: 47px; background-image: url('../../assets/2024/09/ico-hotline.svg'); }
.viraf-footer__chan--telegram::before { background-image: url('../../assets/2024/09/ico-telegram.svg'); }
/* max-width 430px = khung chữ địa chỉ/email trong Figma, để địa chỉ ngắt 2 dòng đúng chỗ.
   KHÔNG dùng 333px của khung "điện thoại" trong Figma: font thật của ta rộng hơn nên
   "Tư vấn công bố sản phẩm: 0356 526 194" bị ngắt thành 3 dòng và đội cao cả cột. */
.viraf-footer__row p,
.viraf-footer__chan p { max-width: 430px; margin: 0; color: var(--viraf-white); font: 400 20px/26px var(--viraf-font-body); }
.viraf-footer__chan--hotline p,
.viraf-footer__chan--telegram p { font-weight: 700; font-size: 19px; line-height: 52px; }
.viraf-footer__row a,
.viraf-footer__chan a { color: var(--viraf-white); text-decoration: none; }
.viraf-footer__row a:hover,
.viraf-footer__chan a:hover { color: var(--viraf-yellow); }
/* Figma 68:93: Afacad 700 22/25 vàng, in hoa (cỡ chữ đặt ở T3 vì module ghi inline) */
/* Không đặt margin-bottom ở đây: nó GỘP MARGIN với margin-top của dòng đầu
   (.viraf-footer__row:first-of-type) và đẩy cả cột 1 xuống 9px so với Figma. */
.viraf-footer__company .dmdc-heading-title { margin: 0; color: var(--viraf-yellow); font-family: var(--viraf-font-body); font-weight: 700; text-transform: uppercase; }
.viraf-footer__contact p { margin: 0 0 12px; color: var(--viraf-white); font: 400 20px/26px var(--viraf-font-body); }
.viraf-footer__contact a { color: var(--viraf-white); text-decoration: none; }
.viraf-footer__link-title .dmdc-heading-title { margin: 0 0 16px; color: var(--viraf-white); font-size: 20px; font-weight: 700; }
.viraf-footer .viraf-footer-menu .dmdc-menu { display: block !important; margin: 0; padding: 0; list-style: none; }
.viraf-footer .viraf-footer-menu a { display: inline-block; padding: 4px 0 !important; color: #d7d7d7 !important; font-size: 16px; line-height: 1.4 !important; text-decoration: none; }
.viraf-footer .viraf-footer-menu a:hover { color: var(--viraf-yellow) !important; }
/* Figma 68:93: KHÔNG có đường kẻ ngang toàn chiều rộng. Kẻ trắng 1px chỉ chạy từ x=815
   tới x=1390 rồi tới copyright canh phải (mép phải 1672). Cột trống 568fr khớp cột 1 của
   thân footer, phần còn lại 857fr chứa kẻ (giãn) + chữ. */
/* đệm dưới 39px để tổng chiều cao footer đúng 478px của Figma (551→1029) */
.viraf-footer__bottom { padding: 0 var(--viraf-gutter) 39px; border-top: 0; }
.viraf-footer__bottom-row { display: grid !important; grid-template-columns: 568fr 857fr; align-items: center; gap: 0 !important; }
.viraf-footer__copyright { grid-column: 2; display: flex; align-items: center; gap: 27px; }
.viraf-footer__copyright::before { content: ''; flex: 1 1 auto; height: 1px; background: var(--viraf-white); }
.viraf-footer__copyright .dmdc-text-editor { flex: 0 0 auto; }
.viraf-footer__copyright p { margin: 0; color: var(--viraf-white); font: 500 15px/37px var(--viraf-font-body); text-align: right; white-space: nowrap; }

/* ===== Widget Liên hệ nổi (Floating Contact) =====
   Partial `partials/contact_widget.ejs` phát markup và master.ejs có include, nhưng theme CHƯA
   TỪNG có CSS cho các class này ⇒ khối nằm trong luồng thường (`position: static`, rộng 1920px)
   ở cuối trang, dưới footer, các mục `display:inline` không màu: 4 icon đen kèm chữ.
   Bộ rule dưới đây phủ ĐỦ ma trận cài đặt trong Cài đặt chung → Widget:
     layout       vertical | horizontal
     position     right | left
     v_align      bottom | middle | top
     display_mode icons | text | both
     hover_slide  0 | 1   (chỉ có nghĩa khi không phải chế độ text)
     animation    (trống) | shake
   Màu từng mục do partial ghi inline thành biến --cw-bg / --cw-hover-bg / --cw-text-color. */
.dmdc-contact-widget {
  /* --cw-size / --cw-gap / --cw-edge nằm ở :root (tokens.css) để nút "Lên đầu trang" đọc chung */
  position: fixed;
  z-index: 1045; /* trên nội dung, dưới header (1050) và modal (1100) */
  display: flex;
  gap: var(--cw-gap);
  margin: 0;
  pointer-events: none; /* khoảng trống giữa các mục không chặn click vào trang */
}
.dmdc-contact-widget .cw-item { pointer-events: auto; }
.dmdc-contact-widget.cw-layout-vertical { flex-direction: column; }
.dmdc-contact-widget.cw-layout-horizontal { flex-direction: row; }
.dmdc-contact-widget.cw-pos-right { right: var(--cw-edge); align-items: flex-end; }
.dmdc-contact-widget.cw-pos-left { left: var(--cw-edge); align-items: flex-start; }
.dmdc-contact-widget.cw-align-bottom { bottom: var(--cw-edge); }
.dmdc-contact-widget.cw-align-top { top: calc(80px + var(--cw-edge)); } /* header cao 80px */
.dmdc-contact-widget.cw-align-middle { top: 50%; transform: translateY(-50%); }

.dmdc-contact-widget .cw-item {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-width: var(--cw-size);
  min-height: var(--cw-size);
  border-radius: 999px;
  background: var(--cw-bg, var(--viraf-yellow));
  color: var(--cw-text-color, var(--viraf-white));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  text-decoration: none;
  transition: background-color var(--viraf-transition), transform var(--viraf-transition), box-shadow var(--viraf-transition);
}
.dmdc-contact-widget .cw-item:hover,
.dmdc-contact-widget .cw-item:focus-visible { background: var(--cw-hover-bg, var(--viraf-yellow-hover)); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .26); color: var(--cw-text-color, var(--viraf-white)); }
.dmdc-contact-widget .cw-icon-box { display: grid; place-items: center; flex: 0 0 var(--cw-size); width: var(--cw-size); height: var(--cw-size); font-size: calc(var(--cw-size) * .42); line-height: 1; }
.dmdc-contact-widget .cw-label { font: 600 15px/1 var(--viraf-font-body); white-space: nowrap; }

/* Chế độ hiển thị */
.dmdc-contact-widget.cw-mode-icons .cw-label { display: none; }
.dmdc-contact-widget.cw-mode-text .cw-icon-box { display: none; }
.dmdc-contact-widget.cw-mode-text .cw-item { padding: 0 18px; }
.dmdc-contact-widget.cw-mode-both .cw-item { padding-right: 18px; }

/* Hover slide: nút tròn chỉ có icon, trượt hiện nhãn khi trỏ vào.
   Phải đứng SAU rule của cw-mode-icons (cùng độ đặc hiệu) để thắng `display: none`. */
/* gap: 0 để lúc nghỉ nút vẫn tròn đúng 48px — nếu giữ gap 10px thì nhãn rộng 0 vẫn cộng thêm
   khoảng cách, nút thành 58px và méo hình tròn. Khoảng cách khi mở do margin của nhãn tạo. */
.dmdc-contact-widget.cw-hover-slide .cw-item { gap: 0; }
.dmdc-contact-widget.cw-hover-slide .cw-label { display: block; max-width: 0; overflow: hidden; opacity: 0; transition: max-width var(--viraf-transition), opacity var(--viraf-transition), margin var(--viraf-transition); }
.dmdc-contact-widget.cw-hover-slide .cw-item:hover .cw-label,
.dmdc-contact-widget.cw-hover-slide .cw-item:focus-visible .cw-label { max-width: 220px; opacity: 1; }
.dmdc-contact-widget.cw-hover-slide.cw-pos-right .cw-item:hover .cw-label { margin-right: 18px; }
.dmdc-contact-widget.cw-hover-slide.cw-pos-left .cw-item:hover .cw-label { margin-left: 18px; }
/* Neo về phía mép màn hình để nút không nhảy khi nhãn trượt ra */
.dmdc-contact-widget.cw-hover-slide.cw-pos-left .cw-item { flex-direction: row-reverse; }

/* Hiệu ứng lắc — chỉ lắc icon, không lắc cả nút (tránh phá transform của cw-align-middle) */
@keyframes viraf-cw-shake {
  0%, 55%, 100% { transform: rotate(0); }
  60% { transform: rotate(-14deg); }
  70% { transform: rotate(12deg); }
  80% { transform: rotate(-8deg); }
  90% { transform: rotate(6deg); }
}
.dmdc-contact-widget.cw-shake .cw-icon-box i { display: block; animation: viraf-cw-shake 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .dmdc-contact-widget.cw-shake .cw-icon-box i { animation: none; }
  .dmdc-contact-widget .cw-item { transition: none; }
}
@media print { .dmdc-contact-widget { display: none !important; } }

/* Nút "Lên đầu trang" đứng TRÊN cột widget liên hệ khi cả hai ở cùng góc.
   Partial back_to_top tự nâng lên `bottom: 90px` (class `bt-lift`) — mốc đó chỉ đủ cho widget
   xếp NGANG; xếp dọc 4 mục cao 228px thì nút rơi vào giữa cột. Tính lại theo SỐ MỤC THẬT
   (`--cw-count` do partial contact_widget phát) nên đúng với mọi số mục và cả cỡ nút mobile.
   Dùng độ đặc hiệu (1,2,1) để thắng rule `#dmdc-back-to-top.bt-lift` trong <style> của partial
   (nằm ở <body> nên thắng <head> khi cùng độ đặc hiệu) — không cần !important. */
body.viraf-site #dmdc-back-to-top.bt-lift {
  bottom: calc(var(--cw-edge) + var(--cw-size) * var(--cw-count) + var(--cw-gap) * (var(--cw-count) - 1) + var(--cw-gap));
}

body.viraf-site a:focus-visible, body.viraf-site button:focus-visible, body.viraf-site input:focus-visible { outline: 3px solid var(--viraf-yellow); outline-offset: 3px; }

/* ============================================================================
   ARCHETYPE TRANG DỊCH VỤ (26 trang) — bám Figma node 307:142 "Công bố mỹ phẩm".
   Nội dung ở T3 (layout_json do scripts/_migrate/50-build-service-pages.mjs sinh),
   toàn bộ kiểu dáng ở đây (T2). Thang chữ lấy TRỰC TIẾP từ Figma:
     tiêu đề khối / hero  Raleway 700  50/70   #000 (trắng trên băng tối)
     eyebrow              Afacad  700  30/26   ls6  UPPERCASE  #FFCB05
     dẫn nhập             Afacad  400  25/35   justify  #464646
     tiêu đề thẻ          Raleway 700  25/35   #000
     nội dung thẻ         Afacad  400  20/26   #464646
     nội dung 2 cột       Afacad  400  20/28   justify  #464646
     "Dịch vụ liên quan"  Raleway 700  35/50   #000
     tiêu đề thẻ dịch vụ  Raleway 700  22/28   justify  #000
   ============================================================================ */

body.viraf-site .viraf-svc-hero,
body.viraf-site .viraf-svc-intro,
body.viraf-site .viraf-svc-split,
body.viraf-site .viraf-svc-why,
body.viraf-site .viraf-svc-brands,
body.viraf-site .viraf-svc-related { width: 100%; }

/* ---- hero: bang vang, anh nen do Elementor cap (moi dich vu mot anh rieng) ---- */
body.viraf-site .viraf-svc-hero {
  min-height: 650px;
  display: flex;
  align-items: center;
  padding: 100px 0;
  background-color: var(--viraf-yellow);
}
body.viraf-site .viraf-svc-hero__title {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 50px;
  line-height: 70px;
  color: var(--viraf-black);
  margin: 0;
  max-width: 520px;
}

/* ---- intro: mot cot can giua ---- */
body.viraf-site .viraf-svc-intro { padding: 70px 0 40px; background-color: var(--viraf-white); }
body.viraf-site .viraf-svc-intro__col { align-items: center; text-align: center; }
body.viraf-site .viraf-svc-intro__lead,
body.viraf-site .viraf-svc-intro__expert {
  font-family: var(--viraf-font-body);
  font-size: 25px;
  line-height: 35px;
  color: var(--viraf-copy);
  max-width: 640px;
  margin: 0 auto;
}
/* 25/26 trang dịch vụ có phần dẫn chỉ MỘT đoạn ngắn — khung 640 căn giữa là đẹp. Riêng
   "Xác nhận đơn hàng nhập khẩu mỹ phẩm" có 5 đoạn (gồm 3 gạch đầu dòng quy định), nhồi vào
   khung 640 căn giữa thì thành một bức tường chữ cao 1365px, khác hẳn các trang cùng nhóm.
   Bản gốc viraf.vn để khối này rộng 1120 và CĂN TRÁI ở đúng trang đó (các trang một đoạn
   vẫn căn giữa) — `:has(p + p)` tái lập đúng quy tắc ấy mà không phải sửa dữ liệu trang. */
body.viraf-site .viraf-svc-intro__lead:has(p + p) {
  max-width: 1120px;
  text-align: left;
}
body.viraf-site .viraf-svc-intro__brands,
body.viraf-site .viraf-svc-intro__promise {
  font-family: var(--viraf-font-body);
  font-size: 20px;
  line-height: 30px;
  color: var(--viraf-copy);
  max-width: 1130px;
  margin: 0 auto;
}
body.viraf-site .viraf-svc-intro__brands { margin-top: 26px; }
body.viraf-site .viraf-svc-intro__promise { margin-top: 22px; }
body.viraf-site .viraf-svc-intro__expert { margin-top: 40px; }
body.viraf-site .viraf-svc-ornament { margin: 34px auto 0; }
body.viraf-site .viraf-svc-ornament img { width: 408px; max-width: 100%; height: auto; }

/* 2 o so lieu: icon vuong bo goc vang + so Raleway 700 */
body.viraf-site .viraf-svc-stats {
  margin: 30px auto 0;
  /* 960 là bề ngang vừa khít 2 ô số liệu của những trang có NHÃN NGẮN. Ba trang có nhãn dài
     ("Thương hiệu mỹ phẩm nổi tiếng trên thế giới", "Nhãn hàng đến từ các công ty dược phẩm
     hàng đầu tại Việt Nam"…) cộng lại 963–980px nên tràn khung ⇒ hàng XUỐNG DÒNG, hai ô xếp
     dọc và lệch nhau, trông khác hẳn các trang cùng nhóm. Mỗi ô đã bị chặn `max-width: 470`
     nên 470+470+40 = 980 là bề ngang lớn nhất có thể — cho khung 1040 là mọi trang đều đủ
     chỗ trên MỘT hàng. */
  max-width: 1040px;
  justify-content: center;
  gap: 0 40px;
}
body.viraf-site .viraf-svc-stat {
  flex-direction: row !important;
  align-items: center;
  gap: 16px;
  max-width: 460px;
  text-align: left;
}
body.viraf-site .viraf-svc-stat__icon { flex: 0 0 auto; }
body.viraf-site .viraf-svc-stat__icon img { width: 60px; height: 60px; object-fit: contain; }
body.viraf-site .viraf-svc-stat__num {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 35px;
  line-height: 42px;
  color: var(--viraf-black);
  margin: 0;
  white-space: nowrap;
}
body.viraf-site .viraf-svc-stat__label {
  font-family: var(--viraf-font-body);
  font-size: 18px;
  line-height: 24px;
  color: var(--viraf-copy);
}
body.viraf-site .viraf-svc-stat__label p { margin: 0; }

/* nut CTA vang lon */
body.viraf-site .viraf-svc-cta { margin-top: 26px; }
body.viraf-site .viraf-svc-cta .dmdc-button {
  background-color: var(--viraf-yellow);
  border-color: var(--viraf-yellow);
  color: var(--viraf-black);
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.5px;
  padding: 26px 54px;
  border-radius: 12px;
  text-transform: uppercase;
}
body.viraf-site .viraf-svc-cta .dmdc-button:hover {
  background-color: var(--viraf-yellow-hover);
  border-color: var(--viraf-yellow-hover);
}
body.viraf-site .viraf-svc-rule { margin: 34px auto 0; }
body.viraf-site .viraf-svc-rule .dmdc-divider,
body.viraf-site .viraf-svc-rule hr { margin-left: auto; margin-right: auto; }

/* ---- khoi 2 cot anh/chu (dung 4 lan) ---- */
body.viraf-site .viraf-svc-split { padding: 45px 0; background-color: var(--viraf-white); }
body.viraf-site .viraf-svc-split__row { align-items: center; gap: 0 60px; flex-wrap: nowrap; }
body.viraf-site .viraf-svc-split__media,
body.viraf-site .viraf-svc-split__copy { padding: 0 !important; }
body.viraf-site .viraf-svc-split__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 683 / 348;
  object-fit: cover;
  border-radius: 20px;
}
body.viraf-site .viraf-svc-split__title {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 35px;
  line-height: 48px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-svc-split__rule { margin: 18px 0 20px; }
body.viraf-site .viraf-svc-split__text {
  font-family: var(--viraf-font-body);
  font-size: 20px;
  line-height: 28px;
  color: var(--viraf-copy);
  text-align: justify;
}
body.viraf-site .viraf-svc-split__text ul { margin: 0; padding-left: 22px; }
body.viraf-site .viraf-svc-split__text li { margin-bottom: 8px; }
body.viraf-site .viraf-svc-split__text p:last-child,
body.viraf-site .viraf-svc-split__text li:last-child { margin-bottom: 0; }

/* ---- vien thuoc "Thoi gian tra ket qua du kien" ---- */
body.viraf-site .viraf-svc-time { padding: 20px 0 50px; }
body.viraf-site .viraf-svc-time__col {
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background-color: var(--viraf-yellow);
  border-radius: 999px;
  padding: 18px 46px !important;
  max-width: 760px;
  margin: 0 auto;
}
body.viraf-site .viraf-svc-time__icon img { width: 46px; height: 46px; object-fit: contain; }
body.viraf-site .viraf-svc-time__label {
  font-family: var(--viraf-font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: var(--viraf-black);
  margin: 0;
  white-space: nowrap;
}
body.viraf-site .viraf-svc-time__value {
  font-family: var(--viraf-font-body);
  font-size: 22px;
  line-height: 30px;
  color: var(--viraf-black);
}
body.viraf-site .viraf-svc-time__value p { margin: 0; }
body.viraf-site .viraf-svc-time__value strong { font-weight: 700; }

/* ---- "Tai sao nen chon Viraf": bang toi + 4 the trang 2x2 ---- */
body.viraf-site .viraf-svc-why {
  padding: 90px 0 100px;
  background-color: #1a1a1a;
  position: relative;
}
/* Anh nen la anh phong lam viec sang => phu lop den de chu trang doc duoc (Figma dung
   overlay den ~80%). Lop phu phai nam DUOI noi dung nen dung ::before + z-index. */
body.viraf-site .viraf-svc-why::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
body.viraf-site .viraf-svc-why > :not(.dmdc-bg-layer) { position: relative; z-index: 1; }
body.viraf-site .viraf-svc-why__head-col { align-items: center; text-align: center; }
body.viraf-site .viraf-svc-why__eyebrow {
  font-family: var(--viraf-font-body);
  font-weight: 700;
  font-size: 30px;
  line-height: 26px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--viraf-yellow);
}
body.viraf-site .viraf-svc-why__eyebrow p { margin: 0; }
body.viraf-site .viraf-svc-why__title {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 50px;
  line-height: 70px;
  color: var(--viraf-white);
  margin: 8px 0 0;
}
body.viraf-site .viraf-svc-why__grid {
  margin-top: 46px;
  gap: 30px 84px;
  align-items: stretch;
}
body.viraf-site .viraf-svc-card {
  background-color: var(--viraf-white);
  border-radius: 20px;
  position: relative;
  flex: 0 0 calc(50% - 42px);
  max-width: calc(50% - 42px);
}
body.viraf-site .viraf-svc-card__icon img { width: 105px; height: 105px; object-fit: contain; }
body.viraf-site .viraf-svc-card__title {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 25px;
  line-height: 35px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-svc-card__rule { margin: 10px 0 12px; }
body.viraf-site .viraf-svc-card__text {
  font-family: var(--viraf-font-body);
  font-size: 20px;
  line-height: 26px;
  color: var(--viraf-copy);
}
body.viraf-site .viraf-svc-card__text ul { margin: 0; padding-left: 20px; }
body.viraf-site .viraf-svc-card__text li { margin-bottom: 6px; }
body.viraf-site .viraf-svc-card__text p:last-child,
body.viraf-site .viraf-svc-card__text li:last-child { margin-bottom: 0; }

/* ---- nhan hang tieu bieu ---- */
body.viraf-site .viraf-svc-brands { padding: 70px 0 60px; background-color: var(--viraf-white); }
body.viraf-site .viraf-svc-brands__head-col { align-items: center; text-align: center; }
body.viraf-site .viraf-svc-brands__eyebrow {
  font-family: var(--viraf-font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--viraf-yellow);
}
body.viraf-site .viraf-svc-brands__eyebrow p { margin: 0; }
body.viraf-site .viraf-svc-brands__title {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 56px;
  color: var(--viraf-black);
  margin: 6px 0 0;
}
body.viraf-site .viraf-svc-logos .dmdc-logo-grid-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 38px 48px !important;
  margin-top: 40px;
}
body.viraf-site .viraf-svc-logos .dmdc-logo-item { flex: 0 0 auto; width: auto !important; padding: 0 !important; }
body.viraf-site .viraf-svc-logos .dmdc-logo-img {
  max-width: 150px !important;
  max-height: 62px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* ---- DỊCH VỤ LIÊN QUAN — băng chuyền, Figma 307:379 ----
   Đo trên bản render (1609x463, tỉ lệ 1:1):
     · 3 thẻ 441px, khe 52  ->  441*3 + 52*2 = 1427 ≈ khung 1425
     · ảnh 441x303 (KHÔNG phải 455/303 như bản dựng cũ)
     · chữ dưới ảnh cách 36px, in đậm, canh đều hai bên (JUSTIFIED trong Figma)
     · chevron 34x64 màu #454545, nằm NGOÀI khung 91px mỗi bên, canh giữa theo ẢNH
       (tâm mũi tên y225 = tâm ảnh y74..377)
   Nút do themes/viraf/core/js/viraf.js chèn vào lúc chạy — xem chú thích trong đó. */
body.viraf-site .viraf-svc-related { position: relative; padding: 40px 0 70px; background-color: var(--viraf-white); }
body.viraf-site .viraf-svc-related__title {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 35px;
  line-height: 50px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-svc-related__grid {
  margin-top: 28px;
  gap: 0 52px;
  align-items: flex-start;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;
  /* chừa chỗ cho bóng đổ/viền bo khỏi bị thanh cuộn cắt */
  padding-bottom: 2px;
}
body.viraf-site .viraf-svc-related__grid::-webkit-scrollbar { display: none; }
body.viraf-site .viraf-svc-relcard {
  flex: 0 0 calc((100% - 104px) / 3) !important;
  max-width: calc((100% - 104px) / 3);
  padding: 0 !important;
  scroll-snap-align: start;
}
body.viraf-site .viraf-svc-relcard__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 441 / 303;
  object-fit: cover;
  border-radius: 16px;
}
body.viraf-site .viraf-svc-relcard__title { margin-top: 36px; }
body.viraf-site .viraf-svc-relcard__title p { margin: 0; text-align: justify; }
body.viraf-site .viraf-svc-relcard__title a {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: var(--viraf-black);
  text-decoration: none;
  transition: color var(--viraf-transition);
}
body.viraf-site .viraf-svc-relcard__title a:hover { color: var(--viraf-yellow-hover); }

/* Nút chevron của băng chuyền.
   Khung nội dung rộng 1425 nằm giữa màn hình, nút cách mép khung 91px
   -> left = 50% - 1425/2 - 91 = 50% - 803.5px. Dùng max() để ở màn hẹp nút không
   trôi ra ngoài màn hình (dưới ~1607px thì dán sát mép, cách 8px). */
body.viraf-site .viraf-carousel-nav {
  position: absolute;
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #454545;
  cursor: pointer;
  transition: color var(--viraf-transition), opacity var(--viraf-transition);
}
body.viraf-site .viraf-carousel-nav:hover:not(:disabled) { color: var(--viraf-yellow-hover); }
body.viraf-site .viraf-carousel-nav:disabled { opacity: .28; cursor: default; }
body.viraf-site .viraf-carousel-nav--prev { left: max(8px, calc(50% - 803.5px)); }
body.viraf-site .viraf-carousel-nav--next { right: max(8px, calc(50% - 803.5px)); }
body.viraf-site .viraf-carousel-nav--next svg { transform: scaleX(-1); }
/* Tâm mũi tên phải trùng tâm ẢNH (Figma: tâm y225 = giữa ảnh y74..377). Chiều cao ảnh
   đổi theo breakpoint nên JS đo hộp ảnh thật rồi ghi vào --viraf-nav-top; giá trị dưới
   đây chỉ là mốc dự phòng cho khung 1425 khi JS chưa chạy. */
body.viraf-site .viraf-carousel-nav { top: var(--viraf-nav-top, 237px); }
/* Khi không cuộn được (≤3 thẻ) thì giấu hẳn 2 nút */
body.viraf-site .viraf-carousel-idle .viraf-carousel-nav { display: none; }

/* ---- "Kien thuc lien quan": tai dung nguyen khoi tin tuc trang chu (.viraf-news) ---- */
body.viraf-site .viraf-svc-kb { margin-top: 0; }

/* ---------------------------------------------------------------------------
   SỬA 3 nhóm lỗi đo được bằng puppeteer sau vòng dựng đầu (14/08):

   1) `css_classes` của Builder gắn lên DIV BỌC NGOÀI widget, KHÔNG lên thẻ chữ.
      Thẻ <h1>..<h4> bên trong có rule riêng của theme (Afacad 50/60 #282828) nên
      font-size/màu đặt trên class KHÔNG có tác dụng — chữ vẫn theo theme.
      => mọi rule chữ cho widget heading phải nhắm thẳng thẻ con.
      (text_editor không bị: <p> thừa hưởng từ div bọc.)

   2) `.btn-primary` bị rule toàn cục `color: var(--e-global-color-primary) !important`
      (in trong <style> của trang) => chữ VÀNG trên nền VÀNG, nút trông trống trơn.
      Rule gốc có !important nên buộc phải dùng !important để đè.

   3) Cột 50% + `gap` = tràn hàng rồi XUỐNG DÒNG: 712.5 × 2 + 60 = 1485 > 1425.
      Khe phải trừ vào bề rộng cột (`flex: 0 0 calc(50% - khe/2)`), không cộng thêm.
   --------------------------------------------------------------------------- */

/* ---- (1) chữ phải nhắm thẻ con ---- */
body.viraf-site .viraf-svc-hero__title h1,
body.viraf-site .viraf-svc-hero__title h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 50px;
  line-height: 70px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-svc-hero__title { max-width: 480px; }  /* Figma: khối chữ 482px */

body.viraf-site .viraf-svc-stat__num h3 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 35px;
  line-height: 42px;
  color: var(--viraf-black);
  margin: 0;
  white-space: nowrap;
}
body.viraf-site .viraf-svc-split__title h2,
body.viraf-site .viraf-svc-split__title h3 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 35px;
  line-height: 48px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-svc-time__label h3 {
  font-family: var(--viraf-font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-svc-why__title h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 50px;
  line-height: 70px;
  color: var(--viraf-white);
  margin: 0;
}
body.viraf-site .viraf-svc-card__title h3 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 25px;
  line-height: 35px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-svc-brands__title h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 56px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-svc-related__title h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 35px;
  line-height: 50px;
  color: var(--viraf-black);
  margin: 0;
}

/* ---- (2) nút CTA: chữ đen trên nền vàng ---- */
body.viraf-site .viraf-svc-cta .dmdc-button,
body.viraf-site .viraf-svc-cta .dmdc-button span {
  color: var(--viraf-black) !important;
}
body.viraf-site .viraf-svc-cta .dmdc-button {
  background-color: var(--viraf-yellow) !important;
  border-color: var(--viraf-yellow) !important;
}
body.viraf-site .viraf-svc-cta .dmdc-button:hover {
  background-color: var(--viraf-yellow-hover) !important;
  border-color: var(--viraf-yellow-hover) !important;
}

/* ---- (3) khe phải trừ vào bề rộng cột, không cộng thêm ---- */
body.viraf-site .viraf-svc-split__row { gap: 0 60px; flex-wrap: nowrap; align-items: center; }
body.viraf-site .viraf-svc-split__media,
body.viraf-site .viraf-svc-split__copy {
  flex: 0 0 calc(50% - 30px);
  max-width: calc(50% - 30px);
  width: auto;
}
/* `flex-wrap: nowrap` ở đây CHƯA BAO GIỜ có tác dụng: style-engine ghi `flex-wrap: wrap`
   thẳng vào style="" của mọi hàng, mà style nội tuyến thắng stylesheet không `!important`
   (đo trên trang thật: computed vẫn `wrap`). Đây chính là lý do 3 trang nhãn dài bị gãy hàng. */
body.viraf-site .viraf-svc-stats { gap: 0 40px; flex-wrap: nowrap !important; justify-content: center; }
body.viraf-site .viraf-svc-stat {
  flex: 0 1 auto;
  width: auto;
  max-width: 470px;
}

/* ---------------------------------------------------------------------------
   L-17 lặp lại: style-engine gán `overflow: hidden` cho MỌI container có `width`.
   Icon 105px của thẻ "Tại sao nên" được đặt `left: -52px` để vắt qua mép trái thẻ,
   nên bị cột (width:50) CẮT MẤT HOÀN TOÀN — trên ảnh chụp thẻ trông như không có icon.
   Đây đúng là lỗi đã gặp với 2 mũi tên slider "Lĩnh vực thế mạnh"; cách chữa giống nhau:
   mở overflow cho đúng nhánh cha, và chặn tràn ngang ở băng ngoài bằng `overflow-x: clip`
   để không sinh thanh cuộn ngang.
   --------------------------------------------------------------------------- */
body.viraf-site .viraf-svc-why { overflow-x: clip !important; overflow-y: visible !important; }
body.viraf-site .viraf-svc-why .viraf-section__row,
body.viraf-site .viraf-svc-why__grid,
body.viraf-site .viraf-svc-card { overflow: visible !important; }

/* Icon phải nằm TRÊN nền thẻ và trên cả thẻ kề bên khi 2 thẻ sát nhau. */
body.viraf-site .viraf-svc-card__icon { z-index: 2; }
body.viraf-site .viraf-svc-card__icon img {
  display: block;
  width: 105px;
  height: 105px;
  object-fit: contain;
}

/* Băng tối: ảnh nền là ảnh phòng làm việc SÁNG. Elementor bản gốc đặt thêm
   `background-color:#F4F3ED` LÊN CÙNG container nên màu bị ảnh che; ở DMDC thứ tự
   ngược lại có thể làm nền sáng lộ ra hai bên khi ảnh không phủ kín. Ép màu nền tối
   để mọi tỉ lệ màn hình đều đọc được chữ trắng. */

/* ---------------------------------------------------------------------------
   Băng "Tại sao nên": ảnh nền `Group-693821.png` của bản gốc ĐÃ tự tối (ảnh phòng
   làm việc đã phủ đen sẵn). Ép thêm `background-color:#111 !important` + lớp phủ 0.82
   làm mất hẳn ảnh, băng thành đen trơn — lệch Figma (Figma còn thấy mờ hậu cảnh).
   => bỏ ép màu, hạ lớp phủ xuống mức chỉ đủ bảo đảm tương phản chữ trắng.
   --------------------------------------------------------------------------- */
body.viraf-site .viraf-svc-why { background-color: #1a1a1a; }

/* ===========================================================================
   RESPONSIVE — mốc DMDC 1024 / 700, kèm vùng chết 1025–1199 (NT-06/L-04).
   Vùng chết xử lý ở responsive-tablet.css; ở đây là các mốc của riêng archetype.
   =========================================================================== */

/* ---- ≤1199: 2 cột -> 1 cột cho khối split; thẻ "Tại sao nên" xuống 1 cột ---- */
@media (max-width: 1199.98px) {
  body.viraf-site .viraf-svc-hero { min-height: 420px; padding: 60px 0; }
  body.viraf-site .viraf-svc-hero__title h1,
  body.viraf-site .viraf-svc-hero__title h2 { font-size: 38px; line-height: 50px; }
  body.viraf-site .viraf-svc-hero__title { max-width: 380px; }

  body.viraf-site .viraf-svc-split__row { flex-wrap: wrap; gap: 28px 0; }
  body.viraf-site .viraf-svc-split__media,
  body.viraf-site .viraf-svc-split__copy { flex: 0 0 100%; max-width: 100%; }
  /* Bản đảo (ảnh bên phải ở desktop) khi xuống 1 cột phải để ẢNH LÊN TRƯỚC như bản gốc */
  body.viraf-site .viraf-svc-split--rev .viraf-svc-split__row { flex-direction: column-reverse; }

  body.viraf-site .viraf-svc-why__grid { gap: 26px 0; }
  body.viraf-site .viraf-svc-card { flex: 0 0 100%; max-width: 100%; }
  body.viraf-site .viraf-svc-why__title h2 { font-size: 38px; line-height: 50px; }
  body.viraf-site .viraf-svc-brands__title h2 { font-size: 32px; line-height: 44px; }
  body.viraf-site .viraf-svc-split__title h2 { font-size: 28px; line-height: 38px; }

  body.viraf-site .viraf-svc-relcard { flex: 0 0 calc(50% - 15px); max-width: calc(50% - 15px); }
}

/* ---- ≤700 (mobile): mọi thứ 1 cột, icon thẻ về trong lề ---- */
@media (max-width: 700px) {
  body.viraf-site .viraf-svc-hero { min-height: 300px; padding: 44px 0; }
  body.viraf-site .viraf-svc-hero__title h1,
  body.viraf-site .viraf-svc-hero__title h2 { font-size: 28px; line-height: 38px; }
  body.viraf-site .viraf-svc-hero__title { max-width: 100%; }

  body.viraf-site .viraf-svc-intro { padding: 40px 0 26px; }
  body.viraf-site .viraf-svc-intro__lead,
  body.viraf-site .viraf-svc-intro__expert { font-size: 19px; line-height: 28px; }
  body.viraf-site .viraf-svc-intro__brands,
  body.viraf-site .viraf-svc-intro__promise { font-size: 17px; line-height: 26px; }

  /* 2 ô số liệu xếp dọc, canh giữa — cần `!important` để thắng rule nowrap của desktop. */
  body.viraf-site .viraf-svc-stats { flex-wrap: wrap !important; gap: 18px 0; }
  body.viraf-site .viraf-svc-stat { flex: 0 0 100%; max-width: 100%; justify-content: center; }
  body.viraf-site .viraf-svc-stat__num h3 { font-size: 28px; line-height: 34px; }

  body.viraf-site .viraf-svc-cta .dmdc-button { font-size: 20px; padding: 18px 30px; }

  body.viraf-site .viraf-svc-split { padding: 30px 0; }
  body.viraf-site .viraf-svc-split__title h2 { font-size: 24px; line-height: 33px; }
  body.viraf-site .viraf-svc-split__text { font-size: 17px; line-height: 26px; text-align: left; }

  /* Viên thuốc thời gian: xuống 2 dòng, bỏ nowrap kẻo tràn ngang */
  body.viraf-site .viraf-svc-time__col { flex-wrap: wrap; padding: 16px 22px !important; border-radius: 24px; }
  body.viraf-site .viraf-svc-time__label h3 { white-space: normal; font-size: 18px; line-height: 26px; }
  body.viraf-site .viraf-svc-time__value { font-size: 18px; line-height: 26px; }

  body.viraf-site .viraf-svc-why { padding: 50px 0 56px; }
  body.viraf-site .viraf-svc-why__eyebrow { font-size: 20px; letter-spacing: 4px; }
  body.viraf-site .viraf-svc-why__title h2 { font-size: 26px; line-height: 36px; }
  /* Icon 105px tràn ra ngoài sẽ bị mép màn hình cắt trên mobile → đưa vào trong thẻ */
  body.viraf-site .viraf-svc-card { padding: 22px 20px !important; }
  body.viraf-site .viraf-svc-card__icon img { width: 72px; height: 72px; }
  body.viraf-site .viraf-svc-card__title h3 { font-size: 21px; line-height: 29px; }
  body.viraf-site .viraf-svc-card__text { font-size: 17px; line-height: 25px; }

  body.viraf-site .viraf-svc-brands { padding: 44px 0 36px; }
  body.viraf-site .viraf-svc-brands__eyebrow { font-size: 16px; letter-spacing: 4px; }
  body.viraf-site .viraf-svc-brands__title h2 { font-size: 24px; line-height: 33px; }
  body.viraf-site .viraf-svc-logos .dmdc-logo-grid-container { gap: 24px 26px !important; margin-top: 26px; }
  body.viraf-site .viraf-svc-logos .dmdc-logo-img { max-width: 104px !important; max-height: 44px !important; }

  body.viraf-site .viraf-svc-related { padding: 26px 0 44px; }
  body.viraf-site .viraf-svc-related__title h2 { font-size: 24px; line-height: 33px; }
  /* `!important` là BẮT BUỘC: rule desktop ghi `flex: 0 0 calc((100% - 104px)/3) !important`
     (cần thế để thắng `width: 33%` mà style-engine phát từ cài đặt cột). Bản cũ ở đây không
     có `!important` nên THUA — đo được: 3 thẻ bị bóp còn ~85px mỗi cái, chữ vỡ vụn, thẻ thứ
     tư nằm ở x=432..517 tức HẲN NGOÀI màn hình 430px. Nay 1 thẻ chiếm trọn bề ngang, vuốt
     ngang để xem thẻ kế (dải đã có sẵn `overflow-x:auto` + `scroll-snap`). */
  body.viraf-site .viraf-svc-relcard { flex: 0 0 100% !important; max-width: 100% !important; }
  body.viraf-site .viraf-svc-related__grid { gap: 0 20px; }
  body.viraf-site .viraf-svc-relcard__title { margin-top: 18px; }
  body.viraf-site .viraf-svc-relcard__title a { font-size: 19px; line-height: 26px; }
  /* `text-align: justify` của desktop kéo giãn từ rất xấu ở khổ hẹp ("Tư   vấn   xây dựng"). */
  body.viraf-site .viraf-svc-relcard__title p { text-align: left; }
}

/* ---------------------------------------------------------------------------
   Icon thẻ "Tại sao nên" — ĐẢO LẠI LOGIC.
   Figma vẽ icon 105px vắt qua mép trái thẻ; ở 1920 lề trang là 247px nên icon (thò ra
   52px) vẫn nằm gọn trong màn. Nhưng khung nội dung chỉ 1455px: từ ~1574px trở xuống
   lề trang < 60px, icon thò ra sẽ VƯỢT KHỎI MÀN (đo được -17..88 ở 768/1024/1100 và
   -37..68 ở 1366) — dù chưa sinh thanh cuộn ngang thì icon vẫn bị mép màn cắt mất.
   => Mặc định icon nằm TRONG thẻ ở mọi bề rộng; chỉ khi lề trang đủ rộng
      ((100vw - 1455px)/2 >= 60px  ⇔  100vw >= 1575px) mới cho vắt ra ngoài như Figma.
   Cách này an toàn với mọi kích thước và không cần biết trước danh sách viewport.
   --------------------------------------------------------------------------- */
body.viraf-site .viraf-svc-card { padding: 26px 30px !important; }
body.viraf-site .viraf-svc-card__icon {
  position: static;
  transform: none;
  margin: 0 0 12px;
}
body.viraf-site .viraf-svc-card__icon img { width: 88px; height: 88px; }

@media (min-width: 1575px) {
  body.viraf-site .viraf-svc-card { padding: 28px 34px 28px 78px !important; }
  body.viraf-site .viraf-svc-card__icon {
    position: absolute;
    left: -52px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
  body.viraf-site .viraf-svc-card__icon img { width: 105px; height: 105px; }
}

/* ============================================================================
   MẪU LƯU TRỮ CHUYÊN MỤC (Figma 106:1348) + CHI TIẾT BÀI VIẾT (Figma 107:1990).
   Nội dung do templates #5/#6 cấp; kiểu dáng toàn bộ ở đây (T2).
   Nhắc lại bẫy: css_classes của Builder nằm trên DIV BỌC widget, nên rule chữ phải
   nhắm thẳng thẻ con (h1/h2/h3/p) — nếu chỉ đặt trên class thì thẻ vẫn theo theme.
   ============================================================================ */

/* ---------- LƯU TRỮ CHUYÊN MỤC ---------- */
body.viraf-site .viraf-arch { padding: 70px 0 90px; background-color: var(--viraf-white); }
body.viraf-site .viraf-arch__head-col { align-items: center; text-align: center; }
body.viraf-site .viraf-arch__title h1,
body.viraf-site .viraf-arch__title .dmdc-post-title {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 56px;
  color: var(--viraf-black);
  margin: 0 0 40px;
}

/* Thẻ bài: dùng đúng thang chữ thẻ tin tức trang chủ (Figma: ảnh 337x232,
   tiêu đề Raleway 700 22/28, ngày #848484 14/30, mô tả 3 dòng). */
body.viraf-site .viraf-arch__cards .row,
body.viraf-site .viraf-arch__cards .dmdc-post-grid { row-gap: 44px; }
body.viraf-site .viraf-arch__cards img {
  width: 100%;
  height: auto;
  aspect-ratio: 337 / 232;
  object-fit: cover;
  border-radius: 20px;
}
body.viraf-site .viraf-arch__cards .card,
body.viraf-site .viraf-arch__cards .dmdc-post-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
body.viraf-site .viraf-arch__cards h2,
body.viraf-site .viraf-arch__cards h3,
body.viraf-site .viraf-arch__cards h4,
body.viraf-site .viraf-arch__cards h5 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  margin: 16px 0 0;
}
body.viraf-site .viraf-arch__cards h2 a,
body.viraf-site .viraf-arch__cards h3 a,
body.viraf-site .viraf-arch__cards h4 a,
body.viraf-site .viraf-arch__cards h5 a {
  color: var(--viraf-black);
  text-decoration: none;
  transition: color var(--viraf-transition);
}
body.viraf-site .viraf-arch__cards h2 a:hover,
body.viraf-site .viraf-arch__cards h3 a:hover,
body.viraf-site .viraf-arch__cards h4 a:hover,
body.viraf-site .viraf-arch__cards h5 a:hover { color: var(--viraf-yellow-hover); }
body.viraf-site .viraf-arch__cards .post-date,
body.viraf-site .viraf-arch__cards .dmdc-post-date,
body.viraf-site .viraf-arch__cards time {
  display: block;
  font-family: var(--viraf-font-body);
  font-size: 14px;
  line-height: 30px;
  color: #848484;
}
body.viraf-site .viraf-arch__cards p {
  font-family: var(--viraf-font-body);
  font-size: 17px;
  line-height: 26px;
  color: var(--viraf-copy);
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Phân trang: viên tròn, số đang xem nền vàng */
body.viraf-site .viraf-arch .pagination { justify-content: center; margin-top: 54px; gap: 8px; }
body.viraf-site .viraf-arch .page-link {
  border: 1px solid var(--viraf-border);
  border-radius: 999px;
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--viraf-ink);
  font-family: var(--viraf-font-body);
  font-weight: 600;
}
body.viraf-site .viraf-arch .page-item.active .page-link,
body.viraf-site .viraf-arch .page-link:hover {
  background-color: var(--viraf-yellow);
  border-color: var(--viraf-yellow);
  color: var(--viraf-black);
}

/* ---------- CHI TIẾT BÀI VIẾT ---------- */
body.viraf-site .viraf-post { padding: 34px 0 80px; background-color: var(--viraf-white); }
/* Figma 4049:20 trên khung 1425: cột chữ 1017 + khe 50 + cột phải 358 */
body.viraf-site .viraf-post__row { gap: 0 50px; align-items: flex-start; flex-wrap: nowrap; }
body.viraf-site .viraf-post__main { flex: 1 1 auto; min-width: 0; max-width: none; }
body.viraf-site .viraf-post__side { flex: 0 0 358px; max-width: 358px; }

/* Figma 4049:20 ghi Afacad 400 20/26 #848484, dấu phân cách "/".
   LỆCH CÓ CHỦ Ý: Figma viết "Thư viện Viraf / Tin tức" — bỏ "Trang chủ" và bỏ luôn tên
   bài. "Thư viện Viraf" lại KHÔNG phải trang thật (chỉ là nhãn nhóm `#` trong menu), nên
   chép y hệt là dựng một đường dẫn giả, mất luôn cấp cuối mà Google đọc BreadcrumbList.
   Giữ đủ 3 cấp thật, chỉ mượn kiểu chữ + dấu phân cách của thiết kế; tên bài dài thì
   cắt bằng ellipsis để vẫn gọn 1 dòng như bản vẽ. */
body.viraf-site .viraf-post__crumbs {
  font-family: var(--viraf-font-body);
  font-size: 20px;
  line-height: 26px;
  color: #848484;
  margin-bottom: 18px;
}
body.viraf-site .viraf-post__crumbs .dmdc-breadcrumbs-list { flex-wrap: nowrap !important; max-width: 100%; }
body.viraf-site .viraf-post__crumbs .dmdc-breadcrumb-item { min-width: 0; }
body.viraf-site .viraf-post__crumbs .dmdc-breadcrumb-item.active .dmdc-breadcrumb-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.viraf-site .viraf-post__crumbs a { color: #848484; text-decoration: none; }
body.viraf-site .viraf-post__crumbs a:hover { color: var(--viraf-yellow-hover); }

body.viraf-site .viraf-post__title h1,
body.viraf-site .viraf-post__title .dmdc-post-title {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 54px;
  color: var(--viraf-black);
  margin: 0;
}
/* Cỡ chữ / giãn dòng / màu của dòng ngày đăng nay do CÀI ĐẶT widget quyết định (module
   post_info đọc thật các ô Kiểu dáng từ 21/08, và phát CSS có bộ chọn #id nên thắng rule
   theme). Ở đây chỉ còn họ chữ — module cố ý KHÔNG đặt font-family để chữ thừa kế theme —
   và lề, thứ module không có ô cài đặt. */
body.viraf-site .viraf-post__meta {
  font-family: var(--viraf-font-body);
  margin: 10px 0 26px;
}

/* Thân bài: nội dung do CKEditor/WordPress sinh nên phải nhắm thẻ con thật */
body.viraf-site .viraf-post__body {
  font-family: var(--viraf-font-body);
  font-size: 19px;
  line-height: 32px;
  color: var(--viraf-copy);
}
body.viraf-site .viraf-post__body p { margin: 0 0 20px; }
body.viraf-site .viraf-post__body h2,
body.viraf-site .viraf-post__body h3,
body.viraf-site .viraf-post__body h4 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  color: var(--viraf-black);
  margin: 34px 0 14px;
}
body.viraf-site .viraf-post__body h2 { font-size: 30px; line-height: 40px; }
body.viraf-site .viraf-post__body h3 { font-size: 25px; line-height: 34px; }
body.viraf-site .viraf-post__body h4 { font-size: 21px; line-height: 30px; }
body.viraf-site .viraf-post__body ul,
body.viraf-site .viraf-post__body ol { margin: 0 0 20px; padding-left: 26px; }
body.viraf-site .viraf-post__body li { margin-bottom: 10px; }
body.viraf-site .viraf-post__body a { color: #0b62c4; text-decoration: underline; }
/* Nút "Đăng ký tư vấn ngay" thay chỗ biểu mẫu Fluent Forms chết đã gỡ khỏi thân bài
   (xem scripts/_migrate/87-clean-post-content.mjs). Không có rule này thì nó ra một dòng
   link xanh gạch chân lọt thỏm giữa bài, chẳng ai nhận ra là lời mời hành động. */
body.viraf-site .viraf-post__body .viraf-post__cta { margin: 26px 0 30px; }
body.viraf-site .viraf-post__body .viraf-post__cta a {
  display: inline-block;
  padding: 14px 38px;
  border-radius: 30px;
  background-color: var(--viraf-yellow);
  color: var(--viraf-black);
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--viraf-transition), color var(--viraf-transition);
}
body.viraf-site .viraf-post__body .viraf-post__cta a:hover {
  background-color: var(--viraf-black);
  color: var(--viraf-yellow);
}
body.viraf-site .viraf-post__body img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 12px 0 24px;
}
body.viraf-site .viraf-post__body figure { max-width: 100%; margin: 12px 0 24px; }
body.viraf-site .viraf-post__body figcaption {
  font-size: 15px;
  line-height: 24px;
  color: #848484;
  text-align: center;
  margin-top: 8px;
}
body.viraf-site .viraf-post__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 17px;
}
body.viraf-site .viraf-post__body th,
body.viraf-site .viraf-post__body td {
  border: 1px solid var(--viraf-border);
  padding: 10px 12px;
  vertical-align: top;
}
body.viraf-site .viraf-post__body th { background-color: var(--viraf-beige); font-weight: 700; }
/* Bảng rộng trong bài crawl từ WP hay tràn ngang -> cho cuộn trong khung riêng */
body.viraf-site .viraf-post__body .table-responsive,
body.viraf-site .viraf-post__body figure.wp-block-table { overflow-x: auto; }

/* ===========================================================================
   CỘT PHẢI — 2 thẻ theo Figma 4049:20, mỗi thẻ 358x809 bo góc 20:
     "Tin nổi bật"  #FFF8DD   ·   "Tin liên quan" #EDEDED
   Ruột thẻ: tiêu đề Afacad 700 25/35 → ẢNH BÀI ĐẦU 295x203 bo 20 → 5 tiêu đề bài,
   bài đầu Afacad 600, ngăn nhau bằng đường kẻ mảnh.

   Hai thẻ dùng HAI widget KHÁC NHAU (post_list và post_related_posts, lý do ở
   55-build-post-templates.mjs) nên lớp lang HTML khác nhau — mọi rule dưới đây phải
   phủ cả `.post-list-card` lẫn `.rp-card`.
   =========================================================================== */
body.viraf-site .viraf-post__side { display: flex; flex-direction: column; gap: 50px; }
body.viraf-site .viraf-post__card { border-radius: 20px; padding: 20px 30px 30px; overflow: hidden; }
body.viraf-site .viraf-post__hot { background-color: #FFF8DD; }
body.viraf-site .viraf-post__rel { background-color: #EDEDED; }

/* Tiêu đề thẻ: hộp 1 dùng widget heading, hộp 2 tự in <h2 class="dmdc-rp-title">.
   `!important` là bắt buộc cho hộp 2: module tự nhét <style> với bộ chọn `#rpw-<id>`
   (1,0,0) nên rule theo class (0,3,0) thua — đo được 30.4px thay vì 25px. */
body.viraf-site .viraf-post__card-title h2,
body.viraf-site .viraf-post__card .dmdc-rp-title {
  font-family: var(--viraf-font-body) !important;
  font-weight: 700 !important;
  font-size: 25px !important;
  line-height: 35px !important;
  color: var(--viraf-black) !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

/* Bỏ khung/nền/padding mặc định của 2 module để thẻ tự lo phần trang trí */
body.viraf-site .viraf-post__card .dmdc-post-list-container,
body.viraf-site .viraf-post__card .dmdc-related-posts { padding: 0 !important; margin: 0 !important; }
body.viraf-site .viraf-post__card .post-list-card,
body.viraf-site .viraf-post__card .rp-card {
  display: block !important;
  margin: 0 !important;
  padding: 20px 0 !important;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.viraf-site .viraf-post__card .d-flex.flex-column.gap-4 { gap: 0 !important; }
body.viraf-site .viraf-post__card .row { margin: 0 !important; }
body.viraf-site .viraf-post__card .row > [class*="col-"] { padding: 0 !important; }
body.viraf-site .viraf-post__card .post-list-card:last-child,
body.viraf-site .viraf-post__card .rp-card:last-child { border-bottom: 0; padding-bottom: 0 !important; }
body.viraf-site .viraf-post__card .post-list-body,
body.viraf-site .viraf-post__card .rp-body { padding: 0 !important; }

/* CHỈ bài đầu có ảnh (Figma). Ẩn hẳn bằng display:none để Chrome khỏi tải ảnh thừa.
   BẪY: trong post_related_posts mỗi thẻ nằm trong MỘT div cột riêng (`.row > .col-md-12`)
   nên `.rp-card:not(:first-child)` không bao giờ khớp — thẻ nào cũng là con đầu của cột
   nó. Phải đếm ở tầng CỘT. post_list thì các `<article>` là anh em ruột nên đếm thẳng. */
body.viraf-site .viraf-post__card .post-list-card:not(:first-child) .post-list-thumb,
body.viraf-site .viraf-post__card .row > [class*="col-"]:not(:first-child) .rp-thumb { display: none !important; }
body.viraf-site .viraf-post__card .post-list-card:first-child,
body.viraf-site .viraf-post__card .row > [class*="col-"]:first-child .rp-card { padding-top: 0 !important; }
body.viraf-site .viraf-post__card .row > [class*="col-"]:last-child .rp-card { border-bottom: 0; padding-bottom: 0 !important; }
body.viraf-site .viraf-post__card .post-list-thumb,
body.viraf-site .viraf-post__card .rp-thumb {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  margin: 0 0 22px !important;
  border-radius: 20px;
  overflow: hidden;
}
body.viraf-site .viraf-post__card .post-list-thumb img,
body.viraf-site .viraf-post__card .rp-thumb img {
  display: block;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 295 / 203;
  object-fit: cover;
}

/* Tiêu đề bài: bài ĐẦU đậm hơn (Afacad 600), các bài sau 400 — đúng Figma */
body.viraf-site .viraf-post__card .post-list-card h2,
body.viraf-site .viraf-post__card .post-list-card h3,
body.viraf-site .viraf-post__card .post-list-card h4,
body.viraf-site .viraf-post__card .post-list-card h5,
body.viraf-site .viraf-post__card .rp-card-title,
body.viraf-site .viraf-post__card .rp-card-title a,
body.viraf-site .viraf-post__card .post-list-card a {
  font-family: var(--viraf-font-body) !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 26px !important;
  color: var(--viraf-black) !important;
  text-decoration: none;
  margin: 0;
}
body.viraf-site .viraf-post__card .post-list-card:first-child h2,
body.viraf-site .viraf-post__card .post-list-card:first-child h3,
body.viraf-site .viraf-post__card .post-list-card:first-child h4,
body.viraf-site .viraf-post__card .post-list-card:first-child a,
body.viraf-site .viraf-post__card .row > [class*="col-"]:first-child .rp-card-title,
body.viraf-site .viraf-post__card .row > [class*="col-"]:first-child .rp-card-title a { font-weight: 600 !important; }
body.viraf-site .viraf-post__card a:hover { color: var(--viraf-yellow-hover) !important; }
/* post_related_posts kẹp tiêu đề còn 2 dòng bằng -webkit-line-clamp (dòng 149 của module)
   nên hộp "Tin liên quan" ra "… –…" trong khi hộp "Tin nổi bật" hiện đủ chữ — hai hộp
   cạnh nhau mà một bên cụt là thấy ngay. Figma cho tiêu đề chạy đủ 2–3 dòng. */
body.viraf-site .viraf-post__card .rp-card-title {
  display: block !important;
  -webkit-line-clamp: none !important;
  overflow: visible !important;
}
/* Module post_list còn in thêm hàng meta/nhãn chuyên mục — Figma chỉ có tiêu đề */
body.viraf-site .viraf-post__card .post-meta-top,
body.viraf-site .viraf-post__card .category-badge,
body.viraf-site .viraf-post__card .category-badge-list,
body.viraf-site .viraf-post__card .rp-meta,
body.viraf-site .viraf-post__card .rp-excerpt { display: none !important; }

/* ===========================================================================
   THANH CHIA SẺ DỌC — Figma 4049:20: cột 37px nằm NGOÀI khung, lệch trái 85px,
   mép trên ngang chỗ bắt đầu đoạn mở bài (y255 so với breadcrumb y0).

   Dùng `position: sticky` chứ không `absolute`: bài dài 3000px mà thanh đứng yên ở
   y255 thì đọc tới giữa bài là mất hút. Sticky vẫn khớp toạ độ Figma lúc mới vào trang.
   Ở <1400px không còn đủ 85px lề nên chuyển thành hàng NGANG nằm trên nội dung.
   =========================================================================== */
/* L-17: style-engine gán `overflow:hidden` cho MỌI container có đặt `width` — mà 3 tầng
   băng/hàng/cột đều có. Thanh chia sẻ thò ra ngoài 85px nên bị xén sạch (đo: hộp vẫn báo
   37x415 đúng chỗ, chỉ là không vẽ ra pixel nào — nhìn getBoundingClientRect sẽ tưởng ổn). */
body.viraf-site .viraf-post,
body.viraf-site .viraf-post__row,
body.viraf-site .viraf-post__main { overflow: visible !important; }
body.viraf-site .viraf-post__main { position: relative; }

/* Thanh chia sẻ nay là MODULE `share_bar` — hình dáng nút (cỡ, màu, viền, đường kẻ, chú
   thích khi rê chuột) do CHÍNH MODULE phát ra theo cài đặt, nên theme không còn giữ bản
   sao nào nữa. Ở đây chỉ lo VỊ TRÍ trong bố cục bài: cột dọc nằm NGOÀI khung 85px, mép
   trên ngang chỗ mở bài (Figma 4049:20 y255). */
/* ĐÍNH CHÍNH 21/08 — bản cũ ghi `position: absolute !important` kèm chú thích "vì style-engine
   gắn position:relative inline". Đo lại trên trang thật: `el.getAttribute('style')` của widget
   này RỖNG — engine không hề ghi position inline (`.dmdc-column > :not(.dmdc-bg-layer)` chỉ là
   rule trong BASE_ENGINE_CSS, ưu tiên (0,2,0), thua rule dưới đây (0,2,1)). Nên `!important`
   vừa thừa vừa có hại: nó khoá chết ô "Bật Sticky" ở tab Nâng cao — đúng lỗi L-26 vừa gặp ở
   post_info. Đã bỏ; đặt chỗ mặc định nay gắn với nhánh CHƯA bật ghim. */
body.viraf-site .viraf-post__share:not(.dmdc-sticky-col) {
  position: absolute;
  top: 255px;
  left: -85px;
  z-index: 3;
  /* KHÔNG ghi cứng 37px: khung absolute không đặt width thì tự co vừa nội dung, nên bề
     ngang chạy theo ô "Cỡ biểu tượng". Bản cũ ghim 37px làm nút 50px tràn ra ngoài khung. */
  width: max-content;
}

/* GHIM CHẠY DỌC BÀI (tab Nâng cao > Bật Sticky). `server/render.js` gắn class
   `.dmdc-sticky-col` cho node có `sticky:'yes'`.

   Không thể ghim thẳng khung widget: thanh này bị kéo ra LỀ TRÁI ngoài cột nội dung, mà
   `position: sticky` thì phần tử vẫn NẰM TRONG DÒNG CHẢY — ghim tại chỗ là nó chiếm ~415px
   chiều cao ngay đầu bài và đẩy toàn bộ nội dung xuống. Cách đúng cho dải bên: KHUNG bọc
   absolute trải hết chiều cao bài (không chiếm dòng chảy), còn THANH bên trong mới ghim —
   nó trượt theo trong lòng khung nên không bao giờ ra khỏi phạm vi bài viết.

   `--dmdc-sticky-top` do style-engine phát từ ô "Khoảng cách đỉnh"; 120px chỉ là dự phòng
   khi người dùng để trống.

   VÌ SAO Ở ĐÂY `!important` LÀ ĐÚNG (khác hẳn L-26). Hai thứ phải thắng, đo tận nơi:
     · KHUNG: engine ghi THẲNG vào `style=""` của widget
       `position:sticky;top:120px;--dmdc-sticky-top:120px` — style nội tuyến thắng mọi
       stylesheet không `!important`, nên rule theo class không có cửa;
     · THANH: module phát `#sb-<id>{position:relative}` — bộ chọn ID (1,0,0) thắng rule theo
       class (0,4,1). Không `!important` thì thanh giữ `relative` mà vẫn ăn `top:120px` của
       rule dưới ⇒ bị đẩy tụt xuống 120px (đo được: y=240 thay vì 120).
   Khác biệt cốt lõi với L-26: ở đó T2 CHẶN một ô cài đặt; ở đây T2 THI HÀNH chính ô cài đặt
   đó theo cách duy nhất hợp bố cục. Tắt Sticky là không rule nào trong khối này chạm tới, và
   ô "Khoảng cách đỉnh" vẫn điều khiển được qua `--dmdc-sticky-top`. */
body.viraf-site .viraf-post__share.dmdc-sticky-col {
  position: absolute !important;
  top: 0 !important;
  left: -85px;
  z-index: 3;
  width: max-content;   /* theo ô "Cỡ biểu tượng", xem chú thích nhánh không ghim */
  height: 100%;
  /* Khung rỗng cao bằng cả bài, để nguyên sẽ chắn chuột suốt dải lề trái (không bôi đen
     được chữ ở mép). Chỉ mở lại con trỏ cho đúng thanh nút bên trong. */
  pointer-events: none;
}
body.viraf-site .viraf-post__share.dmdc-sticky-col .dmdc-share-bar {
  position: sticky !important;
  top: var(--dmdc-sticky-top, 120px);
  pointer-events: auto;
}
body.viraf-site .viraf-post__share .dmdc-share-txt { font-family: var(--viraf-font-display); }
/* Bản in: module đã tự ẩn thanh bên trong, nhưng KHUNG BỌC widget vẫn còn. Ở khổ giấy
   (~816px CSS) nhánh ≤1599px có hiệu lực nên khung về `position: static` và chừa lại một
   dải trắng 28px giữa ngày đăng và nội dung. Ẩn hẳn cả khung. */
@media print { body.viraf-site .viraf-post__share { display: none !important; } }

/* ---------- responsive ---------- */
/* Dưới 1400px thì lề trái không còn đủ 85px cho cột chia sẻ (khung 1425 + 2×85 = 1595,
   cộng thanh cuộn là vừa hết 1400). Chuyển thành hàng NGANG đặt trên nội dung. */
@media (max-width: 1599.98px) {
  /* Không còn `!important`: nay chỉ cần LIỆT KÊ ĐỦ CẢ HAI nhánh cho bằng độ ưu tiên (0,3,1)
     với hai rule đặt chỗ phía trên, rồi thắng nhờ đứng sau. Thiếu một nhánh là thanh vẫn
     absolute với `left:-85px` và thò ra ngoài mép trái màn hình (đo ở 1366px: x=-70, ở
     375px: x=-50) — trang không sinh thanh cuộn ngang nên nhìn lướt rất dễ bỏ qua.
     Bỏ `!important` là có chủ đích: để ô Lề/Z-Index ở tab Nâng cao còn đè lên được.

     Dưới 1600px KHÔNG ghim, kể cả khi người dùng bật Sticky: khung 1425 + 2×85 = 1595, hết
     chỗ cho dải bên trái nên thanh phải lật ngang nằm TRÊN nội dung — ghim một thanh ngang
     ở đó là nó phủ lên chữ khi cuộn. Ghim chỉ có nghĩa từ 1600px trở lên. */
  body.viraf-site .viraf-post__share:not(.dmdc-sticky-col),
  body.viraf-site .viraf-post__share.dmdc-sticky-col {
    /* `!important` chỉ cho `position`/`top`: phải thắng style nội tuyến của engine (nhánh
       bật Sticky) và rule `!important` đặt chỗ phía trên. Các thuộc tính còn lại để trần —
       cùng độ ưu tiên (0,3,1) và đứng sau là đủ, giữ chỗ cho ô Lề tab Nâng cao. */
    position: static !important;
    top: auto !important;
    left: auto;
    width: auto;
    height: auto;
    pointer-events: auto;
    margin: 6px 0 22px;
  }
  body.viraf-site .viraf-post__share.dmdc-sticky-col .dmdc-share-bar {
    position: static !important;
    top: auto;
  }
  /* Module dựng cột dọc theo cài đặt `direction`; ở khổ hẹp theme lật ngang. Cần
     `!important` vì module phát rule qua bộ chọn có ID (`#uid`), ưu tiên (1,0,0) —
     rule theo class của theme (0,3,0) thua kể cả khi đứng sau. */
  body.viraf-site .viraf-post__share .dmdc-share-bar {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  body.viraf-site .viraf-post__share .dmdc-share-rule { width: 1px !important; height: 24px !important; margin: 0 6px !important; align-self: center; }
  body.viraf-site .viraf-post__share .dmdc-share-toast { left: auto !important; right: 0; bottom: -34px !important; }
}
@media (max-width: 1199.98px) {
  body.viraf-site .viraf-post__row { flex-wrap: wrap; gap: 40px 0; }
  body.viraf-site .viraf-post__main,
  body.viraf-site .viraf-post__side { flex: 0 0 100%; max-width: 100%; }
  body.viraf-site .viraf-post__title h1 { font-size: 32px; line-height: 44px; }
  body.viraf-site .viraf-arch__title h1 { font-size: 32px; line-height: 44px; }
}
@media (max-width: 700px) {
  body.viraf-site .viraf-arch { padding: 40px 0 56px; }
  body.viraf-site .viraf-arch__title h1 { font-size: 26px; line-height: 36px; margin-bottom: 26px; }
  body.viraf-site .viraf-arch__cards h2,
  body.viraf-site .viraf-arch__cards h3,
  body.viraf-site .viraf-arch__cards h4,
  body.viraf-site .viraf-arch__cards h5 { font-size: 19px; line-height: 26px; }
  body.viraf-site .viraf-post { padding: 22px 0 50px; }
  body.viraf-site .viraf-post__title h1 { font-size: 25px; line-height: 34px; }
  body.viraf-site .viraf-post__body { font-size: 17px; line-height: 29px; }
  body.viraf-site .viraf-post__body h2 { font-size: 23px; line-height: 32px; }
  body.viraf-site .viraf-post__body h3 { font-size: 20px; line-height: 29px; }
  body.viraf-site .viraf-post__hot { padding: 20px 18px 24px; }
}

/* Hộp "Tin nổi bật" (Figma 107:1990) chỉ liệt kê tiêu đề bài.
   Link "Đọc bài viết" nay TẮT BẰNG CÀI ĐẶT `show_read_more: 'no'` (bổ sung vào post_list
   ngày 20/08/2026), không còn phải ẩn bằng CSS ở đây nữa. */
body.viraf-site .viraf-post__hot-list .post-list-body { padding: 0 !important; }

/* ---------------------------------------------------------------------------
   Thẻ bài trên trang LƯU TRỮ CHUYÊN MỤC dùng CÙNG dáng thẻ với slider tin tức
   trang chủ (Figma 106:1348 và 68:93 vẽ cùng một thẻ: ảnh 337x232 bo 20px,
   tiêu đề Raleway 700 22/28, ngày #848484 14/30, mô tả 3-4 dòng, KHÔNG viền/khung).
   Module post_grid dùng chung tên class với post_slider (.post-card, .post-card-thumb,
   .post-title, .post-meta-top, .post-excerpt, .category-badge, .post-footer) nên chỉ
   cần lặp lại bộ rule dưới scope .viraf-arch__cards.
   Ba thứ PHẢI đè vì module ghi cứng: khung thẻ (border/shadow), nhãn chuyên mục nổi trên
   ảnh, và link "Đọc bài viết" — cả ba đều không có setting để tắt.
   Thứ tự DOM của module là NGÀY trước TIÊU ĐỀ; Figma là tiêu đề trước ⇒ đảo bằng `order`.
   --------------------------------------------------------------------------- */
body.viraf-site .viraf-arch__cards .post-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--viraf-white) !important;
  box-shadow: none !important;
  overflow: visible !important;
  height: 100%;
}
body.viraf-site .viraf-arch__cards .post-card:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none !important;
}
body.viraf-site .viraf-arch__cards .post-card:hover .transition-transform { transform: none; }
body.viraf-site .viraf-arch__cards .post-card-thumb {
  height: auto !important;
  aspect-ratio: 337 / 232 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #f3f3f3;
}
body.viraf-site .viraf-arch__cards .post-card-thumb img { width: 100%; height: 100%; object-fit: cover !important; }
body.viraf-site .viraf-arch__cards .post-card-body { padding: 22px 0 0 !important; display: flex; flex-direction: column; }
/* Nhãn chuyên mục nổi trên ảnh + icon meta: module ghi cứng, CHƯA có control -> vẫn ẩn ở T2.
   (Link "Đọc bài viết" đã chuyển sang cài đặt `show_read_more: 'no'`.) */
body.viraf-site .viraf-arch__cards .category-badge,
body.viraf-site .viraf-arch__cards .meta-icon { display: none !important; }
body.viraf-site .viraf-arch__cards .post-title { order: 1; margin: 0 !important; -webkit-line-clamp: 3; }
body.viraf-site .viraf-arch__cards .post-title,
body.viraf-site .viraf-arch__cards .post-title a {
  color: var(--viraf-black) !important;
  font: 700 22px/28px var(--viraf-font-display) !important;
  text-align: justify;
  text-decoration: none;
}
body.viraf-site .viraf-arch__cards .post-title a:hover { color: var(--viraf-yellow-hover) !important; }
body.viraf-site .viraf-arch__cards .post-meta-top {
  order: 2;
  margin: 14px 0 0 !important;
  color: #848484 !important;
  font: 400 14px/30px var(--viraf-font-display) !important;
  opacity: 1 !important;
}
body.viraf-site .viraf-arch__cards .post-excerpt {
  order: 3;
  margin: 6px 0 0 !important;
  color: var(--viraf-copy) !important;
  font: 400 18px/26px var(--viraf-font-body) !important;
  text-align: justify;
  opacity: 1 !important;
  -webkit-line-clamp: 3;
}

/* Figma 107:1990 (ngày đăng là chữ trơn, không icon lịch, các mục không giãn cách) nay đặt
   bằng CHÍNH CÁC Ô CÀI ĐẶT của post_info — `show_icon:'no'` + `item_gap:0` — chứ KHÔNG ép
   bằng CSS theme nữa.

   Bản cũ ghi ở đây:
       .viraf-post__meta i            { display: none !important; }
       .viraf-post__meta .dmdc-post-info { gap: 0 !important; }
   Hai dòng đó khoá chết ô "Hiện icon" và ô "Khoảng cách giữa các mục": style-engine vẫn phát
   đúng `gap:20px` theo cài đặt, nhưng `!important` ở T2 thắng, nên bật/tắt trong Builder
   không đổi gì trên trang. ĐỪNG đưa trở lại. Nguyên tắc: thuộc tính nào ĐÃ CÓ ô cài đặt thì
   T2 không được đụng tới — muốn đổi thì sửa cài đặt của widget.
   (Bộ chọn `.meta-icon` ở đây còn là thừa: đó là class của post_grid/list/slider, post_info
   dùng `.dmdc-post-info-icon`.) Bộ kiểm chặn tái phạm: kiểm 151. */

/* ---------------------------------------------------------------------------
   Chống TRÀN NGANG do URL dài trong nội dung 245 bài cào từ WordPress.
   Nhiều bài dán thẳng link Google Docs / văn bản pháp luật dạng
   https://docs.google.com/document/d/1YURuQEkK6L6DC2wBtvjoSmM23OG6c4ma/e... —
   một chuỗi KHÔNG có khoảng trắng nên ở 375px nó rộng 566px và chọc ra ngoài khung.
   `word-break: break-word` KHÔNG cắt được URL trong mọi trình duyệt; phải dùng
   `overflow-wrap: anywhere` (và đặt trên CHÍNH thẻ <a>, không chỉ thẻ cha).
   --------------------------------------------------------------------------- */
body.viraf-site .viraf-post__body,
body.viraf-site .viraf-post__body p,
body.viraf-site .viraf-post__body li,
body.viraf-site .viraf-post__body a,
body.viraf-site .viraf-post__body td,
body.viraf-site .viraf-post__body th,
body.viraf-site .viraf-arch__cards .post-excerpt {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Bảng / khối mã rộng trong bài WP: cuộn trong khung riêng thay vì đẩy cả trang */
body.viraf-site .viraf-post__body table { display: block; max-width: 100%; overflow-x: auto; }
body.viraf-site .viraf-post__body pre { max-width: 100%; overflow-x: auto; }
body.viraf-site .viraf-post__body iframe { max-width: 100%; }

/* ============================================================================
   ARCHETYPE TRANG KHOÁ HỌC (4 trang) — bám Figma node 244:20 (1920x7406).
   Dùng lại thang chữ đã chốt ở archetype dịch vụ; nhắc lại: css_classes của Builder
   nằm trên DIV BỌC widget nên rule chữ phải nhắm THẲNG thẻ con (h1..h4).
   ============================================================================ */

/* ---- hero: băng vàng + h1 3 dòng + nút ĐEN (khác nút vàng của trang dịch vụ) ---- */
body.viraf-site .viraf-crs-hero {
  min-height: 660px;
  display: flex;
  align-items: center;
  padding: 90px 0;
  background-color: var(--viraf-yellow);
}
body.viraf-site .viraf-crs-hero__col { align-items: flex-start; }
body.viraf-site .viraf-crs-hero__title h1 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 50px;
  line-height: 70px;
  color: var(--viraf-black);
  margin: 0 0 34px;
  max-width: 620px;
}
/* Nút CTA khoá học: viên thuốc ĐEN chữ trắng (Figma), khác CTA vàng của trang dịch vụ.
   Phải !important vì rule toàn cục `.btn-primary{color:var(--e-global-color-primary)!important}`
   trong <style> của trang sẽ ghi đè màu chữ. */
body.viraf-site .viraf-crs-cta .dmdc-button,
body.viraf-site .viraf-crs-cta .dmdc-button span {
  color: var(--viraf-white) !important;
}
body.viraf-site .viraf-crs-cta .dmdc-button {
  background-color: var(--viraf-black) !important;
  border-color: var(--viraf-black) !important;
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.6px;
  padding: 20px 34px;
  border-radius: 999px;
  text-transform: uppercase;
}
body.viraf-site .viraf-crs-cta .dmdc-button:hover {
  background-color: var(--viraf-ink) !important;
  border-color: var(--viraf-ink) !important;
}
body.viraf-site .viraf-crs-hero__col .viraf-crs-cta { align-self: flex-start; }

/* ---- intro: chữ trái + collage ảnh & 2 thẻ đen bên phải ---- */
body.viraf-site .viraf-crs-intro { padding: 70px 0 40px; background-color: var(--viraf-white); }
body.viraf-site .viraf-crs-intro__row { gap: 0 56px; align-items: flex-start; flex-wrap: nowrap; }
body.viraf-site .viraf-crs-intro__copy { flex: 0 0 calc(52% - 28px); max-width: calc(52% - 28px); }
body.viraf-site .viraf-crs-intro__media { flex: 0 0 calc(48% - 28px); max-width: calc(48% - 28px); }
body.viraf-site .viraf-crs-intro__text {
  font-family: var(--viraf-font-body);
  font-size: 20px;
  line-height: 30px;
  color: var(--viraf-copy);
  text-align: justify;
}
body.viraf-site .viraf-crs-intro__text p { margin: 0 0 16px; }
body.viraf-site .viraf-crs-intro__text strong { color: var(--viraf-black); font-weight: 700; }
body.viraf-site .viraf-crs-intro__copy .viraf-crs-cta { margin-top: 14px; }
/* ---- KHẢM 2 CỘT SO LE (Figma 4049:22) ----
   Tỉ lệ đo trên khung 1425, cột ảnh rộng 655 (từ x765 tới x1420):
     · 2 cột 316px, khe 23px      -> 316/655 = 48.24%, khe 3.5%
     · thẻ đen 255x260             -> 255/316 = 80.7% bề ngang cột
     · cột phải tụt 68px so với trái
     · thẻ cột trái DẠT PHẢI, thẻ cột phải DẠT TRÁI (tạo hình răng lược)
   Ảnh trái 316x396 (tỉ lệ 0.798), ảnh phải 316x390 — lấy chung 316/393. */
body.viraf-site .viraf-crs-mosaic { gap: 0 3.5%; align-items: stretch; }
body.viraf-site .viraf-crs-mosaic__col {
  flex: 0 0 48.24% !important;
  max-width: 48.24%;
  gap: 27px;
}
body.viraf-site .viraf-crs-mosaic__col--b { margin-top: 10.4%; }   /* 68/655 */
body.viraf-site .viraf-crs-mosaic__col--a > .viraf-crs-badge { align-self: flex-end; }
body.viraf-site .viraf-crs-mosaic__col--b > .viraf-crs-badge { align-self: flex-start; }
body.viraf-site .viraf-crs-intro__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 316 / 393;
  object-fit: cover;
  border-radius: 20px;
}
/* `flex: 0 0 auto` là bắt buộc: cột khảm là flex-column, thẻ đen là `.dmdc-el--container`
   được engine cho co giãn nên nó BỊ KÉO CAO cho bằng cột bên kia (đo 329px thay vì 260) —
   `aspect-ratio` thua vì chiều cao đã bị ấn định từ bên ngoài. Figma để 2 cột CAO KHÁC
   NHAU (683 và 742) đúng như hình răng lược. */
body.viraf-site .viraf-crs-badge {
  flex: 0 0 auto !important;
  width: 80.7% !important;
  max-width: 80.7%;
  aspect-ratio: 255 / 260;
  background-color: var(--viraf-black);
  border-radius: 20px;
  padding: 0 16px !important;
  align-items: center;
  text-align: center;
  justify-content: center;
}
/* Icon đồng hồ nằm TRONG thẻ (Figma 65x65, cách chữ 20px) */
body.viraf-site .viraf-crs-badge__icon { width: 65px; margin: 0 0 20px; }
body.viraf-site .viraf-crs-badge__icon img { width: 65px !important; height: 65px !important; object-fit: contain; }
/* "10 buổi" là VÀNG chứ không trắng — đã lấy mẫu pixel từ bản render Figma (255,203,5). */
body.viraf-site .viraf-crs-badge__big h3 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 50px;
  line-height: 70px;
  color: var(--viraf-yellow);
  margin: 0;
}
body.viraf-site .viraf-crs-badge__small h4 {
  font-family: var(--viraf-font-display);
  font-weight: 400;
  font-size: 25px;
  line-height: 25px;
  color: var(--viraf-white);
  margin: 0;
}
body.viraf-site .viraf-crs-badge__eyebrow h4 {
  font-family: var(--viraf-font-display);
  font-weight: 400;
  font-size: 25px;
  line-height: 25px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--viraf-white);
  margin: 0 0 18px;
}
body.viraf-site .viraf-crs-badge__title h3 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 35px;
  color: var(--viraf-yellow);
  margin: 0;
}

/* ---- hoa văn giữa các khối ---- */
body.viraf-site .viraf-crs-ornament { padding: 26px 0; }
body.viraf-site .viraf-crs-ornament__col { align-items: center; }
body.viraf-site .viraf-crs-ornament__img img { width: 408px; max-width: 100%; height: auto; }

/* ---- khối 2 cột ảnh/chữ ---- */
body.viraf-site .viraf-crs-split { padding: 40px 0; background-color: var(--viraf-white); }
body.viraf-site .viraf-crs-split__row { gap: 0 60px; align-items: center; flex-wrap: nowrap; }
body.viraf-site .viraf-crs-split__media,
body.viraf-site .viraf-crs-split__copy {
  flex: 0 0 calc(50% - 30px);
  max-width: calc(50% - 30px);
  padding: 0 !important;
}
body.viraf-site .viraf-crs-split__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 683 / 420;
  object-fit: cover;
  border-radius: 20px;
}
body.viraf-site .viraf-crs-split__title h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 35px;
  line-height: 48px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-crs-split__rule { margin: 18px 0 20px; }
body.viraf-site .viraf-crs-split__text {
  font-family: var(--viraf-font-body);
  font-size: 19px;
  line-height: 28px;
  color: var(--viraf-copy);
}
body.viraf-site .viraf-crs-split__text ul { margin: 0; padding-left: 22px; }
body.viraf-site .viraf-crs-split__text li { margin-bottom: 8px; }
body.viraf-site .viraf-crs-split__text p { margin: 0 0 14px; }
body.viraf-site .viraf-crs-split__text p:last-child,
body.viraf-site .viraf-crs-split__text li:last-child { margin-bottom: 0; }
/* Khối giảng viên: ảnh chân dung dọc nên đổi tỉ lệ */
body.viraf-site .viraf-crs-teacher .viraf-crs-split__img img { aspect-ratio: 3 / 4; max-height: 520px; }
body.viraf-site .viraf-crs-teacher .viraf-crs-split__media { flex: 0 0 calc(34% - 30px); max-width: calc(34% - 30px); }
body.viraf-site .viraf-crs-teacher .viraf-crs-split__copy { flex: 0 0 calc(66% - 30px); max-width: calc(66% - 30px); }

/* ---- đoạn tóm tắt khoá học (căn giữa) ---- */
body.viraf-site .viraf-crs-summary { padding: 20px 0 60px; }
body.viraf-site .viraf-crs-summary__col { align-items: center; text-align: center; }
body.viraf-site .viraf-crs-summary__text {
  font-family: var(--viraf-font-body);
  font-size: 22px;
  line-height: 34px;
  color: var(--viraf-copy);
  max-width: 980px;
  margin: 0 auto;
}
body.viraf-site .viraf-crs-summary__text p { margin: 0; }
body.viraf-site .viraf-crs-summary__text strong { color: var(--viraf-black); font-weight: 700; }

/* ---- chương trình học: trục dọc so le ---- */
/* Nền băng chương trình học: KHÔNG phải một tấm be đặc.
   Figma 4049:22 để nền TRẮNG, chỉ có 2 dải chuyển sắc #F4F3ED cao 303px ăn vào từ mép
   trên và mép dưới. Lấy mẫu pixel trên bản render xác nhận: y3775 = 244,243,236 (đậm
   nhất, sát mép trên) → y4070 trắng hẳn → giữa băng trắng → y5530 = 245,242,234 (đậm
   nhất, sát mép dưới). Tô đặc cả băng như trước làm phần giữa tối hơn thiết kế rõ rệt. */
body.viraf-site .viraf-crs-program {
  padding: 72px 0 80px;
  background-color: var(--viraf-white);
  background-image:
    linear-gradient(to bottom, #F4F3ED 0%, rgba(244, 243, 237, 0) 100%),
    linear-gradient(to top,    #F4F3ED 0%, rgba(244, 243, 237, 0) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  background-size: 100% 303px, 100% 303px;
}
body.viraf-site .viraf-crs-program__head-col { align-items: center; text-align: center; }
/* Figma: logo 250x92, cách tiêu đề 54px; tiêu đề Raleway 700 50/70 */
body.viraf-site .viraf-crs-program__logo { width: 250px; margin-bottom: 54px; }
body.viraf-site .viraf-crs-program__logo img { width: 250px !important; height: auto !important; }
body.viraf-site .viraf-crs-program__title h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 50px;
  line-height: 70px;
  color: var(--viraf-black);
  margin: 0 0 44px;
}
/* Module vertical_timeline ghi cứng max-width:1200px cho .dmdc-timeline-main và màu
   xanh Bootstrap cho ngày/chấm; Figma dùng khung 1425px, chấm vàng, KHÔNG có nhãn ngày. */
body.viraf-site .viraf-crs-timeline .dmdc-timeline-main { max-width: 100% !important; }
body.viraf-site .viraf-crs-timeline .dmdc-timeline-date { display: none !important; }
body.viraf-site .viraf-crs-timeline .dmdc-timeline-line { background-color: #2b2b2b !important; width: 2px !important; }
body.viraf-site .viraf-crs-timeline .dmdc-timeline-dot {
  background-color: var(--viraf-white) !important;
  border: 2px solid #2b2b2b !important;
  color: #2b2b2b !important;
}
body.viraf-site .viraf-crs-timeline .dmdc-timeline-title {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-crs-timeline .dmdc-timeline-content {
  font-family: var(--viraf-font-body);
  font-size: 18px;
  line-height: 28px;
  color: var(--viraf-copy);
}
body.viraf-site .viraf-crs-timeline .dmdc-timeline-content p { margin: 0 0 4px; }
body.viraf-site .viraf-crs-timeline .dmdc-timeline-content p:last-child { margin-bottom: 0; }
body.viraf-site .viraf-crs-program__cta-col { align-items: center; margin-top: 34px; }

/* ---- băng "CHUYÊN GIA ĐỒNG HÀNH" ---- */
body.viraf-site .viraf-crs-expert-head { padding: 70px 0 10px; }
body.viraf-site .viraf-crs-expert-head__col { align-items: center; text-align: center; }
body.viraf-site .viraf-crs-expert__eyebrow {
  font-family: var(--viraf-font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--viraf-yellow);
}
body.viraf-site .viraf-crs-expert__eyebrow p { margin: 0; }
body.viraf-site .viraf-crs-expert__title h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 50px;
  color: var(--viraf-black);
  margin: 8px 0 0;
}

/* ---- 2 ô thông tin lớp học ---- */
body.viraf-site .viraf-crs-info { padding: 40px 0 30px; }
body.viraf-site .viraf-crs-info__row { gap: 0 24px; flex-wrap: nowrap; }
body.viraf-site .viraf-crs-infobox {
  flex: 0 0 calc(50% - 12px);
  max-width: calc(50% - 12px);
  flex-direction: row !important;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--viraf-border);
  border-radius: 16px;
  padding: 22px 26px !important;
}
body.viraf-site .viraf-crs-infobox__icon { flex: 0 0 auto; }
body.viraf-site .viraf-crs-infobox__icon img { width: 62px; height: 62px; object-fit: contain; }
body.viraf-site .viraf-crs-infobox__copy { flex: 1 1 auto; min-width: 0; }
body.viraf-site .viraf-crs-infobox__label h4 {
  font-family: var(--viraf-font-body);
  font-size: 17px;
  line-height: 24px;
  color: var(--viraf-copy);
  margin: 0;
}
body.viraf-site .viraf-crs-infobox__value {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 27px;
  color: var(--viraf-black);
}
body.viraf-site .viraf-crs-infobox__value p { margin: 0; }

/* ---- CTA cuối ---- */
body.viraf-site .viraf-crs-final-cta { padding: 20px 0 70px; }
body.viraf-site .viraf-crs-final-cta__col { align-items: center; }

/* ---- khoá học khác ---- */
body.viraf-site .viraf-crs-others { padding: 0 0 80px; }
body.viraf-site .viraf-crs-others__head-col { align-items: flex-start; }
body.viraf-site .viraf-crs-others__title h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 35px;
  line-height: 50px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-crs-others__rule { margin: 14px 0 28px; }
body.viraf-site .viraf-crs-others__grid { gap: 34px 30px; align-items: flex-start; }
body.viraf-site .viraf-crs-othercard {
  flex: 0 0 calc(33.3333% - 20px);
  max-width: calc(33.3333% - 20px);
  padding: 0 !important;
}
body.viraf-site .viraf-crs-othercard__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 455 / 303;
  object-fit: cover;
  border-radius: 16px;
}
body.viraf-site .viraf-crs-othercard__title { margin-top: 16px; }
body.viraf-site .viraf-crs-othercard__title p { margin: 0; }
body.viraf-site .viraf-crs-othercard__title a {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  color: var(--viraf-black);
  text-decoration: none;
  transition: color var(--viraf-transition);
}
body.viraf-site .viraf-crs-othercard__title a:hover { color: var(--viraf-yellow-hover); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1199.98px) {
  body.viraf-site .viraf-crs-hero { min-height: 440px; padding: 60px 0; }
  body.viraf-site .viraf-crs-hero__title h1 { font-size: 38px; line-height: 52px; max-width: 480px; }

  body.viraf-site .viraf-crs-intro__row { flex-wrap: wrap; gap: 34px 0; }
  body.viraf-site .viraf-crs-intro__copy,
  body.viraf-site .viraf-crs-intro__media { flex: 0 0 100%; max-width: 100%; }

  body.viraf-site .viraf-crs-split__row { flex-wrap: wrap; gap: 26px 0; }
  body.viraf-site .viraf-crs-split__media,
  body.viraf-site .viraf-crs-split__copy,
  body.viraf-site .viraf-crs-teacher .viraf-crs-split__media,
  body.viraf-site .viraf-crs-teacher .viraf-crs-split__copy { flex: 0 0 100%; max-width: 100%; }
  body.viraf-site .viraf-crs-split--rev .viraf-crs-split__row { flex-direction: column-reverse; }
  body.viraf-site .viraf-crs-split__title h2 { font-size: 28px; line-height: 38px; }

  body.viraf-site .viraf-crs-program__title h2 { font-size: 30px; line-height: 42px; }
  body.viraf-site .viraf-crs-expert__title h2 { font-size: 28px; line-height: 40px; }
  body.viraf-site .viraf-crs-summary__text { font-size: 19px; line-height: 30px; }

  body.viraf-site .viraf-crs-othercard { flex: 0 0 calc(50% - 15px); max-width: calc(50% - 15px); }
}

@media (max-width: 700px) {
  body.viraf-site .viraf-crs-hero { min-height: 320px; padding: 40px 0; }
  body.viraf-site .viraf-crs-hero__title h1 { font-size: 27px; line-height: 38px; margin-bottom: 24px; }
  body.viraf-site .viraf-crs-cta .dmdc-button { font-size: 16px; padding: 15px 24px; }

  body.viraf-site .viraf-crs-intro { padding: 40px 0 24px; }
  body.viraf-site .viraf-crs-intro__text { font-size: 17px; line-height: 27px; text-align: left; }
  /* Điện thoại: bỏ răng lược, xếp 1 cột; thẻ đen ăn hết bề ngang cho dễ đọc */
  body.viraf-site .viraf-crs-mosaic { flex-direction: column !important; gap: 16px; }
  body.viraf-site .viraf-crs-mosaic__col { flex: 0 0 100% !important; max-width: 100%; gap: 16px; }
  body.viraf-site .viraf-crs-mosaic__col--b { margin-top: 0; }
  body.viraf-site .viraf-crs-badge { width: 100% !important; max-width: 100%; aspect-ratio: auto; padding: 26px 20px !important; align-self: stretch !important; }
  body.viraf-site .viraf-crs-badge__big h3 { font-size: 38px; line-height: 50px; }
  body.viraf-site .viraf-crs-badge__title h3 { font-size: 24px; line-height: 30px; }
  body.viraf-site .viraf-crs-badge__eyebrow h4,
  body.viraf-site .viraf-crs-badge__small h4 { font-size: 19px; line-height: 22px; }

  body.viraf-site .viraf-crs-split { padding: 26px 0; }
  body.viraf-site .viraf-crs-split__title h2 { font-size: 23px; line-height: 32px; }
  body.viraf-site .viraf-crs-split__text { font-size: 17px; line-height: 26px; }

  body.viraf-site .viraf-crs-summary { padding: 14px 0 40px; }
  body.viraf-site .viraf-crs-summary__text { font-size: 17px; line-height: 28px; }

  body.viraf-site .viraf-crs-program { padding: 44px 0 50px; }
  body.viraf-site .viraf-crs-program__title h2 { font-size: 23px; line-height: 33px; margin-bottom: 28px; }
  /* Trục so le không đủ chỗ ở mobile: module tự về 1 cột, chỉ cần chỉnh cỡ chữ */
  body.viraf-site .viraf-crs-timeline .dmdc-timeline-title { font-size: 19px; line-height: 27px; }
  body.viraf-site .viraf-crs-timeline .dmdc-timeline-content { font-size: 16px; line-height: 25px; }

  body.viraf-site .viraf-crs-expert-head { padding: 40px 0 6px; }
  body.viraf-site .viraf-crs-expert__eyebrow { font-size: 16px; letter-spacing: 4px; }
  body.viraf-site .viraf-crs-expert__title h2 { font-size: 22px; line-height: 32px; }

  body.viraf-site .viraf-crs-info__row { flex-wrap: wrap; gap: 16px 0; }
  body.viraf-site .viraf-crs-infobox { flex: 0 0 100%; max-width: 100%; padding: 18px 18px !important; }

  body.viraf-site .viraf-crs-others { padding: 0 0 50px; }
  body.viraf-site .viraf-crs-others__title h2 { font-size: 23px; line-height: 32px; }
  body.viraf-site .viraf-crs-othercard { flex: 0 0 100%; max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   Trục dọc chương trình học: module vertical_timeline vẽ mỗi mục thành THẺ có nền xám
   + bóng; Figma 244:20 chỉ có chữ trơn hai bên đường kẻ. Bỏ toàn bộ khung thẻ và cho
   chữ áp sát đường kẻ (mục bên trái canh phải, mục bên phải canh trái).
   --------------------------------------------------------------------------- */
body.viraf-site .viraf-crs-timeline .dmdc-timeline-item .dmdc-timeline-body,
body.viraf-site .viraf-crs-timeline .dmdc-timeline-item > div:not(.dmdc-timeline-dot) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.viraf-site .viraf-crs-timeline .dmdc-timeline-item { padding-top: 0; padding-bottom: 34px; }
body.viraf-site .viraf-crs-timeline .item-left .dmdc-timeline-title,
body.viraf-site .viraf-crs-timeline .item-left .dmdc-timeline-content { text-align: right; }
body.viraf-site .viraf-crs-timeline .item-right .dmdc-timeline-title,
body.viraf-site .viraf-crs-timeline .item-right .dmdc-timeline-content { text-align: left; }
/* Nội dung nằm CÙNG HÀNG nhưng phía đối diện nhãn (Figma): nhãn trái thì nội dung phải.
   Module xếp title + content cùng một bên nên chỉ chỉnh khoảng cách cho dễ đọc. */
body.viraf-site .viraf-crs-timeline .dmdc-timeline-content { margin-top: 6px; }
body.viraf-site .viraf-crs-timeline .dmdc-timeline-dot {
  width: 18px !important;
  height: 18px !important;
  font-size: 0 !important;
}
body.viraf-site .viraf-crs-timeline .dmdc-timeline-dot i { display: none !important; }

/* ---------------------------------------------------------------------------
   Figma 244:20 đặt NHÃN "Buổi N" và NỘI DUNG ở HAI BÊN ĐỐI DIỆN của đường kẻ
   (Buổi 1 bên trái — chủ đề bên phải, cùng một hàng). Module vertical_timeline lại
   gom title + content vào CÙNG một thẻ `.dmdc-timeline-card` rộng 45% nằm một bên.

   Cách chữa không cần sửa module: cho `.dmdc-timeline-card` dùng `display: contents`
   để title và content trở thành con TRỰC TIẾP của `.dmdc-timeline-item`, rồi biến item
   thành lưới 3 cột `1fr 40px 1fr` và xếp 2 phần vào 2 cột ngoài, đảo theo item-left/right.
   --------------------------------------------------------------------------- */
body.viraf-site .viraf-crs-timeline .dmdc-timeline-item {
  display: grid !important;
  grid-template-columns: 1fr 40px 1fr;
  align-items: start;
  column-gap: 0;
  margin-bottom: 26px !important;
}
body.viraf-site .viraf-crs-timeline .dmdc-timeline-card {
  display: contents !important;
  width: auto !important;
}
/* Buổi lẻ: nhãn cột 1 (canh phải), nội dung cột 3 (canh trái) */
body.viraf-site .viraf-crs-timeline .item-left .dmdc-timeline-title {
  grid-column: 1;
  text-align: right;
  padding-right: 26px;
}
body.viraf-site .viraf-crs-timeline .item-left .dmdc-timeline-content {
  grid-column: 3;
  text-align: left;
  padding-left: 26px;
}
/* Buổi chẵn: đảo bên */
body.viraf-site .viraf-crs-timeline .item-right .dmdc-timeline-title {
  grid-column: 3;
  text-align: left;
  padding-left: 26px;
}
body.viraf-site .viraf-crs-timeline .item-right .dmdc-timeline-content {
  grid-column: 1;
  text-align: right;
  padding-right: 26px;
}
/* Chấm nằm ở cột giữa, thẳng hàng với dòng đầu của nhãn */
body.viraf-site .viraf-crs-timeline .dmdc-timeline-dot {
  position: static !important;
  grid-column: 2;
  grid-row: 1;
  transform: none !important;
  margin: 4px auto 0;
}
body.viraf-site .viraf-crs-timeline .dmdc-timeline-content { margin-top: 0 !important; }

/* Mobile: trục so le không đủ chỗ -> dồn về 1 cột, nhãn trên nội dung dưới, canh trái. */
@media (max-width: 700px) {
  body.viraf-site .viraf-crs-timeline .dmdc-timeline-item {
    grid-template-columns: 26px 1fr;
    column-gap: 12px;
    margin-bottom: 22px !important;
  }
  body.viraf-site .viraf-crs-timeline .dmdc-timeline-line { left: 13px !important; transform: none !important; }
  body.viraf-site .viraf-crs-timeline .dmdc-timeline-dot { grid-column: 1; grid-row: 1; margin: 4px 0 0; }
  body.viraf-site .viraf-crs-timeline .item-left .dmdc-timeline-title,
  body.viraf-site .viraf-crs-timeline .item-right .dmdc-timeline-title {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    padding: 0;
  }
  body.viraf-site .viraf-crs-timeline .item-left .dmdc-timeline-content,
  body.viraf-site .viraf-crs-timeline .item-right .dmdc-timeline-content {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    padding: 4px 0 0;
  }
}

/* ============================================================================
   3 TRANG GIỚI THIỆU — Figma 206:724 (Tầm nhìn), 216:20 (Chuyên gia),
   219:267 (Đối tác chiến lược).
   Motif dùng chung: "tiêu đề kép" = dòng tiếng Việt + dòng tiếng Anh cỡ lớn màu vàng.
   Nhắc lại: css_classes của Builder nằm trên DIV BỌC widget nên rule chữ phải nhắm
   THẲNG thẻ con (h1..h4).
   ============================================================================ */

/* ---- hero tối, tiêu đề kép ---- */
/* Figma 4066:32 (đọc thẳng từ /v1/files/nodes, không đoán từ ảnh):
     · băng "Rectangle 6811" ĐÚNG 1920×595, nền đen thuần, ảnh phủ opacity 0.25 + saturation -1
     · "Tầm nhìn & Sứ mệnh"  x=247 y=223  Raleway 700  fs=50  lh=70  màu trắng
     · "Vision & Mission"    x=247 y=258  Raleway 700  fs=100 lh=100
       tô GRADIENT_LINEAR: #FFCB05 alpha 1 @0% → #FFFFFF alpha 0 @100%, trải trên hộp chữ
       rộng 998 trong khi nét chữ chỉ dài ~863 ⇒ chữ cuối còn mờ mờ chứ KHÔNG tắt hẳn.
   Khối chữ 223..409 trong băng 595 ⇒ gần như căn giữa, lệch xuống ~18px. */
body.viraf-site .viraf-abt-hero {
  min-height: 595px;
  display: flex;
  align-items: center;
  /* Engine ghi `flex-direction: column` vào style="" của băng nên justify-content ở đây là
     trục DỌC. padding-top 37 là phần lệch xuống 18.5px của Figma (nhân đôi vì căn giữa). */
  justify-content: center;
  padding: 37px 0 0;
  background-color: #17181a;
  position: relative;
}
/* Ảnh nền hero là ảnh SÁNG (bàn tay/mũi tên) -> phủ tối để chữ trắng đọc được */
body.viraf-site .viraf-abt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}
body.viraf-site .viraf-abt-hero > :not(.dmdc-bg-layer) { position: relative; z-index: 1; }
body.viraf-site .viraf-abt-hero__col { align-items: flex-start; }
body.viraf-site .viraf-abt-hero__vi h1 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 50px;
  line-height: 70px;
  color: var(--viraf-white);
  margin: 0;
}
body.viraf-site .viraf-abt-hero__en h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 100px;
  line-height: 100px;
  text-transform: uppercase;
  margin: 16px 0 0;
  /* `width: max-content` là bắt buộc: background-clip lấy hộp của THẺ, mà h2 là block nên
     hộp rộng bằng cả cột 1425px — chuyển sắc bị kéo giãn, "MISSION" sáng gần bằng "VISION".
     Bó hộp về đúng bề ngang nét chữ rồi kéo điểm dừng ra 115% để tái lập đúng phần đuôi
     gradient mà Figma còn thừa (hộp chữ 998 / nét chữ 863). */
  width: max-content;
  max-width: 100%;
  /* Figma nội suy gradient KHÔNG nhân sẵn alpha: màu chạy vàng → TRẮNG trong khi alpha rơi
     về 0, nên đuôi chữ ngả xám trung tính. Chrome nội suy CÓ nhân sẵn alpha ⇒ chỉ khai hai
     điểm dừng thì giữ nguyên sắc vàng, "MISSION" ra màu ô-liu (đo được ở x=1005: Figma
     99,96,83 còn bản 2 điểm dừng 96,85,41 — sáng ngang nhau nhưng lệch hẳn sắc).
     Ba điểm dừng giữa là giá trị nội suy tay của Figma tại t=0.25/0.50/0.75, nhân 1.15 để
     bù việc hộp ở đây bó sát nét chữ. */
  background: linear-gradient(90deg,
    rgba(255, 203, 5, 1) 0%,
    rgba(255, 216, 68, 0.75) 28.75%,
    rgba(255, 229, 130, 0.5) 57.5%,
    rgba(255, 242, 192, 0.25) 86.25%,
    rgba(255, 255, 255, 0) 115%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- khối 2 cột Tầm nhìn / Sứ mệnh — Figma 4066:32 ----
   Toạ độ gốc trong Figma (băng hero kết thúc ở y=595, khung nội dung 1425 nên mép trái 247.5):

     ảnh Tầm nhìn   x=247  y=507   573×428  bo góc 20   ⇒ CHỒM LÊN băng hero 88px
     "Tầm nhìn"     x=927  y=648   Raleway 700 fs=50 lh=70 màu đen
     đoạn văn       x=927  y=727   674×208  Afacad 400 fs=20 lh=26 CĂN ĐỀU màu #464646
     ảnh Sứ mệnh    x=1140 y=1067  860×504  KHÔNG bo góc ⇒ tràn 80px ra ngoài mép phải trang
     "Sứ mệnh"      x=329  y=1088  cùng cỡ với "Tầm nhìn"
     đoạn văn       x=334  y=1177  625×330

   Bốn điểm bản cũ làm khác: (1) hai cột 50/50 căn giữa theo chiều dọc, (2) ảnh nằm gọn
   trong băng trắng chứ không chồm lên hero, (3) ảnh Sứ mệnh là hộp bo góc trong khung
   chứ không tràn mép, (4) có gạch phân cách dưới tiêu đề — Figma KHÔNG có.
   Quy phần trăm theo khung 1425: 573→40.2%, 674→47.3%, khe 107→7.5%; cột chữ Sứ mệnh
   thụt vào 86.5→6.1%, rộng 625→43.9%, khe tới ảnh 181→12.7%. */
body.viraf-site .viraf-abt-split-band {
  padding: 0;
  background-color: var(--viraf-white);
  /* Engine ghi `overflow:hidden` thẳng vào style="" của MỌI băng ⇒ không mở ra thì phần
     ảnh chồm lên hero bị cắt cụt, mà không có lỗi nào để lần. */
  overflow: visible !important;
}
body.viraf-site .viraf-abt-split__row { gap: 0; align-items: flex-start; flex-wrap: nowrap; }
body.viraf-site .viraf-abt-split__media,
body.viraf-site .viraf-abt-split__copy { padding: 0 !important; }

/* --- Tầm nhìn: ảnh trái chồm lên hero, chữ phải --- */
body.viraf-site .viraf-abt-split__media {
  flex: 0 0 40.2%;
  max-width: 40.2%;
  margin-top: -88px;
  position: relative;
  z-index: 2;
}
body.viraf-site .viraf-abt-split__copy {
  flex: 0 0 47.3%;
  max-width: 47.3%;
  margin-left: 7.5%;
  padding-top: 53px !important;
}
body.viraf-site .viraf-abt-split__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 573 / 428;
  object-fit: cover;
  border-radius: 20px;
}

/* --- Sứ mệnh: chữ trái thụt vào, ảnh phải TRÀN ra mép màn hình --- */
body.viraf-site .viraf-abt-split-band--rev { overflow: hidden !important; padding-top: 132px; }
body.viraf-site .viraf-abt-split-band--rev .viraf-abt-split__copy {
  flex: 0 0 43.9%;
  max-width: 43.9%;
  margin-left: 6.1%;
  padding-top: 21px !important;
}
body.viraf-site .viraf-abt-split-band--rev .viraf-abt-split__media {
  /* `flex: 1 1 0` + margin-right ÂM: lề âm cộng thêm đúng ngần ấy vào khoảng trống của hàng
     nên cột tự nở ra tới mép phải màn hình.
     ĐỪNG dùng `--viraf-gutter-left`: biến đó tính theo `--viraf-page-grid` = 100vw - 40px,
     trong khi hàng thật chỉ hụt 30px (padding 15px mỗi bên của .container). Dưới 1465 hai
     con số lệch nhau ⇒ ảnh lố ra 5px, đo được ở 1440 và 1280 (R=1445/1285).
     `100%` trong margin quy chiếu ĐÚNG bề ngang hộp nội dung của hàng nên luôn khớp. */
  flex: 1 1 0;
  max-width: none;
  min-width: 0;
  margin: 0 calc((100% - 100vw) / 2) 0 12.7%;
}
body.viraf-site .viraf-abt-split-band--rev .viraf-abt-split__img img {
  aspect-ratio: 780 / 504;      /* phần THẤY ĐƯỢC của khung 860×504 sau khi cắt mép phải */
  border-radius: 0;
}
/* Trong layout_json còn một widget GIÃN CÁCH 50px kẹp giữa băng Sứ mệnh và băng Giá trị
   cốt lõi (uid-uid-89ea7919 — không do bộ dựng trang sinh ra). Figma cho ảnh văn phòng
   chạy THẲNG vào băng tối, nên 50px trắng đó phá đúng chỗ giao nhau. Ẩn tại chỗ thay vì
   sửa layout_json để còn hoàn nguyên được. */
body.viraf-site .viraf-abt-split-band--rev + .dmdc-el--spacer { display: none; }

body.viraf-site .viraf-abt-split__title h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 50px;
  line-height: 70px;
  color: var(--viraf-black);
  margin: 0;
}
/* Figma không có gạch phân cách ở hai khối này (đo lát cắt ngang giữa tiêu đề và đoạn văn:
   không có nét nào). Ẩn bằng CSS chứ không gỡ khỏi layout_json để còn bật lại được. */
body.viraf-site .viraf-abt-split__rule { display: none; }
body.viraf-site .viraf-abt-split__text {
  font-family: var(--viraf-font-body);
  font-size: 20px;
  line-height: 26px;
  color: var(--viraf-copy);
  text-align: justify;
  margin-top: 9px;
}
/* Trong Figma hai đoạn là MỘT ô chữ cách nhau đúng MỘT DÒNG TRỐNG (26px). Ở đây mỗi đoạn
   là một WIDGET riêng nên `p { margin-bottom }` vô dụng: `p:last-child` cũng là p duy nhất
   của widget đó nên bị chính rule dưới xoá — đo được cột chữ hụt 14px so với Figma. Khoảng
   cách phải đặt giữa HAI WIDGET. */
body.viraf-site .viraf-abt-split__text + .viraf-abt-split__text { margin-top: 26px; }
body.viraf-site .viraf-abt-split-band--rev .viraf-abt-split__text { margin-top: 19px; }
body.viraf-site .viraf-abt-split-band--rev .viraf-abt-split__text + .viraf-abt-split__text { margin-top: 26px; }
body.viraf-site .viraf-abt-split__text p { margin: 0 0 26px; }
body.viraf-site .viraf-abt-split__text p:last-child { margin-bottom: 0; }

/* ---- Giá trị cốt lõi: băng tối, tiêu đề bên trái + 5 thẻ trắng bên phải ---- */
/* ===========================================================================
   GIÁ TRỊ CỐT LÕI — Figma 4063:31 (bản dựng 1920×1146).
   Đo được:
     · băng tối chỉ cao 759 / 1146 ≈ 66% — thẻ TRÀN XUỐNG phần nền trắng phía dưới
       (bản cũ tô tối cả khối nên thẻ nằm gọn trong nền tối, sai hẳn ý đồ)
     · hai cột thẻ rộng 431, khe 59; cột PHẢI bắt đầu CAO HƠN cột giữa ~85px (so le)
     · thẻ chảy theo CỘT: cột 1 = Tận tâm, Trí tuệ; cột 2 = Tín nhiệm, Tích cực, Tuân thủ
       (bản cũ chảy theo HÀNG nên thứ tự đọc khác hẳn)
     · "CORE VALUE" HAI DÒNG, cao chữ ~75/dòng ⇒ ~104px, chuyển sắc vàng nhạt dần
       (đo màu: đầu dòng 236,192,25 → cuối dòng tan vào nền tối)
     · chữ trong thẻ căn ĐỀU hai bên
   =========================================================================== */
body.viraf-site .viraf-abt-core {
  /* Băng tối cao 66% chiều cao khối; phần còn lại để lộ nền trắng của trang. Dùng gradient
     có điểm dừng CỨNG thay vì `background-color` — một khai báo, không thêm phần tử. */
  --viraf-core-band: 66%;
  padding: 90px 0 100px;
  background: linear-gradient(#17181a 0 var(--viraf-core-band), transparent var(--viraf-core-band)) !important;
  position: relative;
}
/* Ảnh nền cũng phải cắt theo băng, không thì nó phủ kín cả phần đáng lẽ là trắng. */
body.viraf-site .viraf-abt-core > .dmdc-bg-layer {
  height: var(--viraf-core-band);
  bottom: auto;
}
body.viraf-site .viraf-abt-core::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--viraf-core-band);
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
body.viraf-site .viraf-abt-core > :not(.dmdc-bg-layer) { position: relative; z-index: 1; }
body.viraf-site .viraf-abt-core__row { gap: 0 50px; align-items: flex-start; flex-wrap: nowrap; }
body.viraf-site .viraf-abt-core__head { flex: 0 0 calc(34% - 25px); max-width: calc(34% - 25px); }
body.viraf-site .viraf-abt-core__cards { flex: 0 0 calc(66% - 25px); max-width: calc(66% - 25px); }
body.viraf-site .viraf-abt-core__vi h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 60px;
  color: var(--viraf-white);
  margin: 0;
}
body.viraf-site .viraf-abt-core__en h3 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 104px;
  line-height: 1.02;
  text-transform: uppercase;
  margin: 6px 0 0;
  /* Chuyển sắc rồi cắt nền theo hình chữ — cùng cách làm với "PROFILE VIRAF" ở khối Hồ sơ
     năng lực. Ở đây nền là ẢNH TỐI nên điểm cuối để 0.10: về hẳn 0 thì chữ VALUE biến mất
     trong nền, Figma vẫn còn thấy mờ. */
  background: linear-gradient(100deg, var(--viraf-yellow) 0%, rgba(255, 203, 5, 0.60) 42%, rgba(255, 203, 5, 0.10) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* ---- lưới thẻ: xếp theo CỘT (masonry) ---- */
/* `column-count` cho đúng thứ tự chảy theo cột của Figma mà KHÔNG phải đổi cấu trúc
   layout_json. Lưới cũ là flex nên chảy theo hàng. `display: block !important` là bắt buộc:
   style-engine ghi `display:flex` thẳng vào `style=""` của container (cùng bẫy đã gặp ở
   trang chuyên gia và khối Hồ sơ năng lực) — không ép thì multicol không bao giờ có hiệu lực. */
body.viraf-site .viraf-abt-core__grid {
  display: block !important;
  column-count: 2;
  column-gap: 30px;
}
body.viraf-site .viraf-abt-value {
  flex: none !important;
  max-width: none !important;
  width: 100%;
  /* Cấm thẻ bị cắt làm đôi giữa hai cột. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 30px;
  background-color: var(--viraf-white);
  border-radius: 20px;
  /* Figma 4063:31 → DROP_SHADOW color rgba(0,0,0,0.15) · offset 0/0 · radius 10 · spread 0.
     Bản cũ `0 12px 34px rgba(0,0,0,0.10)` là bóng ĐỔ XUỐNG mờ rộng, còn Figma là quầng
     ĐỀU BỐN PHÍA và đậm hơn — nhìn ra ngay là thẻ như đang "trôi" thay vì nổi khẽ.
     Đúng token dùng chung với thẻ cảm nhận khách hàng và thẻ CEO trang Chuyên gia. */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  padding: 30px 34px !important;
}
/* Cột PHẢI bắt đầu cao hơn cột trái ~85px. Đẩy thẻ ĐẦU TIÊN xuống là cả cột 1 tụt theo,
   còn cột 2 vẫn bám mép trên — đúng thế so le của Figma, không cần thêm thẻ bọc nào. */
/* `:nth-child(2)` chứ KHÔNG phải `:first-child`: container của Builder luôn chèn
   `.dmdc-bg-layer` làm con ĐẦU TIÊN, nên `:first-child` không khớp thẻ nào — đã đo, cả 6 con
   đều `margin-top: 0` và hai cột bắt đầu cùng một độ cao. */
body.viraf-site .viraf-abt-value:nth-child(2) { margin-top: 85px; }
body.viraf-site .viraf-abt-value__title h3 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 23px;
  line-height: 32px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-abt-value__rule { margin: 12px 0 16px; }
body.viraf-site .viraf-abt-value__text {
  font-family: var(--viraf-font-body);
  font-size: 17px;
  line-height: 26px;
  color: var(--viraf-copy);
}
body.viraf-site .viraf-abt-value__text p { margin: 0 0 10px; text-align: justify; }
body.viraf-site .viraf-abt-value__text p:last-child { margin-bottom: 0; }

/* ---- Hồ sơ năng lực + nút tải ---- */
/* ===========================================================================
   HỒ SƠ NĂNG LỰC — Figma 219:266.
   Đo trên bản dựng 1178x177: khối chia HAI CỘT.
     · trái  — "Hồ sơ năng lực" đen ~40px; dưới là "PROFILE VIRAF" ~98px in hoa, CHUYỂN SẮC
               vàng nhạt dần sang phải (đo màu dọc dòng chữ: x=10 → 255,207,25;
               x=240 → 255,225,111; x=480 → 255,240,186; sau đó tan hẳn)
     · phải  — vòng tròn vàng #FFCB05 đường kính 131px có icon tải xuống, chữ
               "Download tại đây!" nằm DƯỚI vòng tròn
   Bản cũ dựng MỘT CỘT căn giữa với nút viên thuốc "TẢI HỒ SƠ NĂNG LỰC" — sai hẳn bố cục.

   KHÔNG đổi cấu trúc layout_json: vẫn 3 nút con (h2, h3, button) trong một cột. Cột đổi
   thành lưới 2 ô, nút nhảy sang ô phải và trải 2 hàng. Nhờ vậy không phải chạy lại bộ sinh
   (chạy lại sẽ xoá mọi chỉnh sửa Builder của trang này).
   =========================================================================== */
body.viraf-site .viraf-abt-profile { padding: 80px 0 90px; background-color: var(--viraf-white); }
body.viraf-site .viraf-abt-profile__col {
  /* `!important` BẮT BUỘC: style-engine ghi `display:flex` THẲNG vào `style=""` của
     container (từ cài đặt bố cục), mà style nội tuyến thắng mọi stylesheet không
     `!important`. Đo được: `grid-template-columns` áp đúng "1fr auto", `grid-column` của
     từng con cũng đúng, nhưng `display` vẫn là `flex` nên TOÀN BỘ phần lưới thành vô nghĩa —
     tiêu đề văng sang phải, vòng tròn rơi vào giữa. Cùng bẫy với trang chuyên gia.
     Không có ô cài đặt nào cho `display:grid`, nên đây là T2 hiện thực bố cục riêng của
     khối chứ không phải đè lên lựa chọn của người dùng. */
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 40px;
  text-align: left;
}
body.viraf-site .viraf-abt-profile__vi { grid-column: 1; grid-row: 1; align-self: end; }
body.viraf-site .viraf-abt-profile__en { grid-column: 1; grid-row: 2; align-self: start; }
body.viraf-site .viraf-abt-download { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
body.viraf-site .viraf-abt-profile__vi h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 52px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-abt-profile__en h3 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 98px;
  line-height: 104px;
  text-transform: uppercase;
  margin: 0;
  /* Chuyển sắc: tô chữ bằng nền rồi cắt nền theo hình chữ. Dừng ở 0.08 chứ không về hẳn 0 —
     về 0 thì hai chữ cuối biến mất sạch, còn Figma vẫn thấy mờ mờ. */
  background: linear-gradient(90deg, var(--viraf-yellow) 0%, rgba(255, 203, 5, 0.55) 45%, rgba(255, 203, 5, 0.08) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* ---- nút tròn tải hồ sơ ---- */
body.viraf-site .viraf-abt-download .dmdc-button {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-transform: none;
}
/* Vòng tròn + icon gói trong MỘT khai báo: icon là SVG nội tuyến nên không thêm request
   nào và luôn nét ở mọi độ phân giải. */
body.viraf-site .viraf-abt-download .dmdc-button::before {
  content: '';
  display: block;
  width: 131px;
  height: 131px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E")
    center / 52px 52px no-repeat,
    var(--viraf-yellow);
  transition: transform .2s ease;
}
body.viraf-site .viraf-abt-download .dmdc-button:hover::before { transform: translateY(-3px); }
body.viraf-site .viraf-abt-download .dmdc-button,
body.viraf-site .viraf-abt-download .dmdc-button span {
  color: var(--viraf-copy) !important;
  font-family: var(--viraf-font-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0;
}
body.viraf-site .viraf-abt-download .dmdc-button:hover,
body.viraf-site .viraf-abt-download .dmdc-button:hover span { color: var(--viraf-black) !important; }

/* ---- Chuyên gia — Figma 4072:33 (đọc thẳng từ /v1/files/nodes) ----
   Toạ độ gốc, khung nội dung 1425 (mép trái quy về 0):

     ẢNH mọi chuyên gia   425×566 bo 20        · khe ảnh↔chữ 65 · cột chữ 935
     tên                  Raleway 700 35/35 đen, cách mép trên khối 29
     gạch vàng            62×3 (widget divider mặc định 54% cột ≈ 493 — dài gấp 8 lần)
     đoạn giới thiệu      Afacad 400 20/26 #464646, CĂN TRÁI
     "Bằng cấp" / "Kinh nghiệm làm việc"  Raleway 700 25/35, KHÔNG có gạch dưới
       → bày thành LƯỚI 2 CỘT: nhãn 202 bên trái, nội dung 722 bên phải
     khoảng cách giữa 2 khối chuyên gia    100

   Riêng chuyên gia ĐẦU (CEO) khác hẳn: khối thụt vào hai bên (nội dung 1270 thay vì 1425),
   ảnh 425 + khe 94 + chữ 752 CĂN ĐỀU, và "Bằng cấp"/"Kinh nghiệm làm việc" là HAI THẺ TRẮNG
   613×328 bo 20 có đổ bóng nằm ngang nhau BÊN DƯỚI (rộng hơn cả cột chữ nên phải là hàng
   riêng trong layout_json — xem 54-build-about-pages.mjs). Kết khối là dải trang trí vàng
   408×48: hai vạch 162 và dấu "V" của Viraf ở giữa.
   ------------------------------------------------------------------------------------ */
body.viraf-site .viraf-abt-expert { padding: 50px 0; background-color: var(--viraf-white); }
body.viraf-site .viraf-abt-expert__row { gap: 0; align-items: flex-start; flex-wrap: nowrap; }
body.viraf-site .viraf-abt-expert__media {
  flex: 0 0 29.82%;
  max-width: 29.82%;
  padding: 0 !important;
}
body.viraf-site .viraf-abt-expert__copy {
  flex: 0 0 65.61%;
  max-width: 65.61%;
  padding: 29px 0 0 !important;
}
/* Khe 65/1425 = 4.56% đặt vào phần tử ĐỨNG SAU trong DOM, vì hai chiều so le có thứ tự
   ngược nhau ([ảnh, chữ] và [chữ, ảnh]).
   `:not()` MANG ĐỘ ƯU TIÊN CỦA ĐỐI SỐ — rule này là (0,4,1), cao hơn rule khối CEO (0,3,1)
   nên nếu chỉ dựa vào thứ tự trong tệp thì khe của CEO bị ghi đè về 4.56% (đo được: cột chữ
   ở x=815 thay vì 844). Phải loại CEO ra ngay tại đây. */
body.viraf-site .viraf-abt-expert:not(.viraf-abt-expert--rev):not(.viraf-abt-expert--ceo) .viraf-abt-expert__copy { margin-left: 4.56%; }
body.viraf-site .viraf-abt-expert--rev .viraf-abt-expert__media { margin-left: 4.56%; }
body.viraf-site .viraf-abt-expert__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 425 / 566;
  object-fit: cover;
  border-radius: 20px;
}
body.viraf-site .viraf-abt-expert__name h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 35px;
  line-height: 35px;
  color: var(--viraf-black);
  margin: 0;
}
/* Gạch vàng Figma dài đúng 62px. Widget divider bị co về 54% ngay ở THẺ NGOÀI (cài đặt
   `width: 54`), rồi bên trong `<span>` lại `width:54%` nội tuyến nữa — nên khoá cả hai tầng. */
body.viraf-site .viraf-abt-expert__rule,
body.viraf-site .viraf-abt-expert__card .viraf-abt-expert__subrule {
  width: 62px !important;
  max-width: 62px !important;
  margin: 24px 0 25px;
}
body.viraf-site .viraf-abt-expert__rule .dmdc-divider,
body.viraf-site .viraf-abt-expert__card .viraf-abt-expert__subrule .dmdc-divider { justify-content: flex-start !important; }
body.viraf-site .viraf-abt-expert__rule .dmdc-divider-separator,
body.viraf-site .viraf-abt-expert__card .viraf-abt-expert__subrule .dmdc-divider-separator { width: 100% !important; }
body.viraf-site .viraf-abt-expert__text {
  font-family: var(--viraf-font-body);
  font-size: 20px;
  line-height: 26px;
  color: var(--viraf-copy);
  text-align: left;
}
body.viraf-site .viraf-abt-expert__text p { margin: 0 0 26px; }
body.viraf-site .viraf-abt-expert__text p:last-child { margin-bottom: 0; }
body.viraf-site .viraf-abt-expert__text ul { margin: 0; padding-left: 24px; }
body.viraf-site .viraf-abt-expert__text li { margin-bottom: 0; }
/* Mỗi đoạn là một WIDGET riêng, nên khoảng cách phải đặt giữa hai widget — `p` bên trong
   luôn là `p:last-child` của chính nó nên margin bị rule trên xoá (cùng bẫy với khối
   Tầm nhìn & Sứ mệnh; đo được 4 đoạn của CEO dính liền nhau). */
body.viraf-site .viraf-abt-expert__text + .viraf-abt-expert__text { margin-top: 26px; }

/* --- 3 chuyên gia sau: nhãn trái / nội dung phải --- */
body.viraf-site .viraf-abt-expert__sub {
  display: grid !important;      /* engine ghi display:flex inline */
  /* Cột nhãn của Figma rộng 151, phần nội dung bắt đầu ở 202 ⇒ giữa hai cột có khe 51.
     Cho cột nhãn nguyên 202 là "Kinh nghiệm làm việc" xuống dòng thành "Kinh nghiệm làm /
     việc" và chữ dính sát vào cột nội dung (đã chụp thấy). */
  grid-template-columns: 16.15% 77.2%;
  column-gap: 5.45%;
  align-items: start;
  margin-top: 30px;
  padding: 0 !important;
}
body.viraf-site .viraf-abt-expert__sub > .viraf-abt-expert__subtitle { grid-column: 1; grid-row: 1; }
body.viraf-site .viraf-abt-expert__sub > .viraf-abt-expert__text { grid-column: 2; grid-row: 1; }
/* Figma chỉ có gạch vàng dưới TÊN, không có dưới "Bằng cấp"/"Kinh nghiệm" ở ba khối này. */
body.viraf-site .viraf-abt-expert__sub > .viraf-abt-expert__subrule { display: none; }
body.viraf-site .viraf-abt-expert__subtitle h3 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 25px;
  line-height: 35px;
  color: var(--viraf-black);
  margin: 0;
}

/* --- Khối CEO --- */
/* Thụt hai bên bằng LỀ của từng cột chứ không bằng `width` của hàng: hàng là `.container`
   nên `%` của nó quy chiếu bề ngang BĂNG (1920) chứ không phải khung nội dung (1425). */
body.viraf-site .viraf-abt-expert--ceo { padding-bottom: 30px; }
body.viraf-site .viraf-abt-expert--ceo .viraf-abt-expert__media {
  flex: 0 0 29.82%;
  max-width: 29.82%;
  margin-left: 5.44%;
}
body.viraf-site .viraf-abt-expert--ceo .viraf-abt-expert__copy {
  flex: 0 0 52.77%;
  max-width: 52.77%;
  margin-left: 6.6%;
  padding-top: 8px !important;
}
body.viraf-site .viraf-abt-expert--ceo .viraf-abt-expert__text { text-align: justify; }
/* Figma có một vạch đứt ngăn hai dòng chức danh với phần tiểu sử. Trong nội dung gốc của
   WordPress chỗ đó là MỘT HÀNG DẤU GẠCH NGANG ASCII — bộ dọn nội dung đã bỏ đi (đúng), nên
   dựng lại bằng đường kẻ thật. Đoạn thứ 3 = đoạn có đúng hai đoạn đứng trước; loại
   `:last-child` để đoạn thứ 4 không dính theo. */
body.viraf-site .viraf-abt-expert--ceo .viraf-abt-expert__text
  + .viraf-abt-expert__text
  + .viraf-abt-expert__text:not(:last-child) {
  border-top: 1px dashed rgba(70, 70, 70, 0.5);
  padding-top: 26px;
}
body.viraf-site .viraf-abt-expert__cards {
  gap: 0 3.09%;
  align-items: stretch;
  /* Hai thẻ + khe = 89.13% nên căn giữa là tự ra lề 5.435% mỗi bên, đúng độ thụt của Figma.
     KHÔNG dùng `:first-child { margin-left }`: con đầu của container Builder là
     `.dmdc-bg-layer` nên selector đó không khớp thẻ nào (đã đo: thẻ 1 vẫn ở x=248). */
  justify-content: center;
  margin-top: 63px;
}
body.viraf-site .viraf-abt-expert__card {
  flex: 0 0 43.02%;
  max-width: 43.02%;
  background-color: var(--viraf-white);
  border-radius: 20px;
  /* Cùng token với thẻ Giá trị cốt lõi — Figma 4072:33 khai y hệt: rgba(0,0,0,0.15), 0/0, r10. */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  padding: 34px 40px 40px !important;
}

body.viraf-site .viraf-abt-expert__card .viraf-abt-expert__subrule { display: block; margin: 15px 0 16px; }
body.viraf-site .viraf-abt-expert__card .viraf-abt-expert__subtitle h3 { line-height: 34px; }
body.viraf-site .viraf-abt-expert__card .viraf-abt-expert__text { text-align: left; }

/* Dải trang trí kết khối CEO: hai vạch vàng 162×3 + dấu "V" của Viraf 72×48 ở giữa.
   Vẽ bằng MỘT ảnh SVG nội tuyến — thêm phần tử vào layout_json chỉ để trang trí thì khách
   mở Builder ra lại thấy một widget rỗng không hiểu để làm gì. */
body.viraf-site .viraf-abt-expert--ceo::after {
  content: "";
  display: block;
  width: 412px;
  height: 52px;
  margin: 109px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 412 52' fill='none' stroke='%23FFCB05' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0 33h162'/%3E%3Cpath d='M246 33h162'/%3E%3Cg transform='translate(168 0)'%3E%3Cpath d='M47.2646 31.3906L36.8486 20.9555L36.8022 21.002L19.1121 3.27938C14.7476 -1.09313 7.65915 -1.09313 3.27918 3.27938C-1.10079 7.65189 -1.08532 14.7533 3.27918 19.1413L27.9958 43.9034C28.6923 44.6011 29.4507 45.1593 30.2555 45.64C34.6354 48.9426 40.8881 48.617 44.8811 44.6166L55.2971 34.1815L55.2043 34.0885C52.3875 34.4451 49.4314 33.5613 47.2646 31.3906Z'/%3E%3Cpath transform='translate(38.9064 1.0547)' d='M29.8086 3.27938C25.4441 -1.09313 18.3556 -1.09313 13.9757 3.27938L0 17.2807L7.56822 24.8628C12.1339 29.4369 19.5319 29.4369 24.0976 24.8628L29.8086 19.1413C34.1885 14.7533 34.1885 7.66739 29.8086 3.27938Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Đối tác: lưới logo ---- */
body.viraf-site .viraf-abt-logos { padding: 70px 0 80px; background-color: var(--viraf-white); }
body.viraf-site .viraf-abt-logos__head-col { align-items: center; text-align: center; }
body.viraf-site .viraf-abt-logos__title h1 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 54px;
  color: var(--viraf-black);
  margin: 0 0 44px;
}
body.viraf-site .viraf-abt-logogrid .dmdc-logo-grid-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 44px 56px !important;
}
body.viraf-site .viraf-abt-logogrid .dmdc-logo-item { flex: 0 0 auto; width: auto !important; padding: 0 !important; }
body.viraf-site .viraf-abt-logogrid .dmdc-logo-img {
  max-width: 148px !important;
  max-height: 60px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* =========================================================================
   ĐỐI TÁC — "Khách hàng nói về chúng tôi", Figma 4049:23.
   Mọi con số dưới đây đo trên khung 1425 (nhóm Figma x322..1747):

     · Mảng VÀNG: bắt đầu từ MÉP TRÁI khung nhìn, rộng 1262, cao 655 — KHÔNG phải
       phủ hết bề ngang như bản dựng cũ. Mép phải dừng ở 1015px tính từ mép trái khung
       nội dung, nên viết theo công thức để đúng ở mọi bề rộng màn hình.
     · LƯỚI CHẤM trắng: 9 cột × 8 hàng, chấm 8px, bước 29.4 × 21.4, đặt ở x -322 (thò
       hẳn ra ngoài khung, tràn khỏi mép trái màn hình đúng như thiết kế), y 101.
     · Tiêu đề y91 Raleway 700 50/70; phụ đề y184 Afacad 400 20/35.
     · THẺ 612x514 bo 20, bóng `0 0 10px #000@.15`; hàng cách nhau 50, cột cách 60.
       Hai thẻ + khe = 1284 nên CÒN THỪA 141 — các hàng CHẴN dạt sang phải đúng 141px,
       tạo dáng so le. Bản dựng cũ xếp 2 cột đều nhau, không có nhịp này.
     · Ruột thẻ: dấu ❝ vàng 41x23 ở (47,32); trích dẫn (47,76) rộng 517; ảnh chân dung
       tròn 96px ở (47,383); tên/đơn vị ở (173,394).
     · Thẻ đầu tiên nằm ở y299 tức ĐÈ LÊN mảng vàng 356px.

   CHỖ KHÔNG DỰNG ĐƯỢC: ảnh chân dung tròn 96px. Dữ liệu bản chạy KHÔNG có ảnh khách
   hàng nào (ảnh duy nhất trong widget cảm nhận là hình dấu ngoặc kép), còn Figma dùng
   một ảnh mẫu lặp lại 10 lần. Không tự chế ảnh gán cho người có tên thật, nên tạm bỏ
   trống và co phần tên về sát lề trái. Có ảnh thật thì mở lại `.viraf-abt-quote__avatar`.
   ========================================================================= */
body.viraf-site .viraf-abt-quotes-head {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  height: 299px;
  padding: 91px 0 0;
  background-color: transparent;
  overflow: visible !important;
}
body.viraf-site .viraf-abt-quotes-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: min(100%, calc(50vw - 712.5px + 1015px));
  height: 655px;
  background-color: var(--viraf-yellow);
}
body.viraf-site .viraf-abt-quotes-head::after {
  content: '';
  position: absolute;
  top: 101px;
  left: calc(50% - 1034.5px);       /* mép khung 50% - 712.5, lùi thêm 322 */
  z-index: -1;
  width: 244px;
  height: 158px;
  background-image: radial-gradient(var(--viraf-white) 4px, transparent 4.5px);
  background-size: 29.43px 21.43px;
  background-position: 0 0;
}
body.viraf-site .viraf-abt-quotes-head__col { align-items: flex-start; }
body.viraf-site .viraf-abt-quotes__title h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 50px;
  line-height: 70px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-abt-quotes__sub {
  font-family: var(--viraf-font-body);
  font-size: 20px;
  line-height: 35px;
  color: var(--viraf-black);
}
body.viraf-site .viraf-abt-quotes__sub p { margin: 23px 0 0; }

/* ---- lưới thẻ cảm nhận, so le, đè lên mảng vàng ---- */
body.viraf-site .viraf-abt-quotes { position: relative; z-index: 1; padding: 0 0 90px; background-color: transparent; }
body.viraf-site .viraf-abt-quotes__row { gap: 0 4.21%; align-items: stretch; flex-wrap: nowrap !important; }
body.viraf-site .viraf-abt-quotes__row + .viraf-abt-quotes__row { margin-top: 50px; }
/* Hàng CHẴN dạt phải đúng 141px = 9.895% của khung 1425.
   Dùng `translateX` chứ KHÔNG padding-left/margin-left: hai cái đó bóp hộp nội dung của
   hàng, mà thẻ lại rộng theo % của hộp đó ⇒ thẻ teo từ 612 xuống 537 (đo được).
   `transform` chỉ dời chỗ vẽ, không đụng tới dàn trang, nên thẻ giữ nguyên 612 và mép
   phải của thẻ thứ hai chạm đúng mép phải khung (141 + 612 + 60 + 612 = 1425). */
body.viraf-site .viraf-abt-quotes__row--right { transform: translateX(9.895%); }
body.viraf-site .viraf-abt-quote {
  flex: 0 0 42.947% !important;        /* 612/1425 */
  max-width: 42.947%;
  min-height: 514px;
  background-color: var(--viraf-white);
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  padding: 32px 47px 35px !important;
}
/* Dấu ngoặc kép vàng 41x23 ở (47,32) — vẽ bằng ::before nên không phải thêm nút vào layout */
body.viraf-site .viraf-abt-quote__text { position: relative; padding-top: 44px; }
body.viraf-site .viraf-abt-quote__text::before {
  content: "\201C";
  position: absolute;
  top: -14px;
  left: 0;
  width: 41px;
  height: 23px;
  font-family: var(--viraf-font-display);
  font-size: 62px;
  line-height: 1;
  color: var(--viraf-yellow);
}
body.viraf-site .viraf-abt-quote__text,
body.viraf-site .viraf-abt-quote__text p {
  font-family: var(--viraf-font-body);
  font-size: 20px;
  line-height: 26px;
  color: #464646;
  text-align: justify;
}
body.viraf-site .viraf-abt-quote__text p { margin: 0 0 10px; }
body.viraf-site .viraf-abt-quote__text p:last-child { margin-bottom: 0; }
/* `margin-top:auto` ghim khối tên xuống ĐÁY thẻ: trích dẫn dài ngắn khác nhau nhưng
   hàng tên vẫn thẳng nhau giữa 2 thẻ cùng hàng, đúng như Figma. */
body.viraf-site .viraf-abt-quote__author {
  flex-direction: row !important;
  align-items: center;
  gap: 30px;
  margin-top: auto;
  padding: 26px 0 0 !important;
}
body.viraf-site .viraf-abt-quote__avatar { flex: 0 0 auto; }
body.viraf-site .viraf-abt-quote__avatar img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}
body.viraf-site .viraf-abt-quote__meta { flex: 1 1 auto; min-width: 0; padding: 0 !important; }
body.viraf-site .viraf-abt-quote__name h4 {
  font-family: var(--viraf-font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  color: #464646;
  margin: 0;
}
body.viraf-site .viraf-abt-quote__role {
  font-family: var(--viraf-font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: #464646;
}
body.viraf-site .viraf-abt-quote__role p { margin: 0; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1199.98px) {
  body.viraf-site .viraf-abt-hero { min-height: 420px; padding: 60px 0; }
  body.viraf-site .viraf-abt-hero__vi h1 { font-size: 34px; line-height: 46px; }
  /* Nét chữ "VISION & MISSION" dài ≈ 8.63× cỡ chữ (đo trên bản dựng Figma), nên trần 86px
     vẫn lọt vùng nội dung ở 1199 (742 < 1159). clamp nối liền cỡ mobile với 100px desktop. */
  body.viraf-site .viraf-abt-hero__en h2 { font-size: clamp(40px, 7.2vw, 86px); line-height: 1.08; }

  /* Bố cục Figma của Tầm nhìn/Sứ mệnh là bố cục lệch trục dành cho màn rộng: ảnh chồm lên
     băng hero, ảnh Sứ mệnh tràn khỏi mép phải trang. Dưới 1200 hai cột xếp chồng nên cả hai
     thứ đó mất nghĩa — trả về ảnh trong khung, bo góc, cách đều trên dưới. */
  body.viraf-site .viraf-abt-split-band { padding: 50px 0; }
  body.viraf-site .viraf-abt-split-band--rev { padding-top: 50px; }
  body.viraf-site .viraf-abt-split__media { margin-top: 0; }
  body.viraf-site .viraf-abt-split__copy { margin-left: 0; padding-top: 0 !important; }
  /* Hai rule --rev có ĐỘ ƯU TIÊN CAO HƠN nhóm xếp chồng bên dưới (3 lớp so với 2) nên phải
     ghi đè riêng, không thì cột chữ vẫn 43.9% và cột ảnh vẫn mang lề âm tràn mép. */
  body.viraf-site .viraf-abt-split-band--rev .viraf-abt-split__copy {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
    padding-top: 0 !important;
  }
  body.viraf-site .viraf-abt-split-band--rev .viraf-abt-split__media {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
  }
  /* Xếp chồng thì ảnh rộng bằng cả cột: giữ tỉ lệ 573/428 của Figma là ra khung cao 843px ở
     1199 — một màn hình chỉ có mỗi tấm ảnh. Cắt bớt theo cùng công thức đã dùng cho ảnh
     chuyên gia. */
  body.viraf-site .viraf-abt-split__img img { aspect-ratio: 16 / 10; max-height: 420px; }
  body.viraf-site .viraf-abt-split-band--rev .viraf-abt-split__img img {
    aspect-ratio: 16 / 10;
    border-radius: 20px;
  }
  body.viraf-site .viraf-abt-split__title h2 { font-size: 36px; line-height: 50px; }

  body.viraf-site .viraf-abt-split__row,
  body.viraf-site .viraf-abt-expert__row,
  body.viraf-site .viraf-abt-core__row { flex-wrap: wrap; gap: 30px 0; }
  body.viraf-site .viraf-abt-split__media,
  body.viraf-site .viraf-abt-split__copy,
  body.viraf-site .viraf-abt-expert__media,
  body.viraf-site .viraf-abt-expert__copy,
  body.viraf-site .viraf-abt-core__head,
  body.viraf-site .viraf-abt-core__cards { flex: 0 0 100%; max-width: 100%; }
  /* ĐÍNH CHÍNH 22/08 — `flex-direction: column-reverse` ở đây CHƯA BAO GIỜ có tác dụng:
     style-engine ghi bố cục flex của container THẲNG VÀO `style=""` (đo được: hàng vẫn
     `flex-direction: row` dù rule này khớp đúng), mà style nội tuyến thắng mọi stylesheet
     không `!important`. Hệ quả: chuyên gia thứ 2 và 4 (bố cục so le, DOM là [chữ, ảnh])
     hiện CHỮ TRƯỚC — ảnh nằm tít dưới sau cả trang giới thiệu (đo: tên ở y=2106 còn ảnh
     mãi y=2980).
     Dùng `order` thay vì đổi `flex-direction`: `order` KHÔNG phải thuộc tính của container
     nên không đụng vào thứ mà engine ghi inline, và đúng với cả hai chiều DOM — ảnh luôn
     lên trước, không cần biết hàng đó so le hay không. */
  body.viraf-site .viraf-abt-split__media,
  body.viraf-site .viraf-abt-expert__media { order: -1; }
  body.viraf-site .viraf-abt-split__copy,
  body.viraf-site .viraf-abt-expert__copy { order: 0; }
  body.viraf-site .viraf-abt-expert__img img { aspect-ratio: 16 / 10; max-height: 420px; }

  /* Chuyên gia: bỏ hết phần lệch trục của bản desktop. Ba rule --ceo/--rev dưới đây đều
     nhiều lớp hơn nhóm xếp chồng ở trên nên phải ghi đè đích danh. */
  body.viraf-site .viraf-abt-expert__copy { padding-top: 24px !important; }
  /* Rule khe 4.56% ở trên mang HAI `:not()` nên nặng tới (0,5,1) — reset bằng selector ngắn
     KHÔNG ăn. Đo được ở 1199: cột chữ của chuyên gia 3 nằm ở x=86 và thò ra R=1215/1199. */
  body.viraf-site .viraf-abt-expert:not(.viraf-abt-expert--rev):not(.viraf-abt-expert--ceo) .viraf-abt-expert__copy { margin-left: 0; }
  body.viraf-site .viraf-abt-expert--rev .viraf-abt-expert__media { margin-left: 0; }
  body.viraf-site .viraf-abt-expert--ceo .viraf-abt-expert__media,
  body.viraf-site .viraf-abt-expert--ceo .viraf-abt-expert__copy {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
    padding-top: 24px !important;
  }
  body.viraf-site .viraf-abt-expert--ceo .viraf-abt-expert__media { padding-top: 0 !important; }
  /* Hai thẻ 43% cạnh nhau ở khổ tablet chỉ còn ~500px mà nội dung là danh sách dài — xếp dọc. */
  body.viraf-site .viraf-abt-expert__cards { flex-wrap: wrap !important; gap: 24px 0; margin-top: 36px; }
  body.viraf-site .viraf-abt-expert__card { flex: 0 0 100%; max-width: 100%; padding: 26px 28px 30px !important; }
  /* Nhãn / nội dung về MỘT cột: cột nhãn 16% ở khổ hẹp chỉ vừa 3 chữ. */
  body.viraf-site .viraf-abt-expert__sub { grid-template-columns: 100%; column-gap: 0; row-gap: 10px; }
  body.viraf-site .viraf-abt-expert__sub > .viraf-abt-expert__subtitle { grid-column: 1; grid-row: 1; }
  body.viraf-site .viraf-abt-expert__sub > .viraf-abt-expert__text { grid-column: 1; grid-row: 2; }
  body.viraf-site .viraf-abt-expert--ceo::after { width: 300px; height: 38px; margin: 56px auto 0; }
  body.viraf-site .viraf-abt-expert--ceo { padding-bottom: 40px; }

  /* Dưới 1200 tiêu đề và thẻ xếp CHỒNG (không còn hai cột trái/phải), nên băng tối cắt ở 66%
     sẽ rơi vào giữa đống thẻ trông rất lạ — cho tối cả khối như trước. Bỏ luôn độ so le 85px
     vì nó chỉ có nghĩa khi hai cột nằm cạnh tiêu đề. */
  body.viraf-site .viraf-abt-core { --viraf-core-band: 100%; }
  body.viraf-site .viraf-abt-value:nth-child(2) { margin-top: 0; }
  body.viraf-site .viraf-abt-core__en h3 { font-size: 40px; line-height: 1.1; }
  /* Dải tablet: 38px là con số của bố cục CĂN GIỮA cũ, nay quá bé so với bản hai cột (98px
     ở desktop). Đo tỉ lệ: "PROFILE VIRAF" rộng ≈ 11.9× cỡ chữ, nên trần 82px vẫn lọt vùng
     nội dung ở 1199 (976 < 1159). `clamp` nối liền 44px của mobile với 98px của desktop. */
  body.viraf-site .viraf-abt-profile__en h3 { font-size: clamp(44px, 7vw, 82px); line-height: 1.16; }
}

@media (max-width: 700px) {
  body.viraf-site .viraf-abt-hero { min-height: 300px; padding: 40px 0; }
  body.viraf-site .viraf-abt-hero__vi h1 { font-size: 26px; line-height: 36px; }
  /* 9.2vw giữ "VISION & MISSION" gọn MỘT dòng ở 375 (298 < 335 vùng nội dung). Rộng hơn
     nữa là `max-width:100%` bắt xuống dòng, chuyển sắc gãy làm đôi trông rất xấu. */
  body.viraf-site .viraf-abt-hero__en h2 { font-size: clamp(28px, 9.2vw, 46px); line-height: 1.08; margin-top: 8px; }

  body.viraf-site .viraf-abt-split-band { padding: 34px 0; }
  body.viraf-site .viraf-abt-split__title h2 { font-size: 26px; line-height: 36px; }
  body.viraf-site .viraf-abt-split__text { font-size: 17px; line-height: 27px; text-align: left; }
  body.viraf-site .viraf-abt-split__text p { margin-bottom: 20px; }

  body.viraf-site .viraf-abt-core { padding: 50px 0 56px; }
  body.viraf-site .viraf-abt-core__vi h2 { font-size: 24px; line-height: 33px; }
  body.viraf-site .viraf-abt-core__en h3 { font-size: clamp(30px, 10.5vw, 48px); line-height: 1.1; }
  /* MỘT cột: hai cột ở khổ 430 làm mỗi thẻ chỉ còn ~150px, chữ căn đều xé thành từng khe
     trắng nham nhở (đo trên ảnh chụp). */
  body.viraf-site .viraf-abt-core__grid { column-count: 1; }
  body.viraf-site .viraf-abt-value { padding: 22px 20px !important; margin-bottom: 20px; }
  body.viraf-site .viraf-abt-value:last-child { margin-bottom: 0; }
  body.viraf-site .viraf-abt-value__title h3 { font-size: 20px; line-height: 28px; }
  /* Căn đều chỉ đẹp khi dòng đủ dài; ở khổ hẹp trả về căn trái. */
  body.viraf-site .viraf-abt-value__text p { text-align: left; }
  body.viraf-site .viraf-abt-value__text { font-size: 16px; line-height: 25px; }
  body.viraf-site .viraf-abt-value { flex: 0 0 100%; max-width: 100%; padding: 20px 20px !important; }

  /* Khổ hẹp: xếp DỌC — tiêu đề, PROFILE VIRAF, rồi nút tròn. Giữ nguyên hai cột như desktop
     thì chữ chỉ còn ~150px và "PROFILE VIRAF" gãy làm hai dòng ở cỡ 28px, chuyển sắc gần
     như mất hẳn. 44px vừa đúng một dòng trong vùng nội dung 390px. */
  body.viraf-site .viraf-abt-profile { padding: 46px 0 54px; }
  body.viraf-site .viraf-abt-profile__col {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 4px;
    /* Khổ hẹp căn GIỮA cả khối (yêu cầu 22/08). Căn giữa mỗi "PROFILE VIRAF" và nút mà để
       tiêu đề dính lề trái thì nhìn như xếp hỏng, nên căn giữa cả ba. */
    justify-items: center;
    text-align: center;
  }
  body.viraf-site .viraf-abt-profile__vi { grid-column: 1; grid-row: 1; align-self: auto; }
  body.viraf-site .viraf-abt-profile__en { grid-column: 1; grid-row: 2; align-self: auto; }
  body.viraf-site .viraf-abt-download { grid-column: 1; grid-row: 3; justify-self: center; margin-top: 22px; }
  body.viraf-site .viraf-abt-profile__vi h2 { font-size: 24px; line-height: 33px; }
  /* Co theo bề rộng màn: 44px vừa một dòng ở 430 nhưng gãy hai dòng ở 375 (vùng nội dung
     chỉ còn 335px). `clamp` giữ "PROFILE VIRAF" luôn trọn một dòng từ 320px trở lên. */
  body.viraf-site .viraf-abt-profile__en h3 { font-size: clamp(28px, 9.6vw, 44px); line-height: 1.22; }
  body.viraf-site .viraf-abt-download .dmdc-button::before { width: 92px; height: 92px; background-size: 38px 38px; }
  body.viraf-site .viraf-abt-download .dmdc-button { align-items: center; gap: 9px; }

  body.viraf-site .viraf-abt-expert { padding: 32px 0; }
  body.viraf-site .viraf-abt-expert__name h2 { font-size: 26px; line-height: 34px; }
  body.viraf-site .viraf-abt-expert__text { font-size: 17px; line-height: 27px; text-align: left; }
  body.viraf-site .viraf-abt-expert--ceo .viraf-abt-expert__text { text-align: left; }
  body.viraf-site .viraf-abt-expert__text + .viraf-abt-expert__text { margin-top: 20px; }
  body.viraf-site .viraf-abt-expert__subtitle h3 { font-size: 21px; line-height: 29px; }
  body.viraf-site .viraf-abt-expert__rule { margin: 16px 0 18px; }
  body.viraf-site .viraf-abt-expert__sub { margin-top: 22px; }
  body.viraf-site .viraf-abt-expert__card { padding: 22px 20px 24px !important; }
  body.viraf-site .viraf-abt-expert--ceo::after { width: 230px; height: 30px; margin: 40px auto 0; }

  body.viraf-site .viraf-abt-logos { padding: 44px 0 50px; }
  body.viraf-site .viraf-abt-logos__title h1 { font-size: 24px; line-height: 33px; margin-bottom: 26px; }
  body.viraf-site .viraf-abt-logogrid .dmdc-logo-grid-container { gap: 26px 30px !important; }
  body.viraf-site .viraf-abt-logogrid .dmdc-logo-img { max-width: 100px !important; max-height: 42px !important; }

  body.viraf-site .viraf-abt-quotes-head { height: auto; padding: 36px 0 90px; }
  body.viraf-site .viraf-abt-quotes-head::before { width: 100%; height: 100%; }
  body.viraf-site .viraf-abt-quotes-head::after { display: none; }   /* lưới chấm nằm ngoài màn hình ở khổ hẹp */
  body.viraf-site .viraf-abt-quotes__title h2 { font-size: 24px; line-height: 33px; }
  body.viraf-site .viraf-abt-quotes__sub { font-size: 17px; line-height: 26px; }
  body.viraf-site .viraf-abt-quotes__sub p { margin: 8px 0 0; }
  body.viraf-site .viraf-abt-quotes__row { flex-wrap: wrap !important; gap: 20px; }
  body.viraf-site .viraf-abt-quotes__row--right { transform: none; }
  body.viraf-site .viraf-abt-quotes__row + .viraf-abt-quotes__row { margin-top: 20px; }
  body.viraf-site .viraf-abt-quote { flex: 0 0 100% !important; max-width: 100%; min-height: 0; padding: 24px 20px 20px !important; }

  body.viraf-site .viraf-abt-quote__text,
  body.viraf-site .viraf-abt-quote__text p { font-size: 17px; line-height: 27px; }
  body.viraf-site .viraf-abt-quote__name h4,
  body.viraf-site .viraf-abt-quote__role { font-size: 17px; line-height: 24px; }
}

/* ---------------------------------------------------------------------------
   Lớp phủ hero/Giá trị cốt lõi: ĐO ĐƯỢC ảnh nền gốc đã rất tối
   (Group-693819-1 độ sáng TB 23/255, Group-693820-1 là 32/255) nên lớp phủ 0.7–0.78
   ban đầu làm băng thành ĐEN TRƠN, mất hẳn chi tiết la bàn/mũi tên mà Figma còn thấy.
   Hạ xuống mức chỉ đủ giữ tương phản chữ trắng.
   --------------------------------------------------------------------------- */
body.viraf-site .viraf-abt-hero::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
}

/* `.dmdc-bg-layer` là con TRỰC TIẾP của băng nên bị rule `> *` đẩy lên z-index 1 cùng
   nội dung. Ghim nó về 0 để lớp phủ ::before nằm giữa ảnh và chữ. */
body.viraf-site .viraf-abt-hero > .dmdc-bg-layer,
body.viraf-site .viraf-abt-core > .dmdc-bg-layer { z-index: 0 !important; }

/* ============================================================================
   TRANG TÀI LIỆU (Figma 323:20) + TRANG LIÊN HỆ (Figma 107:2292).
   ============================================================================ */

/* ---- Tài liệu: băng vàng + lưới 2 cột thẻ trắng ---- */
body.viraf-site .viraf-doc-hero {
  min-height: 300px;
  display: flex;
  align-items: center;
  padding: 70px 0 150px;          /* chừa chỗ để lưới thẻ chồm lên băng vàng như Figma */
  background-color: var(--viraf-yellow);
}
body.viraf-site .viraf-doc-hero__col { align-items: center; text-align: center; }
body.viraf-site .viraf-doc-hero__title h1 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 54px;
  color: var(--viraf-black);
  margin: 0;
}
/* L-17 LẦN NỮA — và lần này giấu kỹ nhất từ trước tới giờ.
   Băng lưới có `width` nên style-engine gán `overflow:hidden`, trong khi hàng thẻ lại
   `margin-top:-110px` để vắt lên băng vàng. Phần thò lên bị CẮT CỤT: 110px đầu của 2 thẻ
   hàng đầu — tức TOÀN BỘ TIÊU ĐỀ + mục tài liệu đầu tiên — không được vẽ ra, chỗ đó nhìn
   thấy màu vàng của hero phía sau.
   Vì sao khó bắt: `getBoundingClientRect()` vẫn báo tiêu đề đúng vị trí, đúng kích thước,
   `checkVisibility()` vẫn trả true. Chỉ có `elementFromPoint` mới chỉ ra chỗ đó đang là
   băng hero, và phải lấy mẫu pixel mới thấy nó vàng. Ban đầu tưởng lỗi z-index (băng hero
   có hàng con z-index:2) — nâng z-index KHÔNG hề giúp gì, vì chưa từng là chuyện xếp lớp.
   `z-index: 2` giữ lại để thẻ chắc chắn nổi trên hero sau khi hết bị cắt. */
body.viraf-site .viraf-doc-grid {
  position: relative;
  z-index: 2;
  overflow: visible !important;
  padding: 0 0 90px;
  background-color: var(--viraf-white);
}
/* ===========================================================================
   TRANG TÀI LIỆU — Figma 4053:25.
   Đo trên bản render 1920: thẻ rộng 688, khe 51 (688×2 + 51 = 1427 ≈ khung 1425).
   Lưới kéo lên chồng lên băng vàng — thẻ hàng đầu vắt qua mép dưới băng.

   HAI THẺ CÙNG HÀNG PHẢI CAO BẰNG NHAU. Trước đây `align-items: flex-start` nên mỗi thẻ
   cao theo số tài liệu của nó — đo được 373 / 475 / 237 / 135 / 261px, hàng nào cũng lệch,
   nhìn như lưới hỏng. Đổi sang `stretch` là thẻ ít tài liệu tự cao bằng thẻ bên cạnh.

   Thẻ nào NHIỀU tài liệu hơn thì phần danh sách TỰ CUỘN thay vì kéo dài cả hàng:
   `--viraf-doc-rows` = số dòng thấy được (Figma vẽ 5), quy ra chiều cao tối đa. Vì mỗi
   mục có thể xuống 2 dòng nên đây là mức TRẦN chứ không phải chiều cao cố định — thẻ ngắn
   vẫn co lại đúng nội dung rồi giãn theo hàng.
   =========================================================================== */
body.viraf-site .viraf-doc-grid__row { gap: 60px 3.58%; align-items: stretch; margin-top: -110px; }
body.viraf-site .viraf-doc-card {
  flex: 0 0 48.21% !important;          /* 688/1425 */
  max-width: 48.21%;
  display: flex;
  flex-direction: column;
  background-color: var(--viraf-white);
  border-radius: 14px;
  /* Thẻ trang Tài liệu (Figma 323:20) dùng CHUNG một `Rectangle 6841` với thẻ Giá trị cốt lõi,
     thẻ CEO và thẻ cảm nhận — cùng một token bóng, nên đưa về đúng một giá trị. */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  padding: 26px 30px 28px !important;
}
body.viraf-site .viraf-doc-card__title h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 30px;
  color: var(--viraf-black);
  margin: 0;
}
body.viraf-site .viraf-doc-card__rule { margin: 10px 0 14px; }
/* icon_list: biểu tượng sách vàng + dòng chữ có link */
body.viraf-site .viraf-doc-list {
  --viraf-doc-rows: 5;
  --viraf-doc-row-h: 34px;              /* 24px dòng chữ + 10px khoảng cách dưới */
  flex: 1 1 auto;
  /* `min-height: 0` là bắt buộc: mục flex mặc định min-height:auto nên KHÔNG chịu co lại,
     `overflow-y:auto` sẽ không bao giờ kích hoạt mà thẻ cứ dài ra. */
  min-height: 0;
  max-height: calc(var(--viraf-doc-rows) * var(--viraf-doc-row-h));
  overflow-y: auto;
  /* CỐ Ý để `overscroll-behavior` mặc định (auto). Đặt `contain` thì lăn chuột tới cuối
     danh sách là DỪNG HẲN, trang không đi tiếp — thẻ rộng 687px nằm giữa trang thành cái
     bẫy cuộn. Để auto thì hết danh sách trang tự chạy tiếp như bình thường. */
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--viraf-yellow) rgba(0, 0, 0, .08);
}
body.viraf-site .viraf-doc-list::-webkit-scrollbar { width: 6px; }
body.viraf-site .viraf-doc-list::-webkit-scrollbar-track { border-radius: 3px; background: rgba(0, 0, 0, .06); }
body.viraf-site .viraf-doc-list::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--viraf-yellow); }
body.viraf-site .viraf-doc-list ul,
body.viraf-site .viraf-doc-list .dmdc-icon-list { margin: 0; padding: 0; list-style: none; }
body.viraf-site .viraf-doc-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
body.viraf-site .viraf-doc-list li:last-child { margin-bottom: 0; }
body.viraf-site .viraf-doc-list i,
body.viraf-site .viraf-doc-list svg { flex: 0 0 auto; margin-top: 3px; font-size: 15px; color: var(--viraf-black); }
body.viraf-site .viraf-doc-list a,
body.viraf-site .viraf-doc-list li > span {
  font-family: var(--viraf-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--viraf-copy);
  text-decoration: none;
  transition: color var(--viraf-transition);
}
body.viraf-site .viraf-doc-list a:hover { color: var(--viraf-yellow-hover); text-decoration: underline; }

/* ---- Liên hệ: 2 cột, cột phải là bảng nền kem ---- */
body.viraf-site .viraf-ct { padding: 60px 0 70px; background-color: var(--viraf-white); }
body.viraf-site .viraf-ct__row { gap: 0 60px; align-items: flex-start; flex-wrap: nowrap; }
body.viraf-site .viraf-ct__info,
body.viraf-site .viraf-ct__formcol { flex: 0 0 calc(50% - 30px); max-width: calc(50% - 30px); }
body.viraf-site .viraf-ct__title h1 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 54px;
  color: var(--viraf-black);
  margin: 0 0 34px;
}
body.viraf-site .viraf-ct__company h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 30px;
  text-transform: uppercase;
  color: var(--viraf-black);
  margin: 0 0 20px;
}
body.viraf-site .viraf-ct-row {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  padding: 0 !important;
}
body.viraf-site .viraf-ct-row__icon { flex: 0 0 auto; margin-top: 3px; }
body.viraf-site .viraf-ct-row__icon i { color: var(--viraf-yellow); font-size: 18px; }
body.viraf-site .viraf-ct-row__text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--viraf-font-body);
  font-size: 17px;
  line-height: 27px;
  color: var(--viraf-copy);
}
body.viraf-site .viraf-ct-row__text p { margin: 0; }
body.viraf-site .viraf-ct-row__text strong { color: var(--viraf-black); font-weight: 700; }
body.viraf-site .viraf-ct-row__text a { color: var(--viraf-black); font-weight: 700; text-decoration: none; }
body.viraf-site .viraf-ct-row__text a:hover { color: var(--viraf-yellow-hover); }

body.viraf-site .viraf-ct__panel {
  background-color: #FFFBEA;
  border-radius: 16px;
  padding: 30px 34px 34px !important;
}
body.viraf-site .viraf-ct__panel-title h2 {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: var(--viraf-black);
  margin: 0 0 20px;
}
/* Form: nhãn nhỏ phía trên, ô trắng bo nhẹ, nút đen viên thuốc canh giữa */
body.viraf-site .viraf-contact-form label {
  font-family: var(--viraf-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--viraf-copy);
  margin-bottom: 6px;
}
body.viraf-site .viraf-contact-form .form-control,
body.viraf-site .viraf-contact-form input[type="text"],
body.viraf-site .viraf-contact-form textarea {
  background-color: var(--viraf-white);
  border: 1px solid #E6E2CF;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--viraf-font-body);
  font-size: 16px;
  color: var(--viraf-ink);
}
body.viraf-site .viraf-contact-form .form-control:focus,
body.viraf-site .viraf-contact-form input[type="text"]:focus,
body.viraf-site .viraf-contact-form textarea:focus {
  border-color: var(--viraf-yellow);
  box-shadow: 0 0 0 3px rgba(255, 203, 5, 0.25);
  outline: none;
}
body.viraf-site .viraf-contact-form .dmdc-form-group { margin-bottom: 16px; }
body.viraf-site .viraf-contact-form button[type="submit"],
body.viraf-site .viraf-contact-form input[type="submit"] {
  background-color: var(--viraf-black) !important;
  border-color: var(--viraf-black) !important;
  color: var(--viraf-yellow) !important;
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.6px;
  padding: 15px 42px;
  border-radius: 999px;
  text-transform: uppercase;
}
body.viraf-site .viraf-contact-form button[type="submit"]:hover,
body.viraf-site .viraf-contact-form input[type="submit"]:hover {
  background-color: var(--viraf-ink) !important;
  border-color: var(--viraf-ink) !important;
}

/* ---- bản đồ full-width ---- */
body.viraf-site .viraf-ct-map { padding: 0; }
body.viraf-site .viraf-ct-map__inner { width: 100%; padding: 0 !important; }
body.viraf-site .viraf-ct-map__frame iframe,
body.viraf-site .viraf-ct-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1199.98px) {
  body.viraf-site .viraf-doc-hero { min-height: 220px; padding: 50px 0 130px; }
  body.viraf-site .viraf-doc-hero__title h1 { font-size: 32px; line-height: 44px; }
  body.viraf-site .viraf-ct__row { flex-wrap: wrap; gap: 34px 0; }
  body.viraf-site .viraf-ct__info,
  body.viraf-site .viraf-ct__formcol { flex: 0 0 100%; max-width: 100%; }
  body.viraf-site .viraf-ct__title h1 { font-size: 32px; line-height: 44px; }
}

@media (max-width: 700px) {
  body.viraf-site .viraf-doc-hero { min-height: 170px; padding: 34px 0 110px; }
  body.viraf-site .viraf-doc-hero__title h1 { font-size: 25px; line-height: 34px; }
  body.viraf-site .viraf-doc-grid { padding: 0 0 50px; }
  body.viraf-site .viraf-doc-grid__row { gap: 20px; margin-top: -84px; }
  body.viraf-site .viraf-doc-card { flex: 0 0 100%; max-width: 100%; padding: 22px 20px 24px !important; }
  body.viraf-site .viraf-doc-card__title h2 { font-size: 19px; line-height: 27px; }
  body.viraf-site .viraf-doc-list a { font-size: 15px; line-height: 23px; }

  body.viraf-site .viraf-ct { padding: 36px 0 44px; }
  body.viraf-site .viraf-ct__title h1 { font-size: 25px; line-height: 34px; margin-bottom: 24px; }
  body.viraf-site .viraf-ct__panel { padding: 22px 20px 26px !important; }
  body.viraf-site .viraf-ct-map__frame iframe,
  body.viraf-site .viraf-ct-map iframe { height: 300px; }
}

/* ---------------------------------------------------------------------------
   TRANG CHỦ — khối "Tại sao chọn Viraf": ở ≤700px CHỈ THẤY 1 trong 4 thẻ.

   Nguyên nhân: `.viraf-benefits` chuyển sang `flex-direction: column` ở mobile nhưng
   vẫn giữ `flex-wrap: wrap`, còn mỗi thẻ `.viraf-benefit` có `flex-basis: 100%`.
   Trong flex container hướng CỘT, `flex-basis` tính theo trục chính = CHIỀU CAO, nên
   mỗi thẻ đòi cao 100% container ⇒ 4 thẻ không vừa 1 cột và bị wrap thành 4 CỘT nằm
   cạnh nhau. Đo được 375px: thẻ ở x 35, 374, 713, 1052 — 3 thẻ nằm ngoài màn và bị
   `overflow:hidden` của cột cha cắt mất (nên KHÔNG sinh thanh cuộn để lộ ra).

   Chữa: hướng cột thì phải TẮT wrap và trả `flex-basis` về auto.
   Ở ≥1024px container là `row` nên rule này không đụng tới bố cục 2x2 của desktop.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  body.viraf-site .viraf-benefits { flex-wrap: nowrap !important; }
  body.viraf-site .viraf-benefit {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---------------------------------------------------------------------------
   TRẠNG THÁI RỖNG của post_grid / post_list (module lõi bổ sung 20/08/2026).
   Trước đó chuyên mục 0 bài render ra một `.row` TRỐNG TRƠN: người xem thấy tiêu đề
   chuyên mục rồi rơi thẳng xuống footer. /chuyen-lam-nghe-dang-ky là ca có thật
   (trên chính viraf.vn cũng 0 bài).
   --------------------------------------------------------------------------- */
body.viraf-site .dmdc-list-empty {
  padding: 70px 20px 80px;
  color: var(--viraf-copy);
}
body.viraf-site .dmdc-list-empty i {
  font-size: 54px;
  color: var(--viraf-yellow);
  opacity: 1;
  margin-bottom: 18px;
}
body.viraf-site .dmdc-list-empty p {
  font-family: var(--viraf-font-body);
  font-size: 18px;
  line-height: 30px;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   TRANG 404. Bản cũ là tệp bê nguyên từ theme Hokaido: dùng biến `--stch-*`
   (KHÔNG tồn tại trong theme này nên màu rơi về rỗng) và chữ tiếng Việt bị
   hỏng mã (mojibake: "Trang nà y hiện không tồn tại").
   Dựng lại theo hệ màu Viraf: nền kem, số 404 vàng, 2 nút như CTA toàn site.
   --------------------------------------------------------------------------- */
body.viraf-site .viraf-404 {
  background-color: var(--viraf-white);
  padding: 80px 0 100px;
  text-align: center;
}
body.viraf-site .viraf-404__code {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 140px;
  line-height: 1;
  color: var(--viraf-yellow);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
body.viraf-site .viraf-404__title {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 46px;
  color: var(--viraf-black);
  margin: 0 0 14px;
}
body.viraf-site .viraf-404__desc {
  font-family: var(--viraf-font-body);
  font-size: 17px;
  line-height: 28px;
  color: var(--viraf-copy);
  max-width: 620px;
  margin: 0 auto 30px;
}
body.viraf-site .viraf-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 44px;
}
/* .btn-primary bị rule toàn cục `color: var(--e-global-color-primary) !important`
   đè (lỗi lõi số 5) -> mọi khai báo màu chữ ở đây BẮT BUỘC có !important. */
body.viraf-site .viraf-404__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 36px;
  border-radius: 999px;
  border: 2px solid var(--viraf-black);
  background-color: var(--viraf-black);
  color: var(--viraf-yellow) !important;
  transition: background-color var(--viraf-transition), color var(--viraf-transition);
}
body.viraf-site .viraf-404__btn:hover {
  background-color: var(--viraf-yellow);
  color: var(--viraf-black) !important;
}
body.viraf-site .viraf-404__btn--ghost {
  background-color: transparent;
  color: var(--viraf-black) !important;
}
body.viraf-site .viraf-404__btn--ghost:hover {
  background-color: var(--viraf-black);
  color: var(--viraf-yellow) !important;
}
/* Khối gợi ý: các đích thật hay được tìm nhất, để khách 404 không cụt đường */
body.viraf-site .viraf-404__hint {
  font-family: var(--viraf-font-body);
  font-size: 15px;
  line-height: 26px;
  color: var(--viraf-copy);
}
body.viraf-site .viraf-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: center;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
body.viraf-site .viraf-404__links a {
  font-family: var(--viraf-font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--viraf-black);
  text-decoration: none;
  border-bottom: 2px solid var(--viraf-yellow);
  padding-bottom: 2px;
}
body.viraf-site .viraf-404__links a:hover { color: var(--viraf-yellow-hover); }

@media (max-width: 700px) {
  body.viraf-site .dmdc-list-empty { padding: 46px 16px 52px; }
  body.viraf-site .dmdc-list-empty i { font-size: 42px; }
  body.viraf-site .dmdc-list-empty p { font-size: 16px; line-height: 27px; }

  body.viraf-site .viraf-404 { padding: 46px 0 60px; }
  body.viraf-site .viraf-404__code { font-size: 88px; }
  body.viraf-site .viraf-404__title { font-size: 24px; line-height: 34px; }
  body.viraf-site .viraf-404__desc { font-size: 15px; line-height: 26px; }
  body.viraf-site .viraf-404__btn { padding: 13px 26px; font-size: 15px; }
}
/* ---------------------------------------------------------------------------
   TRANG KẾT QUẢ TÌM KIẾM (/search?q=...) — mẫu Builder "Viraf — Kết quả tìm kiếm".

   BẪY ĐÃ TRẢ GIÁ (đo 20/08/2026): module `search_results.ejs` bọc TOÀN BỘ CSS của nó
   trong `#srw-<widgetId>` — bộ chọn có ID nên độ ưu tiên 1,1,0, cao hơn hẳn
   `body.viraf-site .viraf-search ...` (0,3,0). Hệ quả: lượt sửa đầu tiên chỉ ăn được
   những thuộc tính module KHÔNG khai (font-family, letter-spacing, padding), còn MÀU và
   VIỀN thì thua sạch — nhãn vẫn đen, ô tìm kiếm vẫn viền xám, chip trang vẫn nền xanh.
   Vì vậy mọi khai báo cần thắng ở đây đều phải kèm `!important`.
   (Widget chỉ mở 2 cài đặt màu: accent_color + name_color. accent để ĐEN vì chữ trong nút
   là `color:#fff` ghi cứng — nền vàng sẽ ra trắng-trên-vàng không đọc được.)
   --------------------------------------------------------------------------- */
body.viraf-site .viraf-search { padding: 60px 0 80px; background-color: var(--viraf-white); }

/* Nhãn nhỏ phía trên + số đếm */
body.viraf-site .viraf-search .sr-label {
  color: var(--viraf-yellow-hover) !important;
  font-family: var(--viraf-font-display);
}
body.viraf-site .viraf-search .sr-count { font-family: var(--viraf-font-body); font-size: 17px; color: var(--viraf-copy) !important; }
body.viraf-site .viraf-search .sr-count strong { color: var(--viraf-yellow-hover) !important; }

/* Từ khoá đang tìm — cùng thang chữ với h1 các trang khác */
body.viraf-site .viraf-search .sr-title {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  color: var(--viraf-black) !important;
}

/* Ô tìm kiếm: viên thuốc viền vàng như form bản tin ở footer */
body.viraf-site .viraf-search .sr-form {
  border: 2px solid var(--viraf-yellow) !important;
  box-shadow: none;
}
body.viraf-site .viraf-search .sr-form input {
  font-family: var(--viraf-font-body);
  font-size: 17px;
  color: var(--viraf-ink) !important;
}
body.viraf-site .viraf-search .sr-form button {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: var(--viraf-black) !important;
  color: var(--viraf-yellow) !important;
}
body.viraf-site .viraf-search .sr-form button:hover { background: var(--viraf-ink) !important; filter: none; }

/* Tiêu đề nhóm: gạch chân vàng */
body.viraf-site .viraf-search .sr-sec-title {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  color: var(--viraf-black) !important;
  border-bottom-color: var(--viraf-yellow) !important;
}

/* Nút chuyển Lưới/Danh sách */
body.viraf-site .viraf-search .sr-toolbar button.active {
  background: var(--viraf-black) !important;
  border-color: var(--viraf-black) !important;
  color: var(--viraf-yellow) !important;
}

/* Thẻ kết quả */
body.viraf-site .viraf-search .sr-post { border-color: #ededed !important; border-radius: 14px !important; }
body.viraf-site .viraf-search .sr-post-title {
  font-family: var(--viraf-font-display);
  font-weight: 700;
  font-size: 18px !important;
  line-height: 26px;
  color: var(--viraf-black) !important;
}
body.viraf-site .viraf-search .sr-post:hover .sr-post-title { color: var(--viraf-yellow-hover) !important; }
body.viraf-site .viraf-search .sr-post-excerpt {
  font-family: var(--viraf-font-body);
  font-size: 15px !important;
  line-height: 24px;
  color: var(--viraf-copy) !important;
}
body.viraf-site .viraf-search .sr-post-date { font-family: var(--viraf-font-body); color: #848484 !important; }

/* Chip trang: nền kem viền vàng thay cho xanh mặc định */
body.viraf-site .viraf-search .sr-page-chip {
  font-family: var(--viraf-font-body);
  font-weight: 600;
  color: var(--viraf-black) !important;
  background: #FFFBEA !important;
  border-color: var(--viraf-yellow) !important;
}
body.viraf-site .viraf-search .sr-page-chip:hover { background: var(--viraf-yellow) !important; }

/* Không có kết quả */
body.viraf-site .viraf-search .sr-empty {
  font-family: var(--viraf-font-body);
  font-size: 17px;
  line-height: 28px;
  color: var(--viraf-copy) !important;
  padding: 40px 0 20px;
}
body.viraf-site .viraf-search .sr-empty i { color: var(--viraf-yellow) !important; }

@media (max-width: 700px) {
  body.viraf-site .viraf-search { padding: 34px 0 46px; }
  body.viraf-site .viraf-search .sr-count { font-size: 15px; }
  body.viraf-site .viraf-search .sr-post-title { font-size: 16px !important; line-height: 24px; }
}

/* ---------------------------------------------------------------------------
   MEGA MENU "Công bố sản phẩm" — Figma node 106:500.
   Panel trắng rộng đúng khung 1425px, 4 cột 340px cách nhau 18px (nên mép cột rơi
   đúng x0 / 358 / 716 / 1074, chữ tiêu đề x34 / 392 / 750 / 1108 như Figma).

   BA THỨ PHẢI ĐÈ, mỗi thứ một lý do khác nhau:
   1. `nav_menu.ejs` neo CSS panel theo `#widget-<id>` (ưu tiên 1,1,0) và tự đặt
      `width/left/right/padding/border/border-radius` -> mọi rule theo class ở đây thua,
      bắt buộc `!important`. (Cùng bẫy với search_results — xem khối .viraf-search.)
   2. L-17: style-engine gán `overflow:hidden` cho container có bề rộng riêng.
      `.viraf-header__nav` đặt width=85 nên panel đổ xuống dưới mép header bị CẮT SẠCH.
      Đo bằng JS vẫn thấy display:block/visible nên rất dễ tưởng hover hỏng — dấu hiệu
      nhận biết là tổ tiên có overflow:hidden. Phải mở lại cả chuỗi trong header.
   3. Khối chứa panel: module ép `.dmdc-has-megamenu { position: static !important }` để
      panel bám tổ tiên có position gần nhất. Nếu để mặc định thì đó là cột `.viraf-header__nav`
      (rộng 85%, lệch phải) -> panel ra x301 w1211. Đặt `position: relative` lên
      `.viraf-header__inner` (hàng boxed 1425) thì panel phủ đúng khung.
   --------------------------------------------------------------------------- */

/* (2) mở overflow cho cả chuỗi header, nếu không panel bị cắt */
body.viraf-site .viraf-header,
body.viraf-site .viraf-header__inner,
body.viraf-site .viraf-header__nav,
body.viraf-site .viraf-header__nav > .dmdc-widget-container,
body.viraf-site .viraf-header__nav .dmdc-nav-menu-wrapper,
body.viraf-site .viraf-header__nav .navbar-collapse { overflow: visible !important; }

/* (3) khung tham chiếu của panel = hàng boxed 1425px.
   Đo được chuỗi tổ tiên: `.navbar.navbar-expand-lg` (Bootstrap, trong module) và
   `.dmdc-el--nav_menu` (style-engine) ĐỀU `position: relative` và chỉ rộng 1211px lệch phải
   -> panel bám vào chúng nên ra x301 w1211. Phải hạ cả hai về `static` thì khối định vị mới
   là `.viraf-header__inner`. Hàng boxed rộng 1455 = 1425 nội dung + 15px đệm mỗi bên, nên
   panel lùi vào 15px để mép trùng đúng khung 1425px của thiết kế. */
body.viraf-site .viraf-header__inner { position: relative; }
body.viraf-site .viraf-header__nav,
body.viraf-site .viraf-header__nav .dmdc-el--nav_menu,
body.viraf-site .viraf-header__nav .navbar { position: static !important; }

/* (1) panel */
body.viraf-site .dmdc-megamenu-panel {
  width: auto !important;
  left: 15px !important;
  right: 15px !important;
  top: 100% !important;
  margin: 0 !important;
  padding: 28px 0 40px !important;
  background-color: var(--viraf-white) !important;
  border: 0 !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14) !important;
  z-index: 1080;
}

/* hàng 4 cột */
body.viraf-site .viraf-mm {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 18px;
  padding: 0 !important;
  width: 100%;
}
/* 340px cố định + cho phép co lại khi khung hẹp hơn 1425 */
body.viraf-site .viraf-mm__col {
  flex: 0 1 340px;
  min-width: 0;
  padding: 0 !important;
}

/* tiêu đề cột — Raleway 700 22/30 đen, thụt 34px như Figma */
body.viraf-site .viraf-mm__title { padding: 0 0 0 34px; margin: 0 0 14px; }
body.viraf-site .viraf-mm__title h1,
body.viraf-site .viraf-mm__title h2,
body.viraf-site .viraf-mm__title h3,
body.viraf-site .viraf-mm__title h4 {
  font-family: var(--viraf-font-display) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 30px !important;
  color: var(--viraf-black) !important;
  margin: 0 !important;
}
body.viraf-site .viraf-mm__title a { color: var(--viraf-black) !important; text-decoration: none; }
body.viraf-site .viraf-mm__title a:hover { color: var(--viraf-yellow-hover) !important; }

/* danh sách mục */
body.viraf-site .viraf-mm__list .dmdc-icon-list,
body.viraf-site .viraf-mm__list ul { margin: 0; padding: 0; list-style: none; }
body.viraf-site .viraf-mm__list li { margin: 0; padding: 0; display: block; }
/* icon_list luôn in <span class="dmdc-icon-list-icon"><i class=""></i></span> kể cả khi
   không chọn icon -> ẩn đi, thiết kế không có biểu tượng đầu dòng */
body.viraf-site .viraf-mm__list .dmdc-icon-list-icon { display: none !important; }
body.viraf-site .viraf-mm__list a {
  display: block;
  padding: 4px 16px 4px 44px;
  font-family: var(--viraf-font-body) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  /* Giãn dòng lấy theo SỐ ĐO THẬT của bản vẽ chứ không theo `lineHeightPx` khai báo:
     style của node ghi 50, nhưng chia khung chữ cho số dòng thực tế ra ~41–43
     (cột 1: 301px/7 dòng, cột 3: 410px/10, cột 4: 306px/7). Chọn 39 + đệm 4px trên dưới để
     dòng ĐƠN cao đúng 47px — bằng chính thanh vàng 340x47 mà Figma vẽ ra, là hình chữ nhật
     duy nhất trong panel có kích thước đo được chắc chắn. */
  line-height: 39px !important;
  color: var(--viraf-copy) !important;
  text-decoration: none;
  /* BẮT BUỘC: `.viraf-header .dmdc-menu > li` đặt `white-space: nowrap` (để mục menu ngang
     không gãy dòng) và thuộc tính này THỪA KẾ xuống tận panel. Hệ quả đo được: 8/22 mục bị
     CẮT CỤT giữa chừng ("Công bố Thực phẩm bảo vệ sức khỏe nhậ…") và 2 huy hiệu HOT biến mất
     theo. Không sinh thanh cuộn nên nhìn lướt rất dễ tưởng thiết kế nó thế. */
  white-space: normal;
  transition: background-color .15s ease, color .15s ease;
}
body.viraf-site .viraf-mm__list a .dmdc-icon-list-text { font: inherit; color: inherit; }
/* trạng thái rê chuột: CẢ DÒNG nền vàng, chữ đen (Figma: thanh 340x47 #FFCB05) */
body.viraf-site .viraf-mm__list a:hover,
body.viraf-site .viraf-mm__list a:focus-visible {
  background-color: var(--viraf-yellow) !important;
  color: var(--viraf-black) !important;
}
/* server gắn .dmdc-mm-active cho link trỏ đúng trang đang xem */
body.viraf-site .dmdc-megamenu-panel a.dmdc-mm-active,
body.viraf-site .dmdc-megamenu-panel a.dmdc-mm-active .dmdc-icon-list-text {
  color: var(--viraf-black) !important;
  font-weight: 600 !important;
}

/* huy hiệu HOT — ngôi sao 12 cánh đỏ 24px, chữ HOT trắng, đặt SAU chữ (Figma "Icon Hot").
   Vẽ bằng clip-path thay vì ảnh để không thêm request và luôn nét ở mọi độ phân giải. */
/* Huy hiệu HOT ĐÃ CHUYỂN VÀO MODULE (21/08): nay là ô "Huy hiệu" của từng mục trong
   `icon_list`, hình ngôi sao + màu + kích thước + chuyển động do `icon_list.ejs` tự phát ra
   dưới class `.dmdc-il-badge`. Theme không giữ bản sao nữa — trước đây hình vẽ nằm ở đây nên
   panel này bê sang theme khác là mất huy hiệu, mà người biên tập cũng không chỉnh được gì
   (phải nhúng thẻ <span class="viraf-mm__hot"> thô vào ô Văn bản mới có).
   Chỉ còn dặn font: module không đặt font-family để khỏi ép chữ lên theme khác. */
body.viraf-site .viraf-mm__list .dmdc-il-badge { font-family: var(--viraf-font-display); }

/* ---- Tablet/mobile: KHÔNG dùng panel 4 cột ----
   Ở ≤991px module tự tắt CSS mở-khi-rê (khối @media min-width:992px), và ngăn kéo mobile
   `dm-drawer` nhân bản menu — panel 1425px nhét vào ngăn kéo 323px sẽ vỡ. Cho panel xếp dọc
   thành 4 khối, bỏ thụt lề để vừa bề ngang. */
@media (max-width: 991.98px) {
  /* !important BẮT BUỘC ở đây: `nav_menu.ejs` nhúng CSS của mẫu megamenu (renderPageCss) vào
     một thẻ <style> nằm NGAY TRONG panel, tức là SAU tệp style.css trong thứ tự tài liệu.
     Rule của style-engine `.dmdc-el.uid-x { flex-direction: row }` cùng độ ưu tiên nhưng đứng
     sau nên thắng -> ở 375px panel vẫn xếp 4 cột ngang, nhét vào ngăn kéo 323px là vỡ. */
  body.viraf-site .dmdc-megamenu-panel { padding: 12px 0 16px !important; box-shadow: none !important; }
  body.viraf-site .viraf-mm { flex-direction: column !important; flex-wrap: nowrap !important; gap: 6px !important; }
  body.viraf-site .viraf-mm__col { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; }
  body.viraf-site .viraf-mm__title { padding-left: 14px; margin-bottom: 6px; }
  body.viraf-site .viraf-mm__title h1,
  body.viraf-site .viraf-mm__title h2,
  body.viraf-site .viraf-mm__title h3,
  body.viraf-site .viraf-mm__title h4 { font-size: 18px !important; line-height: 26px !important; }
  body.viraf-site .viraf-mm__list a { padding: 6px 12px 6px 22px; font-size: 16px !important; line-height: 24px !important; }
  /* Cỡ huy hiệu ở mobile nay do CÀI ĐẶT của widget lo (`badge_size_mobile`), module tự phát
     media query — không ghi đè ở theme nữa. */

  /* NGĂN KÉO MOBILE — 22 link của mega menu bị ẨN SẠCH nếu không có khối này.
     `dmdc-mobile-nav.js` nhân bản menu vào <aside class="dm-drawer">, còn
     `dmdc-mobile-nav.css` có rule `.dm-drawer .dm-menu ul ul { display: none }` để gấp
     menu con thành accordion. `icon_list` in ra `<ul class="dmdc-icon-list">` nằm LỒNG
     trong `ul.dm-menu` nên dính đúng rule đó. Tệ hơn: JS chỉ gắn nút chevron cho `li` có
     `> ul` trực tiếp, mà giữa panel và ul này toàn thẻ <div>, nên KHÔNG CÓ CÁCH NÀO bung ra.
     Kết quả đo ở 375px: mở "Công bố sản phẩm" chỉ thấy 4 tiêu đề cột, 0/22 link bấm được.
     Panel đã tự ẩn/hiện theo `li.open` rồi, nên khi cha mở thì cho hiện thẳng. */
  body.viraf-site .dm-drawer .dm-menu li.open > .dmdc-megamenu-panel ul,
  body.viraf-site .dm-drawer .dm-menu li.open > .dmdc-megamenu-panel li { display: block !important; }
  body.viraf-site .dm-drawer .dmdc-megamenu-panel { padding: 4px 0 10px 8px !important; }
  body.viraf-site .dm-drawer .viraf-mm__title { padding-left: 4px; margin-bottom: 2px; }
  body.viraf-site .dm-drawer .viraf-mm__col { margin-bottom: 10px; }
  body.viraf-site .dm-drawer .viraf-mm__list a { padding: 7px 8px 7px 12px; font-size: 15px !important; }
  /* Mục ĐANG XEM trong ngăn kéo: `dmdc-mobile-nav.js` có gắn class `active` nhưng KHÔNG có
     kiểu dáng nào đi kèm — đo ở /chuyen-gia: mục "Chuyên gia" ra rgb(82,82,82) đậm 400, y
     hệt hai mục bên cạnh, không cách nào biết mình đang ở đâu. Dùng đúng ngôn ngữ của
     megamenu (đen + đậm 600) cho thống nhất với bản desktop. */
  body.viraf-site .dm-drawer .dm-menu a.active,
  body.viraf-site .dm-drawer .dm-menu li.active > a,
  body.viraf-site .dm-drawer .dmdc-mm-active {
    color: var(--viraf-black) !important;
    font-weight: 600 !important;
  }
}