/* 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. */
/* ===================================================================
 * CSS riêng của trang siteup.vn, chuyển từ khối <style> trong
 * ban-thiet-ke-trang/siteup-vn/index.html ngày 21/09/2026.
 *
 * Đây KHÔNG phải gói bộ chuẩn. Bộ chuẩn nằm ở tokens.css cùng thư mục.
 * Lớp này là phần Elementor không diễn đạt được, theo mục 5 của
 * _SU-wiki/rules/breakpoint.md: vát 19°, chevron, sân khấu hero, các lưới
 * cần khai cột cứng.
 *
 * Lưu ý khi dùng với Elementor:
 *   .wrap KHÔNG dùng trên WordPress. Container của Elementor đã có sẵn
 *   max-width 1200 và lề 40/32/32/16 lấy từ Kit. Lồng .wrap vào trong là
 *   đệm hai lần.
 *
 * Các lưới ở đây dùng min-width 768/1024/1200, ngược chiều với Elementor
 * (max-width 767/1023/1199). Hai hệ không đụng nhau vì cùng một ranh giới.
 * =================================================================== */ /* Chỗ chừa cho thanh liên hệ dính đáy ở điện thoại, 60px. Phải viết `html body`
   chứ không phải `body`: WordPress in khối <style id="global-styles-inline-css">
   sinh từ theme.json của hello-elementor, trong đó có `body{padding:0}`. Khối đó
   nằm SAU </head>, tức sau mọi tệp CSS của ta, nên cùng độ đặc hiệu (0,0,1) thì
   nó thắng và 60px biến mất. Thêm `html` lên (0,0,2) là đủ, không cần !important.
   Đo ngày 05/10/2026 lúc dựng thanh liên hệ: bản mẫu ra 60px, bản dựng ra 0px.
   Luật này sẽ gặp lại ở mọi site khách dùng hello-elementor. */
html body{padding-bottom:var(--contact-bar-h)}@media(min-width:1024px){html body{padding-bottom:0}}.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--margin)}.k{font:500 var(--text-small)/var(--lh-label) var(--font-mono);color:var(--accent-text);text-transform:uppercase;letter-spacing:var(--ls-caps)}.hero{display:grid;gap:40px;padding:var(--space-12) var(--margin);grid-template-columns:1fr;align-items:center}@media(min-width:768px){.hero{grid-template-columns:1fr 1fr}}@media(min-width:1024px){.hero{grid-template-columns:1fr 1fr;padding:var(--space-20) var(--margin)}}.grid-ind{display:grid;gap:12px;grid-template-columns:1fr}@media(min-width:768px){.grid-ind{grid-template-columns:1fr 1fr}}@media(min-width:1024px){.grid-ind{grid-template-columns:repeat(4,1fr)}}.grid-tpl{display:grid;gap:var(--gutter);grid-template-columns:1fr}@media(min-width:768px){.grid-tpl{grid-template-columns:1fr 1fr}}@media(min-width:1200px){.grid-tpl{grid-template-columns:repeat(3,1fr)}}.grid-price{display:grid;gap:var(--gutter);grid-template-columns:1fr;align-items:start}@media(min-width:768px){.grid-price{grid-template-columns:1fr 1fr}}@media(min-width:1024px){.grid-price{grid-template-columns:repeat(3,1fr)}}@media(min-width:1024px) and (max-width:1199px){.grid-price{gap:var(--space-6)}}.grid-price .su-price--band{grid-column:1/-1}@media(max-width:767px){.grid-price .su-price--featured{order:-1}}.price-more{display:inline-flex;align-items:center;gap:8px;margin-top:var(--space-6);font:var(--fw-medium) var(--text-body)/var(--lh-label) var(--font-ui);color:var(--text);text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:4px}.price-more:hover{color:var(--accent-text)}.grid-3{display:grid;gap:var(--gutter);grid-template-columns:1fr}@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}.grid-2{display:grid;gap:var(--gutter);grid-template-columns:1fr}@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}.desk-only{display:none!important}@media(min-width:1024px){.desk-only{display:inline-flex!important}}.grid-tpl{padding:4px}.steps.su-steps--h{grid-template-columns:1fr}@media(min-width:768px){.steps.su-steps--h{grid-template-columns:repeat(4,1fr)}}/* Màu bổ trợ - điểm nhấn: nền kem giữ nguyên; màu nằm ở ô icon ngành, bìa mẫu, và một khối "Sau khi bạn nhắn" trước CTA cuối (không dùng khối tròn) */
/* Hero "H" (E+G): sân khấu than chì - quầng amber trôi chậm, chevron outline vàng 20% (biểu tượng logo), 3 web mẫu thật xếp thác nghiêng ±4° nổi bằng bóng sâu, thẻ kính tối ghi giá. Chỉ hero tối; phần còn lại của trang giữ kem. */
.hero-sec{background:radial-gradient(70% 90% at 70% 40%,#2B3036 0%,var(--gray-900) 70%);color:var(--gray-0)}.hero-sec::before{content:"";position:absolute;inset:-10%;background:radial-gradient(38% 48% at 70% 50%,color-mix(in srgb,var(--accent) 50%,transparent) 0%,transparent 60%),radial-gradient(30% 40% at 95% 90%,rgba(242,184,162,.18) 0%,transparent 60%);filter:blur(30px);animation:heroDrift 12s ease-in-out infinite;pointer-events:none}.hero-chev{position:absolute;right:-40%;bottom:-10%;width:120vw;height:auto;color:var(--accent);opacity:.12;pointer-events:none;z-index:0}.hero-chev path{vector-effect:non-scaling-stroke}.hero-sec .hero{position:relative;z-index:1}
@media(min-width:768px){.hero-chev{width:70vw;right:-30%;bottom:-25%}}
@media(min-width:1024px){.hero-chev{width:min(58vw,680px);right:-8%;top:50%;bottom:auto;transform:translateY(-52%);opacity:.2}}.hero-lead{color:var(--gray-300)}.hero-lead b{color:var(--gray-0)}.hero-stage{position:relative;height:300px;display:none}@media(min-width:768px){.hero-stage{display:block}}@media(min-width:1024px){.hero-stage{height:440px}}.hero-shot{position:absolute;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -24px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.1),0 0 60px -10px color-mix(in srgb,var(--accent) 30%,transparent);aspect-ratio:16/11;cursor:pointer;transition:box-shadow var(--dur) var(--ease)}.hero-shot:hover{box-shadow:0 48px 90px -24px rgba(0,0,0,.8),0 0 0 1.5px var(--accent),0 0 70px -10px color-mix(in srgb,var(--accent) 45%,transparent)}.hero-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}.hero-shot--1{left:4%;top:0;width:64%;--r:-4deg;transform:rotate(-4deg);animation:heroFloat 10s ease-in-out infinite}.hero-shot--2{right:-2%;top:24%;width:56%;--r:5deg;transform:rotate(5deg);animation:heroFloat 12s ease-in-out infinite;animation-delay:-5s}.hero-shot--3{left:16%;bottom:-4%;width:50%;--r:-2deg;transform:rotate(-2deg);animation:heroFloat 11s ease-in-out infinite;animation-delay:-2s}.hero-shot__tag{position:absolute;left:12px;bottom:12px;background:#fff;color:var(--text);border-radius:999px;padding:7px 11px;font:600 12px/var(--lh-label) var(--font-ui);display:flex;gap:6px;align-items:center}.hero-shot__tag b{width:8px;height:8px;border-radius:50%;background:var(--success)}.hero-glass{position:absolute;right:2%;bottom:4%;z-index:3;background:rgba(30,34,38,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 16px;box-shadow:0 20px 40px -16px rgba(0,0,0,.6);font:500 13px/1.4 var(--font-ui);color:var(--gray-300)}.hero-glass b{display:block;font:600 22px/1.1 var(--font-mono);letter-spacing:-.02em;color:var(--accent)}
@keyframes heroFloat{0%, 100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
@keyframes heroDrift{0%, 100%{transform:translate(0,0)}50%{transform:translate(2%,-3%)}}
@media(prefers-reduced-motion:reduce){.hero-sec::before, .hero-shot{animation:none}}.sec-nganh, .sec-gia, .sec-faq{background:var(--surface)}.sec-after{background:var(--tint-peri)}.faq-wrap{display:grid;gap:var(--space-8);grid-template-columns:1fr;align-items:start}@media(min-width:1024px){.faq-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-16)}.faq-side{position:sticky;top:calc(var(--header-h) + 24px)}}.faq-side{max-width:480px}.faq-list{min-width:0}.modal{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--overlay);display:flex;align-items:flex-end;justify-content:center;padding:0}@media(min-width:768px){.modal{align-items:center;padding:24px}}.modal > div{width:100%;max-width:640px;max-height:100%;overflow:auto;background:var(--surface);animation:up var(--dur-slow) var(--ease)}@keyframes up{from{transform:translateY(var(--enter-y));opacity:0}to{transform:none;opacity:1}}

/* ĐÈ TẠM lên thành phần Footer của bộ chuẩn. Không sửa siteup-ds/, xem README mục lỗi cần báo ngược.
   Menu chân trang đang dùng --text-body 16px, hạ một bậc xuống --text-small 13px.
   13 chứ không phải 14 vì thang chữ là 11/13/16/20/25..., 14px không có trong thang
   (chỉ tồn tại ở --text-button-sm, vốn dành riêng cho nút nhỏ).
   Chỉ hạ từ 768px trở lên; điện thoại giữ 16px theo luật chữ thân tối thiểu 16px trên mobile. */
@media(min-width:768px){footer.su-ft ul{font-size:var(--text-small)}}/* ĐÈ TẠM lên TemplateCard của bộ chuẩn. Lý do và giá trị gốc: xem README mục cần báo ngược cho bên DS.
   Thẻ mẫu đang lệch chuẩn ở 5 chỗ, sửa về đúng luật trong siteup-ds/readme.md:
     padding thân thẻ 12px  -> 16px   (luật: "Thẻ... padding 14-24px", 12 nằm dưới sàn)
     mã mẫu          12px  -> 13px   (luật: "Mã mẫu mono 13")
     tên ngành       14px  -> 13px   (luật: "Đoạn nhỏ 13"; 14 không có trong thang)
     giá             15px  -> 16px   (15 là cỡ "Chữ nút", không phải cỡ giá)
     đơn vị giá      12px  -> 11px   (luật: "Chú thích 11")
   Thang chữ hợp lệ: 11 / 13 / 16 / 20 / 25 / 31 / 39 / 49 / 61. */
.su-tpl .su-tpl__body{padding:var(--space-4);gap:var(--space-3)}.su-tpl .su-tpl__code{font-size:var(--text-code)}.su-tpl .su-tpl__ind{font-size:var(--text-small)}.su-tpl .su-tpl__price{font-size:var(--text-body)}.su-tpl .su-tpl__price small{font-size:var(--text-caption)}/* BẢN 2. Hiệu ứng xuất hiện theo đúng luật bộ chuẩn: "Xuất hiện từ dưới lên 8px, theo hướng logo Up".
   Dùng token --enter-y, --dur-slow, --ease. Thuần CSS cộng IntersectionObserver, KHÔNG thêm thư viện.
   Cách này chuyển thẳng sang Elementor được, chỉ cần bỏ vào một snippet Fluent Snippets. */
/* ===================================================================
 * HIỆN KHI CUỘN TỚI
 *
 * Ba dòng `.rv` ngay dưới là bản chép từ bản mẫu, giữ nguyên để đối chiếu.
 * Trên WordPress KHÔNG phần tử nào mang lớp `rv`: `rut-trang.py` cố ý gỡ nó
 * lúc rút trang, vì lúc đó chưa có đoạn mã nào gắn lại, để nguyên thì khối
 * chưa vào màn sẽ kẹt ở trạng thái mờ 0. Nó chỉ để lại thuộc tính `data-rv`.
 *
 * Nên bản dựng móc vào `[data-rv="1"]`, và khác bản mẫu đúng MỘT chỗ, có lý do:
 *
 *   Bản mẫu để JavaScript tự gắn lớp `rv`, tức tự làm mờ phần tử đi. Bên đó
 *   không sao vì React dựng cả trang bằng JavaScript, chưa chạy thì chưa có gì
 *   để nhìn. Trên WordPress thì HTML hiện ra ngay, nên gắn lớp muộn là người
 *   dùng thấy nội dung NHẤP NHÁY: hiện rồi mờ đi rồi hiện lại.
 *
 *   Cách ở đây: một dòng JavaScript trong <head> gắn lớp `js-rv` cho thẻ <html>
 *   trước khi trang vẽ, và luật làm mờ nấp sau lớp đó. Chạy được thì mờ ngay từ
 *   lần vẽ đầu, không nháy. JavaScript hỏng hoặc bị tắt thì lớp `js-rv` không
 *   bao giờ có, nên không gì bị ẩn - an toàn hơn bản mẫu ở đúng chỗ này.
 *
 * Giá trị lấy đúng token của bộ chuẩn, không đặt số mới: --enter-y 8px,
 * --dur-slow 320ms, --ease cubic-bezier(.2,0,0,1). Ngưỡng kích hoạt chép đúng
 * bản mẫu: rootMargin '0px 0px -12% 0px'.
 * =================================================================== */
