/* Dịch bằng dich-lop-khoac.py từ bo-khoac-elementor.css.
 * Bám lớp thiết kế của dự án, không bám lớp của trình dựng nào.
 * Sửa thì sửa bảng ánh xạ trong công cụ rồi dịch lại. */
/* cidi:schema 1 | nguon su that: chung.jsx cua ban mau | cap nhat: 2026-10-03 */
/* CSS dung chung cho bon trang con cua siteup.vn.
   RUT THANG tu chuoi CSS_CHUNG trong chung.jsx - dung sua tay o day. */ /* Ô giữ chỗ ảnh. Cố ý để nhìn ra ngay là chưa có ảnh thật: nền chìm, viền nét
   đứt, ghi thẳng cần ảnh gì. Xóa hết trước khi đưa site ra ngoài: grep su-cho */
.su-cho{position:relative;display:grid;place-items:center;gap:var(--space-2);
  background:var(--surface-sunken);border:var(--border-w) dashed var(--border-strong);
  border-radius:var(--radius-lg);padding:var(--space-6);text-align:center;color:var(--text-3)}.su-cho-ic{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-sm);
  background:var(--accent-subtle);color:var(--accent-text)}.su-cho-t{font:var(--fw-medium) var(--text-small)/var(--lh-body) var(--font-ui);max-width:34ch}.su-cho-n{font:500 11px/var(--lh-label) var(--font-mono);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--accent-text)}/* Khung chữ hẹp. Luật chia lưới chốt 23/09/2026: CHỮ bó trong 760, HÌNH để dày
   1120, lề trái hai bên bằng nhau. */
.su-chu{max-width:var(--container-narrow)}/* Bảng. Dùng cho bảng giá duy trì, bảng dịch vụ thêm, bảng đối chiếu gói. */
/* Tra le duoi cua bang ve 0. Chu de Hello cua WordPress dat
   table{margin-bottom:15px}, do ra hop cuon cao hon bang dung 15px o ba muc
   co bang cua trang gia. Ban mau von da la 0 nen luat nay khong doi gi ben do
   - de o day thay vi mot tep CSS rieng cho WordPress, vi bai hoc chan trang
   ngay 26/09 cho thay hai ban song song rat kho giu bang nhau.
   Da soat ca table, ul, ol, li, p, h1 den h5: chi moi table lech. */
.su-cuon table{margin:0}/* Cho cau hoi xuong dong duoc. Tren WordPress nut thua white-space nowrap tu
   luat chung cua chu de, nen cau hoi dai khong xuong dong ma day bieu tuong
   chevron van ra tan 497px o man 360 - mat chu, va scrollWidth cua trang vot
   len 497 du chu de co body{overflow-x:clip} nen nguoi dung khong cuon duoc.
   Ban mau von da la normal nen luat nay khong doi gi ben do.
   Da soat ca button, a.su-btn, .su-chip, .su-lk, th, td: chi moi .su-faq__q
   lech. */
.su-faq__q{white-space:normal}/* GO LUAT NUT CUA KIT ELEMENTOR.
   Kit to MOI the <button> tren site, ca luc thuong lan luc re chuot / giu nhay:
       .elementor-kit-7 button          { background-color:var(--primary);
           color:var(--primary-text); border-radius:999px; padding:13px 20px }
       .elementor-kit-7 button:hover,
       .elementor-kit-7 button:focus    { background-color:var(--primary-hover);
           color:var(--primary-text); border-radius:999px }
   Do manh cua hai luat do la (0,1,1) va (0,2,1). Luat cua bo chuan chi (0,1,0)
   den (0,2,0) nen Kit thang ca hai. Hau qua do duoc ngay 26/09/2026:
     - nut cau hoi: nen than chi, chu trang, bo goc 999, chevron than chi nam
       tren nen than chi nen tang hinh
     - the loc CHUA CHON: nen than chi thay vi nen trang
     - the loc luc re chuot va sau khi bam: nen than chi, ke ca the dang chon
     - dem the loc 13px 20px thay vi 0 16px
   Khoi hoi dap va bo loc VAN BAM DUOC nen nhin luot tuong chay dung.

   Chua bang cach nang do manh: lap lop boc de thanh hai lop; them :hover va
   :focus de vuot luat :hover cua Kit. Khong dung !important vi con phai de
   trang thai [aria-pressed=true] cua the loc de len duoc - vi vay THU TU khai
   duoi day co y nghia: luat the dang chon nam SAU luat re chuot.

   Chi bu lai dung nhung thuoc tinh Kit ep, khong chep lai ca bo luat DS. */
.su-faq .su-faq__q{background:none;color:var(--text);border:0;border-radius:0;
  padding:16px 0;transition:none}.su-faq .su-faq__q:focus{background:none;color:var(--text);border-radius:0}.su-faq .su-faq__q:hover{background:none;color:var(--accent-text);border-radius:0}.su-chips .su-chip{background:var(--surface);color:var(--text);
  padding:0 16px;border-radius:var(--radius-pill)}.su-chips .su-chip:hover, .su-chips .su-chip:focus{background:var(--surface);color:var(--text)}.su-chips .su-chip[aria-pressed="true"]{background:var(--accent);color:var(--text-on-accent)}.su-chips .su-chip[aria-pressed="true"]:hover{background:var(--accent-hover);
  color:var(--text-on-accent)}.su-cuon{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:var(--border-w-thin) solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}.su-bang{width:100%;border-collapse:collapse;text-align:left}/* Chu de Hello (reset.css) ke vien 1px xam quanh CA BON canh moi o:
   "table td, table th {border:1px solid rgba(128,128,128,.5)}". Luat cu chi
   dat canh duoi nen ba canh kia van con vien xam tren WordPress, ban mau thi
   khong co. Phai go dung ba canh do, khong go canh duoi. */
.su-bang th, .su-bang td{padding:var(--space-4) var(--space-5);
  border-top:0;border-left:0;border-right:0;
  border-bottom:var(--border-w-thin) solid var(--border);vertical-align:top}/* Rieng hang tieu de chu de con mot luat thu hai, viet bang thuoc tinh logic:
   "table thead:first-child tr:first-child th {border-block-start:1px ...}".
   No manh (0,2,4) nen luat tren (0,1,1) khong voi toi. Phai bam theo dung hinh
   dang bo chon do de len (0,3,3): bac lop 3 hon bac lop 2, xet truoc bac the. */
.su-bang thead:first-child tr:first-child th{border-block-start:0}.su-bang tbody tr:last-child th, .su-bang tbody tr:last-child td{border-bottom:0}/* Dai tieu de am, khong dung xam lanh. --surface-sunken la gray-100, mot mau
   xam nga lanh, dat canh nen be am cua trang thi bang trong nhu bang mac dinh
   cua trinh duyet. --bg la chinh mau nen trang, nen dai tieu de thanh mot
   quang am cung ho voi phan con lai. Chu tieu de ha xuong --text-2 de so lieu
   dan mat truoc, tieu de chi lam nhan. */
