/* ZaPro Design System — học theo bảng điều khiển của Resend (đo trực tiếp 07/11/2026).
   Tài liệu: docs/design-system.md. Xem mọi thành phần ở /design.
   Nguyên tắc: nền đen tuyền, thang xám lạnh, viền mảnh, nút chính màu trắng, chữ 14px,
   mọi điều khiển cao 32px bo 12px, thẻ bo 24px, hộp thoại bo 32px. Màu xanh Zalo chỉ dùng cho thương hiệu và vòng focus.
   Chế độ sáng đảo ngược: nền trắng, nút chính màu đen. */

/* ================= 1. Token ================= */
:root,.theme-dark{
  /* thang xám (tối) */
  --gray-1:#141517; --gray-2:#191B1E; --gray-3:#212629; --gray-4:#293034; --gray-5:#333B3E; --gray-6:#3B4345; --gray-8:#52595B; --gray-9:#6C7375; --gray-11:#A1A4A5; --gray-12:#F0F0F0;
  /* vai trò */
  --bg:#000000; --bg-2:#0A0A0B;
  --panel:rgba(24,25,28,.88);          /* nền điều khiển, mục đang chọn, hàng tiêu đề bảng */
  --panel-hover:#1F2124;
  --line:var(--gray-3);                /* viền thẻ, đường kẻ */
  --line-soft:var(--gray-2);           /* kẻ giữa các hàng bảng */
  --line-ctl:rgba(176,199,217,.145);   /* viền ô nhập, nút phụ */
  --ink:var(--gray-12); --ink-2:var(--gray-11); --ink-3:var(--gray-9);
  --btn-bg:#FFFFFF; --btn-ink:#000000; --btn-k:rgba(0,0,0,.1); --btn-k-ink:rgba(0,0,0,.6);
  --k-bg:rgba(255,255,255,.07); --k-ink:var(--gray-11);
  --accent:#3D8BFF; --accent-2:#6EA8FF; --accent-ink:#FFFFFF; --accent-soft:rgba(61,139,255,.14); --accent-line:rgba(61,139,255,.42);
  /* trạng thái: nền a3 + chữ a11 kiểu Radix */
  --ok:#3AD389; --ok-soft:rgba(34,255,153,.118); --ok-line:rgba(43,255,162,.235);
  --wait:#FFCA16; --wait-soft:rgba(255,170,0,.13); --wait-line:rgba(255,190,40,.28);
  --fail:#FF9592; --fail-soft:rgba(255,23,63,.176); --fail-line:rgba(255,80,90,.3);
  --info:#70B8FF; --info-soft:rgba(0,119,255,.2); --info-line:rgba(70,150,255,.32);
  --idle:var(--gray-11); --idle-soft:var(--gray-2);
  --tile-ok:#22C27A; --tile-info:#3D8BFF; --tile-wait:#E5A000; --tile-fail:#F04D5B; --tile-idle:#6C7375; --tile-violet:#8B6CFF;
  --dots:rgba(255,255,255,.07); --tile-base:#000; --tile-ink:#fff;
  --glow-soft:radial-gradient(60% 70% at 50% 0%,rgba(255,255,255,.07),transparent 70%);
  /* tương thích ngược cho trang công khai, tài liệu */
  --surface:#050506; --surface-2:var(--panel); --surface-3:var(--panel-hover); --line-2:var(--line-ctl);
  --code-bg:#0A0A0B; --code-ink:#E4E4E7; --code-k:#7AB4FF; --code-s:#9BE9A8; --code-c:#6B6B76; --code-line:var(--gray-3);
  --shadow:0 10px 15px -3px rgba(0,0,0,.4),0 4px 6px -4px rgba(0,0,0,.4);
  --glow:radial-gradient(60% 60% at 50% 0%,rgba(61,139,255,.2),transparent 70%);
  --backdrop:rgba(10,11,12,.86);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --gray-1:#FCFCFD; --gray-2:#F9F9FB; --gray-3:#F0F0F3; --gray-4:#E8E8EC; --gray-5:#E0E1E6; --gray-6:#D9D9E0; --gray-8:#B9BBC6; --gray-9:#8B8D98; --gray-11:#60646C; --gray-12:#1C2024;
  --bg:#FFFFFF; --bg-2:#FAFAFA; --panel:#F3F3F5; --panel-hover:#EBEBEF;
  --line:#E8E8EC; --line-soft:#F0F0F3; --line-ctl:#DCDDE2;
  --btn-bg:#1C2024; --btn-ink:#FFFFFF; --btn-k:rgba(255,255,255,.16); --btn-k-ink:rgba(255,255,255,.75);
  --k-bg:rgba(0,0,0,.05); --k-ink:#60646C;
  --accent:#0068FF; --accent-2:#0052CC; --accent-soft:rgba(0,104,255,.08); --accent-line:rgba(0,104,255,.32);
  --ok:#218358; --ok-soft:rgba(0,164,51,.1); --ok-line:rgba(0,150,60,.28);
  --wait:#AB6400; --wait-soft:rgba(255,171,2,.15); --wait-line:rgba(210,140,0,.32);
  --fail:#CE2C31; --fail-soft:rgba(255,10,0,.07); --fail-line:rgba(220,40,50,.28);
  --info:#0D74CE; --info-soft:rgba(0,144,255,.09); --info-line:rgba(0,110,220,.28);
  --dots:rgba(0,0,0,.08); --tile-base:#fff; --tile-ink:#000; --glow-soft:radial-gradient(60% 70% at 50% 0%,rgba(0,0,0,.04),transparent 70%);
  --surface:#FFFFFF; --code-bg:#0B0B0E; --code-line:#1F1F25;
  --shadow:0 10px 15px -3px rgba(16,24,40,.08),0 4px 6px -4px rgba(16,24,40,.06);
  --glow:radial-gradient(60% 60% at 50% 0%,rgba(0,104,255,.1),transparent 70%);
  --backdrop:rgba(240,240,243,.72);
  color-scheme:light;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --gray-1:#FCFCFD; --gray-2:#F9F9FB; --gray-3:#F0F0F3; --gray-4:#E8E8EC; --gray-5:#E0E1E6; --gray-6:#D9D9E0; --gray-8:#B9BBC6; --gray-9:#8B8D98; --gray-11:#60646C; --gray-12:#1C2024;
  --bg:#FFFFFF; --bg-2:#FAFAFA; --panel:#F3F3F5; --panel-hover:#EBEBEF;
  --line:#E8E8EC; --line-soft:#F0F0F3; --line-ctl:#DCDDE2;
  --btn-bg:#1C2024; --btn-ink:#FFFFFF; --btn-k:rgba(255,255,255,.16); --btn-k-ink:rgba(255,255,255,.75);
  --k-bg:rgba(0,0,0,.05); --k-ink:#60646C;
  --accent:#0068FF; --accent-2:#0052CC; --accent-soft:rgba(0,104,255,.08); --accent-line:rgba(0,104,255,.32);
  --ok:#218358; --ok-soft:rgba(0,164,51,.1); --ok-line:rgba(0,150,60,.28);
  --wait:#AB6400; --wait-soft:rgba(255,171,2,.15); --wait-line:rgba(210,140,0,.32);
  --fail:#CE2C31; --fail-soft:rgba(255,10,0,.07); --fail-line:rgba(220,40,50,.28);
  --info:#0D74CE; --info-soft:rgba(0,144,255,.09); --info-line:rgba(0,110,220,.28);
  --dots:rgba(0,0,0,.08); --tile-base:#fff; --tile-ink:#000; --glow-soft:radial-gradient(60% 70% at 50% 0%,rgba(0,0,0,.04),transparent 70%);
  --surface:#FFFFFF; --code-bg:#0B0B0E; --code-line:#1F1F25;
  --shadow:0 10px 15px -3px rgba(16,24,40,.08),0 4px 6px -4px rgba(16,24,40,.06);
  --glow:radial-gradient(60% 60% at 50% 0%,rgba(0,104,255,.1),transparent 70%);
  --backdrop:rgba(240,240,243,.72);
  color-scheme:light;
}}
.theme-dark{color-scheme:dark}
:root{
  --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-display:var(--f-body);
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* bo góc */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:32px;
  /* kích thước */
  --h-ctl:32px; --h-ctl-sm:28px; --h-ctl-lg:40px; --side-w:250px; --content-w:1104px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ================= 2. Nền tảng ================= */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:20px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01"}
h1,h2,h3,h4{font-family:var(--f-display);text-wrap:balance;margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:28px;line-height:34px;font-weight:500;letter-spacing:-.025em}
h2{font-size:16px;line-height:24px}
h3{font-size:14px;line-height:20px}
p{margin:0}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent-soft)}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent-line);border-radius:var(--r-sm)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono);font-size:12.5px;letter-spacing:-.01em}
.muted{color:var(--ink-2)}
.hint{font-size:12px;line-height:16px;color:var(--ink-2)}
.cap{font-size:12px;line-height:16px;color:var(--ink-2)}
.over{font-size:12px;line-height:16px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.02em}
.stack{display:flex;flex-direction:column;gap:12px}
.stack.lg{gap:24px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.grow{flex:1;min-width:0}
.inline{display:inline}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ico{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.kbd{font-family:var(--f-body);font-size:12px;line-height:20px;color:var(--k-ink);background:var(--k-bg);border-radius:var(--r-xs);padding:0 5px;min-width:20px;text-align:center;display:inline-block}
.dl{color:var(--ink);border-bottom:1px dashed var(--gray-5);transition:border-color .2s}
.dl:hover{color:var(--ink);border-bottom-color:var(--ink-2)}
.prose a,.lnk{color:var(--accent)}
.prose a:hover,.lnk:hover{color:var(--accent-2)}

/* ================= 3. Nút ================= */
.btn{height:var(--h-ctl);padding:0 12px;border-radius:var(--r-md);border:1px solid var(--line-ctl);background:var(--panel);color:var(--ink-2);font-size:14px;line-height:20px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;cursor:pointer;text-decoration:none;user-select:none;transition:background .2s var(--ease),color .2s,border-color .2s,opacity .2s}
.btn:hover{background:var(--panel-hover);color:var(--ink)}
.btn:active{transform:translateY(.5px)}
.btn .ico{width:15px;height:15px}
.btn.primary,.btn.white{background:var(--btn-bg);color:var(--btn-ink);border-color:transparent;font-weight:600}
.btn.primary:hover,.btn.white:hover{background:var(--btn-bg);color:var(--btn-ink);opacity:.88}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--panel);color:var(--ink)}
.btn.danger{background:var(--fail-soft);border-color:transparent;color:var(--fail);font-weight:600}
.btn.danger:hover{background:var(--fail-soft);color:var(--fail);opacity:.85}
.btn.danger.ghost{background:transparent}
.btn.danger.ghost:hover{background:var(--fail-soft)}
.btn.icon{width:var(--h-ctl);padding:0}
.btn.sm{height:var(--h-ctl-sm);padding:0 10px;border-radius:10px;font-size:13px}
.btn.sm.icon{width:var(--h-ctl-sm);padding:0}
.btn.lg{height:var(--h-ctl-lg);padding:0 16px;border-radius:14px;font-size:14px}
.btn.block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn .kbd{margin-right:-6px;background:var(--k-bg);color:var(--k-ink)}
.btn.primary .kbd,.btn.white .kbd{background:var(--btn-k);color:var(--btn-k-ink)}
.btn .kbd + .kbd{margin-left:-2px}
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font-weight:500;cursor:pointer}