html.js-rv [data-rv="1"]{opacity:0;transform:translateY(var(--enter-y));transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}html.js-rv [data-rv="1"].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js-rv [data-rv="1"]{opacity:1;transform:none;transition:none}}.rv{opacity:0;transform:translateY(var(--enter-y));transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}/* ===================================================================
 * BÙ KIỂU NỘI TUYẾN CỦA JSX
 *
 * Bản mẫu React đặt một số kiểu thẳng vào thuộc tính style của thẻ, nên
 * chúng KHÔNG có trong khối <style> mà bản này chuyển sang. Thiếu chúng
 * thì quầng sáng và chevron của hero tràn ra ngoài, còn cột chữ giãn hết
 * chiều rộng.
 *
 * Thêm tay ngày 21/09/2026. Mỗi luật ghi rõ lấy từ đâu trong HomeScreen.jsx.
 * =================================================================== */ /* Ban mau dung <svg> that voi vector-effect:non-scaling-stroke, nen net luon 1px
   du phong to. Anh nen khong lam duoc the, net phong to theo. viewBox 48 phong len
   ~680px la 14,2 lan, nen stroke-width phai la 1/14,2 = 0,07 de ra 1px. */ /* <section className="hero-sec" style={{position:'relative',overflow:'hidden'}}> */
.hero-sec{ position: relative; overflow: hidden; }/* cột trái của hero: style={{display:'flex',flexDirection:'column',gap:24,maxWidth:640}} */
.hero > .hero-col{ display: flex; flex-direction: column; gap: 24px; max-width: 640px; }/* <p className="hero-lead" style={{maxWidth:540}}> */
.hero-lead{ max-width: 540px; }/* Elementor bọc widget thành div riêng nên nút không tự nằm hàng ngang.
   Hàng nút trong hero xếp ngang, xuống dòng khi hẹp. */
.hero-btns{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }/* Widget nút của Elementor mặc định chiếm trọn chiều rộng trong container cột.
   Trong hàng nút thì để nó co theo nội dung. */
.hero-btns > *{ width: auto; flex: 0 0 auto; }/* ===================================================================
 * BẢN DỰNG THEO rules/elementor.md (21/09/2026)
 *
 * Luật cấm nhúng style hoặc class vào field của widget, và cấm dùng
 * HTML/CSS nội tuyến. Nên mọi thứ trước đây nằm trong widget HTML
 * chuyển hết xuống đây, còn trên trang chỉ còn widget gốc Elementor
 * để khách bấm vào sửa được.
 * =================================================================== */ /* --- chevron: trước là một widget HTML, nay là trang trí thuần ---
   Nét giữ đúng 1px ở mọi bề rộng nhờ `vector-effect='non-scaling-stroke'` viết
   NGAY TRONG ảnh SVG. Trước đây tưởng ảnh nền không nhận thuộc tính này nên
   phải chia độ dày nét cho hệ số phóng (0,07), cách đó chỉ đúng ở một bề rộng:
   ở 360px chevron rộng 432px nên nét ra 0,63px thay vì 1px. Đo lại 22/09/2026:
   ảnh nền CÓ nhận, bề dày đọc được [1, 5] đúng bằng SVG thật. */
.hero-sec::after{
  content: "";
  position: absolute;
  right: -40%; bottom: -10%;
  width: 120vw; aspect-ratio: 1; background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1' stroke-linejoin='miter'><path vector-effect='non-scaling-stroke' d='M36.94 1.93L2.06 14L36.94 26.07L39.06 19.93L21.94 14L39.06 8.07Z'/><path vector-effect='non-scaling-stroke' d='M8.94 28.07L26.06 34L8.94 39.93L11.06 46.07L45.94 34L11.06 21.93Z'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1' stroke-linejoin='miter'><path vector-effect='non-scaling-stroke' d='M36.94 1.93L2.06 14L36.94 26.07L39.06 19.93L21.94 14L39.06 8.07Z'/><path vector-effect='non-scaling-stroke' d='M8.94 28.07L26.06 34L8.94 39.93L11.06 46.07L45.94 34L11.06 21.93Z'/></svg>") center / contain no-repeat;
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 768px) {.hero-sec::after{ width: 70vw; right: -30%; bottom: -25%; } }
@media (min-width: 1024px) {.hero-sec::after{ width: min(58vw, 680px); right: -8%; top: 50%; bottom: auto;
                      transform: translateY(-52%); opacity: .2; }
}/* --- tiêu đề: đoạn nhấn dùng <em>, thẻ ngữ nghĩa luật cho phép --- */
.hero h1 em, .hero > :is(h1,h2,h3,h4,h5,h6,p,div,span,a) em{ font-style: normal; color: var(--accent); }/* --- đoạn dẫn: bề rộng và phông mono chuyển từ style nội tuyến xuống đây --- */
/* Ban mau dat max-width thang tren the <p>. Elementor boc them mot lop
   vo widget, nen phai dat o CA HAI, khong thi o 1199px doan dan rong
   548px thay vi 540px. Chi lo ra khi do o nhieu be rong. */
.hero-lead-w, .hero-lead-w p{ max-width: 540px; }.hero-lead-w strong{ font-family: var(--font-mono); font-weight: 700; color: var(--gray-0); }.hero-lead-w p{ margin: 0; }/* --- dải tin cậy: widget icon-list, khoác dáng .su-tr--inverse ---
   Biểu tượng vẽ bằng ::before theo lớp repeater của từng mục, nên không
   phải bật tải lên SVG (bật lên là mở thêm một bề mặt tấn công). */
/* Elementor KHONG in lop repeater len tung <li> cua icon-list (do 21/09/2026),
   nen phai bam theo thu tu. Doi thu tu muc trong widget la doi bieu tuong.
   Thu tu: 1 hop dong, 2 bao hanh, 3 gia. */
.hero-trust li:nth-child(1)::before{ background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' /> <path d='M14 2v4a2 2 0 0 0 2 2h4' /> <path d='m9 15 2 2 4-4' /></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' /> <path d='M14 2v4a2 2 0 0 0 2 2h4' /> <path d='m9 15 2 2 4-4' /></svg>") center / contain no-repeat; }.hero-trust li:nth-child(2)::before{ background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z' /> <path d='m9 12 2 2 4-4' /></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z' /> <path d='m9 12 2 2 4-4' /></svg>") center / contain no-repeat; }.hero-trust li:nth-child(3)::before{ background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z' /> <path d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8' /> <path d='M12 17.5v-11' /></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z' /> <path d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8' /> <path d='M12 17.5v-11' /></svg>") center / contain no-repeat; }/* --- sân khấu: container + widget ảnh, khách thay ảnh được --- */
.hop.hero-stage{ display: none; position: relative; height: 300px; }
@media (min-width: 768px) {.hop.hero-stage{ display: block; } }
@media (min-width: 1024px) {.hop.hero-stage{ height: 440px; } }.hero-stage .hero-shot img{ width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }.hero-stage .hero-glass b, .hero-stage .hero-glass strong{
  display: block; font: 600 22px/1.1 var(--font-mono); letter-spacing: -.02em; color: var(--accent);
}.hero-stage .hero-glass p{ margin: 0; }/* -------------------------------------------------------------------
 * Trung hoa mac dinh cua container Elementor trong khoi hero.
 *
 * Kit dat container_padding 40px cho MOI container, va container
 * Elementor luon la flex co gap. Ban mau thi .hero-sec la block khong
 * dem, con .hero moi mang le. Do lech nay lam cot chu hep di 56px va
 * tieu de xuong 4 dong thay vi 3.
 *
 * Do ngay 22/09/2026 bang so sanh kieu tinh toan giua hai trang.
 * ------------------------------------------------------------------- */
.hop.hero-sec{
  display: block;
  padding: 0;
  gap: normal;
}.hop.wrap.hero{
  padding: var(--space-12) var(--margin);
  --gap: 40px;
}
@media (min-width: 1024px) {.hop.wrap.hero{ padding: var(--space-20) var(--margin); }
}/* Container LỒNG TRONG cũng ăn đệm 40px của Kit, làm cột chữ hẹp đi
   đúng 80px. Bản mẫu dùng div thường nên không có đệm nào. */
.hero-sec .hop.hero-col, .hero-sec .hop.hero-stage, .hero-sec .hop.hero-btns{ padding: 0; }/* Khoảng cách giữa các khối, lấy đúng số của bản mẫu */
.hop.hero-col{ --gap: 24px; }.hop.hero-btns{ --gap: 10px; }/* Màu riêng của huy hiệu trong hero. Hình dáng do bộ khoác lo. */
.hero-badges li:nth-child(1){ background: var(--accent); color: var(--text-on-accent); }.hero-badges li:nth-child(2){ border-color: var(--gray-600); color: var(--gray-300); }/* Dải tin cậy trong hero nằm trên nền tối. Bộ chuẩn dùng --gray-300 cho
   chữ phụ trên nền tối (ở chế độ tối, --text-2 cũng ánh xạ về gray-300). */
.hero-trust > ul, .hero-trust li{ color: var(--gray-300); }.hero-trust li b, .hero-trust li strong{ color: var(--gray-0); }/* Hai biến bộ chuẩn chưa có, khai tạm ở tầng dự án.
   Giá trị lấy từ components/core/Button.jsx. Đã ghi vào danh sách gửi DS.
   04/10/2026: đổi số màu trần sang color-mix đọc var(--accent), để cầu nối
   màu ở cuối tokens.css điều khiển được. Trước đó đổi màu nhấn trong Site
   Settings thì nút đổi nền mà bóng hắt vẫn vàng. */
:root{
  --accent-glow-hover: 0 10px 28px color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-glow-active: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}/* Ba ảnh sân khấu CHƯA bấm được, vì mẫu demo chưa có thật.
   Bản mẫu React dùng thẻ <a> mở demo. Để nguyên con trỏ bàn tay là nói dối
   người dùng: trỏ báo bấm được mà bấm không ra gì.
   Khi có mẫu thật thì đổi widget ảnh sang có liên kết và bỏ dòng này. */
.hero-stage .hero-shot{ cursor: default; }/* -------------------------------------------------------------------
 * Hai chỗ Elementor đè, phải gỡ.
 * ------------------------------------------------------------------- */ /* QUẦNG SÁNG. Elementor dùng `.e-con::before` cho lớp phủ nền của nó và đặt
   CỨNG `width` với `height` bằng `max(100% + ...)`. Khai mỗi `inset: -10%` là
   không đủ: hộp bị kẹp lại đúng khổ hero (1440x762) thay vì tràn ra (1728x914).
   Hai quầng radial định vị theo phần trăm TRONG hộp đó, nên tâm quầng lệch
   sang trái khoảng 200px. Trả `width`/`height` về `auto` để `inset` quyết định. */
.hop.hero-sec::before{ width: auto; height: auto; }/* CHUYỂN TIẾP CỦA THẺ ẢNH. Widget ảnh của Elementor tự đặt chuyển tiếp cho
   `background, border, border-radius, box-shadow, transform` ở 0.3s và 0.4s với
   gia tốc `ease`. Bộ chuẩn chỉ chuyển `box-shadow` ở 0.2s với gia tốc riêng.
   Không ghi đè thì rê chuột lên thẻ cảm giác nặng và chậm hơn hẳn. */
.hero-stage .hero-shot, .hero-stage .hero-shot{ transition: box-shadow var(--dur) var(--ease); }/* ===================================================================
 * KHỐI SECTION CHUNG
 * Chép từ thành phần Section trong HomeScreen.jsx. Dùng lại ở mọi khối.
 * =================================================================== */ .hop.su-sec{ padding: var(--section-y) 0; }/* QUY TAC CHUNG cho moi khoi: container long trong KHONG an dem cua Kit.
   Kit dat container_padding 40/32/32/16 cho MOI container, ke ca long trong.
   Ban mau dung <div> thuong nen khong co dem nao. Khong tru sach thi moi tang
   long them 80px be ngang, va chu trong the bi thut vao con danh sach thi khong.
   Khoi nao that su can dem thi khai lai SAU quy tac nay, voi do cu the cao hon. */
.hop.su-sec .hop{ padding: 0; gap: 0; }/* `.wrap` la ngoai le: no CAN dem le, va phai khai SAU quy tac chung. */
.hop.su-sec .hop.wrap{ padding: 0 var(--margin); }/* Đầu khối: nhãn nhỏ, tiêu đề, đoạn dẫn. Bản mẫu bọc trong một div max-width 640. */
/* Thanh phan Section boc dau khoi trong MOT HANG FLEX, de cho nut hanh dong
   ben phai o cac khoi co no. Khoi chu la phan tu flex nen CO THEO NOI DUNG,
   khong phai luon 640px. Thieu hang nay thi hop chu rong 640 thay vi 630,8. */
.su-sec .hop.su-sec__hang{
  flex-direction: row; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 32px;
}.su-sec .hop.su-sec__dau{ max-width: 640px; width: auto; flex: 0 1 auto; }.su-sec__k > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ text-transform: uppercase; letter-spacing: var(--ls-caps);
}/* Le duoi cua nhan nho. Phai ghep `.e-con.su-sec__dau >` de vuot quy tac
   khoang cach widget ma Kit sinh ra. */