.su-bang thead th{font:var(--fw-semibold) var(--text-small)/var(--lh-label) var(--font-ui);
  letter-spacing:.01em;color:var(--text-2);background:var(--bg);white-space:nowrap}.su-bang tbody th{font:var(--fw-medium) var(--text-small)/var(--lh-body) var(--font-ui);color:var(--text)}.su-bang td{font:var(--text-small)/var(--lh-body) var(--font-ui);color:var(--text-2)}/* Bang gia thi con so la thu duoc doc truoc, nen no phai lon hon chu xung
   quanh: 16px thay vi 13px. tabular-nums de cac chu so thang cot. */
.su-bang .su-so{font:var(--fw-semibold) var(--text-body)/var(--lh-label) var(--font-mono);
  color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}/* Dau "d" khong phai chu so, de o phong chu don khong chan thi no dinh lien
   con so nhu cach viet tien Viet: 1.590.000d. Truoc 26/09 no nam trong phong
   chu don chan va cach con so mot dau cach, nhin ra hai manh roi nhau. */
.su-bang .su-dv{font:var(--fw-medium) var(--text-small)/1 var(--font-ui);
  color:var(--text-3);font-style:normal;margin-left:1px}/* Gia bao rieng, khong co con so: khong duoc dung phong chu don chan. */
.su-bang .su-bao{font:var(--fw-medium) var(--text-small)/var(--lh-label) var(--font-ui);
  color:var(--text-2)}.su-bang .su-ghi{display:block;margin-top:2px;font-size:var(--text-caption);color:var(--text-3)}/* Chu de Hello con to xen ke hang le:
   "table tbody > tr:nth-child(2n+1) > th|td {background:rgba(128,128,128,.07)}"
   Bo chon do manh (0,1,4), hon moi luat nen cua minh, nen tren WordPress bang
   nao cung thanh bang ke soc xam - ban mau thi khong. Go bang bo chon cung
   hinh dang cong mot lop: (0,2,3) hon vi bac lop dung truoc bac the. */
.su-cuon .su-bang tbody > tr:nth-child(2n+1) > th, .su-cuon .su-bang tbody > tr:nth-child(2n+1) > td{background-color:transparent}/* Ro hang dang doc. Bang duy tri rong 1120 ma o cuoi cach ten goi hon nua man
   hinh, mat de truot hang. Quang am nay giu hang lai. Dat nen o <tr> chu khong
   o tung o: nen cua o da bi go ve trong suot ngay tren, nen nen hang hien qua. */
.su-bang tbody tr:hover{background:var(--bg)}

/* Bang ba cot kieu "ten - gia - ghi chu". De tu dong thi trinh duyet chia deu
   phan du cho ca ba cot, thanh ra ten goi va gia cach nhau 90px trong khi
   cot ghi chu thua cho. Ep hai cot dau thu ve dung be ngang chu cua no
   (width:1% la meo quen thuoc cua table-layout:auto), phan du don het sang
   cot cuoi. Chi lam tu 900px tro len, duoi do can cho chu xuong dong. */
@media(min-width:900px){.su-gon tbody th, .su-gon thead th:first-child{width:1%;white-space:nowrap}.su-gon .su-o-gia{width:1%;white-space:nowrap}
}/* Bang hai cot kieu thuc don: gia neo thang le phai, so thang cot voi nhau. */
.su-menu thead th:last-child, .su-menu tbody td:last-child{text-align:right}
/* Dien thoai: ba cot cua bang duy tri cong lai 382px trong khung 326px nen hop
   phai cuon ngang. Thu dem ngang lai con 12px va cho con so ve co chu thuong
   thi vua khit 319px. Bang doi chieu de nguyen, no von dung de cuon. */
@media(max-width:599px){.su-bang:not(.su-doi) th, .su-bang:not(.su-doi) td{padding:var(--space-4) var(--space-3)}.su-bang:not(.su-doi) .su-so{font-size:var(--text-small)}
}/* Bảng đối chiếu bốn gói. Năm cột không vừa màn điện thoại, nên cho cuộn ngang
   và ghim cột tên tính năng lại - cách duy nhất đọc được mà không phải xoay máy. */
.su-doi{min-width:760px}.su-doi thead th:first-child, .su-doi tbody th{position:sticky;left:0;z-index:1;
  background:var(--surface);min-width:210px}.su-doi thead th:first-child{background:var(--bg)}.su-doi td{text-align:center;white-space:nowrap}.su-doi thead th{text-align:center}.su-doi thead th:first-child{text-align:left}.su-doi .su-co{color:var(--accent-text);font-weight:var(--fw-semibold)}.su-doi .su-khong{color:var(--text-3)}/* Cot ghim phai duc, neu khong chu ben duoi loi len khi cuon ngang. Luat go
   to xen ke o tren la (0,2,3) nen luat nay phai bang do va dung SAU no. */
.su-cuon .su-doi tbody > tr > th{background:var(--surface)}/* Danh sách hai cột: nhãn trên, câu trả lời dưới. Dùng ở trang liên hệ và
   trang giới thiệu. */
.su-oi{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-5) var(--space-6);
  background:var(--surface);border:var(--border-w-thin) solid var(--border);border-radius:var(--radius-lg)}.su-oi-ic{flex:none;width:40px;height:40px;border-radius:var(--radius-sm);display:grid;place-items:center;
  background:var(--accent-subtle);color:var(--accent-text)}.su-oi-n{display:block;font-size:var(--text-small);color:var(--text-3)}.su-oi-d{display:block;margin-top:4px;font:var(--fw-semibold) var(--text-body)/var(--lh-label) var(--font-ui);color:var(--text)}.su-oi-m{display:block;margin-top:6px;font-size:var(--text-small);line-height:var(--lh-body);color:var(--text-2)}.su-ds2{display:flex;flex-direction:column;gap:var(--space-3)}
