/* ==========================================================================
   54-popup-dich-vu.css — sáu popup của trang «Truyền thông thương hiệu»
   ==========================================================================

   Figma — HAI KHUÔN khác hẳn nhau, đừng gộp luật:

   Khuôn A · 900×650 · bo 12 · nền trắng · viền đen 1 · đệm 32/25 · khe 40
     '1034:9145' STRATEGIC FOUNDATION · '1034:9240' BRAND COMMUNICATION SYSTEM
     '1034:9044' BRAND GUIDELINES CƠ BẢN
     ├ trái  322×586 — ảnh 322×255 trên, hai nút 156×46 dưới (space-between)
     └ phải  488×586 — CÓ CUỘN (ruột cao 646 > 586), khe 16
        ├ đầu   488×92, kẻ dưới 1px, đệm dọc 16
        └ thân  khe 8

   Khuôn B · 1280×800 · bo 16 · ngang
     '562:13429' Chuyển đổi · '562:13498' Thương hiệu · '562:13554' Media
     ├ trái  530×800 — nền trắng, viền '#458763' 1, đệm 32/33, khe 8
     └ phải  ảnh 750×800

   ⚠ CHỈ MỞ ĐƯỢC Ở KHỔ MÁY TÍNH. Nút mở là các liên kết '.t4dv-*-xem-pc'
   trong nội dung trang, và chúng bị ẩn dưới 850px — khổ nhỏ vẫn dùng liên
   kết cũ sang '/lien-he/'. Figma chưa có khung mobile cho sáu popup này.
   ========================================================================== */

/* --- vỏ lightbox chung ---------------------------------------------------- */
.t4dv-pop.lightbox-content {
  background: var(--t4-white);
  padding: 0 !important;
}
.t4dv-pop .t4dv-pop-hang {
  display: flex; flex-wrap: nowrap; max-width: none; width: 100%; margin: 0;
}
/* ⛔ Ô của Flatsome là '.col > .col-inner'. Mọi luật bố cục bên trong ô
   (flex, chiều cao, cuộn) phải đặt lên '.col-inner' — đặt lên '.col' thì con
   trực tiếp của nó chỉ có MỘT phần tử là '.col-inner', nên 'space-between'
   không có gì để dàn và ảnh/nút vẫn dồn lên đầu. Đã trả giá 09/09/2026. */
.t4dv-pop .t4dv-pop-hang > .col { padding: 0; }
.t4dv-pop .t4dv-pop-hang > .col > .col-inner { padding: 0; width: 100%; }
/* Ảnh trong popup lấp đầy ô của nó, không co theo lưới Flatsome. */
.t4dv-pop .t4dv-pop-anh img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ========================================================================== */
/* KHUÔN A — ba popup của tab «Xây dựng nền tảng truyền thông»                 */
/* ========================================================================== */
/* ⛔ Viền vẽ bằng 'box-shadow: inset', KHÔNG dùng 'border'. Figma vẽ nét
   viền PHÍA TRONG khung 900 nên chỗ cho nội dung vẫn đủ 850; 'border' của
   CSS lại ăn thêm 2px, còn 848 — thiếu đúng 2px so với 322 + 40 + 488, và
   'flex-wrap' mặc định đá cột phải xuống dòng, popup cao gấp đôi. */
.t4dv-pop--a.lightbox-content {
  box-shadow: inset 0 0 0 1px #000; border-radius: 12px;
}
/* [số] đệm 32 dọc · 25 ngang; hai cột 322 + 488 cách nhau 40.
   ⛔ KHÔNG dùng 'justify-content: space-between' để tạo khe 40: '.row' của
   Flatsome có '::after' dọn dòng, nó là một ô flex thứ ba rộng 0 nên phần dư
   bị chia đôi (20 + 20) và cột phải tụt vào 20px. Đặt khe bằng 'margin-left'.
   Cùng cái bẫy đã ghi cho hàng tab 2 trong '47-nhom-dich-vu.css'. */