.su-sec .hop > .su-sec__k{ margin-bottom: 10px; }.su-sec__lead p{ margin: 12px 0 0; }/* ===================================================================
 * HAI CỘT SO SÁNH, chép từ CompareCol trong HomeScreen.jsx
 * =================================================================== */ .su-sec .hop.su-cmp{ flex-direction: row; flex-wrap: wrap; gap: var(--gutter); align-items: stretch; }.su-sec .hop.su-cmp__cot{
  flex: 1 1 320px; min-width: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  gap: var(--space-4);
  width: auto;
}.hop.su-cmp__cot--loose{ background: var(--surface-sunken); border: var(--border-w-thin) solid var(--border); }.hop.su-cmp__cot--ours{ background: var(--surface); border: var(--border-w) solid var(--accent); }/* Ban mau dung <div> cho ten the nen KHONG dinh luat h1-h6 trong base.css,
   vay giãn chữ la `normal`. O day dung <h3> cho dung ngu nghia, nen phai tra
   `letter-spacing` ve normal, khong thi chu co lai 0,31px va hep hon 5px. */
.su-cmp__ten > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){
  letter-spacing: normal;
}.su-cmp__note p{ margin: 6px 0 0; }.su-cmp__ds > ul{
  display: flex; flex-direction: column; gap: var(--space-3); margin: 0;
}.su-cmp__ds li{
  display: flex; gap: 10px; align-items: flex-start; margin: 0;
  font-size: var(--text-body); line-height: 1.55;
}.su-cmp__ds li > span{
  font-size: inherit; line-height: inherit; font-family: var(--font-ui);
  font-weight: 400; letter-spacing: normal;
}/* Ban mau boc bieu tuong trong mot <span> cao bang CA DONG CHU (1.55em),
   roi day xuong 2px. Dat `height: 18px` la <li> thap hon 2px moi muc.
   Nen dat chieu cao theo dong chu, ve bieu tuong bang background-size. */
.su-cmp__ds li::before{
  content: ""; flex-shrink: 0; margin-top: 2px;
  width: 18px; height: 1.55em;
  background-size: 18px 18px !important;
  background-position: top center !important;
}.su-cmp__cot--loose .su-cmp__ds li{ color: var(--text-2); }.su-cmp__cot--loose .su-cmp__ds li::before{ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F666E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14' /></svg>") center / contain no-repeat; }.su-cmp__cot--ours .su-cmp__ds li{ color: var(--text); }.su-cmp__cot--ours .su-cmp__ds li::before{ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5' /></svg>") center / contain no-repeat; }/* ===================================================================
 * THẺ CAM KẾT, chép từ components/cards/Commitment.jsx
 * Ô biểu tượng là trang trí nên vẽ bằng ::before, không tốn một widget.
 * =================================================================== */ /* `--n` la so cot o may tinh, thanh phan CommitmentGrid nhan qua prop `columns`.
   Quen dat la roi ve mac dinh 4, the hep di 95px va chu xuong dong them. */
.su-sec .hop.su-cm-grid{
  display: grid; gap: 16px; grid-template-columns: 1fr;
  --n: 3;
}
@media (min-width: 600px)  {.su-sec .hop.su-cm-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {.su-sec .hop.su-cm-grid{ grid-template-columns: repeat(var(--n, 4), 1fr); } }.su-sec .hop.su-cm{
  /* `flex-wrap: nowrap` la bat buoc. Elementor dat `wrap` cho container o
     dien thoai, ma hop chu lai rong 100% theo mac dinh cua `.e-con`, nen o
     360px hop chu khong du cho canh o bieu tuong 44px va nhay xuong dong
     duoi: the cao 169,8px thay vi 111,8px. */
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: 14px; padding: 20px;
  background: var(--surface);
  border: var(--border-w-thin) solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  width: auto;
}/* `::before` cua container da bi Elementor chiem cho lop phu nen:
   `.e-con::before { content: var(--background-overlay) }`. Bien do khong dat
   thi `var()` hong va `content` thanh `normal`, nen khong co phan tu gia nao.
   Phai ghep `.e-con` de vuot, giong truong hop quang sang o hero. */
.hop.su-cm::before{
  content: ""; width: 44px; height: 44px; flex: none;
  /* Elementor dat `position: absolute` cho `.e-con::before` vi no dung lam lop
     phu nen. Khong tra ve `static` thi o bieu tuong co hien nhung KHONG chiem
     cho, chu bi day len sat le trai 58px. */
  position: static;
  background-color: var(--accent-subtle);
  background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
  border-radius: var(--radius-sm);
}.hop.su-cm--contract::before{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' /> <path d='M14 2v4a2 2 0 0 0 2 2h4' /> <path d='m9 15 2 2 4-4' /></svg>"); }.su-cm--clock::before{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' /> <polyline points='12 6 12 12 16 14' /></svg>"); }.hop.su-cm--warranty::before{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z' /> <path d='m9 12 2 2 4-4' /></svg>"); }/* Hop chu phai CO THEO noi dung nhu ban mau, khong phai rong 100%.
   `min-width: auto` de giong hop <div> tran cua ban mau. */
.su-sec .hop.su-cm__than{ width: auto; min-width: auto; }.su-cm__t > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ letter-spacing: normal;
}/* Le 4px dat tren VO widget, khong dat tren <p>.
   Elementor chen `.elementor-widget-container` giua vo va <p>, chan le gop,
   nen le cua <p> nam TRONG vo va cong them 4px vao chieu cao. */
.su-cm__d{ margin-top: 4px; }.su-cm__d p{
  margin: 0;
}/* ===================================================================
 * KHỐI THEO NGÀNH, chép từ components/cards/IndustryCard.jsx
 * Thẻ là một container đặt `html_tag = a`, nên cả thẻ bấm được như bản mẫu.
 * Ô biểu tượng là một container RỖNG; hình vẽ nằm ở `::before` và tô bằng
 * `mask` chứ không phải `background-image`, vì màu nét phải đổi khi rê chuột.
 * Nếu nướng màu vào ảnh SVG thì màu không chuyển mượt được.
 * =================================================================== */ .su-sec .hop.grid-ind{ display: grid; gap: 12px; grid-template-columns: 1fr; width: 100%; }
@media (min-width: 768px)  {.su-sec .hop.grid-ind{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {.su-sec .hop.grid-ind{ grid-template-columns: repeat(4, 1fr); } }.su-sec .hop.su-ind{
  flex-direction: row; align-items: center; gap: 14px; padding: 16px; width: auto;
  background: var(--surface);
  border: var(--border-w-thin) solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text); text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}.su-sec .hop.su-ind:hover{ border-color: var(--text); color: var(--text); }/* Ô biểu tượng 44px. Container rỗng nên tốn 0 widget. */
.su-sec .hop.su-ind__ic{
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; padding: 0;
  /* Elementor dat `flex-direction: column` va `gap: 0` cho moi `.e-con`.
     O nay la luoi mot o nen khong doi hinh, nhung tra ve mac dinh cho khop
     phep do va cho an toan neu sau nay them phan tu thu hai. */
  flex-direction: row; gap: normal;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle); color: var(--accent-text);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}.su-sec .hop.su-ind:hover .hop.su-ind__ic{ background: var(--accent); color: var(--text-on-accent); }/* Bốn sắc theo nhóm ngành, chép giá trị từ thanh-phan.css của bộ chuẩn.
   Phải viết lại ở đây vì bản gốc chỉ có hai lớp, thua quy tắc bắc cầu ba lớp. */
.su-sec .hop.su-ind[data-hue=sage] .hop.su-ind__ic{ background: var(--tint-sage);  color: var(--tint-sage-text); }.su-sec .hop.su-ind[data-hue=sage]:hover .hop.su-ind__ic{ background: var(--tint-sage-strong);  color: var(--sage-800); }.su-sec .hop.su-ind[data-hue=peri] .hop.su-ind__ic{ background: var(--tint-peri);  color: var(--tint-peri-text); }.su-sec .hop.su-ind[data-hue=peri]:hover .hop.su-ind__ic{ background: var(--tint-peri-strong);  color: var(--peri-800); }.su-sec .hop.su-ind[data-hue=peach] .hop.su-ind__ic{ background: var(--tint-peach); color: var(--tint-peach-text); }.su-sec .hop.su-ind[data-hue=peach]:hover .hop.su-ind__ic{ background: var(--tint-peach-strong); color: var(--peach-800); }/* Hình vẽ trong ô. `currentColor` theo màu của ô nên đổi mượt cùng nền. */
.hop.su-ind__ic::before{
  content: ""; position: static; width: 22px; height: 22px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 22px 22px; mask-size: 22px 22px;
}/* Moi luat duoi co HAI bo chon: o 44px cua the nganh tren trang chu, va o
   36px trong bang mega cua header (05/10/2026). Hinh ve lucide vi vay chi
   nam o MOT cho. Khung o va co hinh khai rieng: the thi o luat
   `.e-con.su-ind__ic::before` ngay tren, bang mega thi o
   `.su-hd__panel a .ic::before` trong bo-khoac-elementor.css. */