@media(min-width:768px){.su-ds2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}}.su-ds3{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
@media(min-width:768px){.su-ds3{grid-template-columns:repeat(3,1fr)}}/* Khối gọi hành động cuối trang. Gạch ngang trên để tách khỏi nội dung. */
.su-cuoi{padding-top:var(--space-8);border-top:var(--border-w-thin) solid var(--border)}/* ===== Gỡ màu xanh lá khỏi nút gọi, 24/09/2026 =====================
   Dũng: "xanh lá đang lạc khỏi style nhiều quá". Truy ra gốc: bộ chuẩn đặt
   variant "call" bằng --green-600, mà --green-600 CHÍNH LÀ --success trong
   tokens/colors.css dòng 31. Nút gọi đang mượn đúng màu thành công, nên vừa
   lạc bảng màu vừa lẫn nghĩa.

   Luật SiteUp chốt 24/09/2026 - nút gọi KHÔNG BAO GIỜ màu xanh lá:
     đứng một mình trong khối        -> vàng, y như chân trang
     đứng cạnh một nút vàng khác     -> viền than chì, giữ luật một nút vàng
                                        mỗi vùng nhìn của bộ chuẩn
     trên thanh điều hướng           -> ghost, bộ chuẩn đã làm đúng

   Sáu nút trong thân trang đã truyền thẳng thuộc tính variant. Hai chỗ dưới
   đây nằm TRONG thành phần của bộ chuẩn, không sửa tay được (CLAUDE.md gốc:
   siteup-ds/ bị ghi đè khi có bản mới), nên đè tạm bằng CSS. Bỏ luật này đi
   khi bộ chuẩn sửa - đã báo thành việc 31 trong bao-nguoc-cho-ds.md. */ /* 1. Nút gọi trong bảng chọn của thanh điều hướng trên điện thoại. Nó đứng
      ngay cạnh nút vàng "Nhận tư vấn" nên lấy dáng viền. */
.su-hd__sheet-foot .su-btn--call{background:transparent;color:var(--text);border-color:var(--border-strong)}.su-hd__sheet-foot .su-btn--call:hover{background:var(--text);color:var(--gray-0);border-color:var(--text)}/* ===== DẢI TỐI MỞ ĐẦU TRANG, chốt 24/09/2026 =======================
   Dũng: dựng các trang con theo phong cách trang cảm ơn. Khối này là chữ ký
   của khuôn đó: nền tối tràn viền, hai cột, thẻ kính bên phải.

   Nền tối dùng lại lớp .hero-sec của trang chủ - KHÔNG tự chế nền tối mới.
   Phần dưới đây chỉ lo bố cục bên trong.

   Đổi một chuẩn đã chốt: bản 23/09 quy định trang con mở đầu bằng đường dẫn
   phân cấp ở y 105, nhãn 165, h1 191 trên nền sáng. Từ nay bốn trang con mở
   đầu bằng dải tối, đường dẫn nằm TRONG dải. Lý do giữ đường dẫn: cấu trúc
   SEO cần nó, chỉ đổi chỗ đặt chứ không bỏ. */
.su-dai__lo{display:grid;grid-template-columns:1fr;gap:var(--space-10);align-items:center;
  padding:var(--space-16) 0}
@media(min-width:900px){.su-dai__lo{grid-template-columns:1.1fr 0.9fr;gap:var(--space-12);
  padding:var(--space-20) 0}}.su-dai__trai{min-width:0}/* Đường dẫn phân cấp trên nền tối. Bộ chuẩn tô nó bằng ba mức xám của nền
   sáng, đọc không ra trên nền than chì. */
.su-dai__bc{margin-bottom:var(--space-6)}.su-dai__bc .su-bc{color:var(--gray-400)}.su-dai__bc .su-bc a{color:var(--gray-300)}.su-dai__bc .su-bc a:hover{color:var(--accent)}.su-dai__bc .su-bc [aria-current]{color:var(--gray-0)}.su-dai__bc .su-bc .sep{color:var(--gray-600)}.su-dai__k{font:500 var(--text-caption)/var(--lh-label) var(--font-mono);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--accent);display:block}.su-dai__h1{margin-top:var(--space-4);color:var(--gray-0);font-size:var(--text-h1);
  letter-spacing:var(--ls-display);line-height:var(--lh-display)}.su-dai__h1 em{font-style:normal;color:var(--accent)}.su-dai__dan{margin-top:var(--space-4);color:var(--gray-300);font-size:var(--text-lead);
  line-height:var(--lh-body);max-width:46ch}.su-dai__nut{margin-top:var(--space-8);display:flex;gap:10px;flex-wrap:wrap}/* Thẻ kính. Cùng họ với .hero-glass của trang chủ và thẻ lời hứa trang cảm ơn. */
.su-the{background:rgba(255,255,255,.06);border:var(--border-w-thin) solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:var(--space-8);backdrop-filter:blur(10px)}.su-the__nhan{display:block;font:500 var(--text-caption)/var(--lh-label) var(--font-mono);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gray-400)}.su-the__so{display:block;margin:var(--space-3) 0 var(--space-2);color:var(--accent);
  font:var(--fw-semibold) var(--text-price)/var(--lh-none) var(--font-mono);letter-spacing:var(--ls-price)}.su-the__mo{display:block;color:var(--gray-300);font-size:var(--text-small);line-height:var(--lh-body)}.su-the__vach{margin:var(--space-6) 0;height:1px;background:rgba(255,255,255,.14)}.su-the__ghi{display:flex;gap:var(--space-3);align-items:flex-start;color:var(--gray-400);
  font-size:var(--text-small);line-height:var(--lh-body)}.su-the__ghi svg{flex:none;margin-top:2px}/* ===== KHỐI HAI CỘT: GIẢI THÍCH cạnh VÍ DỤ ======================
   Dùng khi một đoạn văn và một bảng số nói về cùng một chuyện. Để dọc thì đoạn
   văn bó trong 760 và nửa phải trang bỏ trống; để ngang thì kín khung và người
   đọc so được lời với số ngay cạnh nhau.
   Tỉ lệ 1,1 / 0,9 giữ đúng nhịp của dải tối mở đầu trang. */
.su-doi2{display:grid;grid-template-columns:1fr;gap:var(--space-8);align-items:start}
@media(min-width:900px){.su-doi2{grid-template-columns:1.1fr 0.9fr;gap:var(--space-12)}}/* Danh sách có dấu tích, hai cột. Dùng để tách một câu liệt kê dài thành các ý
   quét mắt được - vừa dễ đọc hơn, vừa lấp kín cột. */