.t4dv-pop--a .t4dv-pop-hang { padding: 32px 25px; align-items: stretch; }
.t4dv-pop--a .t4dv-pop-trai { flex: 0 0 322px; max-width: 322px; }
.t4dv-pop--a .t4dv-pop-hang > .t4dv-pop-trai > .col-inner {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 586px;
}
.t4dv-pop--a .t4dv-pop-trai .t4dv-pop-anh { height: 255px; flex: 0 0 255px; }
/* [số] cụm nút 322×46 — hai nút 156 cách nhau 10. */
.t4dv-pop--a .t4dv-pop-nut { display: flex; gap: 10px; margin: 0; }
.t4dv-pop--a .t4dv-pop-nut a {
  flex: 0 0 156px; height: 46px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--t4-font-body);
  font-size: 16px; line-height: 22px; font-weight: 700; text-decoration: none;
}
.t4dv-pop--a .t4dv-pop-quay {
  border: 1px solid var(--t4-leaf); color: var(--t4-leaf); background: transparent;
}
.t4dv-pop--a .t4dv-pop-tuvan { background: var(--t4-leaf); color: var(--t4-white); }

/* [số] cột phải 488×586, ruột cao 646 ⇒ Figma đã cắt và cho cuộn. */
.t4dv-pop--a .t4dv-pop-phai {
  flex: 0 0 488px; max-width: 488px; margin-left: 40px;
}
/* ⚠ Cột phải CÓ CUỘN (Figma cắt: ruột 646 > khung 586). Thanh cuộn của
   trình duyệt ăn ~15px nên bề ngang chữ còn 473 thay vì 488 của Figma —
   chênh này là do có thanh cuộn thật, Figma không vẽ nó. Đừng ẩn thanh cuộn
   để lấy lại 15px: mất luôn dấu hiệu «còn nội dung bên dưới». */
.t4dv-pop--a .t4dv-pop-hang > .t4dv-pop-phai > .col-inner {
  height: 586px; overflow-y: auto; overflow-x: hidden;
}
/* [số] khối đầu 488×92: đệm dọc 16, kẻ dưới 1. */
.t4dv-pop--a .t4dv-pop-dau {
  padding: 16px 0; border-bottom: 1px solid #000; margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px;
}
.t4dv-pop--a .t4dv-pop-dau .t4dv-pop-so {
  font-family: var(--t4-font-body);
  font-size: 20px; line-height: 35px; font-weight: 700; color: #b77537; margin: 0;
  /* [số] 'Frame 197' rộng 80 dù chữ «Phần 1:» chỉ 69 — tên gói bắt đầu ở
     x=96 kể từ mép cột (80 + khe 16), không phải 85. */
  flex: 0 0 80px;
}
/* 'flex: 1 1 0' + 'min-width: 0' — để 'auto' thì cơ sở co giãn là bề rộng
   nội dung của cả khối, ô rộng bằng 100% và tên gói bị đá xuống dòng dưới
   «Phần N:» thay vì đứng cạnh. */
.t4dv-pop--a .t4dv-pop-dau h3 {
  font-family: var(--t4-font-body);
  font-size: 20px; line-height: 35px; font-weight: 700; color: var(--t4-dark-moss);
  margin: 0; flex: 1 1 0; min-width: 0;
}
.t4dv-pop--a .t4dv-pop-dau .t4dv-pop-phu {
  font-family: var(--t4-font-body);
  font-size: 14px; line-height: 25px; font-weight: 400; color: var(--t4-text);
  margin: 0; flex: 0 0 100%; padding-left: 96px;
}
/* [số] 'Frame 210' khe 8 giữa đầu và thân (khe 16 là của 'Frame 195', mà
   khung ấy chỉ có MỘT con nên số 16 không rơi vào đâu cả). Trong thân
   ('Frame 206') cũng khe 8. */