/* ================= 4. Biểu mẫu ================= */
label.l,.field>label,.field>.l{font-size:14px;line-height:20px;color:var(--ink-2);font-weight:400}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field .hint{margin-top:-2px}
.input,select.input,textarea.input{width:100%;min-height:var(--h-ctl);border:1px solid var(--line-ctl);background:var(--panel);color:var(--ink);border-radius:var(--r-md);padding:0 12px;font-size:14px;line-height:20px;transition:border-color .15s,box-shadow .15s}
textarea.input{padding:6px 12px;min-height:80px;resize:vertical}
.input::placeholder{color:var(--ink-3)}
.input:hover{border-color:color-mix(in srgb,var(--ink-3) 55%,var(--line-ctl))}
.input:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.input:disabled{opacity:.6}
select.input{appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23A1A4A5' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer}
.input.auto{width:auto}
.search{position:relative;display:flex;align-items:center;min-width:0}
.search .ico{position:absolute;left:10px;color:var(--ink-3);pointer-events:none;width:14px;height:14px}
.search .input{padding-left:30px}
.checks{display:flex;flex-wrap:wrap;gap:8px 16px}
.checks label{display:flex;gap:8px;align-items:center;font-size:14px}
input[type=checkbox]{accent-color:var(--ink);width:16px;height:16px}
input[type=range]{accent-color:var(--ink)}
/* lựa chọn dạng thẻ (vai trò, quyền) */
.choices{display:flex;flex-direction:column;gap:16px}
.choice{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;cursor:pointer;align-items:start}
.choice input[type=radio]{appearance:none;margin:2px 0 0;width:16px;height:16px;border-radius:50%;border:1px solid var(--gray-4);background:transparent;display:grid;place-items:center;cursor:pointer}
.choice input[type=radio]:checked{border-color:var(--ink)}
.choice input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}
.choice b{display:block;font-weight:500;color:var(--ink)}
.choice span{display:block;color:var(--ink-2)}
input.switch{appearance:none;width:32px;height:18px;border-radius:999px;background:var(--gray-5);position:relative;cursor:pointer;transition:background .2s;margin:0}
input.switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
input.switch:checked{background:var(--tile-ok)}
input.switch:checked::after{transform:translateX(14px)}