.su-gom{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
@media(min-width:600px){.su-gom{grid-template-columns:1fr 1fr;gap:var(--space-3) var(--space-6)}}.su-gom__i{display:flex;gap:var(--space-3);align-items:flex-start;
  font-size:var(--text-small);line-height:var(--lh-body);color:var(--text)}.su-gom__ic{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;
  border-radius:var(--radius-pill);background:var(--accent-subtle);color:var(--accent-text)}/* Thẻ số đặt cạnh đoạn giải thích. */
.su-sothe{padding:var(--space-6) var(--space-8);background:var(--surface);
  border:var(--border-w-thin) solid var(--border);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;gap:var(--space-3)}.su-sothe__t{font:var(--fw-semibold) var(--text-body)/var(--lh-label) var(--font-ui);
  letter-spacing:normal;color:var(--text)}.su-sothe__h{display:flex;justify-content:space-between;gap:var(--space-4);
  font-size:15px;color:var(--text-2)}.su-sothe__h b{font:500 15px/1.4 var(--font-mono);color:var(--text)}.su-sothe__tong{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);
  padding-top:var(--space-3);border-top:var(--border-w-thin) solid var(--border)}.su-sothe__tong span{font-weight:600}.su-sothe__tong b{font:var(--fw-semibold) var(--fs-3)/var(--lh-label) var(--font-mono);
  letter-spacing:var(--ls-price);color:var(--accent-text)}.su-sothe__ghi{font-size:13px;color:var(--text-3);line-height:var(--lh-body)}/* ĐỆM HAI BÊN MỌI MÉP MÀU.

   Lần sửa 25/09 đầu tiên làm sai: thấy khe giữa dải trắng và mục kế là 192px
   trong khi khe lớn khác là 96, tôi bỏ luôn đệm trên của mục kế cho về 96. Hậu
   quả Dũng chỉ ra ngay: toàn bộ 96px khoảng hở nằm BÊN TRONG dải trắng, còn
   phía dưới mép màu không còn gì - chữ "CAM KẾT" dính sát mép kem.

   Đo lại cho đúng, không đo khe giữa hai cụm chữ mà đo TỪ MÉP MÀU tới chữ: cả
   ba mép màu của trang giá đều có một bên bằng 0px.

   Luật đúng: mép màu phải có khoảng hở ở CẢ HAI BÊN. Mục ngay trước một dải
   nhận đệm dưới; mục cuối của một dải cũng nhận đệm dưới. Mục sau giữ nhịp
   bình thường. Mép màu vì vậy rộng 96 trên cộng 96 dưới - đổi nền là một ngắt
   lớn hơn ngắt chủ đề thường, và cả ba mép đều bằng nhau.

   Phải !important: Section đặt đệm bằng style nội dòng.
   Phải :not(:has(+ .sec.su-nen-dai)): hai mục trong CÙNG một dải không có mép
   màu ở giữa, thêm đệm vào đó là phá nhịp 48 bên trong dải. */
.sec:not(.su-nen-dai):has(+ .sec.su-nen-dai){padding-bottom:var(--section-y)!important}/* Mỗi màu nền một lớp riêng, để phân biệt "dải kết thúc" với "còn trong cùng
   một dải". Luật cũ chỉ nhìn lớp chung su-nen-dai nên HAI DẢI KHÁC MÀU đứng
   liền nhau bị coi là cùng một dải, mép màu giữa chúng không có đệm nào. Trang
   giá chưa vướng vì hai dải đều trắng, nhưng đó là lỗ hổng chờ sẵn. */
.sec.su-nen-trang:not(:has(+ .sec.su-nen-trang)){padding-bottom:var(--section-y)!important}.sec.su-nen-amber:not(:has(+ .sec.su-nen-amber)){padding-bottom:var(--section-y)!important}/* Vá 10/10/2026: ba luật trên CHỈ nhìn `.sec`, nên một khối không phải section
   mà đứng ngay trước dải màu thì không ai cấp đệm dưới cho nó.

   Lưới thẻ của trang danh mục đúng là khối đó: nó nằm trong `div.wrap` mang
   đệm nội dòng `var(--section-y) var(--margin) 0` - đệm dưới bằng 0. Trước
   09/10 bên dưới nó là nền kem nên không ai thấy; từ khi khối kế tiếp thành
   dải trắng thì hàng thẻ cuối dính thẳng vào mép màu, đo được 8px trong khi
   ba mép màu còn lại của trang đều 96px.

   Đây là lỗi do chính việc thêm dải màu sinh ra, không phải lỗi có sẵn. Chữa
   ở luật chứ không chữa ở trang: viết thẳng đệm vào `TemplatesScreen.jsx` thì
   đổi nhịp màu lần sau lại sai, còn luật này tự đúng theo khối đứng sau.

   `:not(.sec)` để không giẫm lên ba luật trên. `!important` vì đệm đặt bằng
   style nội dòng, cùng lý do đã ghi ở trên. */
.wrap:not(.sec):has(+ .sec.su-nen-dai){padding-bottom:var(--section-y)!important}/* ===== HỘP TỐI THỤT VÀO =======================================
   Học từ mẫu Growly, Dũng duyệt 26/09/2026. Dải tối KHÔNG tràn viền mà là
   một hộp bo góc nổi trên nền kem, thụt vào trong khung.

   Vì sao hợp với ta: dải tối tràn viền đâm thẳng vào chân trang tối là một
   mép nặng - chính chỗ Dũng bác hai lần hôm 25/09. Hộp bo góc ngắt nhịp đủ
   mạnh mà không tạo mép đó.

   KHÁC mẫu gốc một chỗ có chủ ý: Growly bo 30px, ta bo 16. Thang bo của bộ
   chuẩn là 8/16/999, không có 30. Bo lớn đọc ra giọng khởi nghiệp, còn ta bán
   hợp đồng và hóa đơn.

   Màu chữ đặt NỘI DÒNG trong phần đầu mục, không viết luật quét chung như
   .su-hoptoi p. Lý do: bên trong hộp có các thẻ nền trắng, luật quét chung sẽ
   làm trắng luôn chữ trong thẻ trắng. */
.su-hop{position:relative;overflow:hidden;border-radius:var(--radius-lg);
  padding:var(--space-16) var(--space-12)}.su-hop__lo{position:relative;z-index:1}
@media (max-width:767px){.su-hop{padding:var(--space-10) var(--space-6)}}/* HOP TOI. Tu 09/10/2026 khong tu to nen nua: nen, chu va hoa van deu lay
   tu he keyvisual cua bo chuan (lop .kv kv--toi kv-luoi kv-goc, do Muc gan
   vao). .kv--toi:not(#su) la (1,2,0) nen no thang moi luat o day; giu lai mot
   dong nen gray-900 lam du phong cho truong hop tokens.css chua co khoi
   keyvisual, dung thi hop van toi chu khong trong hoac trang.

   Vi sao khong dung dai toi tran vien nhu trang chu: xem chu thich "HOP TOI
   THUT VAO" ngay tren - Dung bac dai tran vien hai lan hom 25/09 vi no dam
   vao chan trang toi thanh mot mep nang. Hop bo goc ngat nhip du manh ma
   khong tao mep do. */
.su-hop--toi{background:var(--gray-900)}/* BANG TREN NEN TOI.
   Luat sang cua .su-bang to chu bang --text / --text-2 va dai tieu de bang
   --bg, ba thu deu la mau cua nen sang, nen de nguyen thi bang gan nhu tang
   hinh trong hop toi. Khong to bang luat quet chung tren .su-hop--toi: bo
   chuan con nhung the nen trang dung trong hop, quet chung se lam trang luon
   chu trong the trang - dung chinh cai bay da ghi o chu thich hop toi.

   Bac chon: luat sang la (0,1,1) va (0,1,2); them mot lop o day thanh (0,2,1)
   va (0,2,2) la du thang, khong can :not(#su). Rieng vien tren cua hang tieu
   de da bi luat (0,3,3) o tren dat ve 0 roi, nen o day khong phai lo. */