.t4dv-pop--a .t4dv-pop-than { margin-top: 8px; }
.t4dv-pop--a .t4dv-pop-than > * + * { margin-top: 8px; }
.t4dv-pop--a .t4dv-pop-dan {
  font-family: var(--t4-font-body);
  font-size: 14px; line-height: 30px; font-weight: 400; color: var(--t4-text); margin: 0;
}
.t4dv-pop--a .t4dv-pop-ra {
  font-family: var(--t4-font-body);
  font-size: 12px; line-height: 20px; font-weight: 400; color: var(--t4-text); margin: 0;
}
.t4dv-pop--a .t4dv-pop-than h4 {
  font-family: var(--t4-font-body);
  font-size: 14px; line-height: 30px; font-weight: 600; color: var(--t4-text); margin: 0;
}
.t4dv-pop--a .t4dv-pop-ds { margin: 0; padding: 0; list-style: none; }
.t4dv-pop--a .t4dv-pop-ds li {
  font-family: var(--t4-font-body);
  font-size: 14px; line-height: 25px; font-weight: 400; color: var(--t4-text); margin: 0;
}

/* ========================================================================== */
/* KHUÔN B — ba popup của tab «Add-on Sản xuất nội dung & Media»               */
/* ========================================================================== */
.t4dv-pop--b.lightbox-content { border-radius: 16px; overflow: hidden; }
.t4dv-pop--b .t4dv-pop-hang { align-items: stretch; }
/* [số] cột chữ 530×800 — nền trắng, viền lá 1, đệm 32 dọc / 33 ngang. */
.t4dv-pop--b .t4dv-pop-trai { flex: 0 0 530px; max-width: 530px; }
/* ⛔ PHẢI viết đủ '.t4dv-pop-hang >' trong bộ chọn. Luật dọn đệm ở đầu tệp
   là '.t4dv-pop .t4dv-pop-hang > .col > .col-inner' — BỐN lớp; bản ngắn ba
   lớp thua và 'padding: 32px 33px' im lặng không ăn, chữ dán sát viền. */
.t4dv-pop--b .t4dv-pop-hang > .t4dv-pop-trai > .col-inner {
  background: var(--t4-white); border: 1px solid var(--t4-leaf);
  padding: 32px 33px; height: 800px;
  display: flex; flex-direction: column;
}
.t4dv-pop--b .t4dv-pop-anhcot { flex: 0 0 750px; max-width: 750px; }
.t4dv-pop--b .t4dv-pop-anhcot .t4dv-pop-anh { height: 800px; }
/* [số] 'Frame 7': nhãn nhóm 11px cao đúng 8 (Figma cắt hộp theo chiều cao chữ
   hoa) rồi khe 4 xuống tên gói 24/28. Cùng cái bẫy đã ghi ở tab 3: phải hạ
   'line-height' xuống 8, không thì chữ vẽ giữa dải 28 và tụt sát tên gói. */
/* [số] 'Frame 87' có HAI kẻ nét đứt kẹp lấy khối tiêu đề: một ở y=32 (ngay
   dưới mép đệm) và một ở y=105. Khe 16 mỗi bên. Bỏ sót cái trên là toàn bộ
   ruột popup nhích lên 17px so với Figma. */
/* [số] 'Frame 7' — biểu tượng 28–42×40 màu Camel bên TRÁI, khe 16 sang cụm
   chữ; cụm chữ = nhãn nhóm (cao 8) + khe 4 + tên gói (28) = đúng 40, bằng
   biểu tượng. Dùng lưới hai cột để biểu tượng chiếm cả hai hàng chữ. */