.nganh-ban-hang .hop.su-ind__ic::before, .su-hd__panel a.nganh-ban-hang .ic::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1' /> <circle cx='19' cy='21' r='1' /> <path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1' /> <circle cx='19' cy='21' r='1' /> <path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12' /></svg>"); }.nganh-an-uong .hop.su-ind__ic::before, .su-hd__panel a.nganh-an-uong .ic::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2' /> <path d='M7 2v20' /> <path d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2' /> <path d='M7 2v20' /> <path d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7' /></svg>"); }.nganh-lam-dep .hop.su-ind__ic::before, .su-hd__panel a.nganh-lam-dep .ic::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z' /> <path d='M20 3v4' /> <path d='M22 5h-4' /> <path d='M4 17v2' /> <path d='M5 18H3' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z' /> <path d='M20 3v4' /> <path d='M22 5h-4' /> <path d='M4 17v2' /> <path d='M5 18H3' /></svg>"); }.nganh-y-te .hop.su-ind__ic::before, .su-hd__panel a.nganh-y-te .ic::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 2v2' /> <path d='M5 2v2' /> <path d='M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1' /> <path d='M8 15a6 6 0 0 0 12 0v-3' /> <circle cx='20' cy='10' r='2' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 2v2' /> <path d='M5 2v2' /> <path d='M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1' /> <path d='M8 15a6 6 0 0 0 12 0v-3' /> <circle cx='20' cy='10' r='2' /></svg>"); }.nganh-bat-dong-san .hop.su-ind__ic::before, .su-hd__panel a.nganh-bat-dong-san .ic::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z' /> <path d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2' /> <path d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2' /> <path d='M10 6h4' /> <path d='M10 10h4' /> <path d='M10 14h4' /> <path d='M10 18h4' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z' /> <path d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2' /> <path d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2' /> <path d='M10 6h4' /> <path d='M10 10h4' /> <path d='M10 14h4' /> <path d='M10 18h4' /></svg>"); }.nganh-giao-duc .hop.su-ind__ic::before, .su-hd__panel a.nganh-giao-duc .ic::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z' /> <path d='M22 10v6' /> <path d='M6 12.5V16a6 3 0 0 0 12 0v-3.5' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z' /> <path d='M22 10v6' /> <path d='M6 12.5V16a6 3 0 0 0 12 0v-3.5' /></svg>"); }.nganh-du-lich .hop.su-ind__ic::before, .su-hd__panel a.nganh-du-lich .ic::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z' /></svg>"); }.nganh-o-to .hop.su-ind__ic::before, .su-hd__panel a.nganh-o-to .ic::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2' /> <circle cx='7' cy='17' r='2' /> <path d='M9 17h6' /> <circle cx='17' cy='17' r='2' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2' /> <circle cx='7' cy='17' r='2' /> <path d='M9 17h6' /> <circle cx='17' cy='17' r='2' /></svg>"); }.nganh-doanh-nghiep .hop.su-ind__ic::before, .su-hd__panel a.nganh-doanh-nghiep .ic::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16' /> <rect width='20' height='14' x='2' y='6' rx='2' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16' /> <rect width='20' height='14' x='2' y='6' rx='2' /></svg>"); }.nganh-cuoi-hoi .hop.su-ind__ic::before, .su-hd__panel a.nganh-cuoi-hoi .ic::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z' /> <circle cx='12' cy='13' r='3' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z' /> <circle cx='12' cy='13' r='3' /></svg>"); }.nganh-tin-tuc .hop.su-ind__ic::before, .su-hd__panel a.nganh-tin-tuc .ic::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2' /> <path d='M18 14h-8' /> <path d='M15 18h-5' /> <path d='M10 6h8v4h-8V6Z' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2' /> <path d='M18 14h-8' /> <path d='M15 18h-5' /> <path d='M10 6h8v4h-8V6Z' /></svg>"); }.nganh-cong-dong .hop.su-ind__ic::before, .su-hd__panel a.nganh-cong-dong .ic::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /> <circle cx='9' cy='7' r='4' /> <path d='M22 21v-2a4 4 0 0 0-3-3.87' /> <path d='M16 3.13a4 4 0 0 1 0 7.75' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /> <circle cx='9' cy='7' r='4' /> <path d='M22 21v-2a4 4 0 0 0-3-3.87' /> <path d='M16 3.13a4 4 0 0 1 0 7.75' /></svg>"); }/* Chevron thương hiệu, hiện dần và phóng từ góc dưới-trái khi rê chuột. */
.hop.su-ind::after{
  content: ""; position: static; width: 24px; height: 24px; flex: none;
  background-color: var(--accent-text);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 24px 24px; mask-size: 24px 24px;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter'><g transform='translate(-1.72 -5) scale(.5)'><path d='M8.94 28.07L26.06 34L8.94 39.93L11.06 46.07L45.94 34L11.06 21.93Z'></path></g></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter'><g transform='translate(-1.72 -5) scale(.5)'><path d='M8.94 28.07L26.06 34L8.94 39.93L11.06 46.07L45.94 34L11.06 21.93Z'></path></g></svg>");
  opacity: 0; transform: translate(-14px, 5px) scale(.5); transform-origin: left bottom;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}.hop.su-ind:hover::after{ opacity: 1; transform: translate(0, 0) scale(1); }
@media (hover: none) {.hop.su-ind::after{ opacity: 1; transform: none; background-color: var(--text-3); }
}.su-sec .hop.su-ind__t{ flex: 1 1 0%; min-width: 0; width: auto; }.su-ind__name > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ letter-spacing: normal;
}.su-ind__n > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ letter-spacing: normal;
}.hop.su-ind__t > .su-ind__n{ margin-top: 2px; }/* ===================================================================
 * KHỐI QUY TRÌNH, chép từ components/.../ProcessSteps.jsx
 * Thanh xám nằm ở `::before`, thanh vàng quét nằm ở `::after` của mỗi bước.
 * Lớp `is-on` do đoạn mã `quy-trinh-js` gắn khi khối vào màn hình.
 * =================================================================== */ .su-sec .hop.su-steps{ display: grid; gap: 24px; grid-template-columns: 1fr; width: 100%;
  --n: 4; --step-dur: 700ms; }
@media (min-width: 768px) {.su-sec .hop.su-steps{ grid-template-columns: repeat(4, 1fr); } }/* Moi buoc cham hon buoc truoc mot nhip. Ban mau dat bang `style` noi dong;
   o day dat bang CSS de khong phai chen thuoc tinh vao tung phan tu. */
.hop.su-steps > .hop.su-step:nth-child(1){ --delay: 0ms; }.hop.su-steps > .hop.su-step:nth-child(2){ --delay: 700ms; }.hop.su-steps > .hop.su-step:nth-child(3){ --delay: 1400ms; }.hop.su-steps > .hop.su-step:nth-child(4){ --delay: 2100ms; }.su-sec .hop.su-step{
  position: relative; flex-direction: column; gap: 12px;
  padding: 20px 0 0; width: auto;
}/* Thanh xam. Elementor da dat `position: absolute` cho `.e-con::before` nen
   o day KHONG phai tra ve `static` nhu muc 15.1, chi can go `content` va kich thuoc. */
.hop.su-step::before{
  content: ""; top: 0; left: 0; right: 0; bottom: auto;
  width: auto; height: var(--step-bar, 2px);
  background: var(--border-strong);
}/* Thanh vang quet tu trai sang. */
.hop.su-step::after{
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: var(--step-bar, 2px);
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--step-dur, 700ms) var(--ease-out, cubic-bezier(.2,.7,.2,1)) var(--delay, 0ms);
}.hop.su-steps.is-on > .hop.su-step::after{ transform: none; }/* So thu tu. Dau tick la `::after` cua chinh o chu, hien sau khi thanh quet xong. */
.su-sec .su-step__n{
  display: flex; align-items: center; gap: 8px; color: var(--text-3);
  transition: color var(--dur) var(--ease) calc(var(--delay, 0ms) + var(--step-dur, 700ms));
}.su-step__n > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ letter-spacing: .06em;
}.su-step__n::after{
  content: ""; width: 14px; height: 14px; flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 14px 14px; mask-size: 14px 14px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5' /></svg>");
  opacity: 0; transform: scale(.6);
  transition: opacity var(--dur) var(--ease) calc(var(--delay, 0ms) + var(--step-dur, 700ms)),
              transform var(--dur) var(--ease) calc(var(--delay, 0ms) + var(--step-dur, 700ms));
}.hop.su-steps.is-on .su-step__n{ color: var(--accent-text); }.hop.su-steps.is-on .su-step__n::after{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {.hop.su-step::after, .su-sec .su-step__n, .su-step__n::after{ transition: none; }
}.su-step__t > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ letter-spacing: normal;
}.su-step__d p{
  margin: 0;
}/* `margin-top: auto` day dong so ngay xuong day, dat tren VO widget theo muc 15.2. */
.hop.su-step > .su-step__dur{ margin-top: auto; }.su-step__dur > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ letter-spacing: normal;
}/* ===================================================================
 * KHỐI BẢNG GIÁ, chép từ components/cards/PricingCard.jsx
 * Giá lấy từ `00-quan-tri/hang-so.md`, đã đối chiếu ngày 22/09/2026.
 * Danh sách quyền lợi tách làm HAI widget `icon-list`: một cho mục có,
 * một cho mục không có. Elementor không in được lớp riêng cho từng mục
 * của `icon-list`, mà bám theo `:nth-child` thì gãy khi đổi thứ tự.
 * =================================================================== */ .su-sec .hop.grid-price{ display: grid; gap: var(--gutter); grid-template-columns: 1fr; align-items: start; width: 100%; }
@media (min-width: 768px)  {.su-sec .hop.grid-price{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {.su-sec .hop.grid-price{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) and (max-width: 1199px) {.su-sec .hop.grid-price{ gap: var(--space-6); } }.hop.grid-price > .hop.su-price--band{ grid-column: 1 / -1; }/* Dải "Thương Hiệu" tách khỏi hàng ba thẻ. Dũng góp ý 06/10/2026: nhìn rất bí.
   Đo ra khe giữa ba thẻ và dải đen BẰNG ĐÚNG khe giữa hai thẻ cạnh nhau, vì dải
   là một ô của cùng lưới nên ăn luôn `row-gap`: 16 ở 360, 20 ở 768, 24 từ 1024.
   Nhưng nó không phải thẻ thứ tư cùng loại - khác hình, khác thể giá, khác nút.
   Khe ngăn hai thứ KHÁC loại phải lớn hơn khe ngăn hai thứ CÙNG loại, nếu không
   mắt đọc nó như dính vào hàng thẻ.
   Cộng thêm để khe thật luôn cao hơn khe lưới đúng một bậc của thang:
     360   16 + 8  = 24
     768   20 + 12 = 32
    1024   24 + 24 = 48
   Chỉ cộng cho dải, không đụng khe giữa các thẻ.

   Bo chon KHONG gan `.e-con`: trang chu dung container Elementor, con trang
   `/bang-gia/` dung HTML rut cua ban mau nen the boc chi la `div.grid-price`
   thuong. Lan dau toi viet `.e-con.grid-price > .e-con.su-price--band` nen chi
   trang chu duoc sua, Dung ghim lai: "Ban chua sua khoang cach card nay giong
   trang chu". Cung dang sai voi viec bo dia mau mui ten: sua mot duong dung roi
   tuong da xong ca site. */
.grid-price > .su-price--band{ margin-top: var(--space-2); }
@media (min-width: 768px)  {.grid-price > .su-price--band{ margin-top: var(--space-3); } }
@media (min-width: 1024px) {.grid-price > .su-price--band{ margin-top: var(--space-6); } }
@media (max-width: 767px) {.hop.grid-price > .hop.su-price--featured{ order: -1; } }.su-sec .hop.su-price{
  position: relative; flex-direction: column; gap: 20px; padding: 24px; width: auto;
  background: var(--surface);
  border: var(--border-w-thin) solid var(--border);
  border-radius: var(--radius-lg); color: var(--text);
}.su-sec .hop.su-price--featured{
  border-color: var(--accent); border-width: var(--border-w); box-shadow: var(--accent-glow);
}.su-sec .hop.su-price__head{ flex-direction: column; gap: 8px; width: auto; }.su-sec .hop.su-price__top{
  flex-direction: row; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 8px; width: auto;
}/* KHONG dat mau o day. Bo chuan de `.su-price__name` thua ke: the thuong
   an theo `.su-price` (mau chu toi), dai "Thuong Hieu" an theo
   `.su-price--band` (mau chu sang). Ep `var(--text)` la ten goi tren dai
   ra chu den tren nen than chi. */
.su-price__name > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ letter-spacing: normal;
}.su-price__for > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ letter-spacing: normal;
}.su-price__desc > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ letter-spacing: normal;
}/* Khoi gia. Ban mau boc `.su-price__amt` trong mot <div> tran de con cho
   dong gia gach ngang; giu nguyen lop boc do cho dung khoang cach. */
.su-sec .hop.su-price__amt-w{ width: auto; }.su-sec .hop.su-price__amt{
  flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px; width: auto;
}.su-price__so > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ letter-spacing: var(--ls-price);
}.su-price__dv > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){
  /* KHONG dat `letter-spacing: normal` o day. Ban mau dung `font` rut gon,
     ma `font` khong dong den letter-spacing, nen chu nay thua ke -0,62px
     tu `.su-price__amt`. Dat lai `normal` la chu rong them 7,4px. */
  letter-spacing: inherit; white-space: nowrap;
}.su-price__tu > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ letter-spacing: inherit;
}/* Danh sach quyen loi. */
.su-sec .hop.su-price__list{ flex-direction: column; gap: 10px; width: auto; flex: 1; }.su-price__li > ul{
  display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0;
}.su-price__li li{
  display: flex; gap: 10px; align-items: flex-start; margin: 0;
}.su-price__li li > span{ letter-spacing: normal; padding: 0;
}/* Mau net doi theo trang thai (vang cho muc co, xam cho muc khong), nen ve
   bang `mask` va to bang `background-color`, theo muc 16.2. Nuong ma mau vao
   anh SVG thi ra net den, dung nhu lan dau dung hong. */
