/* 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. */
/* ===================================================================
 * BỘ KHOÁC ELEMENTOR
 *
 * Khoác dáng bộ chuẩn lên widget GỐC của Elementor, để khách sửa được
 * bằng cách bấm thẳng vào chữ và ảnh, không phải mở widget HTML.
 *
 * VIẾT MỘT LẦN, DÙNG CHO MỌI DỰ ÁN. Tệp này không chứa một giá trị nào,
 * chỉ chứa tên biến. Dự án mới chỉ cần nạp tokens.css của dự án đó.
 *
 * Hợp đồng với bên thiết kế hệ thống: 38 tên token dưới đây phải giữ
 * nguyên tên qua mọi bản. Giá trị đổi thoải mái.
 *   màu     --primary --primary-hover --primary-active --primary-text
 *           --accent --accent-hover --accent-active --accent-text
 *           --accent-subtle --accent-glow
 *           --text --text-2 --text-3 --bg --surface --surface-sunken
 *           --border --border-strong --border-control --border-focus
 *   hình    --control-h --control-h-sm --control-h-lg
 *           --radius-sm --radius-lg --radius-pill
 *           --border-w --border-w-thin --touch-min
 *           --shadow-1 --shadow-2 --space-3 --space-4 --space-6
 *   chữ     --font-ui --font-mono
 *   động    --dur --ease
 *
 * Quy ước đặt lớp: lấy tên thành phần của bộ chuẩn, thêm tiền tố `e-`.
 * Thành phần `.su-btn--accent` thì lớp đặt lên vỏ widget là `e-su-btn--accent`.
 * Tiền tố tránh đụng với chính CSS thành phần trong thanh-phan.css.
 * =================================================================== */ /* ---------- NÚT: widget `button` ---------- */ .e-su-btn > a{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-h); padding: 0 20px;
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-pill);
  /* transform dung --dur-fast (120ms), khong phai --dur (200ms).
     Chep dung tu components/core/Button.jsx. Sai cho nay thi nut nhac len
     cham hon ban mau gan gap doi, mat mat thay ngay du trang thai cuoi giong. */
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}.e-su-btn > a:active{ transform: translateY(1px); }.e-su-btn > a:focus-visible{ outline: 2px solid var(--border-focus); outline-offset: 2px; }.e-su-btn--sm > a{ height: var(--control-h-sm); padding: 0 14px; }.e-su-btn--lg > a{ height: var(--control-h-lg); padding: 0 28px; }.e-su-btn--primary > a{
  background: var(--primary); color: var(--primary-text); border-color: var(--primary);
}.e-su-btn--primary > a:hover{
  background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-text);
}.e-su-btn--primary > a:active{ background: var(--primary-active); }.e-su-btn--accent > a{
  background: var(--accent); color: var(--text-on-accent); border-color: var(--accent);
  box-shadow: var(--accent-glow);
}.e-su-btn--accent > a:hover{
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent);
  /* Bo chuan chua co --accent-glow-hover va --accent-glow-active (da ghi vao
     danh sach gui DS). Dung bien co gia tri du phong: du an nao khai thi lay,
     khong khai thi roi ve --accent-glow. */
  box-shadow: var(--accent-glow-hover, var(--accent-glow)); transform: translateY(-1px);
}.e-su-btn--accent > a:active{
  background: var(--accent-active); box-shadow: var(--accent-glow-active, var(--shadow-1)); transform: translateY(0);
}.e-su-btn--secondary > a{
  background: transparent; color: var(--text); border-color: var(--border-strong);
}.e-su-btn--secondary > a:hover{
  background: var(--primary); border-color: var(--primary); color: var(--primary-text);
}/* trên nền tối: rê chuột ĐẢO thành nền sáng chữ tối */
.e-su-btn--on-dark.e-su-btn--secondary > a{
  color: var(--surface); border-color: var(--text-3);
}.e-su-btn--on-dark.e-su-btn--secondary > a:hover{
  background: var(--surface); border-color: var(--surface); color: var(--primary);
}.e-su-btn--on-dark > a:focus-visible{ outline-color: var(--surface); }/* ---------- HUY HIỆU và HÀNG BẰNG CHỨNG: widget `icon-list` ---------- */ .e-su-badges > ul{ display: flex; flex-wrap: wrap; gap: 8px; }.e-su-badges li{
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-weight: var(--fw-medium);
  font-size: var(--text-label); line-height: var(--lh-label);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  white-space: nowrap; border: var(--border-w-thin) solid transparent;
}/* co lon: thanh phan Badge dat height 26 va font 12 cho --lg */
.e-su-badges--lg li{ height: 26px; padding: 0 10px; }/* Elementor dat font-size rieng cho the <span> ben trong, nen no KHONG thua huong
   co chu cua <li>. Khong ep inherit thi huy hieu rong them 27px. */