.t4dv-pop--b .t4dv-pop-dau {
  margin: 0; padding: 16px 0;
  border-top: 1px dashed rgba(0, 0, 0, .11);
  border-bottom: 1px dashed rgba(0, 0, 0, .11);
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 16px; row-gap: 4px; align-items: center;
}
.t4dv-pop--b .t4dv-pop-ic {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  height: 40px; width: auto; display: block;
}
.t4dv-pop--b .t4dv-pop-nhom { grid-column: 2; grid-row: 1; align-self: end; }
.t4dv-pop--b .t4dv-pop-dau h3 { grid-column: 2; grid-row: 2; align-self: start; }
.t4dv-pop--b .t4dv-pop-nhom {
  font-family: var(--t4-font-body);
  font-size: 11px; line-height: 8px; font-weight: 600; color: var(--t4-text);
  margin: 0;   /* khe 4 do 'row-gap' của lưới lo, đừng cộng thêm lề */
}
.t4dv-pop--b .t4dv-pop-dau h3 {
  font-family: var(--t4-font-body);
  font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -.48px;
  color: var(--t4-text); margin: 0;
}
/* [số] 'Frame 87' khe 16 giữa các khối; trong 'Container' khe 8. */
.t4dv-pop--b .t4dv-pop-than {
  margin-top: 16px; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
}
.t4dv-pop--b .t4dv-pop-than h4 {
  font-family: var(--t4-font-body);
  font-size: 14px; line-height: 19px; font-weight: 600; color: var(--t4-text);
  margin: 16px 0 0;
}
.t4dv-pop--b .t4dv-pop-than > h4:first-child { margin-top: 0; }
.t4dv-pop--b .t4dv-pop-than p {
  font-family: var(--t4-font-body);
  font-size: 12px; line-height: 25px; font-weight: 400; color: var(--t4-text);
  margin: 8px 0 0;
}
.t4dv-pop--b .t4dv-pop-ds { margin: 8px 0 0; padding: 0; list-style: none; }
.t4dv-pop--b .t4dv-pop-ds li {
  position: relative; padding-left: 20px; margin: 8px 0 0;
  font-family: var(--t4-font-body);
  font-size: 12px; line-height: 20px; font-weight: 400; color: var(--t4-text);
}
.t4dv-pop--b .t4dv-pop-ds li:first-child { margin-top: 0; }
/* [số] dấu tích 16×16 màu Camel '#cf9156', chữ bắt đầu ở x=20. */
.t4dv-pop--b .t4dv-pop-ds li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px;
  background: var(--t4-camel);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.4 2.8 8l1.1-1.1 2.3 2.3 5.9-5.9L13.2 4z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.4 2.8 8l1.1-1.1 2.3 2.3 5.9-5.9L13.2 4z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* [số] 'Frame 77' dính đáy: kẻ rồi nút «Quay lại» 82×24, khe 8. */
.t4dv-pop--b .t4dv-pop-nut {
  margin: 16px 0 0; padding-top: 8px; border-top: 1px dashed rgba(0, 0, 0, .11);
}
/* [số] Nút «Quay lại» 82×24: nền trắng, bo 3, đệm 2/8, mũi tên trái 14×14
   rồi khe 8 tới chữ 12/16. Mũi tên vẽ bằng mặt nạ SVG nội tuyến — không tải
   thêm tệp, và đổi màu theo 'background' như mọi biểu tượng khác. */