.su-price__li li::before{
  content: ""; width: 16px; height: 16px; flex: none; margin-top: 2px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 16px 16px; mask-size: 16px 16px;
}.su-price__li--co li::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5' /></svg>"); color: var(--accent-text); }.su-price__li--khong li::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14' /></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14' /></svg>"); color: var(--border-strong); }.su-price__li--khong li{ color: var(--text-3); }.su-price__note > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ letter-spacing: normal;
}.hop.su-price > .su-price__note{ padding-top: 12px; border-top: var(--border-w-thin) solid var(--border); }/* --- Dai "Thuong Hieu": san khau than chi, cung anh sang voi hero --- */
.su-sec .hop.su-price--band{
  display: grid; overflow: hidden; gap: 20px 32px; grid-template-columns: 1fr;
  background: radial-gradient(70% 120% at 80% 30%, #2B3036 0%, var(--gray-900) 70%);
  color: var(--gray-0); border-color: var(--gray-700);
}
@media (min-width: 768px)  {.su-sec .hop.su-price--band{ grid-template-columns: 1.1fr 1.4fr; align-items: start; } }
@media (min-width: 1024px) {.su-sec .hop.su-price--band{ grid-template-columns: 1fr 1.6fr .9fr; align-items: center; padding: 28px 32px; } }/* Quang amber. Elementor da dat `position: absolute` cho `.e-con::before`. */
.hop.su-price--band::before{
  content: ""; inset: -20%; width: auto; height: auto;
  background: radial-gradient(30% 60% at 78% 40%, color-mix(in srgb, var(--accent) 35%, transparent) 0%, transparent 60%);
  filter: blur(28px); pointer-events: none;
}/* Chevron thuong hieu. Net giu 1px moi be rong nho `vector-effect` viet
   trong chinh anh SVG, xem muc 8 cua so tay. */
.hop.su-price--band::after{
  content: ""; position: absolute; z-index: 0;
  right: -4%; top: 50%; width: min(34%, 360px); aspect-ratio: 1;
  transform: translateY(-50%); opacity: .16; pointer-events: none; background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1' stroke-linejoin='miter'><path vector-effect='non-scaling-stroke' d='M36.94 1.93L2.06 14L36.94 26.07L39.06 19.93L21.94 14L39.06 8.07Z'/><path vector-effect='non-scaling-stroke' d='M8.94 28.07L26.06 34L8.94 39.93L11.06 46.07L45.94 34L11.06 21.93Z'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1' stroke-linejoin='miter'><path vector-effect='non-scaling-stroke' d='M36.94 1.93L2.06 14L36.94 26.07L39.06 19.93L21.94 14L39.06 8.07Z'/><path vector-effect='non-scaling-stroke' d='M8.94 28.07L26.06 34L8.94 39.93L11.06 46.07L45.94 34L11.06 21.93Z'/></svg>") center / contain no-repeat;
}.hop.su-price--band > *{ position: relative; z-index: 1; }.su-sec .hop.su-price--band .hop.su-price__amt{ overflow: visible; white-space: nowrap; padding-left: 2px; }.hop.su-price--band .hop.su-price__head > .su-price__amt-w{ margin-top: 8px; }.su-sec .hop.su-price--band .hop.su-price__list{ display: block; }.su-price--band .su-price__li > ul{
  display: grid; grid-template-columns: 1fr; gap: 10px 24px;
}
@media (min-width: 600px) {.su-price--band .su-price__li > ul{ grid-template-columns: 1fr 1fr; }
}.su-sec .hop.su-price--band .hop.su-price__side{ flex-direction: column; gap: 12px; width: auto; }/* Tren nen than chi, dau tick sang hon: `--accent` chu khong phai `--accent-text`. */
.su-price--band .su-price__li--co li::before{ color: var(--accent); }.hop.su-price--band .hop.su-price__side > .su-price__note{ padding-top: 0; border-top: 0; }/* Lien ket "So sanh chi tiet 4 goi" --- */
/* Le tren dat len VO widget (muc 15.2), va phai ghep `.e-con.wrap >` moi vuot
   duoc quy tac khoang cach widget cua Kit. */
.hop.wrap > .e-su-more{ margin-top: var(--space-6); }/* Cung benh voi huy hieu don: vo widget mac dinh la `block`, nen the <a>
   inline-flex nam tren mot dong chu cao hon chinh no va bi day xuong 3px. */
.e-su-more{ display: flex; align-items: flex-start; }/* Khoang cach chu voi mui ten phai dat tren `.elementor-button-content-wrapper`,
   khong dat tren `.elementor-button`: hai thu do khong phai cha con truc tiep. */
.e-su-more > a{ display: flex; align-items: center; gap: 8px; }/* Ban mau dung mui ten 18px o day, khong phai 20px nhu nut thuong. */
.e-su-more ::after{
  width: 18px; height: 18px;
  -webkit-mask-size: 18px 18px; mask-size: 18px 18px;
}.e-su-more > a{
  display: inline-flex; align-items: center; gap: 8px;
  height: auto; padding: 0 0 4px; background: none; border: 0; border-radius: 0;
  border-bottom: 1.5px solid var(--accent);
  color: var(--text); text-decoration: none; box-shadow: none;
}.e-su-more > a:hover{ color: var(--accent-text); background: none; transform: none; box-shadow: none; }/* ===================================================================
 * KHỐI NỀN MÓNG: dùng lại y nguyên thẻ `su-cm` của khối "Cam kết",
 * chỉ đổi số cột sang 4 và thêm bảy biểu tượng mới.
 * Màu nét cố định nên nướng thẳng vào ảnh SVG (xem mục 16.2).
 * =================================================================== */ .su-sec .hop.su-cm-grid--4{ --n: 4; }.hop.su-cm--file::before{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' /> <path d='M14 2v4a2 2 0 0 0 2 2h4' /> <path d='M10 9H8' /> <path d='M16 13H8' /> <path d='M16 17H8' /></svg>"); }.hop.su-cm--search::before{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8' /> <path d='m21 21-4.3-4.3' /></svg>"); }.hop.su-cm--speed::before{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12 14 4-4' /> <path d='M3.34 19a10 10 0 1 1 17.32 0' /></svg>"); }.hop.su-cm--shield::before{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z' /> <path d='m9 12 2 2 4-4' /></svg>"); }.hop.su-cm--download::before{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' /> <polyline points='7 10 12 15 17 10' /> <line x1='12' x2='12' y1='15' y2='3' /></svg>"); }.hop.su-cm--building::before{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z' /> <path d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2' /> <path d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2' /> <path d='M10 6h4' /> <path d='M10 10h4' /> <path d='M10 14h4' /> <path d='M10 18h4' /></svg>"); }.hop.su-cm--desktop::before{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F5E00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='14' x='2' y='3' rx='2' /> <line x1='8' x2='16' y1='21' y2='21' /> <line x1='12' x2='12' y1='17' y2='21' /></svg>"); }/* ===================================================================
 * KHỐI HỎI ĐÁP, chép từ <section id="hoi-dap"> và components/.../FAQ.jsx
 * Đóng mở bằng đoạn mã `faq-js`, chép đúng hành vi: mỗi lúc mở một câu,
 * câu đầu mở sẵn, chuyển động bằng `grid-template-rows` chứ không phải
 * bằng chiều cao, nên không cần đo chiều cao trước.
 * =================================================================== */ .su-sec .hop.faq-wrap{
  display: grid; gap: var(--space-8); grid-template-columns: 1fr;
  align-items: start; padding: 0 var(--margin); width: 100%;
}
@media (min-width: 1024px) {.su-sec .hop.faq-wrap{ grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-16); }.su-sec .hop.faq-side{ position: sticky; top: calc(var(--header-h) + 24px); }
}.su-sec .hop.faq-side{ max-width: 480px; width: auto; }.su-sec .hop.faq-list{ min-width: 0; width: auto; }.hop.faq-side > .su-faq__nut{ margin-top: 24px; }.su-sec .hop.su-faq__nut{ flex-direction: row; flex-wrap: wrap; gap: 10px; width: auto; }.su-sec .hop.su-faq{
  /* `gap: normal` de tra ve mac dinh; Elementor dat 0px. Khong doi hinh anh,
     nhung de phep do sach va khong bay ra khi sau nay them khoang cach. */
  flex-direction: column; gap: normal; width: 100%;
  border-top: var(--border-w-thin) solid var(--border);
}.su-sec .hop.su-faq__item{
  width: 100%; border-bottom: var(--border-w-thin) solid var(--border);
}/* Cau hoi. KHONG dat lop `su-faq__q` len vo widget: trong ban mau lop do nam
   tren chinh the <button>, va `thanh-phan.css` da co quy tac cho no (dem
   16px, cao toi thieu 56px). Dat len vo la dem bi tinh HAI lan, muc cao
   88px thay vi 56px. Dung ten rieng `e-su-faq__q` cho vo. */
.e-su-faq__q > a{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 56px; padding: 16px 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  text-align: left; cursor: pointer; letter-spacing: normal; color: var(--text);
  -webkit-tap-highlight-color: transparent;
}.e-su-faq__q > a:hover{ color: var(--accent-text); background: none; transform: none; box-shadow: none; }.e-su-faq__q > a{
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
}/* Chevron: KHONG dat `vector-effect` o day. Ban mau ve bang the <svg> co 20px
   tu luoi 24, nen net co lai theo ty le 0,833 - dat `vector-effect` la net day
   gap doi. Chi dung `vector-effect` o cho bo chuan co dat (hero, dai gia). */
.e-su-faq__q ::after{
  content: ""; display: block; flex: none; width: 20px; height: 20px;
  background-color: var(--text-3);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter'><g transform='rotate(90 12 12)'><g transform='translate(-1.72 -5) scale(.5)'><path d='M8.94 28.07L26.06 34L8.94 39.93L11.06 46.07L45.94 34L11.06 21.93Z'/></g></g></svg>") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter'><g transform='rotate(90 12 12)'><g transform='translate(-1.72 -5) scale(.5)'><path d='M8.94 28.07L26.06 34L8.94 39.93L11.06 46.07L45.94 34L11.06 21.93Z'/></g></g></svg>") center / 20px 20px no-repeat;
  transition: transform var(--dur) var(--ease);
}.e-su-faq__q[data-mo=true] ::after{
  transform: rotate(180deg); background-color: var(--text);
}.su-sec .hop.su-faq__a{
  display: grid; grid-template-rows: 0fr; width: 100%;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}.su-sec .hop.su-faq__a[data-open=true]{ grid-template-rows: 1fr; }.su-sec .hop.su-faq__a-in{ overflow: hidden; width: 100%; }.su-faq__a p{
  margin: 0 0 16px; padding-right: 36px; letter-spacing: normal;
}/* ===================================================================
 * KHỐI "SAU KHI BẠN LIÊN HỆ", chép từ <section className="sec-after">
 * Bản mẫu viết bằng `style` nội dòng nên không có tên lớp; đặt tên ở đây.
 * =================================================================== */ .su-sec .hop.sau-wrap{ flex-direction: column; gap: var(--space-8); }.su-sec .hop.sau__dau{ max-width: 640px; width: auto; }.su-sec .hop.grid-3{ display: grid; gap: var(--gutter); grid-template-columns: 1fr; width: 100%; }
@media (min-width: 1024px) {.su-sec .hop.grid-3{ grid-template-columns: repeat(3, 1fr); } }.su-sec .hop.sau__buoc{
  flex-direction: column; gap: var(--space-2);
  padding: var(--space-5) var(--space-6); width: auto;
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--peri-200);
}.sau__gio > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){
  letter-spacing: var(--ls-price);
}.sau__t > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ letter-spacing: normal;
}.sau__d p{
  margin: 0; letter-spacing: normal;
}.su-sec .hop.sau__hop{
  flex-direction: row; flex-wrap: wrap; align-items: flex-start;
  gap: var(--space-8); padding: var(--space-8); width: 100%;
  background: var(--surface); border-radius: var(--radius-lg);
  border: var(--border-w-thin) solid var(--peri-200);
}.su-sec .hop.sau__trai{ flex: 1 1 300px; min-width: 0; width: auto; }.su-sec .hop.sau__phai{ flex: 1 1 340px; min-width: 0; width: auto; }.sau__p p{
  margin: 12px 0 0; letter-spacing: normal;
}.hop.sau__trai > .sau__nut{ margin-top: var(--space-6); }.su-sec .hop.sau__nut{ flex-direction: row; flex-wrap: wrap; gap: 10px; width: auto; }/* --- Biểu mẫu tư vấn: bố cục hai cột, chép từ `.su-cf` (biến thể compact) --- */
/* Lưới phải đặt trên <fieldset>, vì Fluent Forms bọc mọi nhóm trường trong đó. */
/* Dem 20px nam tren VO WIDGET shortcode, khong phai tren `.fluentform`.
   Ban mau dat `padding: 0` cho ConsultForm qua prop style. */