/* Elementor dat kieu chu cho the <span> bang bo chon
   `.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text`,
   do cu the 0,3,0. Lop khoac tran chi 0,2,0 nen THUA. Phai ghep them
   `.elementor-widget-icon-list` de len 0,4,0.
   Day la luat chung: moi quy tac cham vao BEN TRONG widget deu phai ghep
   voi `.elementor-widget-<loai>`. */
.e-su-badges li > span, .e-su-tr li > span{
  font-size: inherit; letter-spacing: inherit; line-height: inherit;
  font-weight: inherit; font-family: inherit;
  /* `color: inherit` la BAT BUOC: widget icon-list cua Elementor co mau chu
     mac dinh la mau toan cuc Secondary (#E9A21A). Bo dong nay la chu huy hieu
     ra vang thay vi theo mau cua tung <li>. */
  color: inherit;
}.e-su-tr > ul{
  display: flex; flex-wrap: wrap; gap: 12px 20px;
  margin: 0;
}/* Elementor xep icon-list kieu `inline` bang le am tren <ul> va le 8px tren
   tung <li>. Dung `gap` roi thi phai xoa ca hai, khong thi khoi rong ra 16px. */
/* Le cua Elementor dat bang bo chon 0,4,0:
   `.elementor-widget-icon-list .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item`
   nen phai ghep du ca `.elementor-inline-items` moi len 0,5,0 va thang duoc. */
.e-su-tr > ul, .e-su-badges > ul{ margin: 0; }.e-su-tr > ul li, .e-su-badges > ul li{ margin: 0; }.e-su-tr li{
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-2);
}.e-su-tr li::before{ content: ""; width: 16px; height: 16px; flex: none; }.e-su-tr--on-dark li{ color: var(--text-3); }/* ---------- THẺ: container mang lớp ---------- */ .e-su-card{
  background: var(--surface);
  border: var(--border-w-thin) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}.e-su-card--sunken{ background: var(--surface-sunken); box-shadow: none; }/* ---------- ẢNH: widget `image` ---------- */ .e-su-img img{ border-radius: var(--radius-lg); display: block; }.e-su-img--16-10 img{ aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }/* ---------- Ô NHẬP: Fluent Forms ----------
 * CSS cua Fluent Forms nap o CUOI trang, sau moi doan CSS o <head>, va bo
 * chon cua no la `.ff-default .ff-el-...` (0,3,0). Muon thang phai ghep them
 * `.ff-default` cho len 0,4,0 - khong phai vi thich dai dong.
 *
 * Chép từ `components/core/Input.jsx`. Bản đầu của bộ khoác viết theo trí nhớ
 * (bo tròn viên thuốc, chữ đậm cỡ nút) nên sai hẳn: ô nhập của bộ chuẩn bo
 * 12px và dùng chữ thường 16px. Sửa 22/09/2026 khi dựng biểu mẫu đầu tiên.
 */ /* Fluent Forms cho san sau bien de chinh. Dung dung chung, khoi phai dua do
   cu the: chieu cao o chon nam o `select.ff-el-form-control:not([size])...`
   (0,3,1), khong bo chon hai lop nao thang duoc. */
.e-su-form{
  --fluentform-input-select-height: var(--control-h);
  --fluentform-border-color: var(--border-control);
  --fluentform-border-radius: var(--radius);
  --fluentform-primary: var(--accent);
  --fluentform-danger: var(--danger);
}.e-su-form .ff-default .ff-el-input--label label{
  display: block; margin: 0 0 6px;
  font-family: var(--font-ui); font-weight: var(--fw-medium);
  font-size: 14px; line-height: 1.3; color: var(--text);
}/* Dau sao bat buoc. Fluent Forms viet `content: " *"` (co dau cach) mau do,
   bo chuan viet `*` sat chu, mau `--accent-text`. Bo chon cua no la
   `.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after`
   = 0,4,1 - phai ghep du bang ay lop roi them `.e-su-form` moi de len. */