.su-hop--toi .su-bang th, .su-hop--toi .su-bang td{border-bottom-color:rgba(255,255,255,.14)}.su-hop--toi .su-bang thead th{color:var(--gray-300);background:rgba(255,255,255,.06)}.su-hop--toi .su-bang tbody th{color:var(--gray-0)}.su-hop--toi .su-bang td{color:var(--gray-300)}/* Quang sang hang dang doc. Luat sang dat --bg, tren nen toi la mot vet kem. */
.su-hop--toi .su-bang tbody tr:hover{background:rgba(255,255,255,.04)}/* The cuon la mot THE NEN TRANG (.su-cuon dat background:--surface). De nguyen
   thi bang nam tren mot slab trang giua hop toi, va moi luat chu sang o tren
   thanh trang-tren-trang. Day dung la cai bay chu thich hop toi da canh bao.
   Cho trong suot, giu lai vien nhung doi sang vien sang. */
.su-hop--toi .su-cuon{background:transparent;border-color:rgba(255,255,255,.14)}/* ===== KHỐI RANH GIỚI, phương án L1 + N8. Dũng chốt 10/10/2026 =====

   Thay bảng hai cột bằng hai cột danh sách. Vì sao bỏ bảng: bảng là dạng để
   TRA một giá trị theo hàng và cột, mà năm "cặp" ở đây không phải cặp thật -
   "Logo, màu chủ đạo, phông chữ" không đối ứng riêng với "Bộ khung kỹ thuật
   bên dưới". Bảng đang hứa một quan hệ không có thật.

   Vẫn giữ hai cột trái phải, vì chính câu dẫn viết "Cột trái là... Cột phải
   là...". Bỏ hai cột là câu dẫn nói sai.

   MỘT KÝ HIỆU, HAI TRẠNG THÁI: cùng dấu chevron của logo cho cả hai cột, bên
   đổi được TÔ ĐẶC màu vàng, bên giữ nguyên CHỈ CÒN NÉT màu xám. Không thêm ký
   hiệu mới nào nên khối không rậm thêm, mà vẫn nói ra sự đối lập. */