.e-su-form{ padding: 0; }/* Tru bien the o trang lien he: o do `.e-su-form` dong luon vai vo the
   (`.su-cf` cua bo chuan: vien, bo goc, dem 20px), chu khong co hop
   Elementor boc ngoai nhu trang chu. Thieu dong nay thi vo the mat dem
   va bieu mau thap hon ban mau 21px. Do 05/10/2026. */
.e-su-form.su-cf{ padding: 20px; }.e-su-form .fluentform{ padding: 0; }/* Fluent Forms them le duoi cho hop nhan; bo chuan dung `gap: 6px` cua
   `.su-field`, nen dat le o MOT cho thoi (muc 15.2). */
/* `display: block` la bat buoc. Fluent Forms de hop nhan o `inline-block`,
   nen no nam tren mot dong chu cao 24,8px trong khi chinh no chi cao 18,2px:
   moi truong cao them 4px. Day la lan thu BA gap dung benh nay (huy hieu,
   lien ket "So sanh chi tiet", va o day) - xem muc 18.2. */
.e-su-form .ff-default .ff-el-input--label{ display: block; margin: 0 0 6px; }/* Nhan cua nhom chon: ban mau de 4px chu khong 6px. */
.e-su-form .ff-el-group:has(.ff-el-form-check-radio) .ff-el-input--label{ margin-bottom: 4px; }/* Fluent Forms luon in nut gui SAU moi truong, nen dong ghi chu nho bi ket o
   tren nut. Ban mau de nut truoc, ghi chu sau. Doi bang `order` cua luoi. */
.e-su-form .frm-fluent-form > fieldset > .ff_submit_btn_wrapper{ order: 1; }.e-su-form .frm-fluent-form > fieldset > .su-cf__fine{ order: 2; }.e-su-form .ff-default .ff-el-input--label label{ margin: 0; }.e-su-form .frm-fluent-form > fieldset{
  display: grid; gap: 16px; grid-template-columns: 1fr;
  border: 0; margin: 0; padding: 0; min-inline-size: 100%;
}
@media (min-width: 480px) {.e-su-form .frm-fluent-form > fieldset{ grid-template-columns: 1fr 1fr; } }/* Tiêu đề dành cho trình đọc màn hình: bỏ ra khỏi dòng chảy để không ăn một ô lưới. */
.e-su-form .ff_screen_reader_title{ position: absolute; }.e-su-form .ff-default .ff-el-group{ margin: 0; }.e-su-form .ff-el-group.ff_submit_btn_wrapper, .e-su-form .ff-el-group.su-cf__fine{ grid-column: 1 / -1; }.e-su-form .su-cf__fine{
  font-family: var(--font-ui); font-weight: 400;
  font-size: 13px; line-height: 1.5; color: var(--text-3);
}/* Nút gửi: khoác dáng `.su-btn--accent.su-btn--lg.su-btn--full` của bộ chuẩn. */
.e-su-form .ff-default .ff-btn-submit{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: var(--control-h-lg); padding: 0 28px;
  border: var(--border-w) solid transparent; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--text-on-accent);
  box-shadow: var(--accent-glow);
  font-family: var(--font-ui); font-weight: var(--fw-semibold);
  font-size: var(--text-button-lg); line-height: var(--lh-label);
  cursor: pointer;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}.e-su-form .ff-default .ff-btn-submit:hover{
  box-shadow: var(--accent-glow-hover, var(--accent-glow)); transform: translateY(-1px);
}/* Bo DIA MAU sau mui ten cua nut gui bieu mau, 06/10/2026, cung ly do voi nut
   CTA trong bo-khoac-elementor.css: Dung thay dia khong hop ly.
   Ve bang MOT lop mask to bang `currentColor`, nen mui ten mang dung mau chu
   cua nut va doi theo khi doi mau nhan trong bang chon mau. */
.e-su-form .ff-default .ff-btn-submit::after{
  content: ""; display: block; flex: none;
  width: 22px; height: 22px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14' /> <path d='m12 5 7 7-7 7' /></svg>") center / 22px 22px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14' /> <path d='m12 5 7 7-7 7' /></svg>") center / 22px 22px no-repeat;
  transition: transform var(--dur) var(--ease);
}.e-su-form .ff-default .ff-btn-submit:hover::after{ transform: translateX(3px); }/* ===================================================================
 * NGẮT DÒNG: trả về `auto` ở những chỗ bản mẫu dùng `<div>`
 *
 * Bộ chuẩn đặt `text-wrap: pretty` cho `h1..h6` và cho `p` (tokens/base.css).
 * Mô tả trong các thẻ của bản mẫu lại nằm trong `<div>`, nên chúng ngắt dòng
 * kiểu `auto`. Bên WordPress những chỗ đó là widget chữ, tức thẻ `<p>`, nên
 * ăn phải `pretty` và ngắt dòng khác hẳn: hộp vẫn đúng kích thước, chỉ chữ
 * xuống dòng sớm một từ. Phép đo hình học không bắt được.
 *
 * Cách khác là đổi widget chữ thành widget tiêu đề đặt thẻ `div`, nhưng như
 * vậy mất ô soạn thảo giàu định dạng. Giữ widget chữ và sửa ngắt dòng ở đây.
 * =================================================================== */ .su-cm__d p, .su-step__d p, .sau__d p{ text-wrap: auto; }/* Ô số điện thoại: biểu tượng bên trái và chữ mono, chép từ `Input` với
   prop `icon="phone"` và `mono` trong ConsultForm. */
.e-su-form .ff-default .ff-el-input--content:has( > input[name=so_dien_thoai]){ position: relative; }.e-su-form .ff-default .ff-el-input--content:has( > input[name=so_dien_thoai])::before{
  content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; pointer-events: none;
  background-color: var(--text-3);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z' /></svg>") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z' /></svg>") center / 20px 20px no-repeat;
}.e-su-form .ff-default input[name=so_dien_thoai]{ padding-left: 40px; font-family: var(--font-mono); }.e-su-form .ff-default input[name=mau_quan_tam]{ font-family: var(--font-mono); }/* Mau so thu tu DOI THEO TRANG THAI (xam khi chua chay, vang khi da quet),
   nen khong gan duoc mot mau toan cuc co dinh. Phai tra ve thua ke voi du
   do cu the de vuot mau mac dinh ma Elementor sinh cho widget heading
   (`title_color` mac dinh la mau toan cuc Primary, 0,3,0). */
.hop.su-steps .su-step__n > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ color: inherit; }/* ===================================================================
 * KHỐI MẪU NỔI BẬT, chép từ components/cards/TemplateCard.jsx
 * Kiểu chữ và màu chữ do Global Styles nắm (mục 22); ở đây chỉ còn bố cục,
 * khoảng cách, đổ bóng và trạng thái rê chuột.
 * =================================================================== */ .su-sec .hop.grid-tpl{ display: grid; gap: var(--gutter); grid-template-columns: 1fr; width: 100%; padding: 4px; }
@media (min-width: 768px)  {.su-sec .hop.grid-tpl{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) {.su-sec .hop.grid-tpl{ grid-template-columns: repeat(3, 1fr); } }.su-sec .hop.su-tpl{
  flex-direction: column; width: auto;
  background: var(--surface);
  border: var(--border-w-thin) solid transparent;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}.su-sec .hop.su-tpl:hover{ box-shadow: var(--shadow-2); transform: translateY(-2px); }.su-sec .hop.su-tpl:focus-within{ border-color: var(--text); }.su-sec .hop.su-tpl__media{
  position: relative; aspect-ratio: 16 / 11; width: 100%;
  background: var(--bg-subtle); overflow: hidden;
  border-bottom: 1px solid var(--border);
}.su-tpl__media, .su-tpl__media img{
  width: 100%; height: 100%; display: block;
}.su-tpl__media img{
  object-fit: cover; object-position: top;
  transition: transform var(--dur-slow) var(--ease);
}.hop.su-tpl:hover .su-tpl__media img{ transform: translateY(-6px); }/* Huy hiệu góc trên trái của ảnh bìa. */
.su-sec .hop.su-tpl__badges{
  position: absolute; top: 10px; left: 10px;
  flex-direction: row; gap: 6px; width: auto; z-index: 1;
}/* `index.html` cua ban mau de len thanh phan: dem `--space-4` (16px) va
   khoang cach `--space-3` (12px), khong phai 12/10 nhu trong TemplateCard.jsx.
   Doc CSS o ca hai tang, xem muc 21.4. */
.su-sec .hop.su-tpl__body{ flex-direction: column; gap: var(--space-4); padding: var(--space-4); width: auto; }.su-sec .hop.su-tpl__meta{
  flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; width: auto;
}/* Ban mau de khoi chu ben trai la `flex: 0 1 auto`, tuc CO THEO NOI DUNG.
   Dat `1 1 auto` la no gian het cho trong: 189,2px thay vi 136,8px. */
.su-sec .hop.su-tpl__meta-l{ width: auto; flex: 0 1 auto; min-width: auto; }/* Hai so nay PHAI khop `wp/sua-thanh-phan.css` muc 1. Chung nam day vi ban
   Elementor co cau truc khac, nhung gia tri thi mot. Doi o mot ben la the mau
   o trang chu va trang danh muc lech nhau - da thay dung the 06/10/2026. */
.hop.su-tpl__meta-l > .su-tpl__name{ margin-top: var(--space-2); }/* `<small>` nam BEN TRONG widget nen preset khong voi toi, giu o day. */
.su-tpl__price > :is(h1,h2,h3,h4,h5,h6,p,div,span,a) small{ font-weight: 400; color: var(--text-3); font-size: var(--text-caption); }.su-tpl__price > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ white-space: nowrap; }/* `nowrap` nam o the trong, nen VO widget van co the co lai va nhuong cho
   cho khoi chu ben trai. Ban mau dat nowrap ngay tren phan tu la muc luoi,
   nen no khong co. Khoa lai bang `flex: none`. */
.su-tpl__meta > .su-tpl__price{ flex: none; }.su-sec .hop.su-tpl__acts{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: auto;
}/* Nut trong the mau trai het o luoi. */
.su-tpl__acts .e-su-btn > a{ width: 100%; }/* ===================================================================
 * NHÓM CHỌN GÓI trong biểu mẫu trang liên hệ. Thêm 05/10/2026.
 *
 * Bản mẫu dùng thành phần Checkbox của bộ chuẩn ở dạng radio: nhóm xếp
 * NGANG (.su-ck-group--row, gap 0 24px), mỗi lựa chọn cao tối thiểu 44px,
 * ô tròn 22px vẽ bằng `.su-ck__box` chứ không dùng nút gốc của trình duyệt.
 *
 * Fluent Forms xếp DỌC, mỗi dòng 25px, dùng nút gốc. Để nguyên thì trang
 * liên hệ cao hơn bản mẫu 178px và nhìn khác hẳn các ô còn lại.
 *
 * Fluent không cho đặt lớp lên từng lựa chọn nên phải bám theo lớp của nó,
 * và vẽ ô tròn bằng phần tử giả trên <label>. Dùng `:has()` vì ô tròn nằm
 * TRƯỚC chữ nhưng trạng thái chọn nằm ở <input> bên trong, không với lên
 * phần tử cha bằng bộ chọn thường được.
 * =================================================================== */
/* Nhóm chọn gói và ô mô tả tràn cả hai cột, như bản mẫu. Nút gửi và dòng ghi
   chú nhỏ đã có luật này sẵn ở trên; hai ô kia thêm 05/10/2026 lúc đưa biểu mẫu
   trang liên hệ vào khuôn. Dùng `:has()` vì Fluent không cho đặt lớp riêng. */
.e-su-form .ff-el-group:has(.ff-el-form-check-radio), .e-su-form .ff-el-group:has(textarea){ grid-column: 1 / -1; }.e-su-form .ff-default .ff-el-input--content:has(.ff-el-form-check-radio){
  display: flex; flex-wrap: wrap; gap: 0 24px;
}/* Ghep them `.ff-default` cho du manh: luat cua Fluent dat le duoi 5px va
   de vo o dang block nen moi hang cao 51 thay vi 44. Luat chi hai lop thua. */