.e-su-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after{
  content: "*"; color: var(--accent-text); margin-left: 2px;
}.e-su-form .ff-default .ff-el-input--content{ position: relative; }.e-su-form .ff-default input[type=text], .e-su-form .ff-default input[type=email], .e-su-form .ff-default input[type=tel], .e-su-form .ff-default select, .e-su-form .ff-default textarea{
  width: 100%; height: var(--control-h); padding: 0 14px;
  border: var(--border-w) solid var(--border-control);
  border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font-family: var(--font-ui); font-weight: 400; font-size: 16px; line-height: 1.3;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  appearance: none; -webkit-appearance: none;
}.e-su-form .ff-default ::placeholder{ color: var(--text-3); opacity: 1; }.e-su-form .ff-default :is(input, select, textarea):hover{ border-color: var(--text-2); }.e-su-form .ff-default :is(input, select, textarea):focus{
  outline: none; border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-ring);
}.e-su-form .ff-default textarea{ height: auto; min-height: 112px; padding: 12px 14px; resize: vertical; line-height: 1.5; }.e-su-form .ff-default select{
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F666E' stroke-width='2'%3E%3Cpath d='M5 9l7 5 7-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}/* Dòng gợi ý dưới ô nhập, tương đương `.su-field__msg`. */
/* Fluent Forms de dong goi y IN NGHIENG; bo chuan de chu thuong. */
.e-su-form .fluentform .ff-el-help-message{
  margin: 6px 0 0;
  font-family: var(--font-ui); font-weight: 400; font-style: normal;
  font-size: 13px; line-height: 1.4; color: var(--text-3);
}.e-su-form .ff-default .ff-el-is-error .ff-el-form-control{ border-color: var(--danger); }.e-su-form .ff-default .text-danger, .e-su-form .ff-default .error_text{
  font-family: var(--font-ui); font-size: 13px; line-height: 1.4; color: var(--danger);
}/* Mũi tên bên phải, cho biến thể có `iconRight`.
   ĐẶT TRÊN `.elementor-button-content-wrapper`, KHÔNG đặt trên
   `.elementor-button-text`. Wrapper là flex, nên ::after thành phần tử anh em
   của chữ, đúng như `.su-btn__ir` trong bản mẫu.
   Đặt nhầm vào trong thẻ chữ thì mũi tên 28px kéo cao dòng lên 28px và chữ bị
   đẩy lên 1,2px. Đo ngày 22/09/2026 bằng Range trên node văn bản. */
.e-su-btn > a{
  display: flex; align-items: center; justify-content: center; gap: 8px;
}/* `.su-btn__lbl` của bản mẫu có `padding: 1px 0`, chép lại cho khớp chiều cao */
/* Mui ten mac dinh la mui ten TRAN, to theo mau chu cua nut, nen ve bang
   `mask` de doi mau duoc. Chi bien the vang moi khoanh mui ten trong dia tron
   (`.su-btn--accent .su-btn__ir` trong bo chuan) - va dia tron thi khong the
   dung mask, vi mask cat het ca dia. */
.e-su-btn--mui-ten ::after{
  content: "";
  display: block; flex: none;
  width: 20px; height: 20px;
  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 / 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='M5 12h14' /> <path d='m12 5 7 7-7 7' /></svg>") center / 20px 20px no-repeat;
  transition: transform var(--dur) var(--ease);
}/* Bieu tuong dien thoai cua nut goi tren header. Bo chuan ve bang the <svg>
   noi dong ben trong nut; widget Button cua Elementor khong nhan svg noi dong,
   nen ve bang mask y het mui ten o tren, va dat ::before vi bieu tuong nam
   TRUOC chu. Thieu no thi nut hep hon ban mau dung 28px: 20 cua bieu tuong
   cong 8 cua khe. Do duoc ngay 03/10/2026 luc dung lai moc do sau khi doi
   khung - truoc do khong phep do nao phu phan nay cua header. */
