/* SU-BH-01-v2 PrintME - token hai tầng.
   Tầng 1 (lá): bảng màu của khách, đo trên ảnh chuẩn thiet-ke-goc/anh-khach.jpg: trắng #FCFCFC, xám #F4F4F4,
   đen #0A0A0A và #080808, cam #FC5800, cam đậm #C94400. Thay hẳn trắng sữa, xanh than, cam san hô của v1.
   Tầng 2 (vai trò): tên giữ y bộ chuẩn SiteUp. Thành phần CHỈ đọc tầng 2.
   Chế độ tối ([data-theme="dark"]) và ba vùng nền (.nen-xam, .nen-cam-nhat, .nen-toi) chỉ đè tầng 2, không đè lá.
   Khoảng cách, bo góc, mốc bề rộng, chiều cao dòng tối thiểu: giữ nguyên thang SiteUp. */

/* Baloo 2 (tiêu đề, tên sản phẩm, giá, chữ nút cam) và Onest (thân chữ, nhãn, nút thường), cắt sẵn Latin + tiếng Việt
   bằng _cat-phong.py (giấy phép OFL, xem fonts/OFL-*.txt) */
@font-face{font-family:"Baloo 2";src:url("../fonts/Baloo2-VN.woff2") format("woff2");font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url("../fonts/Onest-VN.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
/* ===== LÁ - Trắng và xám (nền trang, khối phụ, viền) ===== */
--trang-0:#FFFFFF;--trang-50:#FCFCFC;--xam-100:#F4F4F4;--xam-150:#EDEDED;--xam-200:#E4E4E4;--xam-300:#D2D2D2;--xam-400:#A8A8A8;--xam-500:#6B6B6B;--xam-600:#525252;--xam-700:#3A3A3A;
/* ===== LÁ - Đen (chữ, nền ô Doanh nghiệp, chân trang) ===== */
--den-800:#1C1C1C;--den-850:#141414;--den-900:#0A0A0A;--den-950:#080808;
/* ===== LÁ - Cam 50-800. 500 là cam nút đo trên ảnh; 600 cho giá và chữ cam nhỏ trên nền trắng (4,75:1);
   700 cho chữ cam nhỏ trên nền xám và cam nhạt (5,09:1), vì 600 trên #F4F4F4 chỉ 4,43:1 ===== */
--cam-50:#FFF3EA;--cam-100:#FFE3CF;--cam-200:#FFC49C;--cam-300:#FF9A5C;--cam-400:#FF7A2B;--cam-500:#FC5800;--cam-600:#C94400;--cam-700:#B83F00;--cam-800:#8A2F00;
/* ===== LÁ - Trạng thái ===== */
--luc-50:#E9F6EE;--luc-100:#C9EAD5;--luc-300:#6CC28F;--luc-600:#1E7A47;
--ho-50:#FDF3E1;--ho-100:#F8E0B0;--ho-300:#EDB55C;--ho-600:#8A5507;
--do-50:#FCEBEA;--do-100:#F5CDCA;--do-300:#EE8A84;--do-600:#A9302A;
--lam-50:#E9F1FC;--lam-100:#CBDDF6;--lam-300:#7FB0EE;--lam-600:#1F5FAE;
--zalo:#0068FF;--zalo-hover:#0052CC;--zalo-text:#0068FF;

/* ===== VAI TRÒ - chế độ sáng ===== */
--nen:var(--trang-50);--nen-phu:var(--xam-100);--be-mat:var(--trang-0);--be-mat-chim:var(--xam-100);--vien:var(--xam-200);--vien-dam:var(--xam-300);--vien-dieu-khien:var(--xam-500);
--chu-chinh:var(--den-900);--chu-phu:var(--xam-600);--chu-mo:var(--xam-500);
--chinh:var(--cam-600);--chinh-nhat:var(--cam-50);
--nhan:var(--cam-500);--nhan-chu:var(--cam-600);--nhan-nen-nhat:var(--cam-50);
/* Bí danh tiếng Anh, tên giữ y bộ chuẩn */
--bg:var(--nen);--bg-subtle:var(--nen-phu);--surface:var(--be-mat);--surface-2:var(--cam-50);--surface-sunken:var(--be-mat-chim);--surface-inverse:var(--den-950);
--text:var(--chu-chinh);--text-2:var(--chu-phu);--text-3:var(--chu-mo);--text-inverse:var(--trang-50);--text-on-accent:var(--trang-0);
--border:var(--vien);--border-strong:var(--vien-dam);--border-control:var(--vien-dieu-khien);--border-focus:var(--den-900);
/* Nút đặc cam: cam #FC5800 chữ trắng 3,21:1, chỉ đủ cho chữ lớn, nên chữ nút cam luôn là preset h5 (20px đậm 700).
   Nút đặc cỡ thường (biểu mẫu, bộ lọc): cam đậm #C94400, chữ trắng 4,87:1 */
--accent:var(--nhan);--accent-hover:var(--cam-600);--accent-active:var(--cam-700);--accent-glow:none;--accent-text:var(--nhan-chu);--accent-subtle:var(--nhan-nen-nhat);--accent-ring:var(--cam-200);
--primary:var(--chinh);--primary-hover:var(--cam-700);--primary-active:var(--cam-800);--primary-text:var(--trang-0);--primary-subtle:var(--chinh-nhat);
--success:var(--luc-600);--success-subtle:var(--luc-50);--success-border:var(--luc-100);
--warning:var(--ho-600);--warning-subtle:var(--ho-50);--warning-border:var(--ho-100);
--danger:var(--do-600);--danger-subtle:var(--do-50);--danger-border:var(--do-100);
--info:var(--lam-600);--info-subtle:var(--lam-50);--info-border:var(--lam-100);
--link:var(--cam-600);--link-hover:var(--cam-800);
/* Ba sắc nền dịu. Tên giữ y bộ chuẩn (sage, peri, peach), giá trị là của mẫu: xám, xám đậm hơn, cam nhạt */
--tint-sage:var(--xam-100);--tint-sage-strong:var(--xam-300);--tint-sage-text:var(--xam-700);
--tint-peri:var(--xam-150);--tint-peri-strong:var(--xam-300);--tint-peri-text:var(--xam-700);
--tint-peach:var(--cam-50);--tint-peach-strong:var(--cam-200);--tint-peach-text:var(--cam-800);
--on-dark:var(--trang-0);--on-dark-2:var(--xam-300);
--overlay:rgba(8,8,8,.6);
/* Nút gọi trên thanh dính đáy: cam đậm, đứng cạnh nút Zalo xanh dương thì tách màu rõ */
--goi:var(--cam-600);--goi-hover:var(--cam-700);
/* Giọng hình của PrintME: VỆT CỌ cam ở phần đầu, NÉT VẼ TAY (gạch chân, mũi tên, bong bóng chữ), tối đa một nét mỗi khối */
--co-ve:var(--nhan);--net-tay:var(--nhan);--bong-chu:var(--trang-0);
/* Màu vải của ô chọn màu áo: là DỮ LIỆU sản phẩm (màu phôi áo), không phải màu giao diện, nên không đổi theo chế độ tối */
--vai-trang:#FFFFFF;--vai-den:#1F1F1F;--vai-xanh-than:#1D2B44;--vai-be:#E4D5BB;
/* Màu nhận diện của mạng xã hội ở chân trang: cũng là DỮ LIỆU (màu của hãng), không đổi theo chế độ tối */
--mxh-fb:#1877F2;--mxh-tt:#FFFFFF;--mxh-tt-chu:#0A0A0A;--mxh-sp:#EE4D2D;--mxh-zalo:#0068FF;--mxh-yt:#FF0000;--mxh-ig:#D62976;
/* Chỗ giữ ảnh (tạm, thay bằng ảnh thật) */
--cho-anh:var(--xam-150);--cho-anh-net:var(--xam-200);--cho-anh-chu:var(--xam-700);
color-scheme:light}

/* ===== VAI TRÒ - chế độ tối: chỉ đè vai trò ===== */
[data-theme="dark"]{
--nen:var(--den-950);--nen-phu:var(--den-850);--be-mat:var(--den-850);--be-mat-chim:var(--den-900);--vien:var(--den-800);--vien-dam:var(--xam-700);--vien-dieu-khien:var(--xam-400);--zalo-text:#7FB0FF;
--chu-chinh:var(--trang-50);--chu-phu:var(--xam-300);--chu-mo:var(--xam-400);
--chinh:var(--cam-400);--chinh-nhat:rgba(252,88,0,.14);
--nhan:var(--cam-500);--nhan-chu:var(--cam-400);--nhan-nen-nhat:rgba(252,88,0,.14);
--bg:var(--nen);--bg-subtle:var(--nen-phu);--surface:var(--be-mat);--surface-2:var(--den-850);--surface-sunken:var(--be-mat-chim);--surface-inverse:var(--trang-50);
--text:var(--chu-chinh);--text-2:var(--chu-phu);--text-3:var(--chu-mo);--text-inverse:var(--den-950);--text-on-accent:var(--trang-0);
--border:var(--vien);--border-strong:var(--vien-dam);--border-control:var(--vien-dieu-khien);--border-focus:var(--cam-200);
--accent:var(--nhan);--accent-hover:var(--cam-400);--accent-active:var(--cam-600);--accent-glow:none;--accent-text:var(--nhan-chu);--accent-subtle:var(--nhan-nen-nhat);--accent-ring:var(--cam-700);
--primary:var(--chinh);--primary-hover:var(--cam-300);--primary-active:var(--cam-500);--primary-text:var(--den-950);--primary-subtle:var(--chinh-nhat);
--success:var(--luc-300);--success-subtle:rgba(30,122,71,.28);--success-border:rgba(108,194,143,.35);
--warning:var(--ho-300);--warning-subtle:rgba(138,85,7,.28);--warning-border:rgba(237,181,92,.35);
--danger:var(--do-300);--danger-subtle:rgba(169,48,42,.28);--danger-border:rgba(238,138,132,.35);
--info:var(--lam-300);--info-subtle:rgba(31,95,174,.28);--info-border:rgba(127,176,238,.35);
--link:var(--cam-400);--link-hover:var(--cam-200);
--tint-sage:rgba(252,252,252,.06);--tint-sage-strong:var(--xam-700);--tint-sage-text:var(--xam-300);
--tint-peri:rgba(252,252,252,.08);--tint-peri-strong:var(--xam-600);--tint-peri-text:var(--xam-300);
--tint-peach:rgba(252,88,0,.10);--tint-peach-strong:var(--cam-700);--tint-peach-text:var(--cam-200);
--on-dark:var(--trang-0);--on-dark-2:var(--xam-300);
--overlay:rgba(0,0,0,.72);
--goi:var(--cam-600);--goi-hover:var(--cam-500);
--co-ve:var(--nhan);--net-tay:var(--cam-400);--bong-chu:var(--den-850);
--cho-anh:var(--den-800);--cho-anh-net:var(--xam-700);--cho-anh-chu:var(--xam-300);
color-scheme:dark}

/* Vùng nền xám (khối bốn bước, phần mô tả sản phẩm) và cam nhạt (ô "Không biết thiết kế", dải kêu gọi):
   chữ cam nhỏ chuyển sang cam 700, vì cam 600 trên hai nền này chỉ 4,43:1 */
.nen-xam{--nen:var(--xam-100);--nhan-chu:var(--cam-700);--link:var(--cam-700);--accent-text:var(--nhan-chu);--bg:var(--nen)}
.nen-cam-nhat{--nen:var(--cam-50);--nhan-chu:var(--cam-700);--link:var(--cam-700);--accent-text:var(--nhan-chu);--accent-subtle:var(--trang-0);--bg:var(--nen)}
[data-theme="dark"] .nen-xam{--nen:var(--den-850);--nhan-chu:var(--cam-400);--link:var(--cam-400)}
[data-theme="dark"] .nen-cam-nhat{--nen:rgba(252,88,0,.10);--nhan-chu:var(--cam-400);--link:var(--cam-400);--accent-subtle:var(--den-850)}
/* Vùng nền đen (ô Doanh nghiệp, chân trang, đầu trang Doanh nghiệp): cùng cách đè vai trò. Trên #080808 cam #FC5800
   dùng thẳng cho cả chữ nhỏ (6,23:1) */
.nen-toi{
--nen:var(--den-950);--nen-phu:var(--den-850);--be-mat:var(--den-850);--vien:rgba(255,255,255,.14);--vien-dam:rgba(255,255,255,.28);--vien-dieu-khien:var(--xam-400);
--chu-chinh:var(--trang-0);--chu-phu:var(--xam-300);--chu-mo:var(--xam-400);
--nhan-chu:var(--cam-500);--link:var(--cam-500);--link-hover:var(--cam-300);--nhan-nen-nhat:rgba(252,88,0,.16);
--bg:var(--nen);--bg-subtle:var(--nen-phu);--surface:var(--be-mat);--text:var(--chu-chinh);--text-2:var(--chu-phu);--text-3:var(--chu-mo);
--border:var(--vien);--border-strong:var(--vien-dam);--border-control:var(--vien-dieu-khien);--border-focus:var(--cam-200);
--accent-text:var(--nhan-chu);--accent-subtle:var(--nhan-nen-nhat);--net-tay:var(--cam-500);
--cho-anh:var(--den-800);--cho-anh-net:var(--xam-700);--cho-anh-chu:var(--xam-300);
color-scheme:dark}

:root{
/* ===== Khoảng cách: giữ thang SiteUp 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 ===== */
--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;
--section-y:var(--space-10);
/* Nội dung rộng 1200, lề 16 ở điện thoại, 32 từ 768 trở lên */
--container:1200px;--container-narrow:760px;--gutter:16px;--margin:16px;
/* ===== Bo góc: giữ thang 8 · 12 · 16 · pill. Ảnh khách: thẻ khoảng 10px nên thẻ lấy 8 ở điện thoại, 12 từ 768;
   nút, ô tìm, ô chọn bo tròn hẳn ===== */
--radius-sm:8px;--radius:12px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;--radius-0:0;
--radius-nut:var(--radius-pill);--radius-the:var(--radius-sm);
--border-w-thin:1px;--border-w:1.5px;--bar-w:2px;--bar-w-lg:4px;--icon-stroke:1.75px;--icon-size:24px;
/* ===== Bóng: nhạt, trung tính, độ nhòe không quá 24px. Thẻ chọn một: viền HOẶC bóng ===== */
--shadow-1:0 1px 2px rgba(10,10,10,.05),0 4px 12px rgba(10,10,10,.06);--shadow-2:0 2px 4px rgba(10,10,10,.07),0 10px 24px rgba(10,10,10,.10);--shadow-bar:0 -1px 0 var(--border),0 -4px 12px rgba(10,10,10,.08);
/* ===== Chuyển động: chỉ CSS và một tệp JS nhỏ ===== */
--dur-fast:180ms;--dur:360ms;--dur-slow:640ms;
--ease:cubic-bezier(.22,1,.36,1);
--control-h-sm:40px;--control-h:48px;--control-h-lg:52px;--touch-min:44px;
--header-h:64px;--contact-bar-h:64px;
--z-header:50;--z-bar:60;--z-float:70;--z-drawer:90;--z-overlay:100;

/* ===== Chữ ===== */
--font-heading:"Baloo 2","Segoe UI",system-ui,sans-serif;
--font-ui:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:var(--font-ui);/* "Mã và số": số điện thoại, số lượng, mã đơn dùng Onest */
/* Thang 1.25: 11 · 13 · 16 · 20 · 25 · 31 · 39 · 49 · 61. Không cỡ nào ngoài thang */
--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ò - điện thoại 360 (mặc định, thiết kế từ đây lên).
   h5 cố định 20px ở mọi mốc: chữ nút cam phải là chữ lớn (20px đậm 700) ở cả điện thoại */
--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-2);--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-1);--text-button:var(--fs-1);--text-button-sm:var(--fs-0);--text-button-lg:var(--fs-2);--text-code:var(--fs-1);--text-price:var(--fs-2);--text-price-sm:var(--fs-1);
/* Chiều cao dòng: tiêu đề 1.25, đoạn văn 1.6, nhỏ nhất 1.2. Không bao giờ 1 */
--lh-display:1.25;--lh-heading:1.25;--lh-tight:1.2;--lh-body:1.6;--lh-lead:1.55;--lh-relaxed:1.65;--lh-label:1.3;--lh-none:1.2;
/* Khoảng chữ: Baloo 2 siết nhẹ ở cỡ lớn, không quá -0,02em; chữ nhỏ không siết */
--ls-display:-0.01em;--ls-heading:-0.01em;--ls-body:0;--ls-caps:0.06em;--ls-price:0;
/* Baloo 2: tiêu đề lớn 800, tiêu đề nhỏ, tên sản phẩm, giá 700. Onest: thân 400, mã số 500, nhãn và nút 600 */
--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800}
@media (min-width:768px){:root{--gutter:24px;--margin:32px;--section-y:var(--space-10);--header-h:72px;--radius-the:var(--radius);
--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-lead:var(--fs-2)}}
@media (min-width:1200px){:root{--gutter:32px;--section-y:var(--space-12);--header-h:80px;
--text-display:var(--fs-7);--text-h1:var(--fs-6)}}
/* H2 dừng ở 31px cả ở máy tính: tiêu đề khối trong ảnh khách cao khoảng 30px ở 1440, chữ to hơn làm khối nặng đầu */
@media (pointer:coarse){:root{--control-h-sm:44px}}