.su-rg{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12)}.su-rg__nhan{font:500 var(--text-caption)/var(--lh-label) var(--font-mono);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--amber-300);
  padding-bottom:var(--space-5)}.su-rg--giu .su-rg__nhan{color:var(--gray-400,#8A919B)}.su-rg__ds{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}.su-rg__ds li{display:flex;gap:var(--space-4);align-items:baseline;
  font-size:var(--text-body);line-height:var(--lh-body)}.su-rg__ds li svg{flex:none;width:13px;height:9px;transform:translateY(1px)}.su-rg--doi .su-rg__ds li{color:var(--gray-0);font-weight:var(--fw-medium)}.su-rg--doi .su-rg__ds li svg{color:var(--accent)}.su-rg--giu .su-rg__ds li{color:var(--gray-300)}.su-rg--giu .su-rg__ds li svg{color:var(--gray-400,#8A919B)}
/* Điện thoại: hai cột không vừa, xếp dọc. Nhãn cột vì vậy càng cần thiết -
   xếp dọc rồi thì không còn "trái phải" nào để suy ra. */
@media (max-width:767px){.su-rg{grid-template-columns:1fr;gap:var(--space-8)}}/* DẤU LỚN DẠNG NÉT neo góc trên phải - phương án N8.
   Khai bề rộng theo PHẦN TRĂM bề ngang hộp chứ không gõ px: hộp này rộng
   1200 còn hero rộng 1440, gõ số cứng là lệch tỉ lệ khi khung đổi.
   Độ mờ 0,34 cao hơn bản tô đặc 0,2 của hero: nét chỉ chiếm vài phần nghìn
   diện tích, để cùng độ mờ thì không nhìn thấy gì. */
/* Bậc chọn phải là (1,2,0): hộp tối mang lớp kv của bộ chuẩn, mà bộ chuẩn
   khai .kv:not(#su)>*{position:relative;z-index:1} ở bậc (1,1,0). Viết
   .su-hop__dau trần là (0,1,0), thua - dấu rơi về position:relative và nằm
   trong dòng chảy, làm hộp cao từ 579 vọt lên 1376px. Thêm :not(#su) để lên
   (1,2,0). Đây là lần thứ năm cái bẫy :not(#su) của bộ chuẩn cắn. */
.su-hop--toi .su-hop__dau:not(#su){position:absolute;z-index:0;pointer-events:none;
  display:block;width:46%;right:-10%;top:-18%;color:var(--accent);opacity:.34}.su-hop--toi .su-hop__dau svg{width:100%;height:auto;display:block}/* BA GÓC BO TRÒN, MỘT GÓC CẮT CHÉO 19,09°.
   KHÔNG dùng clip-path: nó cắt theo đúng đa giác nên xóa sạch border-radius,
   cả bốn góc thành vuông. Đo mới ra, nhìn ảnh cỡ nhỏ không thấy. Lớp `kv-vat`
   của bộ chuẩn cũng mắc đúng lỗi này - đã ghi vào bao-nguoc-cho-ds.md.
   Cách đúng: giữ border-radius rồi dùng MẶT NẠ cắt riêng góc dưới phải.
   Lớp thứ ba dùng `to bottom right`: với từ khóa góc, CSS đặt trục chuyển sắc
   vuông góc với đường chéo nối hai góc còn lại, nên điểm dừng 50% rơi đúng
   đường vát cần. Dùng `to top right` thì ra đường chéo kia, cắt nhầm nửa. */
.su-hop--toi{--su-vat-w:130px;--su-vat-h:45px;border-bottom-right-radius:0;
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--su-vat-h)) no-repeat,
    linear-gradient(#000 0 0) 0 100%/calc(100% - var(--su-vat-w)) var(--su-vat-h) no-repeat,
    linear-gradient(to bottom right,#000 49.8%,transparent 50%) 100% 100%/var(--su-vat-w) var(--su-vat-h) no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--su-vat-h)) no-repeat,
    linear-gradient(#000 0 0) 0 100%/calc(100% - var(--su-vat-w)) var(--su-vat-h) no-repeat,
    linear-gradient(to bottom right,#000 49.8%,transparent 50%) 100% 100%/var(--su-vat-w) var(--su-vat-h) no-repeat}
/* Vát co theo màn. 130px trên khối rộng 1200 là 11%, đủ lớn để đọc ra là cố
   ý. Cũng 130px đó trên màn 360 là 36% bề ngang: không còn là góc vát mà là
   cắt mất một mảng khối. Hai bậc dưới đây là `--vat-lg` và `--vat` của bộ
   chuẩn, không tự đặt số. */
@media (max-width:1023px){.su-hop--toi{--su-vat-w:78px;--su-vat-h:27px}}
@media (max-width:767px){.su-hop--toi{--su-vat-w:52px;--su-vat-h:18px}}/* Kiểu VÀNG - khối tin cậy. Dũng chốt 26/09/2026: khối cam kết cần tạo niềm
   tin nên lấy nền vàng thương hiệu, có tín hiệu biểu tượng, và phải KHÁC dải
   mở đầu.
   Khác ở đâu: dải mở đầu là quầng tròn vàng trên nền than chì, chevron vàng
   mờ. Khối này lật ngược - nền vàng chuyển sắc, chevron NÉT TRẮNG lớn. Cùng
   một biểu tượng, hai cách đọc, không đụng nhau.
   Chữ than chì trên nền vàng: readme bộ chuẩn dòng 57 cho phép thẳng, nền
   vàng đặc thì chữ than chì. */
/* Dải kết ở var(--accent) tức #E9A21A - đúng sắc vàng của chữ "Up" trong
   logo. Bản trước kết ở amber-600 #C98812, Dũng thấy đục. Cả dải giữ trong
   khoảng tươi 300-400-500, không xuống 600. */
.su-hop--vang{background:
  radial-gradient(88% 116% at 10% 4%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 56%),
  linear-gradient(122deg, var(--amber-300) 0%, var(--amber-400) 40%, var(--accent) 100%)}/* TÍN HIỆU NHẬN DIỆN - hoa văn chevron, chốt 26/09/2026 sau ba lần thử.

   Đã thử một dấu lớn đơn lẻ đúng theo dải mở đầu: rộng 47% bề ngang khối,
   neo giữa chiều cao, tràn 8% ra mép phải, độ mờ 0,2 - tức sao chép nguyên
   thông số đo được của dải mở đầu. Vẫn hỏng, chỉ ló ra vài nét rời.

   Đo ra nguyên nhân, và nó không sửa bằng cách chỉnh số được:

     dải mở đầu    nội dung đặc che 20% diện tích khối
     khối cam kết  nội dung đặc che 46% diện tích khối

   Dải mở đầu có chỗ thở vì chữ dồn sang trái và thẻ kính chỉ chiếm một góc.
   Khối này bốn thẻ trắng phủ kín vùng giữa và phải - đúng chỗ dấu cần nằm.
   Một hình lớn liền khối thì buộc phải có khoảng trống liền mạch; khối này
   không có, nên dù chỉnh cỡ hay độ mờ thế nào cũng chỉ còn nét rời.

   Hoa văn thì khác: nó là một TRƯỜNG, che mất 80% vẫn đọc ra vì phần còn
   thấy tự lặp lại quy luật. Dùng pattern-tile.svg của chính bộ chuẩn - cùng
   hai đường dẫn của dấu, xếp thành ô lặp 112px.

   ĐỘ DÀY NÉT, sửa 26/09/2026 theo Dũng. Nét phải bằng dải mở đầu, và phép so
   đúng là so TỈ LỆ nét trên khung hình của dấu, không phải so con số khai ra:
     - dải mở đầu: khung 48, nét 1, dựng ở 680px nên nét thật 14,2px = 1/48
     - hoa văn:    khung 48 nhân scale(2), nên nét khai ra nhân đôi khi vẽ
   Ô lặp là 112px nhưng dấu bên trong vẫn nằm trên khung 48 y như dải mở đầu,
   nên khai 1,5 là ra 3px, tức DÀY HƠN dải mở đầu một nửa chứ không mảnh hơn
   - chú thích cũ ở đây tính nhầm sang khung 112. Khai 1 thì ra đúng 2px, tỉ
   lệ 1/48, bằng dải mở đầu và bằng dấu ở chân trang. Muốn mảnh nữa thì 0,75
   (1,5px) vẫn đọc được; 1px cố định bằng vector-effect thì hoa văn mất hẳn.

   Độ mờ 0,15 lấy theo tinh thần dải mở đầu: đủ thấy là tín hiệu thương
   hiệu, không đủ để thành vật thể tranh chỗ với chữ. Mặt nạ chuyển sắc cho
   hoa văn đậm ở góc trên phải và tan dần về phía tiêu đề.

   Ô lặp nhúng thẳng làm data-URI chứ không trỏ tới tệp trong siteup-ds: nền
   dạng background-image không nhận currentColor. */
.su-hop--vang::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linejoin='miter'%3E%3Cg transform='translate(8 8) scale(2)'%3E%3Cpath d='M36.94 1.93L2.06 14L36.94 26.07L39.06 19.93L21.94 14L39.06 8.07Z'/%3E%3Cpath d='M8.94 28.07L26.06 34L8.94 39.93L11.06 46.07L45.94 34L11.06 21.93Z'/%3E%3C/g%3E%3C/svg%3E");background-size:112px 112px;background-repeat:repeat;
  opacity:.15;
  -webkit-mask-image:radial-gradient(120% 150% at 100% 0%,#000 0%,rgba(0,0,0,.5) 38%,transparent 72%);
  mask-image:radial-gradient(120% 150% at 100% 0%,#000 0%,rgba(0,0,0,.5) 38%,transparent 72%)}

/* NỚI KHỐI RA NGOÀI LƯỚI, nới lần hai 26/09/2026 theo Dũng.
   Bề ngang khối co giãn theo màn rồi chặn ở 1320, sàn là 1184 để ở bề rộng
   1200 vẫn còn 8px chừa mỗi bên, không sinh cuộn ngang. Đệm ngang tính ngược
   lại từ bề ngang đó, để nội dung bên trong luôn bằng đúng bề rộng lưới của
   trang - bằng bảng đối chiếu và mọi lưới khác.
   Sửa 03/10/2026: dùng 100% thay cho số 1120 gõ cứng. 100% của một khối là bề
   rộng hộp chứa nó, tức đúng bề rộng nội dung đang có, nên khối tự theo khi
   khung đổi. Trước đó gõ cứng 1120 nên đổi khung là khối lệch tâm.
   Chỉ nới từ 1200 trở lên. Dưới đó lề khung chỉ còn 32 hoặc 16, không đủ. */
@media (min-width:1200px){.su-hop--vang{
  --w:clamp(1184px, calc(100vw - 48px), 1320px);
  margin-inline:calc((100% - var(--w)) / 2);
  padding-inline:calc((var(--w) - 100%) / 2)}}/* Bốn thẻ xếp 2x2 và xếp dọc: dùng THAM SỐ của thành phần, không đè CSS.
   CommitmentGrid nhận columns, Commitment nhận layout - xem
   siteup-ds/components/cards/Commitment.jsx. Đè CSS ở đây sẽ thua vì
   CommitmentGrid đặt --n bằng style nội dòng, muốn thắng phải !important. */ /* Thẻ xếp DỌC, ô biểu tượng tròn ở trên - Dũng gửi mẫu 26/09/2026, chỉnh lại
   kích thước 26/09 lần hai vì ô 72 đọc ra thô.
   Khác dựng sẵn của bộ chuẩn: bộ chuẩn để thẻ nằm ngang, ô vuông bo 8 rộng
   44. Đây là đè lại trong phạm vi khối, KHÔNG sửa siteup-ds.

   PHÂN TẦNG bằng khoảng cách chứ không bằng cỡ chữ: ô biểu tượng cách tiêu
   đề 24, tiêu đề cách mô tả 6. Tỉ lệ 4 trên 1 đủ để mắt gom tiêu đề với mô
   tả thành một cụm, tách khỏi ô biểu tượng. Bản trước để khoảng cách đều
   nhau nên ba phần trôi rời.

   Rê chuột thì nền ô lật từ than chì sang vàng tươi, biểu tượng lật ngược
   thành than chì. Lật màu chứ không chỉ nhạt đi, để còn thấy rõ trên màn
   cảm ứng vốn không có trạng thái rê. */
.su-hop--vang .su-cm{align-items:flex-start;
  gap:var(--space-6);padding:var(--space-6);
  border-color:transparent;box-shadow:var(--shadow-2)}.su-hop--vang .su-cm__ic{width:56px;height:56px;border-radius:var(--radius-pill);
  background:var(--gray-900);color:var(--gray-0);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}.su-hop--vang .su-cm__ic svg{width:24px;height:24px}.su-hop--vang .su-cm__d{margin-top:6px}.su-hop--vang .su-cm:hover .su-cm__ic{background:var(--accent);color:var(--gray-900)}
@media (max-width:767px){.su-hop--vang .su-cm__ic{width:48px;height:48px}.su-hop--vang .su-cm__ic svg{width:22px;height:22px}}/* ===== LIÊN KẾT PHẲNG =========================================
   Dũng chỉ ra 25/09/2026 ở khối Hồ sơ pháp nhân: hai nút dáng trong suốt đứng
   một mình trông như thụt vào trong. Đo ra đúng vậy - tiêu đề và đoạn văn có
   chữ ở x=160, còn chữ trong nút ở x=181, lệch 21px vì nút có đệm ngang 20px.

   Liên kết phẳng không đệm ngang nên chữ thẳng hàng tuyệt đối với đoạn văn
   phía trên. Hiệu ứng rê chuột chỉ đổi màu chữ và nhích mũi tên, KHÔNG tô nền.

   Vùng bấm vẫn đủ 44px nhờ min-height, tức nó cao thêm chứ không rộng ra -
   giữ được mép trái thẳng hàng.

   Cỡ chữ 16 nửa đậm khớp preset lienketthem mà bản dựng Elementor đã khai.

   DÙNG KHI: liên kết đứng một mình hoặc đứng cùng liên kết phẳng khác.
   ĐỪNG DÙNG KHI: đứng cạnh nút có nền - lúc đó cả hàng đọc như một hàng nút,
   và nút dáng trong suốt mới là thứ đúng. */
.su-them{display:inline-flex;align-items:center;gap:var(--space-2);
  padding:0;background:none;border:0;min-height:var(--touch-min);
  font:var(--fw-medium) var(--text-body)/var(--lh-label) var(--font-ui);
  color:var(--accent-text);text-decoration:none;cursor:pointer;
  transition:color var(--dur) var(--ease)}.su-them:hover{color:var(--text)}.su-them:focus-visible{outline:var(--border-w) solid var(--accent);outline-offset:3px;
  border-radius:var(--radius-sm)}.su-them__mui{display:flex;transition:transform var(--dur) var(--ease)}.su-them:hover .su-them__mui{transform:translateX(3px)}/* Hàng nhiều liên kết phẳng: cách nhau rộng hơn hàng nút, vì không có viền
   phân định thì để sát nhau sẽ đọc thành một cụm. */
.su-them-hang{display:flex;gap:var(--space-8);flex-wrap:wrap;align-items:center}/* ===== DÒNG THỜI GIAN NGANG =====================================
   Màn rộng: chấm trên đầu mỗi cột, đường nối chạy ngang. Màn hẹp: ray dọc bên
   trái. Một bộ mã, hai dáng. Dùng cho nội dung CÓ THỨ TỰ, đừng dùng cho danh
   sách ngang hàng - danh sách thì .su-ds3 đúng hơn. */
.su-moc{display:grid;grid-template-columns:1fr;gap:var(--space-8)}
@media(min-width:768px){.su-moc{grid-template-columns:repeat(3,1fr)}}.su-moc__i{position:relative;padding-left:var(--space-10)}
@media(min-width:768px){.su-moc__i{padding-left:0;padding-top:var(--space-8)}}.su-moc__i::after{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;
  border-radius:var(--radius-pill);background:var(--nen);border:3px solid var(--accent);z-index:1}
@media(min-width:768px){.su-moc__i::after{top:0}}.su-moc__i::before{content:"";position:absolute;left:8px;top:21px;bottom:calc(var(--space-8) * -1);
  width:2px;background:var(--border-strong)}
@media(min-width:768px){.su-moc__i::before{left:18px;top:8px;bottom:auto;
  right:calc(var(--space-8) * -1);width:auto;height:2px}}.su-moc__i:last-child::before{display:none}.su-moc__n{display:block;font:var(--fw-semibold) var(--text-small)/var(--lh-label) var(--font-mono);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--accent-text)}.su-moc__t{margin-top:var(--space-2);font:var(--fw-semibold) var(--text-h4)/var(--lh-heading) var(--font-ui);
  letter-spacing:var(--ls-heading);color:var(--text)}.su-moc__m{margin-top:var(--space-2);color:var(--text-2);font-size:var(--text-small);line-height:var(--lh-body)}/* ===== BA LỐI ĐI TIẾP ===========================================
   Đặt cuối trang. Không để khách hết nội dung rồi chỉ còn nước đóng tab. */
.su-loi{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
@media(min-width:768px){.su-loi{grid-template-columns:repeat(3,1fr)}}/* align-items: flex-start chu khong phai center. Ba the cao bang nhau nhung
   mo ta dai ngan khac nhau; can giua thi the nao it chu hon se tut tieu de
   xuong - do ra the thu ba lech 10px so voi hai the kia. */
.su-lk{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-5) var(--space-6);background:var(--surface);color:var(--text);
  border:var(--border-w-thin) solid var(--border);border-radius:var(--radius-lg);text-decoration:none;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}.su-lk:hover{border-color:var(--text);transform:translateY(-2px)}.su-lk:focus-visible{outline:var(--border-w) solid var(--accent);outline-offset:2px}.su-lk__chu{display:block;min-width:0}.su-lk__t{display:block;font:var(--fw-semibold) var(--text-body)/var(--lh-label) var(--font-ui)}.su-lk__m{display:block;margin-top:4px;font-size:var(--text-small);color:var(--text-2);font-weight:400}.su-lk__mui{flex:none;display:flex;align-self:center;color:var(--text-3);
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease)}.su-lk:hover .su-lk__mui{color:var(--accent-text);transform:translateX(3px)}/* ===== Gỡ màu chữ liên kết khỏi nút, 24/09/2026 ====================
   Tìm ra bằng phép đo trạng thái rê chuột khi đối chiếu trang cảm ơn: rê vào
   nút "Gọi" thì bản mẫu ra chữ hổ phách (143,94,0) còn bản dựng WordPress ra
   nâu đậm (71,46,0). Bản dựng ĐÚNG, bản mẫu sai.

    Gốc: thanh-phan.css của bộ chuẩn khai a:hover{color:var(--link-hover)}
   ở độ đặc hiệu (0,1,1). Nút dựng bằng thẻ <a> thì luật đó ĐÈ màu của chính
    nút, vì mọi luật .su-btn--X và .su-btn--X:hover chỉ ở (0,1,0). Nghĩa là
   mọi nút dạng liên kết trên toàn bộ bản mẫu đều đổi sang chữ hổ phách khi rê
   chuột, kể cả nút nền vàng và nút nền xanh Zalo - tương phản kém hẳn.

   Bản WordPress không dính vì Kit của Elementor tự khai một luật nút riêng ở
   độ đặc hiệu cao hơn.

   Sáu dòng dưới trả màu về đúng của từng dáng nút, ở (0,2,1). Bỏ đi khi bộ
   chuẩn sửa - đã báo thành việc 33 trong bao-nguoc-cho-ds.md. */
a.su-btn--accent:hover{color:var(--text-on-accent)}a.su-btn--primary:hover{color:var(--primary-text)}a.su-btn--zalo:hover{color:#fff}a.su-btn--text:hover{color:var(--text)}a.su-btn--secondary:not(.su-btn--on-dark):hover{color:var(--primary-text)}a.su-btn--ghost:not(.su-btn--on-dark):hover{color:var(--accent-text)}/* 2. Thanh liên hệ dán đáy màn điện thoại. Bộ chuẩn khai
      .su-cb__call{color:var(--success)!important} - phải đè bằng !important VÀ
      độ đặc hiệu cao hơn. Chỉ !important thôi không đủ: thành phần đó chèn thẻ
      style của nó lúc React kết xuất, tức SAU khi tệp này chạy, nên cùng độ đặc
      hiệu thì nó thắng. Đo trên trang mới lộ ra; đọc mã nguồn không thấy. */
.su-cb a.su-cb__call{color:var(--text)!important}/* ===== su-css-gt, rut tu AboutScreen.jsx ===== */ .su-gt__loi{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-5) var(--space-6);background:var(--surface);border:var(--border-w-thin) solid var(--border);border-radius:var(--radius-lg)}.su-gt__loi-ic{flex:none;width:40px;height:40px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--accent-subtle);color:var(--accent-text)}.su-gt__lo{display:block;font-size:var(--text-small);color:var(--text-3)}.su-gt__da{display:block;margin-top:4px;font:var(--fw-semibold) var(--text-body)/var(--lh-label) var(--font-ui);color:var(--text)}.su-gt__ds{display:flex;flex-direction:column;gap:var(--space-3)}
@media(min-width:768px){.su-gt__ds{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}}/* De luoi 4 cot cua bo chuan chay nhu no duoc thiet ke. Truoc 23/09 phai ep
   xuong 2 cot vi khoi nay bi bo trong 760px; nay tra ve be rong day 1120 nen
   khong can ep nua. */
/* Khung 1200 nhu trang chu de le trai thang hang voi header va chan trang.
   Chu thi bo lai trong bien --container-narrow cho de doc - dung cach trang chu
   dang lam. Xem viec 30 trong bao-nguoc-cho-ds.md ve ba be rong khung. */
/* LUAT CHIA CUA TRANG NAY, chot 23/09/2026 sau khi Dung chi ra bo cuc lech:
     CHU  (tieu de, doan van)  -> bo trong 760px cho de doc
     HINH (o anh, luoi the)    -> de day 1120px nhu luoi trang chu
   Le trai cua ca hai bang nhau, chi khac be rong. Truoc do moi thu duoi phan
   dau deu bi bo vao 760 nen o anh 21:9 hep hon o anh phan dau, nhin lech. */
.su-gt__chu{max-width:var(--container-narrow)}.su-gt__hero{display:grid;grid-template-columns:1fr;gap:var(--space-8);align-items:start}
@media(min-width:900px){.su-gt__hero{grid-template-columns:1fr 1fr;gap:var(--space-12)}}/* align-items: start chu khong phai center. Can giua doc lam chu tut xuong theo
   chieu cao o anh, nen h1 bat dau o 300 trong khi cac trang khac o khoang 185. */ /* Dai anh minh hoa: dung ANH MAU CUA CHINH BO CHUAN, khong dung anh kho mien
   phi tren mang. Da thu nam nguon (Unsplash, Pexels, Openverse CC0, Openverse
   CC-BY, Wikimedia) ngay 23/09/2026: nguon nao tra ket qua duoc thi anh la anh
   chup nghiep du, anh sang tap - dan len lam hong dung cai dinh vi "chuan ky
   thuat". Anh mau thi dung la san pham that cua SiteUp, chat luong cao san, va
   khong vuong ban quyen. */
.su-gt__dai{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
@media(min-width:600px){.su-gt__dai{grid-template-columns:repeat(3,1fr)}}.su-gt__anh{display:block;border-radius:var(--radius-lg);overflow:hidden;border:var(--border-w-thin) solid var(--border);background:var(--surface);line-height:0}.su-gt__anh img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;object-position:top}.su-gt__nguoi{display:flex;gap:var(--space-5);align-items:center;padding:var(--space-6);background:var(--surface-sunken);border-radius:var(--radius-lg)}.su-gt__vong{flex:none;width:56px;height:56px;border-radius:var(--radius-pill);display:grid;place-items:center;background:var(--accent-subtle);color:var(--accent-text)}/* ===== su-css-lh, rut tu ContactScreen.jsx ===== */ .su-lh__val{display:block;font:var(--fw-semibold) var(--fs-4)/var(--lh-label) var(--font-mono);color:var(--text);margin:4px 0 6px}
@media (max-width:479px){.su-lh__val{font-size:var(--fs-2)}}/* Trạng thái rỗng của lưới mẫu, hiện khi tìm không khớp. Xem wp/loc-mau.js. */
.grid-tpl .gt-trong{grid-column:1/-1;margin:0;padding:var(--space-8) 0;
  text-align:center;color:var(--text-2)}