/* ================= 5. Nhãn, chip, ảnh đại diện, ô biểu tượng ================= */
.badge,.state{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--r-sm);font-size:12px;line-height:16px;font-weight:500;white-space:nowrap;border:1px solid transparent;background:var(--idle-soft);color:var(--idle)}
.badge.ok,.state.ok{background:var(--ok-soft);color:var(--ok)}
.badge.wait,.state.wait{background:var(--wait-soft);color:var(--wait)}
.badge.fail,.state.fail{background:var(--fail-soft);color:var(--fail)}
.badge.info{background:var(--info-soft);color:var(--info)}
.badge.idle,.state.idle,.badge.neutral{background:var(--idle-soft);color:var(--idle)}
.badge.new{background:var(--accent-soft);color:var(--accent);height:20px;padding:0 6px;border-radius:var(--r-xs);font-size:11px}
.tok{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--r-sm);background:var(--gray-2);color:var(--ink-2);font-family:var(--f-mono);font-size:12px;font-weight:500;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idchip{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 1px 0 8px;border-radius:9px;background:var(--gray-2);color:var(--ink-2);font-family:var(--f-mono);font-size:12.5px;font-weight:500;max-width:100%;min-width:0}
.idchip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idchip .btn{height:24px;width:24px;border-radius:var(--r-sm);padding:0}
.idchip .btn .ico{width:13px;height:13px}
.idchip.lg{height:auto;min-height:32px;padding:4px 4px 4px 12px;font-size:13px;width:100%;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line-ctl);color:var(--ink)}
.idchip.lg>span{white-space:normal;overflow-wrap:anywhere}
.idchip.lg .btn{height:28px;width:auto;padding:0 10px;border-radius:10px;align-self:flex-start}
.av{width:32px;height:32px;border-radius:50%;background:var(--gray-3);color:var(--ink);display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.av.sm{width:24px;height:24px;font-size:11px}
.tile-i{--t:var(--tile-idle);width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;color:color-mix(in srgb,var(--t) 60%,var(--tile-ink));background:linear-gradient(180deg,color-mix(in srgb,var(--t) 30%,var(--tile-base)),color-mix(in srgb,var(--t) 12%,var(--tile-base)));box-shadow:0 0 0 1px color-mix(in srgb,var(--t) 55%,transparent) inset,0 1px 0 0 rgba(255,255,255,.18) inset}
.tile-i .ico{width:15px;height:15px}
.tile-i.ok{--t:var(--tile-ok)} .tile-i.info{--t:var(--tile-info)} .tile-i.wait{--t:var(--tile-wait)} .tile-i.fail{--t:var(--tile-fail)} .tile-i.violet{--t:var(--tile-violet)}
.tile-i.lg{width:64px;height:64px;border-radius:18px;box-shadow:0 0 0 1px color-mix(in srgb,var(--t) 55%,transparent) inset,0 1px 0 0 rgba(255,255,255,.22) inset,0 0 0 4px var(--bg),0 0 0 5px var(--line)}
.tile-i.lg .ico{width:28px;height:28px;stroke-width:1.6}
.tile-i.xl{width:72px;height:72px;border-radius:20px}
.tile-i.xl .ico{width:30px;height:30px}

/* ================= 6. Thẻ, thông báo, trạng thái trống ================= */
.card{border:1px solid var(--line);border-radius:var(--r-xl);background:transparent;padding:16px;display:flex;flex-direction:column;gap:16px;min-width:0}
.card>h2,.card-h h2{font-size:16px;line-height:24px;font-weight:700}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;min-height:32px}
.card-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.card-a{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card-a .search{width:240px}
.card-h p{color:var(--ink-2)}
.card-f{margin:0 -16px -16px;padding:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-f .hint{margin-left:4px}
.card.flush{padding:0;gap:0}
.card.flush>.card-h{padding:16px}
.card.flush>.card-f{margin:0}
.card.danger-zone{border-color:var(--fail-line)}
.callout,.flash,.banner{border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 16px;display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink)}
.callout>.ico,.banner>.ico{margin-top:2px}
.callout.ok,.flash.ok{border-color:var(--ok-line)} .callout.ok>.ico,.flash.ok>.ico{color:var(--ok)}
.callout.wait,.banner{border-color:var(--wait-line)} .callout.wait>.ico,.banner>.ico,.banner b{color:var(--wait)}
.callout.fail,.flash.err,.why{border-color:var(--fail-line)} .callout.fail>.ico,.flash.err>.ico,.why b{color:var(--fail)}
.callout.info,.secret-box{border-color:var(--info-line)} .callout.info>.ico{color:var(--info)}
.callout b,.banner b{font-weight:600}
.banner.row{align-items:center}
.callout.warn{border-color:var(--wait-line)}
.why{border:1px solid var(--fail-line);border-radius:var(--r-lg);padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.secret-box{border:1px solid var(--info-line);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:10px}
.secret{font-family:var(--f-mono);font-size:13px;background:var(--panel);border:1px solid var(--line-ctl);border-radius:var(--r-md);padding:6px 12px;overflow-x:auto;white-space:nowrap;max-width:100%}
.empty-state{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--glow-soft);padding:56px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.empty-state .tile-i{margin-bottom:12px}
.empty-state h3{font-size:16px;line-height:24px;font-weight:600}
.empty-state p{color:var(--ink-2);max-width:42ch}
.empty-state .row{margin-top:12px;justify-content:center}
.empty{padding:40px 24px;text-align:center;color:var(--ink-2);display:flex;flex-direction:column;align-items:center;gap:8px}

/* ================= 7. Bảng ================= */
.tbl-card{min-width:0}
.tbl{overflow-x:auto;min-width:0}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
th{text-align:left;font-size:12px;line-height:16px;font-weight:600;color:var(--ink-2);height:32px;padding:0 12px;background:var(--panel);white-space:nowrap}
th:first-child{border-radius:var(--r-md) 0 0 var(--r-md)} th:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
th.r,td.r{text-align:right}
td{padding:12px;border-bottom:1px solid var(--line-soft);white-space:nowrap;vertical-align:middle;height:56px}
tbody tr:last-child td{border-bottom:0}
tr.link,tr[data-href]{cursor:pointer}
tbody tr{transition:background .15s}
tbody tr:hover td{background:color-mix(in srgb,var(--panel) 45%,transparent)}
td.wrap{white-space:normal}
td .who{display:flex;align-items:center;gap:12px;min-width:0}
td .who b{font-weight:600;display:block}
td .who small{display:block;font-size:12px;line-height:16px;color:var(--ink-2)}
td.act{width:44px;text-align:right;padding-right:4px}
.tbl-foot{display:flex;align-items:center;gap:8px;padding:12px 0 0;font-size:13px;color:var(--ink-2)}
.card .tbl-foot{padding-bottom:0}

/* ================= 8. Tab, menu, hộp thoại ================= */
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs a,.tabs button{height:var(--h-ctl);padding:0 12px;border-radius:var(--r-md);border:0;background:transparent;color:var(--ink-2);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.tabs a:hover,.tabs button:hover{color:var(--ink)}
.tabs [aria-current="page"],.tabs [aria-selected="true"],.tabs [aria-pressed="true"]{background:var(--panel);color:var(--ink)}
.tabs .n{font-size:12px;color:var(--ink-2);font-weight:500}
.menu{margin:0;inset:auto;position:fixed;border:1px solid var(--line-ctl);background:var(--bg);color:var(--ink);border-radius:var(--r-lg);padding:4px;min-width:180px;box-shadow:var(--shadow)}
.menu:popover-open{display:flex;flex-direction:column}
.menu form{margin:0;display:contents}
.menu a,.menu button{height:var(--h-ctl);padding:0 8px;border-radius:var(--r-md);border:0;background:transparent;color:var(--ink);font-size:14px;display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left;width:100%;white-space:nowrap}
.menu a:hover,.menu button:hover{background:var(--panel)}
.menu .danger{color:var(--fail)}
.menu .danger:hover{background:var(--fail-soft)}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px -4px}
.menu .menu-h{padding:6px 8px 4px;font-size:12px;color:var(--ink-2)}
.dlg{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:var(--r-2xl);padding:24px;width:min(512px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow-y:auto;box-shadow:var(--shadow)}
.dlg.wide{width:min(640px,calc(100vw - 32px))}
.dlg::backdrop{background:var(--backdrop)}
.dlg[open]{animation:dlg-in .18s var(--ease)}
@keyframes dlg-in{from{opacity:0;transform:translateY(6px) scale(.985)}}
.dlg-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.dlg-h h2{font-size:16px;line-height:24px;font-weight:600}
.dlg-h .btn{height:24px;width:24px;border-radius:var(--r-sm)}
.dlg-b{display:flex;flex-direction:column;gap:20px}
.dlg-b>p{color:var(--ink-2)}
.dlg-f{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}

/* ================= 9. Khung ứng dụng ================= */
.shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.side{padding:12px 16px 16px;display:flex;flex-direction:column;gap:8px;position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--bg)}
.sw{height:40px;width:100%;padding:8px;border-radius:var(--r-md);border:0;background:transparent;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.sw:hover{background:var(--panel)}
.sw .ico{margin-left:auto;color:var(--ink-2);width:14px;height:14px}
.brand-mark,.sw-av{width:24px;height:24px;border-radius:7px;background:linear-gradient(140deg,#5A9BFF,#0052CC);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.16) inset}
.brand{font-weight:600;font-size:16px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;color:var(--ink)}
a.brand:hover{color:var(--ink)}
.nav{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.nav a,.nav button{height:var(--h-ctl);padding:0 12px;border-radius:var(--r-md);display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:14px;font-weight:400;border:0;background:transparent;width:100%;cursor:pointer;transition:background .15s,color .15s;text-align:left}
.nav a:hover,.nav button:hover{color:var(--ink);background:color-mix(in srgb,var(--panel) 55%,transparent)}
.nav a[aria-current="page"]{background:var(--panel);color:var(--ink)}
.nav a[aria-current="page"] .ico{color:var(--ink)}
.nav .badge{margin-left:auto}
.nav .kbd{margin-left:auto}
.nav-sep{border:0;border-top:1px solid var(--line);margin:8px 12px}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:4px;padding-top:8px}
.side-foot .me{flex:1;min-width:0;height:40px;padding:4px 8px;border-radius:var(--r-md);display:flex;align-items:center;gap:8px;border:0;background:transparent;cursor:pointer;text-align:left;color:var(--ink)}
.side-foot .me:hover{background:var(--panel)}
.side-foot .me b{display:block;font-weight:500;font-size:13px;line-height:16px}
.side-foot .me small{display:block;font-size:12px;line-height:16px;color:var(--ink-2)}
.main{min-width:0;padding:32px 24px 72px}
.main-in{max-width:var(--content-w);margin:0 auto;display:flex;flex-direction:column;gap:24px}
.ph{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;min-height:40px}
.ph>div:first-child{display:flex;flex-direction:column;gap:6px;min-width:0}
.ph p{color:var(--ink-2);max-width:72ch}
.ph-a{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mh{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mh>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.mh p{color:var(--ink-2);max-width:72ch}
.dh{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.dh>div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dh>.ph-a{flex-direction:row;flex:none}
.dh small{font-size:14px;font-weight:600;color:var(--ink-2);line-height:20px}
.dh h1{overflow-wrap:anywhere}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filters .search{flex:1;min-width:200px}
.filters select.input{width:auto;min-width:150px;color:var(--ink-2)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px 24px;margin:0}
.meta>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.meta dt{font-size:12px;line-height:16px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.02em}
.meta dd{margin:0;font-size:14px;color:var(--ink);overflow-wrap:anywhere;display:flex;align-items:center;gap:8px;min-width:0}
.sec-t{font-size:12px;line-height:16px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.02em}
/* dòng sự kiện ngang trên nền chấm */
.events{border-radius:var(--r-lg);background-image:radial-gradient(circle,var(--dots) 1px,transparent 1.2px);background-size:8px 8px;padding:28px 16px;display:flex;align-items:flex-start;overflow-x:auto}
.ev{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:120px;position:relative;flex:none}
.ev-i{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;color:var(--ink-2)}
.ev-i .ico{width:14px;height:14px}
.ev small{font-size:12px;color:var(--ink-2);white-space:nowrap}
.ev-line{flex:0 1 120px;min-width:40px;height:1px;background:var(--line);margin-top:16px}
/* số liệu */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px}
.kpi{display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi span{font-size:12px;line-height:16px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.02em}
.kpi b{font-size:28px;line-height:34px;font-weight:500;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.kpi small{font-size:12px;color:var(--ink-2)}
.usage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px;padding:24px 0;border-bottom:1px solid var(--line)}
.usage:last-child{border-bottom:0}
.usage>div:first-child{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.usage>div:first-child p{color:var(--ink-2);max-width:36ch}
.usage>div:first-child .btn{margin-top:10px}
.urow{display:flex;align-items:center;gap:10px;height:40px;border-bottom:1px solid var(--line-soft)}
.urow:last-child{border-bottom:0}
.urow .v{margin-left:auto;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ring{--p:0;width:16px;height:16px;border-radius:50%;flex:none;background:conic-gradient(var(--tile-ok) calc(var(--p)*1%),var(--gray-4) 0);-webkit-mask:radial-gradient(circle,transparent 5.5px,#000 6px);mask:radial-gradient(circle,transparent 5.5px,#000 6px)}
.ring.warn{background:conic-gradient(var(--tile-wait) calc(var(--p)*1%),var(--gray-4) 0)}
.ring.full{background:conic-gradient(var(--tile-fail) calc(var(--p)*1%),var(--gray-4) 0)}
.bar{height:6px;border-radius:999px;background:var(--gray-3);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);border-radius:999px}
/* tương thích: ô số liệu, bố cục hai cột, danh sách khóa-giá trị */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{border:1px solid var(--line);border-radius:var(--r-xl);padding:16px;display:flex;flex-direction:column;gap:4px}
.tile b{font-size:28px;line-height:34px;font-weight:500;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.tile span{font-size:12px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.02em}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px 16px;font-size:14px;margin:0}
.kv dt{color:var(--ink-2)} .kv dd{margin:0;overflow-wrap:anywhere}

/* luồng tự động hóa (như canvas của Resend) */
.canvas{border:1px solid var(--line);border-radius:var(--r-xl);background-image:radial-gradient(circle,var(--dots) 1px,transparent 1.2px);background-size:16px 16px;padding:32px 16px;display:flex;flex-direction:column;align-items:center}
.flow-node{width:min(560px,100%);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 12px 12px 14px;display:flex;align-items:center;gap:12px}
.flow-node.trigger{border-color:var(--wait-line)}
.flow-node .grow small{display:block;font-size:12px;line-height:16px;color:var(--ink-2)}
.flow-node .grow b{display:block;font-weight:500}
.flow-line{width:1px;height:20px;background:var(--line-ctl)}
.flow-add{width:28px;height:28px;border-radius:50%;padding:0}
.flow-end{font-size:12px;color:var(--ink-2);border:1px dashed var(--line-ctl);border-radius:999px;padding:2px 12px}
.step-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.step-pick button{display:flex;align-items:center;gap:10px;text-align:left;height:auto;padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;width:100%}
.step-pick button:hover{background:var(--panel)}
.step-pick small{display:block;font-size:12px;color:var(--ink-2)}
@media (max-width:560px){.step-pick{grid-template-columns:minmax(0,1fr)}}

/* ================= 10. Trang Bắt đầu ================= */
.onb-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.onb{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.onb-step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;padding:20px 24px;border-top:1px solid var(--line);position:relative}
.onb-step:first-child{border-top:0}
.onb-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:12px;border:1px solid var(--line-ctl);color:var(--ink-2);background:var(--panel)}
.onb-step.done .onb-n{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.onb-step.cur .onb-n{background:var(--btn-bg);border-color:transparent;color:var(--btn-ink);box-shadow:0 0 0 4px var(--panel)}
.onb-step:not(.done):not(.cur) .onb-body h2{color:var(--ink-2)}
.onb-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.progress-ring{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.progress-ring .bar{width:120px}

/* ================= 11. Xem trước tin trên điện thoại (luôn sáng như Zalo) ================= */
.phone{width:100%;max-width:300px;margin:0 auto;aspect-ratio:9/18.5;border-radius:42px;padding:10px;background:linear-gradient(160deg,#2A2A31,#0E0E11);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px #000;position:relative}
.phone-screen{height:100%;border-radius:33px;background:#E9EDF2;overflow:hidden;display:flex;flex-direction:column;color:#111;font-size:13px}
.phone-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 4px;font-size:11.5px;font-weight:600;color:#111}
.phone-notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:999px;background:#000}
.phone-head{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#0068FF;color:#fff}
.phone-head .av{width:30px;height:30px;border-radius:50%;background:#fff;color:#0068FF;display:grid;place-items:center;font-weight:700;font-size:12px}
.phone-head b{font-size:13px;display:flex;align-items:center;gap:4px}
.phone-head small{display:block;font-size:10.5px;opacity:.85}
.phone-body{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.phone-time{align-self:center;font-size:10.5px;color:#6B7280;background:rgba(0,0,0,.06);padding:2px 8px;border-radius:999px}
.zbs{background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.08);overflow:hidden;max-width:92%}
.zbs-top{display:flex;align-items:center;gap:7px;padding:10px 12px 6px;font-size:11px;color:#6B7280}
.zbs-top i{width:18px;height:18px;border-radius:5px;background:#0068FF;color:#fff;font-style:normal;font-weight:700;font-size:10px;display:grid;place-items:center}
.zbs h4{font-size:13.5px;letter-spacing:0;color:#111;padding:0 12px 6px;font-family:var(--f-body);font-weight:650}
.zbs p{padding:0 12px 8px;color:#374151;font-size:12.5px;line-height:1.45}
.zbs dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;padding:0 12px 10px;font-size:12px}
.zbs dt{color:#6B7280} .zbs dd{margin:0;color:#111;font-weight:500}
.zbs-btn{display:block;text-align:center;border-top:1px solid #EEF0F3;padding:9px;color:#0068FF;font-weight:600;font-size:12.5px}
.phone-cap{text-align:center;font-size:12px;color:var(--ink-2);margin-top:12px}

/* ================= 12. Khối code ================= */
.code{background:var(--code-bg);color:var(--code-ink);border:1px solid var(--code-line);border-radius:var(--r-lg);overflow:hidden;min-width:0}
.code-tabs{display:flex;gap:4px;padding:8px 8px 8px;border-bottom:1px solid var(--code-line);overflow-x:auto;align-items:center}
.code-tabs button{height:28px;border:0;background:transparent;color:var(--code-c);padding:0 10px;font-size:13px;cursor:pointer;border-radius:10px;font-weight:600}
.code-tabs button:hover{color:var(--code-ink)}
.code-tabs button[aria-pressed="true"]{color:var(--code-ink);background:rgba(255,255,255,.07)}
.code-tabs .copy{margin-left:auto;border:1px solid var(--code-line);font-weight:500}
.code-label{color:var(--code-c);font-size:12px;padding:0 6px;font-weight:600}
.code pre{margin:0;padding:14px 16px;font-family:var(--f-mono);font-size:12.5px;line-height:1.7;overflow-x:auto}

/* ================= 13. Dòng thời gian dọc ================= */
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:12px;padding-bottom:16px;position:relative}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:6px;top:18px;bottom:2px;width:1px;background:var(--line)}
.dot{width:13px;height:13px;border-radius:50%;margin-top:4px;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.dot.fail{background:var(--fail);box-shadow:0 0 0 3px var(--fail-soft)} .dot.wait{background:var(--wait);box-shadow:0 0 0 3px var(--wait-soft)} .dot.idle{background:var(--gray-8);box-shadow:none}

/* ================= 14. Đăng nhập, đăng ký ================= */
.auth{min-height:100vh;display:grid;place-items:center;padding:40px 16px;background:var(--glow-soft),var(--bg)}
.auth-card{width:100%;max-width:400px;border:1px solid var(--line);border-radius:var(--r-xl);padding:28px;display:flex;flex-direction:column;gap:20px;background:var(--bg)}
.auth-card.wide{max-width:560px}
.auth-card h1{font-size:22px;line-height:28px}
.auth-card .btn.primary{height:40px;border-radius:14px}
.mock{border:1.5px dashed var(--wait)}

/* ================= 15. Bảng lệnh ⌘K ================= */
.cmdk{border:1px solid var(--line-ctl);background:var(--bg);color:var(--ink);border-radius:var(--r-xl);padding:0;width:min(560px,calc(100vw - 32px));box-shadow:var(--shadow);margin-top:12vh}
.cmdk::backdrop{background:var(--backdrop)}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.cmdk-in input{flex:1;border:0;background:transparent;outline:none;font-size:15px}
.cmdk-in input:focus-visible{box-shadow:none}
.cmdk ul{list-style:none;margin:0;padding:6px;max-height:min(380px,60vh);overflow-y:auto}
.cmdk li a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--r-md);color:var(--ink-2);font-size:14px}
.cmdk li a small{margin-left:auto;color:var(--ink-3);font-size:12px}
.cmdk li a[aria-selected="true"],.cmdk li a:hover{background:var(--panel);color:var(--ink)}

/* ================= 16. Trang công khai: giới thiệu, giá ================= */
.site{background:var(--bg);min-height:100vh;overflow-x:hidden}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.topnav{position:sticky;top:0;z-index:20;border-bottom:1px solid transparent;backdrop-filter:saturate(1.4) blur(12px);background:color-mix(in srgb,var(--bg) 72%,transparent)}
.topnav.scrolled{border-bottom-color:var(--line)}
.topnav .wrap{display:flex;align-items:center;gap:28px;height:60px}
.topnav nav{display:flex;gap:22px;font-size:14px}
.topnav nav a{color:var(--ink-2)} .topnav nav a:hover{color:var(--ink)}
.topnav .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.hero{position:relative;padding:88px 0 56px;text-align:center}
.hero::before{content:"";position:absolute;inset:-120px 0 auto 0;height:620px;background:var(--glow);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(60% 55% at 50% 30%,#000 30%,transparent 75%);opacity:.35;pointer-events:none}
.hero>*{position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);border:1px solid var(--line-ctl);background:var(--panel);border-radius:999px;padding:4px 12px 4px 6px}
.eyebrow b{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:1px 8px;font-weight:600;font-size:11.5px}
.hero h1{font-size:clamp(38px,6.4vw,72px);line-height:1.04;letter-spacing:-.045em;font-weight:600;margin:22px auto 0;max-width:18ch;padding-bottom:.06em}
.grad{background:linear-gradient(180deg,var(--ink) 30%,color-mix(in srgb,var(--ink) 55%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-blue{background:linear-gradient(90deg,#6EA8FF,#3D8BFF 40%,#8B7CFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:clamp(16px,2vw,19px);color:var(--ink-2);max-width:60ch;margin:20px auto 0;line-height:1.55}
.hero .cta{display:flex;gap:10px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.hero .fine{margin-top:14px;font-size:12.5px;color:var(--ink-3)}
.showcase{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:36px;align-items:center;margin-top:56px;text-align:left}
.showcase .phone{max-width:272px}
.showcase .code{box-shadow:var(--shadow)}
.section{padding:84px 0;border-top:1px solid var(--line)}
.section-h{max-width:640px;display:flex;flex-direction:column;gap:12px;margin-bottom:40px}
.section-h.center{margin-left:auto;margin-right:auto;text-align:center;align-items:center}
.section-h h2{font-size:clamp(28px,3.6vw,40px);line-height:1.08;letter-spacing:-.035em;font-weight:600}
.section-h p{color:var(--ink-2);font-size:16px;line-height:1.55}
.kicker{font-family:var(--f-mono);font-size:12px;color:var(--accent);letter-spacing:.02em}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.feat{background:var(--bg);padding:28px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:background .2s}
.feat:hover{background:var(--bg-2)}
.feat .fi{width:34px;height:34px;border-radius:10px;border:1px solid var(--line-ctl);background:var(--panel);display:grid;place-items:center;color:var(--accent)}
.feat h3{font-size:15.5px;margin-top:6px}
.feat p{color:var(--ink-2);font-size:14px;line-height:1.55}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.checklist li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.checklist li b{color:var(--ink);font-weight:550;display:block}
.checklist .ck{width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-top:1px}
.checklist .ck .ico{width:13px;height:13px;stroke-width:2.5}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--f-mono);font-size:12px;border:1px solid var(--line-ctl);background:var(--panel);color:var(--ink-2);border-radius:999px;padding:3px 10px}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.step3{border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;display:flex;flex-direction:column;gap:8px;position:relative}
.step3::before{counter-increment:s;content:"0" counter(s);font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.step3 p{color:var(--ink-2);font-size:14px;line-height:1.55}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{border:1px solid var(--line);border-radius:var(--r-xl);padding:26px;display:flex;flex-direction:column;gap:18px;position:relative}
.plan.hot{border-color:var(--accent-line);background:linear-gradient(180deg,var(--accent-soft),transparent 40%)}
.plan .badge{position:absolute;top:-12px;left:24px;font-size:11.5px;font-weight:600;background:var(--accent);color:#fff;border-radius:999px;padding:0 10px;height:22px}
.plan h3{font-size:15px;color:var(--ink-2);font-weight:500}
.price{font-size:38px;font-weight:600;letter-spacing:-.04em;line-height:1}
.price small{font-size:14px;color:var(--ink-3);font-weight:500;letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink-2)}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li .ico{color:var(--accent);margin-top:2px}
.plan.ent{padding:24px 26px}
.ent-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;gap:28px;align-items:center}
.ent-row ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.calc input[type=range]{width:100%;height:auto}
.calc-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.calc-opt{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.calc-opt.best{border-color:var(--accent-line);background:var(--accent-soft)}
.calc-opt b{font-size:22px;letter-spacing:-.025em;font-weight:600;font-variant-numeric:tabular-nums}
.calc-opt em{font-style:normal;font-size:13px;color:var(--ink);font-weight:550;display:flex;gap:8px;align-items:center}
.calc-opt em small{font-size:11px;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:0 7px}
.calc-opt span{font-size:12.5px;color:var(--ink-3)}
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:18px 4px}
.faq summary{cursor:pointer;font-weight:550;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--ink-3);font-size:18px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);margin-top:10px;max-width:75ch;line-height:1.6}
.cta-band{border:1px solid var(--line);border-radius:var(--r-xl);padding:56px 32px;text-align:center;background:var(--glow),var(--bg);display:flex;flex-direction:column;align-items:center;gap:16px}
.cta-band h2{font-size:clamp(26px,3.4vw,38px);line-height:1.1;letter-spacing:-.035em}
.foot{border-top:1px solid var(--line);padding:40px 0 56px;color:var(--ink-3);font-size:13px}
.foot .wrap{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap}
.foot a{color:var(--ink-2)} .foot a:hover{color:var(--ink)}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}

/* ================= 17. Tài liệu ================= */
.docs{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;padding-top:36px;padding-bottom:96px}
.docs-nav{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 100px);overflow-y:auto;font-size:14px}
.docs-nav .nav-group{font-size:12px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.02em;padding:16px 12px 6px}
.docs-nav a{color:var(--ink-2);height:32px;display:flex;align-items:center;padding:0 12px;border-radius:var(--r-md)}
.docs-nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--panel) 55%,transparent)}
.docs-nav a[aria-current="page"]{color:var(--ink);background:var(--panel)}
.prose{max-width:780px;display:flex;flex-direction:column;gap:16px;min-width:0}
.prose h1{font-size:34px;line-height:1.15;letter-spacing:-.035em;font-weight:600}
.prose h2{font-size:21px;line-height:1.3;margin-top:22px;padding-top:6px;letter-spacing:-.02em}
.prose h3{font-size:15.5px;margin-top:8px}
.prose p,.prose li{color:var(--ink-2);font-size:15px;line-height:1.7}
.prose p b,.prose li b{color:var(--ink);font-weight:550}
.prose ul,.prose ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.prose code:not(pre code){font-family:var(--f-mono);font-size:.86em;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1px 5px;color:var(--ink)}
.prose .lede{font-size:17px;color:var(--ink-2)}
.prose table{font-size:14px;display:block;overflow-x:auto}
.prose td{white-space:normal;height:auto}
.callout.prose-c{display:block}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.pager a{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;display:flex;flex-direction:column;gap:2px;color:var(--ink)}
.pager a:hover{border-color:var(--line-ctl);background:var(--panel)}
.pager a small{color:var(--ink-3);font-size:12px}
.pager a.next{text-align:right;grid-column:2}
.method{font-family:var(--f-mono);font-size:11px;font-weight:600;border-radius:5px;padding:1px 6px;margin-right:6px}
.method.get{color:var(--ok);background:var(--ok-soft)} .method.post{color:var(--info);background:var(--info-soft)} .method.patch{color:var(--wait);background:var(--wait-soft)} .method.delete{color:var(--fail);background:var(--fail-soft)}

/* ================= 18. Trang tra cứu design system ================= */
.ds-sec{display:flex;flex-direction:column;gap:16px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.ds-sec:last-child{border-bottom:0}
.ds-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ds-sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.ds-sw div{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;font-size:12px}
.ds-sw i{display:block;height:48px}
.ds-sw span{display:block;padding:8px 10px;color:var(--ink-2)}
.ds-sw b{display:block;color:var(--ink);font-weight:500;font-family:var(--f-mono);font-size:11.5px}

/* ================= 19. Điện thoại, máy tính bảng ================= */
@media (max-width:1000px){
  .onb-wrap{grid-template-columns:minmax(0,1fr)}
  .onb-wrap .phone-col{display:none}
  .showcase,.split{grid-template-columns:minmax(0,1fr)}
  .grid3,.plans,.steps3,.ent-row,.calc-out{grid-template-columns:minmax(0,1fr)}
  .docs{grid-template-columns:minmax(0,1fr);gap:20px}
  .docs-nav{position:static;max-height:none;flex-direction:row;flex-wrap:wrap;gap:4px}
  .docs-nav .nav-group{display:none}
  .usage{grid-template-columns:minmax(0,1fr);gap:16px}
}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;padding:12px 16px 8px;border-bottom:1px solid var(--line)}
  .nav{flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:4px;scrollbar-width:none}
  .nav a,.nav button{width:auto;white-space:nowrap;flex:none}
  .nav-sep{display:none}
  .nav .search-item{display:none}
  .side-foot{margin-top:0;padding-top:0}
  .main{padding:24px 16px 64px}
  .two{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topnav nav{display:none}
}
@media (max-width:560px){
  h1{font-size:24px;line-height:30px}
  .banner.row .grow{flex-basis:100%}
  .onb-step{grid-template-columns:minmax(0,1fr);padding:18px}
  .kv{grid-template-columns:110px minmax(0,1fr)}
  .topnav .right .ghost{display:none}
  .hero{padding-top:56px}
  .dh .tile-i.lg{width:48px;height:48px;border-radius:14px}
  .filters select.input{flex:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}