.su-hd__phone ::before{
  content: "";
  display: block; flex: none;
  width: 20px; height: 20px;
  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='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;
}/* Đĩa màu trên các trang con, cùng quyết định với khối ngay dưới. 06/10/2026.
   Lần sửa đầu tôi chỉ bỏ đĩa ở phần tử giả `::after` của nút Elementor, nên
   trang chủ sạch mà BỐN mũi tên trên /bang-gia/ và /mau-giao-dien/ vẫn còn đĩa.
   Dũng ghim lại: "Mình có nói sửa tất cả toàn bộ website sao đây vẫn còn".

   Lý do sót: trang con dựng từ HTML rút của bản mẫu, nên mũi tên ở đó là thẻ
   `<svg>` THẬT, đĩa do luật `.su-btn--accent .su-btn__ir` của bộ chuẩn vẽ -
   một cơ chế khác hẳn. Phép soát của tôi chỉ nhìn `::after` nên không thấy.

   Phải trả `color` về `inherit`: bộ chuẩn đặt `color: var(--accent)` cho mũi
   tên để nó nổi trên nền đĩa sẫm. Bỏ đĩa mà giữ màu đó là mũi tên vàng nằm
   trên nút vàng, mất hút.

   Đè ở đây chứ không sửa `thanh-phan.css`, vì tệp đó là bản chép của bộ chuẩn,
   rút lại từ các tệp .jsx mỗi lần có bản mới. */
.su-btn.su-btn--accent .su-btn__ir{
  background: none; border-radius: 0; padding: 0; color: inherit;
}/* Bo DIA MAU sau mui ten, 06/10/2026 theo gop y cua Dung: "Toan bo cac CTA can
   loai bo dia mau cua icon". Dung se bao lai cho ben thiet ke bo chuan.

   Truoc do nut nhan co mui ten nam trong mot dia tron mau --text-on-accent, ve
   bang hai lop mask ghep `mask-composite: exclude`. Bo han ca khoi do; luat goc
   o tren tu ap tro lai: mot lop mask hinh mui ten, to bang `currentColor`, tuc
   mui ten mang dung mau chu cua nut.

   Ban mau VAN CON dia, nen cho nay ban dung co y lech khoi ban mau. */ .e-su-btn--lg.e-su-btn--mui-ten ::after{
  width: 22px; height: 22px; background-size: 22px 22px;
  -webkit-mask-size: 22px 22px; mask-size: 22px 22px;
}.e-su-btn--sm.e-su-btn--mui-ten ::after{
  width: 16px; height: 16px; background-size: 16px 16px;
  -webkit-mask-size: 16px 16px; mask-size: 16px 16px;
}.e-su-btn--mui-ten > a:hover ::after{ transform: translateX(3px); }/* ---------- THANH HEADER ---------- */
/* Container ngoai cung cung an dem cua Kit, cong voi dem cua .su-hd__in
   thanh dem hai lan. Ban mau khong dat dem nao tren .su-hd. */
.hop.e-su-hd{ position: sticky; top: 0; z-index: var(--z-header); padding: 0; }.hop.e-su-hd__in{
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--margin);
  height: var(--header-h);
  gap: 24px;
  transition: height var(--dur) var(--ease);
}.e-su-hd--compact .hop.e-su-hd__in{ height: var(--header-h-compact); }/* Elementor co HAI quy tac ep kich thuoc anh:
     `.elementor-widget-image img { width: 100% }`            0,2,0
     `.elementor-widget-image a img[src$=".svg"] { width:48px }` 0,2,2  <= cai nay
   Cai thu hai ep MOI logo SVG nam trong anh co lien ket ve 48px.
   Phai ghep du lop khoac VA bo chon thuoc tinh moi vuot duoc. */
.e-su-hd__logo img, .e-su-hd__logo a img[src$=".svg"]{
  height: 32px; width: auto; max-width: none;
  transition: height var(--dur) var(--ease);
}.e-su-hd--compact .e-su-hd__logo img, .e-su-hd--compact .e-su-hd__logo a img[src$=".svg"]{ height: 26px; }
/* Moc doi co logo cua bo chuan la 768, KHONG phai 1024.
   Phai lap lai du bo chon cua quy tac nen, neu khong se thua do cu the. */