.t4dv-pop--b .t4dv-pop-quay {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--t4-white); border-radius: 3px;
  padding: 2px 8px;
  font-family: var(--t4-font-body);
  font-size: 12px; line-height: 16px; font-weight: 400;
  color: var(--t4-text); text-decoration: none;
}
.t4dv-pop--b .t4dv-pop-quay::before {
  content: ""; flex: 0 0 14px; width: 14px; height: 14px;
  background: var(--t4-text);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M6.2 2.3 1.5 7l4.7 4.7.9-.9-3.2-3.2H13V6.4H3.9l3.2-3.2z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M6.2 2.3 1.5 7l4.7 4.7.9-.9-3.2-3.2H13V6.4H3.9l3.2-3.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ==========================================================================
   KHỔ ĐIỆN THOẠI — popup «adapt» từ bản máy tính
   --------------------------------------------------------------------------
   Figma KHÔNG có khung mobile cho sáu popup này; 4T chốt (10/09/2026) lấy
   thẳng bản máy tính, BỎ phần hình ảnh, chỉ giữ thông tin. Nên ở đây:
     · ẩn hẳn ảnh minh hoạ (khuôn A) và cột ảnh (khuôn B);
     · gỡ mọi chiều cao ghim cứng để hộp tự cao theo chữ;
     · thu đệm 32/33 xuống 24/20 — giữ nguyên thì trên khổ 375 chỉ còn 309px
       cho chữ, danh sách gãy dòng liên tục.
   ========================================================================== */
@media (max-width: 849px) {
  .t4dv-pop .t4dv-pop-hang { flex-direction: column; }
  .t4dv-pop--a .t4dv-pop-anh,
  .t4dv-pop--b .t4dv-pop-anhcot { display: none; }
  .t4dv-pop--a .t4dv-pop-hang { padding: 24px 20px; }
  .t4dv-pop--b .t4dv-pop-hang > .t4dv-pop-trai > .col-inner { padding: 24px 20px; }
  /* Cột chữ khuôn A vốn có cuộn riêng — bỏ đi, để cả popup cuộn một mạch. */
  .t4dv-pop--a .t4dv-pop-hang > .t4dv-pop-phai > .col-inner { overflow: visible; }
  .t4dv-pop--b .t4dv-pop-than { overflow: visible; flex: 0 0 auto; }
  /* Cụm nút khuôn A: hai nút 156px không vừa khổ hẹp ⇒ cho co và xuống dòng. */
  .t4dv-pop--a .t4dv-pop-nut { flex-wrap: wrap; }
  .t4dv-pop--a .t4dv-pop-nut a { flex: 1 1 140px; }
  /* Khối đầu khuôn A: «Phần N:» và tên gói xuống dòng cho đỡ chật. */
  .t4dv-pop--a .t4dv-pop-dau .t4dv-pop-so { flex: 0 0 100%; }
  .t4dv-pop--a .t4dv-pop-dau .t4dv-pop-phu { padding-left: 0; }
  .t4dv-pop--a .t4dv-pop-trai,
  .t4dv-pop--a .t4dv-pop-phai,
  .t4dv-pop--b .t4dv-pop-trai,
  .t4dv-pop--b .t4dv-pop-anhcot {
    flex: 0 0 100%; max-width: 100%; height: auto; margin-left: 0;
  }
  .t4dv-pop--a .t4dv-pop-hang > .t4dv-pop-trai > .col-inner,
  .t4dv-pop--a .t4dv-pop-hang > .t4dv-pop-phai > .col-inner,
  .t4dv-pop--b .t4dv-pop-hang > .t4dv-pop-trai > .col-inner { height: auto; }
}

/* ==========================================================================
   Hai liên kết «Xem chi tiết» chồng nhau trong CÙNG một '[ux_text]'
   --------------------------------------------------------------------------
   ⛔ PHẢI để chung một '[ux_text]', KHÔNG được tách thành hai khối.
   Thẻ tab 1 và tab 3 ghim kẻ + nút xuống đáy bằng
   '.col-inner > .is-divider:nth-last-child(2)' (luật III.33 trong
   '47-nhom-dich-vu.css'). Thêm một khối nữa vào cuối cột là đường kẻ tụt
   thành 'nth-last-child(3)' và luật ghim đáy im lặng mất tác dụng.

   Khổ ≤849 giữ nguyên hành vi cũ: liên kết sang '/lien-he/'.
   Từ 850px: liên kết mở popup tương ứng.
   ========================================================================== */
/* ⛔ PHẢI viết đủ '.t4dv-goi-xem a.t4dv-xem-mb' — bộ chọn ngắn
   'body.<slug> .t4dv-xem-mb' (0,2,1) THUA luật kiểu dáng sẵn có
   'body.<slug> .t4dv-goi-xem a' (0,2,2) trong '47-nhom-dich-vu.css', nên
   'display: none' im lặng không ăn và cả hai liên kết cùng hiện. */
/* ⚠ 10/09/2026 — tài liệu lỗi phần Bản Mobile yêu cầu «Xem chi tiết» ở khổ
   điện thoại CŨNG mở popup («adapt popup từ bản Figma Desktop sang Mobile,
   có thể bỏ phần hình ảnh, chỉ giữ thông tin»). Nên nay MỌI khổ đều dùng
   liên kết mở popup; liên kết '/lien-he/' chỉ còn là đường lui khi lightbox
   không dựng được.
   ⚠ Hai tên lớp '-mb' / '-pc' nay KHÔNG còn nghĩa «điện thoại / máy tính»
   nữa — giữ tên cũ để khỏi phải sửa lại nội dung trang; đọc theo luật này. */
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-xem a.t4dv-xem-mb,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-xem a.t4dv-xem-mb { display: none; }
body.t4-trang-truyen-thong-thuong-hieu .t4dv-goi-xem a.t4dv-xem-pc,
body.t4-trang-truyen-thong-thuong-hieu .t4dv-g3-xem a.t4dv-xem-pc { display: inline-block; }