/* `display: contents` cho vo cua tung lua chon bien mat han, nhan thanh phan tu
   con truc tiep cua hang flex. De `display: flex` thi vo van cao 51 trong khi
   nhan ben trong cao 44, du vo khong co dem cung khong co vien. */
.e-su-form .ff-default .ff-el-form-check{ margin: 0; display: contents; }/* Ghep `.ff-default` cho du manh: luat cua Fluent dat le duoi 7px cho nhan.
   Bon o dau co le, o cuoi khong, nen hang flex lay chieu cao 51 (44 cong 7) va
   o cuoi bi keo gian cho bang. Bo le thi ca nam o ve 44 va hang ve 44.
   Do 05/10/2026: nhom chon goi 126 thay vi 110. */
/* Bo chon PHAI ghep ca the `label` va ca lop vo: luat cua Fluent la
   `.ff-default .ff-el-form-check label.ff-el-form-check-label`, do manh (0,4,1).
   Luat ba lop (0,3,0) thua, va thua im lang. */
.e-su-form .ff-default .ff-el-form-check label.ff-el-form-check-label{
  position: relative; margin: 0;
  display: flex; align-items: center; gap: 12px;
  min-height: var(--touch-min); padding: 6px 0; margin: 0;
  cursor: pointer; color: var(--text);
  font: 400 16px/1.45 var(--font-ui);
}.e-su-form .ff-default input.ff-el-form-check-radio{
  position: absolute; opacity: 0; width: 0; height: 0;
}/* Ô tròn */
.e-su-form .ff-default .ff-el-form-check label::before{
  content: ""; width: 22px; height: 22px; flex: none;
  border: var(--border-w) solid var(--border-control); border-radius: 50%;
  background: var(--surface);
  transition: border-color var(--dur) var(--ease);
}/* Chấm giữa, hiện khi chọn */
/* PHAI co `top`: thieu no thi phan tu dat tuyet doi lay vi tri tinh, va o nao
   dang duoc chon bi cao 51 thay vi 44, keo ca hang cao theo. Do 05/10/2026,
   bon o kia 44 chi rieng o dang chon 51. */
.e-su-form .ff-default .ff-el-form-check label::after{
  content: ""; position: absolute; left: 6px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--primary); transform: scale(0);
  transition: transform var(--dur-fast) var(--ease);
}.e-su-form .ff-default .ff-el-form-check label:has(input:checked)::before{ border-color: var(--primary); }.e-su-form .ff-default .ff-el-form-check label:has(input:checked)::after{ transform: scale(1); }.e-su-form .ff-default .ff-el-form-check label:hover::before{ border-color: var(--text); }.e-su-form .ff-default .ff-el-form-check label:has(input:focus-visible)::before{
  outline: 2px solid var(--border-focus); outline-offset: 2px;
}/* Hàng meta trong thẻ mẫu: ô giá là WIDGET, không phải chữ trần.
 *
 * Ruột widget là khối, mà khối thì chiếm hết bề ngang được cấp. Nên ô giá nở ra
 * 291px, bóp cột trái còn 133px, và ba dòng chữ bên trái xuống dòng dọc: mã mẫu
 * cao 184px, tên ngành cao 306px, cả thẻ phình từ 419 lên 1098px. Đo 08/10/2026,
 * Dũng báo "thi thoảng card bị vỡ, chữ tự nhiên rất to".
 *
 * Trang /mau-giao-dien/ không dính vì bên đó là HTML tĩnh, ô giá là chữ trần nên
 * chỉ rộng bằng nội dung - 119px.
 *
 * Trước đây luật `flex: 0 0 auto` ở trên vẫn để `flex-basis: auto`, tức vẫn lấy
 * bề rộng theo ruột. Phải khai THẲNG `max-content` thì mới hết co giãn theo may
 * rủi. Và cột trái phải được quyền nở, kèm `min-width: 0` để nó không bị chặn
 * dưới bởi từ dài nhất. */
.su-sec .hop.su-tpl__meta{ align-items: baseline }.su-sec .hop.su-tpl__meta-l{ flex: 1 1 auto; min-width: 0 }.su-sec .su-tpl__meta > .su-tpl__price{ flex: 0 0 max-content; width: max-content; max-width: 60% }/* ===== DẢI TỐI Ở KHỐI QUY TRÌNH (Dũng chốt 09/10/2026) ====================
 *
 * VÌ SAO CÓ: Dũng báo trang "dùng cùng một dải màu be, rất nhàm chán, muốn
 * trông giống một agency làm web hơn". Đo lại: gần như MỌI khối trên trang đều
 * `background: transparent`, tức để lộ nền kem của thân trang từ đầu tới cuối.
 * Không phải thiếu màu - là chưa dùng nốt ba bề mặt bộ chuẩn đã định nghĩa.
 *
 * VÌ SAO ĐẶT Ở KHỐI QUY TRÌNH, không ở khối chốt khách: khối chốt nằm sát chân
 * trang vốn đã tối, hai mảng dính làm một khối đen gần một phần ba trang, mất
 * tác dụng neo. Khối quy trình nằm giữa trang, đúng chỗ dải kem dài nhất, và
 * là chỗ đổi giọng tự nhiên: hết giới thiệu, sang giải thích cách làm.
 *
 * VÌ SAO PHẢI ĐỔI CẢ THẺ BÊN TRONG: đổi mỗi nền khối là chữ trắng trên thẻ
 * trắng. Đã dựng hỏng đúng vậy một lần khi thử. Bộ chuẩn CHƯA có biến thể
 * "trên nền tối" cho mấy thành phần này, nên đang ép bằng CSS - đã ghi thành
 * việc 58 trong bản báo ngược.
 *
 * TÀI SẢN DÙNG: `kv-luoi` (lưới chevron) và `kv-chevron` của chính bộ chuẩn,
 * theo công thức `kv kv--toi kv-luoi kv-goc` trong `tokens/keyvisual.css`.
 * Nhúng dạng data URI vì tệp CSS này nằm trong kho snippet, đường dẫn tương
 * đối không tới được `siteup-ds/assets/`.
 */
.sec-qt{
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--gray-800);
  border-top: var(--border-w-thick, 4px) solid var(--accent);
}.sec-qt > *{ position: relative; z-index: 1 }/* HOA VĂN DẢI, sửa 10/10/2026 theo phương án P1 Dũng chốt.
   Bỏ lưới chevron: nó là một TRƯỜNG phủ kín, chạy dưới cả bốn cột chữ. Giữ
   một dấu lớn neo góc dưới trái, nhưng đổi từ TÔ ĐẶC sang DẠNG NÉT - luật
   Dũng chốt 08/10 và nhắc lại 10/10.

   Phải dùng background-image chứ không dùng mặt nạ: mặt nạ chỉ đọc kênh
   alpha nên luôn ra hình đặc, không ra nét được.

   Nét phải bù theo tỉ lệ phóng: khung 42 đơn vị phóng lên 520px là nhân
   12,381 lần, nên khai stroke-width 1,5 sẽ vẽ ra nét dày 18,6px. Khai
   1,5/12,381 = 0,1212 mới ra đúng 1,5px. Đổi bề rộng dấu thì phải tính lại
   số này. */
.sec-qt::before{ content: none }.sec-qt::after{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 520px; aspect-ratio: 42 / 30;
  /* Góc TRÊN PHẢI, đổi 11/10/2026 theo Dũng. Trước đó neo góc dưới trái,
     mà chỗ đó có chữ của bước 1 - nét chevron cắt ngang dòng mô tả. Góc trên
     phải là vùng trống thật: tiêu đề bó trong 20ch nên hết ở khoảng x 670,
     còn hàng bước thì nằm dưới. */
  right: -94px; top: -66px; opacity: .30;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%27-1%20-1%2042%2030%27%20fill=%27none%27%20stroke=%27%23E9A21A%27%20stroke-width=%270.1212%27%20stroke-linejoin=%27miter%27%3E%3Cpath%20d=%27M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%27/%3E%3C/svg%3E") center / contain no-repeat;
}/* ===================================================================
 * QUY TRÌNH - PHƯƠNG ÁN P1: đường thời gian ngang có trục.
 * Dũng chốt 10/10/2026 sau ba phương án ở thu-nghiem/quy-trinh.html.
 *
 * Vì sao đổi: khối này bán chuyện 5 ngày là xong - Ngày 0, 1, 2 đến 4, 5.
 * Bản cũ để ngày thành dòng chữ CUỐI mỗi thẻ nên không ai cộng lại được.
 * Đặt ngày lên đầu, ngay dưới trục, thì thời gian thành thứ nhìn ra ngay.
 *
 * LÀM BẰNG CSS, không dựng lại khối Elementor: `.su-step` vốn là cột flex
 * nên đổi thứ tự bằng `order` là đủ. Dựng lại một khối thì ghi đè cả trang
 * và làm bay preset của sáu khối khác - đã sập bẫy đó ngày 06/10, xem sổ tay
 * mục 45.
 *
 * GIỮ hiệu ứng quét theo nhịp đã có, chỉ đổi hình: trước là thanh vàng quét
 * ngang từng thẻ, nay là TRỤC tự chạy từ trái sang và các chấm sáng lên theo
 * thứ tự. Cùng một ý, cùng biến `--delay` và `--step-dur`.
 * =================================================================== */ /* Trục. Chừa 52px phía trên cho hàng chấm. */
.sec-qt .hop.su-steps:not(#su){ position: relative; padding-top: 52px;
  /* Khe 32 theo bản mẫu; luật gốc để 24. Khai thành biến vì dấu chỉ hướng
     giữa hai bước tính vị trí theo khe này. */
  --qt-khe: 32px; gap: var(--qt-khe) }.sec-qt .hop.su-steps::before, .sec-qt .hop.su-steps::after{
  content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 1px;
}.sec-qt .hop.su-steps::before{ background: rgba(255,255,255,.18) }/* Trục vàng chạy từ trái sang, dài bằng tổng nhịp của bốn bước. */
.sec-qt .hop.su-steps::after{
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform calc(var(--step-dur, 700ms) * 4) var(--ease-out, cubic-bezier(.2,.7,.2,1));
}.sec-qt .hop.su-steps.is-on::after{ transform: none }/* Bỏ hai thanh ngang của từng thẻ: trục đã thay việc của chúng. */
.sec-qt .hop.su-step::before, .sec-qt .hop.su-step::after{ content: none }/* Bậc chọn phải là (1,3,0), và KHÔNG được viết `.sec-qt .su-sec ...`:
   `su-sec` với `sec-qt` nằm trên CÙNG một phần tử chứ không lồng nhau, nên
   bộ chọn đó không khớp gì cả. Còn `.sec-qt .e-con.su-step` trần là (0,3,0),
   bằng đúng luật tô nền `.sec-qt .su-sec__hang + * > .e-con` ở dưới mà lại
   đứng trước nó, nên thua. Thêm :not(#su) để lên (1,3,0). */
.sec-qt .hop.su-step:not(#su){ padding-top: 0; gap: 0;
  /* Bỏ nền thẻ: luật `.su-sec__hang + * > .e-con` bên dưới tô nền xám cho
     mọi con của hàng, đặt hồi làm dải tối khi mỗi bước còn là một thẻ. P1
     không có thẻ - bốn cột chữ đứng thẳng trên nền dải. */
  background: none; border: 0;
  /* Khối xếp nội dung về ĐÁY, nên bước nào chữ ngắn hơn thì cả cụm tụt
     xuống: bước 2 chỉ có 2 dòng mô tả, dư 23px, nhãn ngày rơi thấp hơn ba
     bước kia đúng 23px. Lưới kéo bốn bước bằng chiều cao nên chỗ dư luôn
     có. Ép về đầu. */
  justify-content: flex-start }/* Số thứ tự thành chấm tròn nằm trên trục.
   Nền phải ĐỤC bằng màu dải, nếu không trục kẻ xuyên qua giữa con số. */
.sec-qt .su-sec .su-step__n, .sec-qt .hop.su-step .su-step__n{
  position: absolute; top: -52px; left: 0;
  width: 38px; height: 38px; padding: 0; gap: 0;
  border-radius: var(--radius-pill, 999px);
  background: var(--gray-800); border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
  /* PHẢI có z-index, nếu không trục vàng băng qua giữa con số.
     Lý do: trục xám là `.su-steps::before`, vẽ TRƯỚC các con nên chấm che
     được; trục vàng là `::after`, vẽ SAU mọi con nên nó nằm trên. Nền đục
     của chấm không cứu được, vì thứ tự vẽ quyết định chứ không phải nền.
     z-index 2 để nằm trên cả dấu chỉ hướng (z-index 1). */
  z-index: 2;
  transition: border-color var(--dur) var(--ease) calc(var(--delay, 0ms) + var(--step-dur, 700ms));
}.sec-qt .hop.su-steps.is-on .su-step__n{ border-color: var(--accent) }/* Dấu tick cũ nằm cạnh số; trong chấm tròn thì không còn chỗ, và chấm sáng
   lên đã nói đúng việc đó rồi. */