@media (max-width: 767px) {.e-su-hd__logo img, .e-su-hd__logo a img[src$=".svg"]{ height: 28px; }
}/* Container Elementor mac dinh `width: 100%`. Trong mot hang flex thi khoi
   nut chiem tron 1120px, ep logo va dieu huong con 0px. Phai tra ve `auto`. */
.hop.e-su-hd__acts{
  gap: 8px; margin-left: auto; padding: 0;
  width: auto; flex: 0 0 auto;
}.e-su-hd__logo{ width: auto; flex: 0 0 auto; }/* KHONG dat `display: flex` len vo widget. Elementor cho ba con vao day:
   nav chinh, nut ba gach, va ngan keo. Bien vo thanh flex la ngan keo tro
   thanh phan tu flex chiem 147px va day nut ba gach sang trai.
   Vo giu `block`, chi con ben trong moi xep hang. */
.e-su-nav{ flex: 1; min-width: 0; height: 100%; }/* KHONG an widget dieu huong o dien thoai. Elementor tu doi sang nut ba gach
   va ngan keo ben trong chinh widget do, o dung moc tablet 1023. An ca widget
   la mat luon nut ba gach. Ban mau dung co che khac: an nav, hien mot nut rieng. */ /* ---------- NUT GOI: bien the ghost co bieu tuong dien thoai ---------- */
.e-su-btn--ghost > a{
  background: transparent; color: var(--text); border-color: transparent;
}.e-su-btn--ghost > a:hover{ background: var(--accent-subtle); color: var(--accent-text); }/* Bieu tuong dien thoai ve bang `mask` de to theo mau chu cua nut: nut ma
   (nen xanh, chu trang) va nut trong suot o header dung chung mot quy tac. */
.e-su-btn--dien-thoai ::before{
  content: ""; display: block; flex: none;
  width: 18px; height: 18px;
  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='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 / 18px 18px 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 / 18px 18px no-repeat;
}/* Co `lg` cua bo chuan dung bieu tuong 22px (iconSize = size==='lg' ? 22 : 20). */
.e-su-btn--lg.e-su-btn--dien-thoai ::before, .e-su-btn--lg.e-su-btn--zalo ::before{
  width: 22px; height: 22px;
  -webkit-mask-size: 22px 22px; mask-size: 22px 22px;
}/* ---------- NUT GOI: lop phu `e-su-btn--goi` ----------
 * 24/09/2026: lop nay KHONG con dat mau nua, chi con dat CO BIEU TUONG.
 *
 * Truoc do no to nen xanh la `--green-600`. Dung bao "xanh la dang lac khoi
 * style nhieu qua"; truy ra goc thi `--green-600` CHINH LA `--success` trong
 * tokens.css - nut goi dang muon dung mau thanh cong, vua lac bang nhan dien
 * (ho phach, than chi, kem) vua lan nghia.
 *
 * Luat moi: nut goi khong bao gio mau xanh la. Mau lay theo ngu canh, bang
 * mot lop mau RIENG dat kem:
 *     dung mot minh trong khoi   -> them `e-su-btn--accent`   (vang)
 *     dung canh mot nut vang khac-> them `e-su-btn--secondary` (vien)
 * Bo chuan quy dinh toi da mot nut vang moi vung nhin, nen khoi nao da co nut
 * gui bieu mau mau vang thi nut goi phai nhuong.
 * Da bao thanh viec 31 trong bao-nguoc-cho-ds.md. */
/* Co `md` cua bo chuan dung bieu tuong 20px, khong phai 18px nhu o header. */
.e-su-btn--goi ::before{
  width: 20px; height: 20px;
  -webkit-mask-size: 20px 20px; mask-size: 20px 20px;
}

/* ---------- HEADER Ở ĐIỆN THOẠI ----------
 * Bộ chuẩn: dưới 1024px ẩn nút gọi và nút CTA, chỉ còn logo với nút ba gạch
 * nằm bên phải. Elementor đặt nút ba gạch BÊN TRONG widget điều hướng, nên
 * phải đẩy cả widget sang phải thay vì đẩy riêng cái nút.
 */
