/* Lớp giao diện Chạm Phát cho bản clone gugu — CHỈ đổi màu, font, logo; GIỮ NGUYÊN bố cục, kích thước, animation.
   Nguồn brand: phiên chính Chạm Phát (chamstation-clone src/app/(home)/home.css, FontChamPhat.tsx), 06/11/2026.
   Nạp SAU zh/site.css, zh/ui/demo.css, help.css, dashboard css. Tắt brand: GUGU_BRAND=gugu khi build. */

/* Token gốc gugu → bảng màu Chạm Phát (nền sáng) */
:root{
  --ink:#1f2430;        /* chữ chính / nút tối / thanh thông báo (gốc #1d1a1a) */
  --muted:#525a66;      /* chữ đoạn (gốc #575f66) */
  --paper:#faf9f7;      /* nền --dem (gốc #fcfafa) */
  --panel:#f3f0ec;      /* mặt phụ (gốc #f4f3f2) — sắc ấm theo nền Chạm Phát */
  --line:#eae7e2;       /* kẻ (gốc #dedad7) */
  --green:#e8590c;      /* màu nhấn gugu → cam vân tay (màu nhấn duy nhất của Chạm Phát) */
  --cp-cam:#e8590c; --cp-cam-dam:#c74a08; --cp-cam-nhat:#fff0e6; --cp-xanh:#2f9e44; --cp-phu:#8a919c;
  --head:"Bricolage Grotesque","CP Disp Auto","Be Vietnam Pro","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  --body:"Be Vietnam Pro","CP Body Fallback","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,"PingFang SC",monospace;
}
/* demo.css tự khai --ink riêng cho khung app mô phỏng */
.stage-box,.win{--ink:#1f2430}

/* Font: các chỗ gugu gán thẳng Inter/Manrope (không qua biến) */
body{font-family:var(--body)}
h1,h2,h3,.sh h2,.hero h1{font-family:var(--head)}

/* Nút chính (CTA): cam; nút ghost/white giữ như gốc */
.btn:not(.ghost):not(.white){background:var(--cp-cam);border-color:var(--cp-cam);color:#fff}
.btn:not(.ghost):not(.white):hover{background:var(--cp-cam-dam);border-color:var(--cp-cam-dam)}
.btn.ghost:hover{border-color:var(--cp-cam)}

/* Thanh thông báo: nền tối Chạm Phát, chấm nháy cam (cùng nhịp animation 2.4s) */
.annc{color:#f2ede6}
.annc:hover{background:#2b3140}
.annc i{background:var(--cp-cam);box-shadow:0 0 0 0 rgba(232,89,12,.6);animation-name:cp-ping}
@keyframes cp-ping{0%{box-shadow:0 0 0 0 rgba(232,89,12,.55)}70%,100%{box-shadow:0 0 0 7px rgba(232,89,12,0)}}

/* Chữ phụ gán cứng trong site.css */
.nav nav a,.nav .lang{color:#3b4250}
.tstep h3{color:#a3a8b0}
.tstep.on h3{color:var(--ink)}
.tstep .pb b{background:var(--cp-cam)}
.subin a>i{border-color:#c9c4bd;color:#6b7280}
.nav nav a[data-sub]::before{background:var(--cp-cam-nhat)}
.q{border-color:#d8d3cc}
.plat.rec b::after{color:var(--cp-cam);border-color:rgba(232,89,12,.45)}
.plat.rec{background:rgba(232,89,12,.045)}

/* Logo: vân tay Chạm Phát + chữ "ChamOS" (vá ở server, src/lib/chamos-patch.mjs) trong khung .brand gốc (img 26px + gap 10px) */
.brand{display:inline-flex;align-items:center;white-space:nowrap;font-weight:700;letter-spacing:-.02em}
.brand img{border-radius:0;object-fit:contain}
@media (max-width:720px){.brand{gap:7px}.brand img{width:24px;height:24px}}
@media (max-width:380px){.brand{font-size:0;gap:0}.brand img{width:28px;height:28px}}

/* Repo GitHub là của gugu — ChamOS chưa công khai mã nguồn */
a.github{display:none!important}

/* Tải xuống: chưa phát hành → nhãn "Sắp ra mắt" ở cột phải (thay .dmg ↓) */
.plat em.cp-soon{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.02em;color:var(--cp-cam-dam);background:var(--cp-cam-nhat);
  border:1px solid rgba(232,89,12,.25);padding:4px 7px;white-space:nowrap;justify-self:end}
.plat[data-soon]{cursor:pointer}

/* Footer: liên hệ (logo Zalo/Telegram luôn đi kèm) */
.fb a.cp-ct{display:flex;align-items:center;gap:8px}
.fb a.cp-ct svg{width:15px;height:15px;flex:none;color:var(--muted)}
.fb a.cp-ct:hover svg{color:var(--cp-cam)}
.fb a.cp-ct .cp-zl{width:18px;height:18px;flex:none;display:grid;place-items:center;border-radius:5px;background:#0068ff}
.fb a.cp-ct .cp-zl svg,.fb a.cp-ct:hover .cp-zl svg{width:17px;height:17px;color:#fff}

/* Help Center: thêm tab Web → 5 tab, màn hẹp thu chữ/lề để không tràn */
@media (max-width:520px){.plats a{padding:9px 2px;font-size:13px}}

/* Popup nhóm Zalo (nút nổi): nút "Mở nhóm Zalo" + màn hẹp không cắt tiêu đề / tràn khung */
.wx-qr{display:block}
.wx-open{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:10px 12px;background:var(--cp-cam);color:#fff;
  font:500 14px/1.2 var(--body);border:1px solid var(--cp-cam)}
.wx-open:hover{background:var(--cp-cam-dam);border-color:var(--cp-cam-dam)}
.wx-open svg{width:20px;height:20px;flex:none}
.wx-head b{min-width:0;overflow-wrap:anywhere}
.wx-panel.compact .wx-head b{white-space:normal;font-size:13px}
.wx-panel.compact .wx-open{display:none}
@media (max-width:520px){
  .wx-panel{--w:260px;max-height:calc(100dvh - 96px)}
  .wx-head b{white-space:normal}
}
@media (max-width:360px){.wx-panel{--w:232px;--pad:12px}}

/* Bảng giá: gói theo bảng màu Chạm Phát — xem phần PRICING bên dưới */
/* ===== PRICING: các gói theo style Chạm Phát (thẻ bo 20px, nền panel ấm, gói đề xuất nền cam nhạt viền cam,
   số giá đậm Bricolage 700, nút bo tròn cam, nhãn mono in hoa màu cam). Bố cục 3 cột + nội dung giữ nguyên. ===== */
.plans3,.chart,.mchart,.legend,.tiers{--c0:#b8b2aa;--c1:#f6b07a;--c2:#e8590c;--c3:#a63f06}
.plans3{gap:16px;padding:16px;background:transparent}
.pc{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:28px 26px 30px}
.pc.rec{background:var(--cp-cam-nhat);color:var(--ink);border:1.5px solid rgba(232,89,12,.55);box-shadow:0 18px 44px rgba(232,89,12,.12)}
.pc .nm{font-weight:700;font-size:24px}
.pc .nm::before{border-radius:50%}
.pc .tag{color:#fff;background:var(--cp-cam);border-color:var(--cp-cam);border-radius:999px;padding:4px 9px;text-transform:uppercase;letter-spacing:.08em}
.pc .tg,.pc.rec .tg{color:var(--cp-cam-dam);font-weight:600;border:0;padding:0;margin-top:0;letter-spacing:.06em}
.pc .pr b{font-weight:700;letter-spacing:-.04em}
.pc.rec .pr span,.pc.rec .per,.pc.rec .cap span,.pc.rec .fit{color:var(--muted)}
.pc .per em,.pc.rec .per em{color:var(--ink);background:color-mix(in srgb,var(--c) 22%,#fff);border-radius:8px}
.pc .dots i{background:#e7e1da}
.pc.rec .dots i{background:#f6d9c4}
.pc.rec .cap{border-color:rgba(232,89,12,.2)}
.pc .cap b{font-weight:700}
.pc .btn,.pc.rec .btn{border-radius:999px;height:48px;font-weight:600}
.pc .btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.pc.rec .btn{background:var(--cp-cam);border-color:var(--cp-cam);color:#fff}
.pc.rec .btn:hover{background:var(--cp-cam-dam);border-color:var(--cp-cam-dam)}
.pc li svg,.pc.rec li svg{color:var(--cp-cam)}
.free{margin:16px 16px 0;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.free .fl b{font-weight:700}
@media (max-width:720px){.plans3{padding:12px;gap:12px}.free{margin:12px 12px 0}.pc{padding:24px 20px 26px}}
/* Bảng giá mobile: hàng tab + nút "?" rộng hơn màn (bản gốc tràn ~21px, chữ VI/EN dài hơn) → thu lề, cho tab co lại */
@media (max-width:520px){
  .ptabs [role="tab"]{padding:14px 12px;gap:6px;font-size:14px;min-width:0;flex:0 1 auto}
  .ptabs [role="tab"] .mono{font-size:10px}
  .ptabs .pq{padding:0 10px;flex:none}
}