.sec-qt .su-step__n::after{ content: none }.sec-qt .su-step__n > :is(h1,h2,h3,h4,h5,h6,p,div,span,a):not(#su){
  /* 13px theo bản mẫu, không phải 11: trong chấm 38px thì 11 trông hụt.
     --fs-0 là bậc 13 của thang, không đặt số lẻ. */
  font-size: var(--fs-0, 13px); line-height: 1; letter-spacing: .06em }/* Nhịp dọc trong bước: ngày xuống tên 10, tên xuống mô tả 8 - theo bản mẫu.
   Dùng lề riêng chứ không dùng `gap` chung, vì gap chung cho ra 10 đều cả hai
   khe và mô tả tụt thêm 2px so với bản Dũng duyệt. */
.sec-qt .su-step__t:not(#su){ margin-top: 10px }.sec-qt .su-step__d:not(#su){ margin-top: 8px }/* Ngày lên đầu. `.su-step` là cột flex nên `order` đủ, không phải đổi HTML.

   Phải gỡ luôn `margin-top:auto`: luật cũ đặt nó để ghim ngày xuống ĐÁY thẻ
   khi ngày là phần tử cuối. Nay ngày là phần tử ĐẦU, mà lề auto trên phần tử
   đầu của một cột flex thì đẩy cả cụm xuống đáy. Chỉ lộ ở bước 2 vì bước đó
   mô tả ngắn hơn một dòng nên còn dư 23px; ba bước kia chữ vừa khít nên
   không thấy gì. Lưới kéo bốn bước bằng chiều cao nên chỗ dư luôn tồn tại. */
.sec-qt .su-step__dur:not(#su){ order: -1; margin-top: 0 }/* Hai cỡ chữ cũ nằm NGOÀI thang 11/13/16/20/25/31 của bộ chuẩn: tên bước
   18px, ngày 12px. Đưa về đúng thang luôn, vì bản Dũng duyệt dùng 20 và 11. */
.sec-qt .su-step__t > :is(h1,h2,h3,h4,h5,h6,p,div,span,a):not(#su){
  font-size: var(--fs-2); line-height: var(--lh-heading);
  /* 600 theo bản mẫu; thẻ tiêu đề mặc định ra 700, nặng hơn một bậc. */
  font-weight: var(--fw-semibold) }.sec-qt .su-step__dur > :is(h1,h2,h3,h4,h5,h6,p,div,span,a):not(#su){
  font-size: var(--text-caption); line-height: var(--lh-label);
  letter-spacing: var(--ls-caps); text-transform: uppercase }/* DẤU CHỈ HƯỚNG GIỮA HAI BƯỚC, thêm 10/10/2026 theo Dũng: "ở giữa các mục
   01 02 03 04 nên tạo ra một cảm giác rằng đây là thứ tự từng bước, có thể
   kết hợp với chevron để làm yếu tố trang trí".

   Đặt đúng ĐIỂM GIỮA HAI CHẤM, không phải giữa hai cột. Chấm nằm ở mép trái
   mỗi cột nên hai thứ đó lệch nhau: tâm chấm cách mép trái cột 19px, nên
   điểm giữa hai tâm là 19 + (bề rộng cột + khe)/2 tính từ mép trái cột, tức
   `50% + 19px + khe/2`. Trừ nửa bề rộng dấu để căn giữa.

   Dấu TÔ ĐẶC chứ không để nét: ở cỡ 14px thì nét 1,5px chiếm gần hết hình,
   không còn đọc ra là chevron. Luật dạng nét là cho dấu lớn trang trí; dấu
   nhỏ làm ký hiệu thì đặc, giống dấu gạch đầu dòng ở khối Ranh giới.

   `::before` là mảng che: trục kẻ ngang sẽ cắt ngang giữa dấu trông như gạch
   xóa, nên phải đục một đoạn trục bằng chính màu dải.

   Hiện theo nhịp như các chấm, dùng chung `--delay`. */
.sec-qt .hop.su-step:not(:last-child)::before, .sec-qt .hop.su-step:not(:last-child)::after{
  content: ""; position: absolute; z-index: 1;
  left: calc(50% + 19px + var(--qt-khe, 32px) / 2);
  opacity: 0;
  transition: opacity var(--dur) var(--ease) calc(var(--delay, 0ms) + var(--step-dur, 700ms));
}.sec-qt .hop.su-step:not(:last-child)::before{
  width: 30px; height: 14px; top: -41px; margin-left: -15px;
  background: var(--gray-800);
}.sec-qt .hop.su-step:not(:last-child)::after{
  width: 14px; height: 10px; top: -39px; margin-left: -7px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2740%27%20height=%2728%27%20viewBox=%270%200%2040%2028%27%3E%3Cpath%20d=%27M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%27%20fill=%27%23000%27/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2740%27%20height=%2728%27%20viewBox=%270%200%2040%2028%27%3E%3Cpath%20d=%27M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%27%20fill=%27%23000%27/%3E%3C/svg%3E") center / contain no-repeat;
}.sec-qt .hop.su-steps.is-on > .hop.su-step:not(:last-child)::before, .sec-qt .hop.su-steps.is-on > .hop.su-step:not(:last-child)::after{ opacity: 1 }

/* Điện thoại: một cột, trục ngang vô nghĩa nên bỏ, chấm về đúng dòng chảy. */
@media (max-width: 767px) {.sec-qt .hop.su-steps{ padding-top: 0 }.sec-qt .hop.su-steps::before, .sec-qt .hop.su-steps::after{ content: none }.sec-qt .su-sec .su-step__n, .sec-qt .hop.su-step .su-step__n{ position: static; order: -2 }/* Phải bằng bậc với luật bật nó ở trên, tức (1,3,0) kèm :not(:last-child).
     Viết trần (0,3,0) thì thua, dấu vẫn hiện và trôi lung tung khi một cột. */ .sec-qt .hop.su-step:not(:last-child):not(#su)::before, .sec-qt .hop.su-step:not(:last-child):not(#su)::after{ content: none }
}/* Chữ theo thang xám của bộ chuẩn, không dùng trắng cho mọi thứ.
   PHẢI kèm `:not(#su)` và phải nhắm `.elementor-heading-title`: trên trang chủ
   mỗi tiêu đề là một widget, Elementor sinh luật màu riêng theo mã phần tử với
   độ nặng (0,4,0). Viết `.sec-qt h2` chỉ được (0,1,1) nên thua, và tiêu đề giữ
   nguyên màu than chì - tức than chì trên nền than chì, tương phản 1,00, vô
   hình. Đo ra 09/10/2026. Đây là lần thứ tư cùng một bẫy. */
.sec-qt .su-sec__k:not(#su), .sec-qt .su-sec__k > :is(h1,h2,h3,h4,h5,h6,p,div,span,a):not(#su){ color: var(--accent) }.sec-qt h2:not(#su), .sec-qt h3:not(#su), .sec-qt h4:not(#su), .sec-qt b:not(#su), .sec-qt strong:not(#su), .sec-qt h2 > :is(h1,h2,h3,h4,h5,h6,p,div,span,a):not(#su), .sec-qt -heading > :is(h1,h2,h3,h4,h5,h6,p,div,span,a):not(#su){ color: var(--gray-0) }.sec-qt p:not(#su), .sec-qt li:not(#su), .sec-qt small:not(#su), .sec-qt -text-editor:not(#su), .sec-qt -text-editor p:not(#su){ color: var(--gray-300) }/* Vàng cho nhãn khối và số bước. PHẢI viết SAU luật trắng ở trên: hai luật
   cùng độ nặng (1,3,0) nên cái viết sau thắng. Lần đầu tôi để trước nên nhãn
   "Quy trình" và số 01 đều hóa trắng. */
.sec-qt .su-sec__k > :is(h1,h2,h3,h4,h5,h6,p,div,span,a):not(#su), .sec-qt .su-step__n > :is(h1,h2,h3,h4,h5,h6,p,div,span,a):not(#su){ color: var(--accent) }/* Dòng "Ngày 0" là chú thích, cho xám nhạt hơn thân */
.sec-qt .su-step__dur > :is(h1,h2,h3,h4,h5,h6,p,div,span,a):not(#su){ color: var(--gray-400, #8A919B) }/* Thẻ bước: bề mặt nhạt hơn nền một bậc, viền mờ */
.sec-qt .su-buoc, .sec-qt .su-sec__hang + * > .hop{ background: var(--gray-700); border-color: var(--gray-600) }/* ===================================================================
 * KHỐI NỀN MÓNG - PHƯƠNG ÁN T6, Dũng chốt 10/10/2026.
 *
 * Dấu mốc là CHÍNH BIỂU TƯỢNG SiteUp (`kv-cap` của bộ chuẩn: hai chevron
 * của logo), phóng 320px, dạng nét, neo ở khoảng trống bên phải tiêu đề.
 *
 * Vì sao chọn chỗ này: đo ra vùng x 760 đến 1440, y 0 đến 244 không có một
 * chữ nào - tiêu đề chỉ rộng 640. Phần dưới của dấu rơi sau lưới thẻ, mà thẻ
 * nền trắng ĐỤC nên che hết, đúng điều kiện hoa văn sống được (sổ tay mục
 * 50). Không chạm một chữ nào.
 *
 * DẠNG NÉT có sẵn, không phải làm gì thêm: `kv-cap.svg` khai `fill="none"
 * stroke="currentColor"`, mà mặt nạ chỉ đọc kênh alpha - chỗ nào không có
 * nét thì trong suốt. Nên mặt nạ của một hình chỉ-có-nét cho ra đúng nét.
 *
 * Ba đợt trước tôi đổi màu nền sáu lần mà không mở `tokens/keyvisual.css`
 * ra xem bộ chuẩn đã cho sẵn gì. Xem sổ tay mục 58.
 * =================================================================== */
.sec-nm .su-sec__hang{ position: relative }.sec-nm .su-sec__hang::after{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 320px; aspect-ratio: 1; right: 0; top: -24px;
  background: var(--gray-800); opacity: .12;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2248%22%20height=%2248%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%20vector-effect=%22non-scaling-stroke%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20d=%22M36.94%201.93L2.06%2014L36.94%2026.07L39.06%2019.93L21.94%2014L39.06%208.07Z%22%3E%3C/path%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20d=%22M8.94%2028.07L26.06%2034L8.94%2039.93L11.06%2046.07L45.94%2034L11.06%2021.93Z%22%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2248%22%20height=%2248%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%20vector-effect=%22non-scaling-stroke%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20d=%22M36.94%201.93L2.06%2014L36.94%2026.07L39.06%2019.93L21.94%2014L39.06%208.07Z%22%3E%3C/path%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20d=%22M8.94%2028.07L26.06%2034L8.94%2039.93L11.06%2046.07L45.94%2034L11.06%2021.93Z%22%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}/* Chữ phải nằm trên dấu. Hàng tiêu đề là con của một khối `kv`? Không, nhưng
   vẫn khai z-index cho chắc: Elementor hay đặt `position` cho con, và con
   không khai z-index thì thứ tự vẽ quyết định - đúng cái bẫy đã dính ở chấm
   số khối Quy trình (sổ tay mục 57). */
.sec-nm .su-sec__hang > *{ position: relative; z-index: 1 }

/* Dưới 1024 vùng trống bên phải tiêu đề hẹp lại, dấu 320px sẽ đè lên chữ.
   Thu nhỏ rồi bỏ hẳn. */
@media (max-width: 1023px) {.sec-nm .su-sec__hang::after{ width: 200px; top: -8px } }
@media (max-width: 767px)  {.sec-nm .su-sec__hang::after{ content: none }
/* ĐÓNG KHỐI @media CUỐI TỆP - bộ dịch đánh rơi dấu đóng.
 * Thiếu nó, trình duyệt gói phần còn lại của tệp vào khối @media ấy.
 * Dính 19/10/2026, cùng họ với lỗi ở 04-khoac.css. */
}