@media (max-width: 1023px) {.e-su-hd__acts{ display: none; }/* Widget dieu huong chi rong bang nut ba gach, va nam sat mep phai.
     `.elementor-widget-container` ben trong cung phai co dinh rong, khong thi
     nut bi day sang trai boi vung chua ngan keo. */ .e-su-nav{ flex: 0 0 auto; margin-left: auto; width: auto; position: relative; }
}
/* ĐÓNG KHỐI @media Ở TRÊN - dich-lop-khoac.py đánh rơi dấu đóng.
 * Hai luật cuối của khối (`.elementor-nav-menu--dropdown` và
 * `.elementor-menu-toggle`) không dịch được nên bị bỏ, và bộ dịch bỏ luôn
 * dấu `}`. Mọi luật từ đây đến cuối tệp bị gói vào `max-width:1023px`, nên
 * ở màn hình máy tính CHẾT HẾT: nền nút Zalo, biểu tượng ::before của nút,
 * huy hiệu, mũi tên... Nút Zalo hẹp 36px, nút gọi hẹp 19px, cột lưới chân
 * trang sai 167px. Ngoặc khớp mà hình vẽ ra khác. Dính 19/10/2026. *//* ---------- NÚT TRẢI HẾT BỀ NGANG: lớp phụ `e-su-btn--rong` ----------
   Elementor 4.2 KHÔNG còn `.elementor-button-wrapper`: thẻ `<a class="elementor-button">`
   là con trực tiếp của vỏ widget. Viết quy tắc cho lớp bọc đó là viết CSS chết. */
.e-su-btn--rong > a{ width: 100%; }/* ---------- HUY HIỆU ĐƠN: widget `heading` đặt thẻ `span` ----------
   Khác `e-su-badges` (nhiều huy hiệu, dùng `icon-list`): đây là một cái.
   Vỏ widget phải là `flex`, không để mặc định `block`. Để `block` thì thẻ
   `span` nằm trên một dòng chữ, và dòng đó cao theo `line-height` của vỏ
   (25,6px) chứ không theo huy hiệu (22px): huy hiệu tụt 2,1px và thẻ cao thêm 0,6px. */
.e-su-badge{ display: flex; }.e-su-badge > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border: var(--border-w-thin) solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-weight: var(--fw-medium);
  font-size: var(--text-label); line-height: var(--lh-label);
  text-transform: uppercase; letter-spacing: var(--ls-caps); white-space: nowrap;
}/* Huy hieu la he BIEN THE giong nut: mau nam o day, khong dua vao Global
   Styles (xem muc 22.5). Co chu thi lay preset `label`. */
.e-su-badge--accent > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ background: var(--accent); color: var(--text-on-accent); }.e-su-badge--new > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ background: var(--info-subtle); color: var(--info); border-color: var(--info-border); }.e-su-badge--accent-soft > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ background: var(--accent-subtle); color: var(--accent-text); border-color: var(--accent-ring); }/* ---------- NGẮT DÒNG CỦA TIÊU ĐỀ ----------
 * Bản trước của mục này đặt `text-wrap: auto` cho MỌI tiêu đề và MỌI đoạn
 * văn. Sai. Chính bộ chuẩn đặt `text-wrap: pretty` cho `h1..h6` và cho `p`
 * (xem `siteup-ds/tokens/base.css`), nên bản mẫu HTML cũng dùng `pretty` ở
 * những chỗ đó. Chỉ những chỗ bản mẫu dùng `<div>` hoặc `<span>` mới là `auto`.
 *
 * Nghĩa là: đừng chữa bằng CSS, hãy **dựng đúng loại thẻ**. Bản mẫu để tiêu
 * đề thẻ trong `<div>` thì widget heading cũng phải đặt `header_size = div`;
 * lúc đó quy tắc `h1..h6` không với tới và cách ngắt dòng tự khớp.
 */ /* ---------- NÚT <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='M7.9 20A9 9 0 1 0 4 16.1L2 22Z' /></svg>: lớp phụ `e-su-btn--zalo` ----------
   Biểu tượng trái vẽ bằng `mask` để tô theo màu chữ của nút. */
