/* 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. */
/* ===================================================================
 * Token bộ chuẩn SiteUp.
 *
 * GHÉP TỪ các tệp trong siteup-ds/tokens/, KHÔNG sinh từ tokens.json.
 *
 * Vì sao: tokens.json là ảnh chụp PHẲNG của :root, nên mất hết khối
 * @media. Bản sinh từ nó làm site chạy giá trị điện thoại trên máy tính:
 * lề 16px thay vì 40px, gutter 16 thay vì 24. Đo ngày 22/09/2026.
 *
 * Bỏ qua fonts.css: Elementor Custom Fonts lo phần @font-face, và đường
 * dẫn trong đó trỏ vào thư mục bộ chuẩn chứ không phải thư viện WordPress.
 *
 * keyvisual.css CÓ ghép, nhưng bốn mặt nạ SVG được nhúng thành data-URI vì
 * đường dẫn tệp của bộ chuẩn không giải ra trên WordPress. Khối đó do
 * wp/dung/mot-lan/nhung-keyvisual.py giữ, chạy lại mỗi bản DS mới.
 *
 * KHÔNG sửa tay. Bộ chuẩn có bản mới thì ghép lại.
 * =================================================================== */ /* ---------- tokens/colors.css ---------- */
:root{
/* ===== BASE — Vàng hổ phách 50–900 (500 = màu logo #E9A21A) ===== */
--amber-50:#FDF6E6;--amber-100:#FBEAC2;--amber-200:#F7DB94;--amber-300:#F2C65E;--amber-400:#EDB338;--amber-500:#E9A21A;--amber-600:#C98812;--amber-700:#8F5E00;--amber-800:#6B4600;--amber-900:#472E00;
/* ===== BASE — Trung tính: than chì (800 = #1E2226) → xám bạc (300 = #C9CED6) ===== */
--gray-0:#FFFFFF;--gray-50:#F4F5F7;--gray-100:#E9EBEF;--gray-200:#DDE0E5;--gray-300:#C9CED6;--gray-400:#A2A9B3;--gray-500:#5F666E;--gray-600:#4B5158;--gray-700:#33383E;--gray-800:#1E2226;--gray-900:#14171A;--gray-950:#0D0F11;
/* ===== BASE — Trạng thái (đỏ chỉ cho lỗi; không đỏ/hồng/tím làm màu chính) ===== */
--green-50:#E8F5EC;--green-100:#CDEAD6;--green-600:#146E3B;--green-700:#0F5A30;--green-300:#4CC57E;
--orange-50:#FDF0E3;--orange-100:#FADCBD;--orange-600:#9A4B07;--orange-700:#7A3B05;--orange-300:#F0A25A;
--red-50:#FBEAE7;--red-100:#F6CFC8;--red-600:#B9351E;--red-700:#8F2814;--red-300:#F0785F;
--blue-50:#E8F0FB;--blue-100:#CCDDF6;--blue-600:#1F5FBF;--blue-700:#174A96;--blue-300:#7FAEF5;
/* ===== BASE — Màu bổ trợ (pastel, cảm xúc): xanh xô thơm · xanh oải hương · hồng đào. 100/200 = nền khối; 300 = họa tiết/ô icon hover; 700 = chữ trên 100 (AA ≥4.9:1); 800 = chữ trên 200. KHÔNG dùng làm nút, link hay trạng thái. ===== */
--sage-50:#EEF5F1;--sage-100:#DCEBE3;--sage-200:#BFDACD;--sage-300:#8FB8A8;--sage-500:#4E8A74;--sage-700:#2F5E4D;--sage-800:#23463A;
--peri-50:#EFF2FA;--peri-100:#E0E6F4;--peri-200:#C9D3EC;--peri-300:#B8C4E0;--peri-500:#6E7FB8;--peri-700:#3F4E86;--peri-800:#2E3A66;
--peach-50:#FDF1EC;--peach-100:#FBE1D7;--peach-200:#F8CBBB;--peach-300:#F2B8A2;--peach-500:#D97A5C;--peach-700:#9B4A2F;--peach-800:#74371F;
--zalo:#0068FF;--zalo-hover:#0052CC;--zalo-text:#0068FF;/* chữ Zalo trên nền sáng 4.75:1; tối đổi sang #5C9BFF */

/* ===== VAI TRÒ — chế độ sáng =====
   nền: trang · bề mặt: thẻ, đầu trang · bề mặt-chìm: ô nhập vô hiệu, khối phụ, nền dải xám · viền: kẻ mảnh · viền-đậm: viền điều khiển
   chữ-chính · chữ-phụ (mô tả) · chữ-mờ (chú thích, placeholder — AA ≥4.8:1 trên mọi bề mặt sáng kể cả bề-mặt-chìm)
   nhấn: nền nút/chip vàng (chữ trên đó luôn than chì) · nhấn-chữ: chữ/link vàng trên nền sáng (#8F5E00, 5.6:1) · nhấn-nền-nhạt: nền ô icon, huy hiệu vàng nhạt */
--nen:#FBF8F2;/* kem ấm — nền trang sáng, ngả vàng nhạt; gray-50 chỉ cho dải phụ */--be-mat:var(--gray-0);--be-mat-chim:var(--gray-100);--vien:var(--gray-200);--vien-dam:var(--gray-300);--vien-dieu-khien:#8A919B;/* viền ô nhập/ô tích: 3.1:1 trên trắng (WCAG 1.4.11); xám bạc giữ cho thẻ, chip, nút viền */
--chu-chinh:var(--gray-800);--chu-phu:var(--gray-600);--chu-mo:var(--gray-500);
--nhan:var(--amber-500);--nhan-chu:var(--amber-700);--nhan-nen-nhat:var(--amber-50);
/* Bí danh tiếng Anh (dùng trong components) */
--bg:var(--nen);--bg-subtle:var(--be-mat-chim);--surface:var(--be-mat);--surface-2:var(--gray-50);--surface-sunken:var(--be-mat-chim);--surface-inverse:var(--gray-800);
--text:var(--chu-chinh);--text-2:var(--chu-phu);--text-3:var(--chu-mo);--text-inverse:var(--gray-50);--text-on-accent:var(--amber-900);/* nâu hổ phách đậm trên vàng: 5.75:1, cùng họ màu nên nút là một khối ấm, không phải nhãn cảnh báo */
--border:var(--vien);--border-strong:var(--vien-dam);--border-control:var(--vien-dieu-khien);--border-focus:var(--gray-800);
--accent:var(--nhan);--accent-hover:var(--amber-400);/* hover SÁNG lên, không tối đi */--accent-active:var(--amber-500);--accent-glow:0 8px 24px rgba(233,162,26,.35);--accent-text:var(--nhan-chu);--accent-subtle:var(--nhan-nen-nhat);--accent-ring:var(--amber-200);
--primary:var(--gray-800);--primary-hover:var(--gray-700);--primary-active:var(--gray-900);--primary-text:var(--gray-0);
/* Trạng thái: chữ/icon đậm + nền nhạt */
--success:var(--green-600);--success-subtle:var(--green-50);--success-border:var(--green-100);
--warning:var(--orange-600);--warning-subtle:var(--orange-50);--warning-border:var(--orange-100);
--danger:var(--red-600);--danger-subtle:var(--red-50);--danger-border:var(--red-100);
--info:var(--blue-600);--info-subtle:var(--blue-50);--info-border:var(--blue-100);
--link:var(--gray-800);--link-hover:var(--amber-700);
/* Sắc bổ trợ theo vai trò: nền khối section / ô icon (100) · họa tiết, hover (300) · chữ nhấn trên nền đó (700) */
--tint-sage:var(--sage-100);--tint-sage-strong:var(--sage-300);--tint-sage-text:var(--sage-700);
--tint-peri:var(--peri-100);--tint-peri-strong:var(--peri-300);--tint-peri-text:var(--peri-700);
--tint-peach:var(--peach-100);--tint-peach-strong:var(--peach-300);--tint-peach-text:var(--peach-700);
--overlay:rgba(30,34,38,.64);--scrim:linear-gradient(180deg,rgba(30,34,38,0) 40%,rgba(30,34,38,.72) 100%);/* @kind other */
color-scheme:light}/* ===== VAI TRÒ — chế độ tối ([data-theme="dark"] trên html/body hoặc một khối) ===== */
[data-theme="dark"]{
--nen:var(--gray-900);--be-mat:var(--gray-800);--be-mat-chim:var(--gray-950);--vien:var(--gray-700);--vien-dam:var(--gray-600);--vien-dieu-khien:#6E757E;--zalo-text:#5C9BFF;
--chu-chinh:var(--gray-50);--chu-phu:var(--gray-300);--chu-mo:var(--gray-400);
--nhan:var(--amber-500);--nhan-chu:var(--amber-300);--nhan-nen-nhat:rgba(233,162,26,.14);
--bg:var(--nen);--bg-subtle:var(--gray-800);--surface:var(--be-mat);--surface-2:var(--gray-700);--surface-sunken:var(--be-mat-chim);--surface-inverse:var(--gray-50);
--text:var(--chu-chinh);--text-2:var(--chu-phu);--text-3:var(--chu-mo);--text-inverse:var(--gray-800);--text-on-accent:var(--amber-900);
--border:var(--vien);--border-strong:var(--vien-dam);--border-control:var(--vien-dieu-khien);--border-focus:var(--gray-50);
--accent:var(--nhan);--accent-hover:var(--amber-400);--accent-active:var(--amber-500);--accent-glow:0 8px 24px rgba(233,162,26,.28);--accent-text:var(--nhan-chu);--accent-subtle:var(--nhan-nen-nhat);--accent-ring:var(--amber-700);
--primary:var(--gray-50);--primary-hover:var(--gray-0);--primary-active:var(--gray-200);--primary-text:var(--gray-800);
--success:var(--green-300);--success-subtle:rgba(23,122,65,.22);--success-border:rgba(76,197,126,.35);
--warning:var(--orange-300);--warning-subtle:rgba(180,90,10,.22);--warning-border:rgba(240,162,90,.35);
--danger:var(--red-300);--danger-subtle:rgba(185,53,30,.22);--danger-border:rgba(240,120,95,.35);
--info:var(--blue-300);--info-subtle:rgba(31,95,191,.22);--info-border:rgba(127,174,245,.35);
--link:var(--gray-50);--link-hover:var(--amber-300);
--tint-sage:rgba(78,138,116,.22);--tint-sage-strong:var(--sage-500);--tint-sage-text:var(--sage-300);
--tint-peri:rgba(110,127,184,.22);--tint-peri-strong:var(--peri-500);--tint-peri-text:var(--peri-300);
--tint-peach:rgba(217,122,92,.22);--tint-peach-strong:var(--peach-500);--tint-peach-text:var(--peach-300);
--overlay:rgba(13,15,17,.72);
color-scheme:dark}/* ---------- tokens/typography.css ---------- */
:root{
--font-ui:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
/* Thang 1.25, gốc 16px (làm tròn): 11 · 13 · 16 · 20 · 25 · 31 · 39 · 49 · 61 */
--fs-00:11px;--fs-0:13px;--fs-1:16px;--fs-2:20px;--fs-3:25px;--fs-4:31px;--fs-5:39px;--fs-6:49px;--fs-7:61px;
/* ===== VAI TRÒ — mobile 360 (mặc định) — chữ thân ≥16px ===== */
--text-display:var(--fs-5);--text-h1:var(--fs-4);--text-h2:var(--fs-3);--text-h3:var(--fs-2);--text-h4:var(--fs-1);--text-h5:var(--fs-1);--text-h6:var(--fs-0);
--text-lead:var(--fs-1);--text-body:var(--fs-1);--text-small:var(--fs-0);--text-caption:var(--fs-00);
--text-label:var(--fs-00);--text-button:15px;--text-button-sm:14px;--text-button-lg:16px;--text-code:var(--fs-0);--text-price:var(--fs-4);--text-price-sm:var(--fs-2);
/* Chiều cao dòng — tiêu đề tối thiểu 1.25 để dấu tiếng Việt (Ẫ, Ệ, Ở, Ữ) không chạm dòng trên. KHÔNG dùng line-height 1: chân chữ g, y, ọ, ự, dấu nặng bị cắt trong nút, nhãn, chip, giá. Nhãn một dòng dùng --lh-label 1.2 (--lh-none giữ làm bí danh, cùng giá trị). */
--lh-display:1.15;/* @kind font */--lh-heading:1.25;/* @kind font */--lh-tight:1.2;/* @kind font */--lh-body:1.55;/* @kind font */--lh-relaxed:1.65;/* @kind font */--lh-label:1.2;/* @kind font */--lh-none:1.2;/* @kind font */
--ls-display:-0.02em;/* @kind font */--ls-heading:-0.01em;/* @kind font */--ls-body:0;/* @kind font */--ls-caps:0.08em;/* @kind font */--ls-price:-0.02em;/* @kind font */
--fw-regular:400;/* @kind font */--fw-medium:500;/* @kind font */--fw-semibold:600;/* @kind font */--fw-bold:700;/* @kind font */--fw-extrabold:800/* @kind font */}
/* Tablet 768 */
@media (min-width:768px){:root{--text-display:var(--fs-6);--text-h1:var(--fs-5);--text-h2:var(--fs-4);--text-h3:var(--fs-3);--text-h4:var(--fs-2);--text-h5:var(--fs-1);--text-lead:var(--fs-2);--text-price:var(--fs-5)}}
/* Desktop 1200+ */
@media (min-width:1200px){:root{--text-display:var(--fs-7);--text-h1:var(--fs-6);--text-h2:var(--fs-5);--text-h3:var(--fs-4);--text-h4:var(--fs-3);--text-h5:var(--fs-2);--text-price:var(--fs-6)}}/* ---------- tokens/spacing.css ---------- */
:root{
/* ===== Khoảng cách chuẩn: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 (bội số 4) ===== */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
/* Khoảng cách giữa section: 48 mobile · 64 tablet · 96 desktop */
--section-y:var(--space-12);
/* Lưới: 4 cột @360 (gutter 16, lề 16) · 8 cột @768 (gutter 20, lề 32) · 12 cột @1440 (gutter 24, container 1200) */
--container:1200px;--container-narrow:760px;--cols:4;/* @kind other */--gutter:16px;--margin:16px;
/* ===== Bo góc — MỘT ngôn ngữ: mọi thứ bấm được (nút, chip, huy hiệu, avatar) = pill; ô nhập 12; thẻ, modal, ảnh 16; ô icon 8.
   Logo giữ góc nhọn (dấu hiệu nhận diện); giao diện mềm, sáng, "digital" cho chủ cửa hàng thao tác bằng ngón tay. Không đặt bo tròn cạnh bo vuông trong cùng một hàng. ===== */
--radius-sm:8px;--radius:12px;--radius-lg:16px;--radius-pill:999px;--radius-0:0;
/* ===== Nét — từ nét logo 6,5/48: viền 1px kẻ/thẻ, 1.5px điều khiển (nút viền, ô nhập, chip); thanh nhấn 3–4px; icon nét 2px/24 ===== */
--border-w-thin:1px;--border-w:1.5px;--bar-w:3px;--bar-w-lg:4px;--icon-stroke:2px;--icon-size:24px;--chevron-angle:19deg;/* @kind other */
/* ===== Góc thương hiệu 19° (atan 9/26, dốc 9/26 lên phải) — vát CHỈ trên bề mặt không bấm được: mép hero, dải phân section, mặt nạ ảnh/mockup, nền wordmark mờ ở footer. Nút, chip, ô nhập, thẻ giữ pill/bo góc. Một chỗ cắt mỗi khung nhìn. Không 30°/45°/60°. ===== */
--goc-thuong-hieu:19.09deg;/* @kind other */--goc-vuong-goc:70.91deg;/* @kind other */
--vat-sm:26px 9px;/* @kind other */--vat:52px 18px;/* @kind other */--vat-lg:78px 27px;/* @kind other */--vat-hero:130px 45px;/* @kind other */
/* ===== Bóng — 2 mức. Hover đổi viền, không tăng bóng ===== */
--shadow-1:0 1px 2px rgba(30,34,38,.06),0 2px 8px rgba(30,34,38,.06);--shadow-2:0 8px 24px rgba(30,34,38,.12),0 2px 6px rgba(30,34,38,.06);--shadow-bar:0 -1px 0 var(--border),0 -8px 24px rgba(30,34,38,.08);
/* Chuyển động: xuất hiện từ dưới lên 8px, tầng vàng trước, than chì sau */
--dur-fast:120ms;/* @kind other */--dur:200ms;/* @kind other */--dur-slow:320ms;/* @kind other */--ease:cubic-bezier(.2,0,0,1);/* @kind other */--ease-in:cubic-bezier(.4,0,1,1);/* @kind other */--enter-y:8px;/* @kind spacing */
/* Kích cỡ điều khiển — vùng chạm ≥44px */
--control-h-sm:40px;--control-h:44px;--control-h-lg:52px;--touch-min:44px;
--header-h:64px;--header-h-compact:56px;--contact-bar-h:60px;
--z-header:50;/* @kind other */--z-bar:60;/* @kind other */--z-drawer:90;/* @kind other */--z-overlay:100;/* @kind other */--z-toast:110/* @kind other */}
@media (min-width:768px){:root{--cols:8;/* @kind other */--gutter:20px;--margin:32px;--section-y:var(--space-16)}}
@media (min-width:1200px){:root{--cols:12;/* @kind other */--gutter:24px;--margin:40px;--section-y:var(--space-24);--header-h:72px;--header-h-compact:60px}}/* ---------- tokens/base.css ---------- */
*, *::before, *::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}a{color:var(--link);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color var(--dur) var(--ease)}a:hover{color:var(--link-hover)}h1, h2, h3, h4, h5, h6{margin:0;font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);text-wrap:pretty}h1{font-size:var(--text-h1)}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}h4{font-size:var(--text-h4);font-weight:var(--fw-semibold)}h5{font-size:var(--text-h5);font-weight:var(--fw-semibold)}h6{font-size:var(--text-h6);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--ls-caps)}p{margin:0;text-wrap:pretty}code, kbd, .mono{font-family:var(--font-mono)}button, input, select, textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}img, svg{display:block;max-width:100%}::selection{background:var(--amber-200);color:var(--gray-800)}
@media (prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (pointer:coarse){:root{--control-h-sm:44px}}/* ---------- tokens/keyvisual.css ---------- */
/* Khoi nay bi bo sot trong moi ban ghep truoc 09/10/2026, nen moi lop .kv*
   cua bo chuan deu khong dung duoc tren site: trang-chu.css da phai tu ve lai
   mot mat na chevron go tay. Ghep lai tu nay.

   KHAC ban giao mot cho, co chu y: bo chuan tro mat na vao tep trong
   siteup-ds/assets/keyvisual/. Duong dan tuong doi do chi dung trong thu muc
   bo chuan; tren WordPress tokens.css chay thanh snippet Fluent nen khong
   giai ra. Nen 4 mat na duoc NHUNG THANG thanh data-URI.

   KHONG sua tay khoi duoi day. Co ban DS moi thi chay lai:
     python3 wp/dung/mot-lan/nhung-keyvisual.py
   ---------------------------------------------------------------- */
/* ===== KEYVISUAL — chevron outline + vát 19°. Một hệ cho web (nền container, hiệu ứng) và ấn phẩm MXH. Không !important; gắn bằng lớp CSS (Elementor: Nâng cao → Lớp CSS). ===== */
:root{
--kv-net:1.5px;/* @kind other */
--kv-s:24px;--kv-m:140px;--kv-l:320px;--kv-xl:880px;
--kv-dam-l:.08;/* @kind other */--kv-dam-m:.16;/* @kind other */--kv-dam-s:1;/* @kind other */
--kv-o-luoi:72px;--kv-neo:-0.18;/* @kind other */
--kv-the:120px;--kv-vat-w:130px;--kv-vat-h:45px;--kv-vat-sm-w:52px;--kv-vat-sm-h:18px;
--kv-mau-toi:var(--gray-800);--kv-mau-vang:var(--amber-500);--kv-mau-sang:var(--gray-0);
--kv-dur-troi:40s;/* @kind other */--kv-dur-ve:1200ms;/* @kind other */
}.kv:not(#su){position:relative;isolation:isolate;overflow:hidden}.kv:not(#su) > *{position:relative;z-index:1}.kv--toi:not(#su){background:var(--kv-mau-toi);color:var(--text-inverse)}.kv--vang:not(#su){background:var(--kv-mau-vang);color:var(--kv-mau-toi)}/* trên vàng: chữ + chevron than chì (≈8:1); --text-on-accent chỉ cho chữ trong nút vàng */
.kv--sang:not(#su){background:var(--surface-2);color:var(--text)}/* Nền lưới chevron (bậc L) */
.kv-luoi:not(#su)::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:currentColor;opacity:var(--kv-dam-l);-webkit-mask:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2296%22%20height=%2296%22%20viewBox=%220%200%2096%2096%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%20vector-effect=%22non-scaling-stroke%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%288%2010%29%20scale%28.5%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%2856%2058%29%20scale%28.5%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3C/svg%3E) 0 0/var(--kv-o-luoi) var(--kv-o-luoi) repeat;mask:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2296%22%20height=%2296%22%20viewBox=%220%200%2096%2096%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%20vector-effect=%22non-scaling-stroke%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%288%2010%29%20scale%28.5%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%2856%2058%29%20scale%28.5%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3C/svg%3E) 0 0/var(--kv-o-luoi) var(--kv-o-luoi) repeat}/* Chevron lớn neo góc (bậc M/L/XL) — cắt ra ngoài khung. Ghi đè cỡ bằng --kv-size, độ đậm bằng --kv-dam trên chính container */
.kv-goc:not(#su)::after{content:"";position:absolute;z-index:0;pointer-events:none;width:var(--kv-size,var(--kv-l));aspect-ratio:40/28;background:currentColor;opacity:var(--kv-dam,var(--kv-dam-m));-webkit-mask:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2240%22%20height=%2228%22%20viewBox=%22-1%20-1%2041%2030%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%20vector-effect=%22non-scaling-stroke%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%280%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%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=%2240%22%20height=%2228%22%20viewBox=%22-1%20-1%2041%2030%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%20vector-effect=%22non-scaling-stroke%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%280%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3C/svg%3E) center/contain no-repeat;right:calc(var(--kv-size,var(--kv-l))*var(--kv-neo));top:calc(var(--kv-size,var(--kv-l))*var(--kv-neo)*.7);transition:transform var(--dur-slow) var(--ease)}.kv-goc--m:not(#su)::after{width:var(--kv-size,var(--kv-m));right:calc(var(--kv-size,var(--kv-m))*var(--kv-neo));top:calc(var(--kv-size,var(--kv-m))*var(--kv-neo)*.7)}.kv-goc--xl:not(#su)::after{width:var(--kv-size,var(--kv-xl));right:calc(var(--kv-size,var(--kv-xl))*var(--kv-neo));top:calc(var(--kv-size,var(--kv-xl))*var(--kv-neo)*.7)}.kv-goc--duoi-trai:not(#su)::after{right:auto;top:auto;left:calc(var(--kv-size,var(--kv-l))*var(--kv-neo));bottom:calc(var(--kv-size,var(--kv-l))*var(--kv-neo)*.7)}.kv-goc--duoi-trai.kv-goc--m:not(#su)::after{right:auto;top:auto;left:calc(var(--kv-size,var(--kv-m))*var(--kv-neo));bottom:calc(var(--kv-size,var(--kv-m))*var(--kv-neo)*.7)}.kv-goc--duoi-trai.kv-goc--xl:not(#su)::after{right:auto;top:auto;left:calc(var(--kv-size,var(--kv-xl))*var(--kv-neo));bottom:calc(var(--kv-size,var(--kv-xl))*var(--kv-neo)*.7)}.kv-goc--cap:not(#su)::after{aspect-ratio:1;-webkit-mask-image: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=%22currentColor%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);mask-image: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=%22currentColor%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)}.kv-goc--chuoi:not(#su)::after{aspect-ratio:121/30;-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22120%22%20height=%2228%22%20viewBox=%22-1%20-1%20121%2030%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%280%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%2840%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%2880%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3C/svg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22120%22%20height=%2228%22%20viewBox=%22-1%20-1%20121%2030%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%280%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%2840%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%2880%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3C/svg%3E)}.kv-goc--vang:not(#su)::after{background:var(--kv-mau-vang);opacity:var(--kv-dam,var(--kv-dam-s))}/* Mép vát 19° (dưới-phải) cho container; ghi đè --kv-vat-w/--kv-vat-h trên chính container */
.kv-vat:not(#su){clip-path:polygon(0 0,100% 0,100% calc(100% - var(--kv-vat-h)),calc(100% - var(--kv-vat-w)) 100%,0 100%)}.kv-vat--sm:not(#su){clip-path:polygon(0 0,100% 0,100% calc(100% - var(--kv-vat-sm-h)),calc(100% - var(--kv-vat-sm-w)) 100%,0 100%)}/* Keyvisual cho THẺ (card) web: chevron vàng nhỏ ló ở góc dưới-phải, tiến 8px khi di chuột/focus. Dùng qua prop keyvisual của PricingCard/IndustryCard/TemplateCard hoặc gắn lớp kv-the vào container Elementor */
.kv-the:not(#su){position:relative;isolation:isolate;overflow:hidden}.kv-the:not(#su) > *{position:relative;z-index:1}.kv-the:not(#su)::after{content:"";position:absolute;z-index:0;pointer-events:none;width:var(--kv-the);aspect-ratio:40/28;right:calc(var(--kv-the)*-.3);bottom:calc(var(--kv-the)*-.22);background:var(--kv-mau-vang);opacity:var(--kv-dam-m);-webkit-mask:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2240%22%20height=%2228%22%20viewBox=%22-1%20-1%2041%2030%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%20vector-effect=%22non-scaling-stroke%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%280%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%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=%2240%22%20height=%2228%22%20viewBox=%22-1%20-1%2041%2030%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%20vector-effect=%22non-scaling-stroke%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%280%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3C/svg%3E) center/contain no-repeat;transition:transform var(--dur-slow) var(--ease),opacity var(--dur-slow) var(--ease)}.kv-the:not(#su):hover::after, .kv-the:not(#su):focus-within::after, .kv-the:not(#su):focus-visible::after{transform:translateX(8px);opacity:.36}.kv-the--cap:not(#su)::after{aspect-ratio:1;bottom:calc(var(--kv-the)*-.35);-webkit-mask-image: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=%22currentColor%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);mask-image: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=%22currentColor%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)}.kv-the--chuoi:not(#su)::after{width:calc(var(--kv-the)*1.6);aspect-ratio:121/30;right:calc(var(--kv-the)*-.4);bottom:calc(var(--kv-the)*-.08);-webkit-mask-image:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22120%22%20height=%2228%22%20viewBox=%22-1%20-1%20121%2030%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%280%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%2840%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%2880%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3C/svg%3E);mask-image:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22120%22%20height=%2228%22%20viewBox=%22-1%20-1%20121%2030%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%280%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%2840%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%2880%200%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3C/svg%3E)}.kv-the--luoi:not(#su)::after{inset:0;width:auto;aspect-ratio:auto;background:currentColor;opacity:var(--kv-dam-l);-webkit-mask:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2296%22%20height=%2296%22%20viewBox=%220%200%2096%2096%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%20vector-effect=%22non-scaling-stroke%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%288%2010%29%20scale%28.5%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%2856%2058%29%20scale%28.5%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3C/svg%3E) 0 0/var(--kv-o-luoi) var(--kv-o-luoi) repeat;mask:url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2296%22%20height=%2296%22%20viewBox=%220%200%2096%2096%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%20vector-effect=%22non-scaling-stroke%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%288%2010%29%20scale%28.5%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20transform=%22translate%2856%2058%29%20scale%28.5%29%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%3E%3C/path%3E%3C/svg%3E) 0 0/var(--kv-o-luoi) var(--kv-o-luoi) repeat}.kv-the--luoi:not(#su):hover::after, .kv-the--luoi:not(#su):focus-within::after{transform:none;opacity:var(--kv-dam-m)}/* Khổ ấn phẩm MXH (px cố định, xuất ảnh 1:1) */
.kv-kho:not(#su){box-sizing:border-box;font-family:var(--font-ui)}.kv-kho--1x1:not(#su){width:1080px;height:1080px}.kv-kho--4x5:not(#su){width:1080px;height:1350px}.kv-kho--9x16:not(#su){width:1080px;height:1920px}.kv-kho--191:not(#su), .kv-kho--bia:not(#su){width:1200px;height:630px}.kv-kho:not(#su) .kv-kho__pad, .kv-kho__pad.kv-kho:not(#su){padding:88px}.kv-kho--191:not(#su) .kv-kho__pad, .kv-kho__pad.kv-kho--191:not(#su), .kv-kho--bia:not(#su) .kv-kho__pad, .kv-kho__pad.kv-kho--bia:not(#su){padding:56px 72px}.kv-kho--3x4:not(#su){width:1080px;height:1440px}.kv-kho--bia:not(#su){width:1640px;height:624px}/* 9:16 (TikTok/Reels/Stories): chừa vùng giao diện ứng dụng — trên 220, dưới 400, phải 140 */
.kv-kho--9x16:not(#su) .kv-kho__pad, .kv-kho__pad.kv-kho--9x16:not(#su){padding:220px 140px 400px 88px}/* Ảnh bìa Facebook: nội dung chính nằm giữa ~1280px (vùng không bị cắt trên di động) */
.kv-kho--bia:not(#su) .kv-kho__pad, .kv-kho__pad.kv-kho--bia:not(#su){padding:64px 180px}.kv-kho:not(#su) .kv-kho__h1{font-size:96px}.kv-kho--9x16:not(#su) .kv-kho__h1{font-size:112px}.kv-kho--191:not(#su) .kv-kho__h1, .kv-kho--bia:not(#su) .kv-kho__h1{font-size:64px}.kv-kho:not(#su) .kv-kho__h2{font-size:72px}.kv-kho--9x16:not(#su) .kv-kho__h2{font-size:88px}.kv-kho--191:not(#su) .kv-kho__h2, .kv-kho--bia:not(#su) .kv-kho__h2{font-size:52px}.kv-kho:not(#su) .kv-kho__so{font-size:240px}.kv-kho--4x5:not(#su) .kv-kho__so{font-size:280px}.kv-kho--9x16:not(#su) .kv-kho__so{font-size:320px}.kv-kho--191:not(#su) .kv-kho__so, .kv-kho--bia:not(#su) .kv-kho__so{font-size:160px}.kv-kho:not(#su) .kv-kho__p{font-size:32px}.kv-kho--191:not(#su) .kv-kho__p, .kv-kho--bia:not(#su) .kv-kho__p{font-size:26px}.kv-kho:not(#su) .kv-kho__panel{width:76%}.kv-kho--191:not(#su) .kv-kho__panel, .kv-kho--bia:not(#su) .kv-kho__panel{width:56%}.kv-kho__tach.kv-kho:not(#su){display:flex;flex-direction:column}.kv-kho__tach.kv-kho--191:not(#su), .kv-kho__tach.kv-kho--bia:not(#su){flex-direction:row}/* Hiệu ứng web */
.kv-troi:not(#su)::before{animation:kv-troi var(--kv-dur-troi) linear infinite}
@keyframes kv-troi{to{-webkit-mask-position:var(--kv-o-luoi) 0;mask-position:var(--kv-o-luoi) 0}}.kv-tien:not(#su):hover::after, .kv-tien:not(#su):focus-within::after{transform:translateX(12px)}.kv-ve:not(#su) path{stroke-dasharray:240;stroke-dashoffset:240;animation:kv-ve var(--kv-dur-ve) var(--ease) forwards}.kv-ve:not(#su) path:nth-child(2){animation-delay:120ms}.kv-ve:not(#su) path:nth-child(3){animation-delay:240ms}
@keyframes kv-ve{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.kv-troi:not(#su)::before, .kv-ve:not(#su) path{animation:none;stroke-dashoffset:0}.kv-goc:not(#su)::after, .kv-the:not(#su)::after{transition:none}}
@media (min-width:768px){:root{--kv-l:520px;--kv-m:200px;--kv-o-luoi:96px}}/* ================================================================
   KHUNG - TANG DU AN DE LEN BO CHUAN. Chot 03/10/2026.

   Con so 1200 la NOI DUNG, le cong ra NGOAI. Truoc do 1200 la khung ngoai da
   gom le, nen qua moc 1200 noi dung tut tu 1135 xuong 1120 roi dung yen o do:
   man hinh rong ra ma chu hep lai. Xem thu-khung.html va bao-nguoc-cho-ds.md.

   Bo luon bac le 40 tai 1200. Tren muc chan, le khong doi duoc gi nhin thay
   duoc - khoang tho la (man hinh - 1200)/2 - ma cat mat 16px noi dung.

   PHAI sua o TOKEN chu khong sua rieng .wrap: header va chan trang cua bo chuan
   doc thang var(--container). Sua moi .wrap thi noi dung trang 1200 ma header
   1136, lech 32px moi ben. Da do thay tren ban mau ngay 03/10.

   Khoi nay dat o CUOI tep de thang hai khoi @media cua bo chuan o tren.
   Bo chuan nhan de nghi vao thi xoa ca khoi nay.
   ================================================================ */
:root{--noi-dung:1200px;--container:calc(var(--noi-dung) + 2 * var(--margin))}
@media (min-width:1200px){:root{--margin:32px}}/* ================================================================
   CAU NOI MAU - cho bang mau cua builder dieu khien duoc site.
   Chot 04/10/2026.

   VAN DE: Kit co 31 o mau, nguoi dung doi o "Secondary" trong Site Settings
   thi KHONG gi tren trang doi theo, vi khong tep CSS nao doc bien global cua
   Elementor (do ngay 04/10: grep -c e-global tren 7 tep = 0 het).

   VI SAO PHAI DAT O 'body' CHU KHONG O ':root': Elementor khai
   --e-global-color-* tren lop .elementor-kit-7, va lop do nam o the <body>.
   Bien CSS chi chay xuoi, nen ':root' (tuc <html>) khong doc duoc.

   VI SAO PHAI KHAI LAI CA CHUOI VAI TRO: bien CSS thay the ngay LUC KHAI,
   khong phai luc dung. Bac lai --amber-500 o body thi --nhan khai o :root van
   giu mau cu, vi no da doc --amber-500 TAI :root. Do bang trang thu:
     :root{--amber-500:#E9A21A;--nhan:var(--amber-500)}
     body{--amber-500:var(--e-global-color-secondary)}   voi global = do
     o dung var(--nhan)        -> rgb(233,162,26)  VANG, khong doi
     o dung var(--amber-500)   -> rgb(255,0,0)     doi
   Xem muc 33 so tay.

   BAY LA DUOC BAC, va o mau Kit tuong ung:
     --amber-500  <- Secondary        (vang thuong hieu)
     --gray-800   <- Primary          (than chi: chu, nut dam, chan trang)
     --amber-700  <- Accent           (vang dam: chu/link vang tren nen sang)
     --amber-900  <- onaccent         (chu tren nut vang)
     --amber-400  <- amber400         (nut vang khi re chuot)
     --amber-200  <- amber200         (vong tieu diem)
     --amber-50   <- accentsubtle     (nen o icon, huy hieu vang nhat)
   Ba la dau o nhom HE THONG, bon la sau o nhom TU DAT cua Kit.
   Hex phia sau dau phay la duong lui: Kit chua dat thi giu dung bo chuan.

   KHONG tu suy mau chu tu mau nen. Da thu oklch(from var(--accent) 0.32 c h):
   ra rgb(92,28,0) trong khi bo chuan la rgb(71,46,0), tuc la doi thiet ke dang
   chay. Giu nguyen tac doi mau phai do bo chuan dat, khong do day tu nghi ra.
   ================================================================ */ /* La bang mau: khong phu thuoc che do sang/toi nen bac vo dieu kien.
   Ba la dau la o HE THONG cua Kit; bon la sau la o TU DAT, co san trong bang
   chon mau duoi muc "Custom". */
body{
--amber-500:var(--e-global-color-secondary,#E9A21A);
--gray-800:var(--e-global-color-primary,#1E2226);
--amber-700:var(--e-global-color-accent,#8F5E00);
--amber-900:var(--e-global-color-onaccent,#472E00);
--amber-400:var(--e-global-color-amber400,#EDB338);
--amber-200:var(--e-global-color-amber200,#F7DB94);
--amber-50:var(--e-global-color-accentsubtle,#FDF6E6)}/* Chuoi vai tro CHE DO SANG. Chan khi che do toi bat o <html> hoac <body>,
   neu khong khoi nay se de gia tri sang len tren gia tri toi. */
html:not([data-theme="dark"]) body:not([data-theme="dark"]){
--nhan:var(--amber-500);--nhan-chu:var(--amber-700);--chu-chinh:var(--gray-800);
--accent:var(--nhan);--accent-active:var(--amber-500);--accent-text:var(--nhan-chu);
--text:var(--chu-chinh);--primary:var(--gray-800);--border-focus:var(--gray-800);
--surface-inverse:var(--gray-800);--link:var(--gray-800);--link-hover:var(--amber-700);
--nhan-nen-nhat:var(--amber-50);--accent-subtle:var(--nhan-nen-nhat);
--accent-hover:var(--amber-400);--accent-ring:var(--amber-200);
--text-on-accent:var(--amber-900);
/* Bong hat sang cua nut nhan: bo chuan khai rgba(233,162,26,.35) bang so tran
   nen khong theo mau moi duoc. color-mix voi transparent ra dung mau nhan o
   35% do duc, khong doi gi khi mau nhan giu nguyen. */
--accent-glow:0 8px 24px color-mix(in srgb,var(--accent) 35%,transparent)}/* Chuoi vai tro CHE DO TOI. Chi khai lai nhung token bat nguon tu ba la tren;
   --chu-chinh va --nhan-chu che do toi doc la khac (gray-50, amber-300) nen
   khong can bac, cu de khoi [data-theme="dark"] cua bo chuan lo. */
html[data-theme="dark"] body, body[data-theme="dark"]{
--nhan:var(--amber-500);--accent:var(--nhan);--accent-active:var(--amber-500);
--accent-ring:var(--amber-700);--be-mat:var(--gray-800);--surface:var(--be-mat);
--bg-subtle:var(--gray-800);--primary-text:var(--gray-800);--text-inverse:var(--gray-800);
--accent-hover:var(--amber-400);--text-on-accent:var(--amber-900);
--accent-glow:0 8px 24px color-mix(in srgb,var(--accent) 28%,transparent)}/* ================================================================
   NEO: chua cho header dinh. Chot 04/10/2026.

   Header khai position:sticky, cao 65px duoi 1200 va 73px tu 1200 len (do
   ngay 04/10). Khong khai scroll-margin-top thi nhay toi mot neo se dat dinh
   khoi dung duoi gau header, mat ca nhan mao lan dong tieu de.

   Cong them 16px cho khoi khong dinh sat gau header.
   Khai o day chu khong o trang-chu.css vi header dinh o moi trang.
   ================================================================ */
:where([id]){scroll-margin-top:81px}
@media (min-width:1200px){:where([id]){scroll-margin-top:89px}
/* ĐÓ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. */
}