.e-su-btn--zalo > a{ background: var(--zalo); color: #fff; border-color: var(--zalo); }.e-su-btn--zalo > a:hover{ background: var(--zalo-hover); border-color: var(--zalo-hover); color: #fff; }.e-su-btn--zalo ::before{
  content: ""; display: block; flex: none; width: 20px; height: 20px;
  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='M7.9 20A9 9 0 1 0 4 16.1L2 22Z' /></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='M7.9 20A9 9 0 1 0 4 16.1L2 22Z' /></svg>") center / 20px 20px no-repeat;
}/* ---------- NÚT DÙNG LÀM LIÊN KẾT: gỡ dáng nút của Kit ----------
 * Kit của Elementor tô nền và bo góc viên thuốc cho MỌI `button` và
 * `a.elementor-button` ở cả `:hover` LẪN `:focus`:
 *
 *   .elementor-kit-7 a.elementor-button:hover,
 *   .elementor-kit-7 a.elementor-button:focus { background: var(--primary-hover); border-radius: 999px }
 *
 * Độ cụ thể 0,3,1 - cao hơn mọi quy tắc hai lớp của bộ khoác. Hai chỗ dùng
 * widget nút để làm LIÊN KẾT (câu hỏi hỏi đáp, "So sánh chi tiết 4 gói")
 * vì thế bị dán một viên thuốc than chì.
 *
 * `:focus` mới là cái khó thấy: rê chuột thì chỉ nhấp nháy, nhưng BẤM xong
 * thẻ giữ focus nên viên thuốc BÁM LẠI kể cả khi chuột đã rời đi. Đó đúng là
 * lỗi Dũng chụp được ngày 22/09/2026.
 *
 * Phải ghép đủ `.e-con` hoặc lớp cha cộng `a.elementor-button` cho lên 0,4,1.
 */
.hop .e-su-faq__q aa, .hop .e-su-faq__q a:focus, .hop .e-su-more aa, .hop .e-su-more a:focus{
  background: none; border-radius: 0; box-shadow: none; color: var(--text);
}/* Elementor cho nut chuyen mau trong 0,3s. Hai cho nay khac nhau:
   - cau hoi hoi dap la the <button> tran, doi mau TUC THI
   - "So sanh chi tiet" la the <a>, bo chuan cho no `transition: color`
     200ms theo quy tac `a { }` trong base.css
   Do trang thai sau khi bam moi lo ra, xem muc 24.3. */
.hop .e-su-faq__q aa{ transition: all 0s; }.hop .e-su-more aa{
  display: inline-flex;
  transition: color var(--dur) var(--ease);
}.hop .e-su-faq__q aa:hover, .hop .e-su-more aa:hover{
  background: none; border-radius: 0; box-shadow: none; color: var(--accent-text);
}/* ===================================================================
 * BẤM XONG NÚT KHÔNG ĐƯỢC ĐỔI NỀN
 *
 * Kit của Elementor sinh ra một luật gộp cả hai trạng thái:
 *
 *   .elementor-kit-7 a.elementor-button:hover,
 *   .elementor-kit-7 a.elementor-button:focus { background: var(--primary-hover) }
 *
 * Độ cụ thể (0,3,1). Luật rê chuột của từng biến thể ở trên chỉ (0,2,0),
 * nhưng chúng khai `:hover` nên không đụng nhau. `:focus` thì KHÔNG có luật
 * nào của bộ khoác đối lại, nên bấm xong - chuột đã rời đi - mọi nút đều
 * chuyển sang nền #33383E: nút vàng, nút gọi xanh lá, nút Zalo xanh lam,
 * nút viền, tất cả.
 *
 * Đo ngày 22/09/2026 trên trang chủ đang chạy: cả bốn biến thể đều dính.
 * Cùng họ với lỗi mục 24.3, lần đó chỉ vá hai nút dạng liên kết.
 *
 * Cách chữa: khai lại đúng trạng thái NGHỈ cho `:focus:not(:hover)`.
 *   .e-su-btn--zalo a.elementor-button:focus:not(:hover)
 *   = (0,4,1) > (0,3,1), thắng không phụ thuộc thứ tự nạp tệp.
 * `:not(:hover)` để lúc vừa bấm vừa rê vẫn ra màu rê chuột.
 * Viền lấy nét vẫn còn: nó là `outline`, không phải `background`.
 * =================================================================== */ .e-su-btn--primary a:focus:not(:hover){
  background: var(--primary); border-color: var(--primary); color: var(--primary-text);
}.e-su-btn--accent a:focus:not(:hover){
  background: var(--accent); border-color: var(--accent); color: var(--text-on-accent);
  box-shadow: var(--accent-glow); transform: none;
}.e-su-btn--secondary a:focus:not(:hover){
  background: transparent; border-color: var(--border-strong); color: var(--text);
}.e-su-btn--on-dark.e-su-btn--secondary a:focus:not(:hover){
  background: transparent; border-color: var(--text-3); color: var(--surface);
}.e-su-btn--ghost a:focus:not(:hover){
  background: transparent; border-color: transparent; color: var(--text);
}.e-su-btn--zalo a:focus:not(:hover){
  background: var(--zalo); border-color: var(--zalo); color: #fff;
}/* Hai nút dạng liên kết: giữ nguyên chữ thường, không nền, không bo góc. */
.hop .e-su-faq__q a:focus:not(:hover), .hop .e-su-more a:focus:not(:hover){
  background: none; border-radius: 0; box-shadow: none; color: var(--text);
}/* ===== Mega menu cua muc "Mau giao dien", 05/10/2026 =====================
   Ban mau ket xuat bang mega CHI khi mo, nen khong can luat an. Tren WordPress
   bang luon nam trong trang de may tim kiem doc duoc va de khong phai dung
   bang bang JavaScript, nen phai an bang CSS. `display:none` thi phan tu ra
   khoi ca thu tu nhan tieu diem, khong can thuoc tinh `hidden`.

   Bo chon phai dai nhu duoi: luat nen cua bo khoac cho `a.elementor-item` o
   (0,4,1) va luat trang dang xem o (0,5,1). Viet ngan hon la thua lang le, dung
   bay da dinh hai lan: Fluent Forms ngay 05/10 va Kit truoc do. Luat duoi o
   (0,6,2). */
.su-hd__dd > .su-hd__panel{ display: none; }.su-hd__dd[data-mo="1"] > .su-hd__panel{ display: grid; }.su-hd__dd > a:hover .su-hd__caret, .su-hd__dd > a[aria-expanded="true"] .su-hd__caret{ color: var(--text); }.su-hd__dd > a[aria-expanded="true"] .su-hd__caret{ transform: rotate(180deg); }/* Hinh bieu tuong trong o 36px. Chi khai KHUNG o day; hinh ve lay tu chinh
   nhung luat mask `.nganh-<slug> .e-con.su-ind__ic::before` cua trang-chu.css,
   da them bo chon cua bang mega vao danh sach bo chon cua chung. Nho vay 12
   hinh lucide chi co MOT ban trong du an. */
.su-hd__panel a .ic::before{
  content: ""; display: block; width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 18px 18px; mask-size: 18px 18px;
}/* Gỡ `sticky` khỏi hộp bên trong: để hai tầng sticky lồng nhau thì tầng trong
   vẫn bị giới hạn trong hộp cha cao 73px, tức vẫn hỏng như cũ. */
.hop.e-su-hd{ position: static; }/* Ô tìm mẫu: chữ gợi ý đè lên biểu tượng kính lúp.
 *
 * Bộ chuẩn khai đúng `.su-input--icon{padding-left:40px}` để chừa chỗ cho biểu
 * tượng. Nhưng bộ khoác Elementor khai
 *   .elementor-kit-7 input:not([type="button"]):not([type="submit"]) {padding:14px}
 * nặng (0,3,1) so với (0,1,0) của bộ chuẩn, nên đệm tụt về 14px còn biểu tượng
 * nằm ở 12..30px: chữ bắt đầu từ 14 là chồng lên. Lỗi ở CẢ BỐN bề rộng đã đo,
 * không riêng màn rộng. Bản mẫu không dính vì nó không có bộ khoác Elementor.
 *
 * Dũng báo qua công cụ góp ý 06/10/2026. Đây là lỗi bản dựng, không báo cho DS.
 *
 * Lần đầu tôi viết `html body .su-input.su-input--icon` và VẪN thua: đó là
 * (0,2,2), mà so độ nặng thì đếm lớp TRƯỚC rồi mới tới tên thẻ, nên 2 lớp thua
 * 3 lớp dù có thêm hai tên thẻ. Phải dùng `:not(#su)` - mã `su` không tồn tại
 * nên nó không đổi phần tử nào khớp, chỉ cộng một bậc định danh: (1,2,0).
 */
.su-input.su-input--icon:not(#su){ padding-left: 40px }