/* ApexOS × Apex — skin เลียนแบบระบบเดิมของลูกค้า (ref-crt/)
 * พื้นฟ้าเทาอ่อน · การ์ดขาวมุมมน 16px เงานุ่ม · sidebar ขาว เมนู active = พื้นกรมท่าทึบตัวขาว
 * ปุ่มหลักกรมท่า · KPI ไอคอนสีพาสเทล · ฟอนต์ IBM Plex Sans Thai
 */
:root {
  --v-navy: 15 107 92;         /* #1e3a8a ปุ่ม/เมนู active */
  --v-navy-deep: 50 51 56;     /* #172554 ตัวหนังสือหัวข้อ */
  --v-ink: 30 41 59;           /* #1e293b body */
  --v-muted: 100 116 139;      /* #64748b */
  --v-faint: 148 163 184;      /* #94a3b8 */
  --v-line: 226 232 240;       /* #e2e8f0 */
  --v-surface: 240 244 250;    /* #f0f4fa พื้นหน้า */
  --v-card: 255 255 255;
  --v-green: 22 163 74;  --v-green-bg: 220 252 231;
  --v-red: 220 38 38;    --v-red-bg: 254 226 226;
  --v-amber: 217 119 6;  --v-amber-bg: 254 243 199;
  --v-orange: 234 88 12; --v-orange-bg: 255 237 213;
  --v-purple: 124 58 237;--v-purple-bg: 237 233 254;
  --v-blue: 37 99 235;   --v-blue-bg: 219 234 254;
  --v-shadow: 0 1px 3px rgb(30 41 59 / .05), 0 4px 16px -8px rgb(30 41 59 / .08);
}
html { scroll-behavior: smooth; }
body.ts-page main { font-family: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif; background: rgb(var(--v-surface)); color: rgb(var(--v-ink)); }
.num { font-variant-numeric: tabular-nums; }
.ts-page main h1, .ts-page main h2, .ts-page main h3, .ts-page main .hd { color: rgb(var(--v-navy-deep)); font-weight: 700; }

/* ── การ์ด ── */
.v-card { background: rgb(var(--v-card)); border-radius: 16px; box-shadow: var(--v-shadow); border: 1px solid rgb(var(--v-line) / .6); }
.v-card-h { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: rgb(var(--v-navy-deep)); font-size: 1.05rem; }
.v-card-h i { width: 20px; height: 20px; color: rgb(var(--v-navy)); }

/* ── KPI แบบเรียบ (แถบบนหน้าบันทึกการโทร) ── */
.v-kpi { background: #fff; border-radius: 16px; box-shadow: var(--v-shadow); padding: 1rem 1.25rem; }
.v-kpi-l { font-size: .78rem; color: rgb(var(--v-muted)); }
.v-kpi-n { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: rgb(var(--v-navy)); font-variant-numeric: tabular-nums; }
.v-kpi-n.g { color: rgb(var(--v-green)); } .v-kpi-n.p { color: rgb(var(--v-purple)); } .v-kpi-n.k { color: rgb(var(--v-navy-deep)); }
.v-kpi-s { font-size: .75rem; color: rgb(var(--v-faint)); }

/* ── KPI มีไอคอนสี (ภาพรวม/แดชบอร์ด) ── */
.v-stat { background: #fff; border-radius: 16px; box-shadow: var(--v-shadow); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.v-stat-top { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: rgb(var(--v-muted)); }
.v-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.v-ico i { width: 17px; height: 17px; }
.v-ico-blue { background: rgb(var(--v-blue-bg)); color: rgb(var(--v-blue)); }
.v-ico-green { background: rgb(var(--v-green-bg)); color: rgb(var(--v-green)); }
.v-ico-purple { background: rgb(var(--v-purple-bg)); color: rgb(var(--v-purple)); }
.v-ico-amber { background: rgb(var(--v-amber-bg)); color: rgb(var(--v-amber)); }
.v-ico-red { background: rgb(var(--v-red-bg)); color: rgb(var(--v-red)); }
.v-ico-orange { background: rgb(var(--v-orange-bg)); color: rgb(var(--v-orange)); }
.v-stat-n { font-size: 1.75rem; font-weight: 700; line-height: 1.15; color: rgb(var(--v-navy-deep)); font-variant-numeric: tabular-nums; }
.v-stat-n.g { color: rgb(var(--v-green)); } .v-stat-n.p { color: rgb(var(--v-purple)); } .v-stat-n.b { color: rgb(var(--v-navy)); }
.v-stat-f { font-size: .75rem; color: rgb(var(--v-muted)); }
.v-up { color: rgb(var(--v-green)); font-weight: 600; } .v-down { color: rgb(var(--v-red)); font-weight: 600; }

/* ── ปุ่ม ── */
.v-btn { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; padding: .6rem 1.1rem; border-radius: 12px; border: 1px solid rgb(var(--v-line)); background: #fff; color: rgb(var(--v-navy-deep)); transition: .15s; white-space: nowrap; }
.v-btn:hover { background: rgb(var(--v-surface)); }
.v-btn i { width: 17px; height: 17px; }
.v-btn-primary { background: rgb(var(--v-navy)); border-color: rgb(var(--v-navy)); color: #fff; }
.v-btn-primary:hover { background: rgb(var(--v-navy-deep)); }
.v-btn-green { background: #15803d; border-color: #15803d; color: #fff; } .v-btn-green:hover { background: #166534; }
.v-btn-orange { background: #ea580c; border-color: #ea580c; color: #fff; } .v-btn-orange:hover { background: #c2410c; }
.v-btn-purple { background: #7c3aed; border-color: #7c3aed; color: #fff; } .v-btn-purple:hover { background: #6d28d9; }
.v-btn-amber { background: #f59e0b; border-color: #f59e0b; color: #fff; } .v-btn-amber:hover { background: #d97706; }
.v-btn-soft { background: rgb(var(--v-blue-bg)); border-color: transparent; color: rgb(var(--v-navy)); }
.v-btn-lg { padding: .85rem 1.4rem; font-size: 1rem; border-radius: 14px; }
.v-btn[disabled] { opacity: .45; cursor: not-allowed; }
/* ปุ่มเลือก 2 ทาง (โทรออก/โทรเข้า · CRM/Upsell) */
.v-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.v-seg > button { padding: .85rem 1rem; border-radius: 14px; border: 1.5px solid rgb(var(--v-line)); background: #fff; font-weight: 600; color: rgb(var(--v-navy-deep)); display: flex; align-items: center; justify-content: center; gap: .5rem; }
.v-seg > button.on { background: rgb(var(--v-navy)); border-color: rgb(var(--v-navy)); color: #fff; }
/* ปุ่มผลการโทร */
.v-pill { padding: .55rem .95rem; border-radius: 12px; border: 1.5px solid rgb(var(--v-line)); background: #fff; font-size: .875rem; font-weight: 500; color: rgb(var(--v-ink)); }
.v-pill.on { background: rgb(var(--v-navy)); border-color: rgb(var(--v-navy)); color: #fff; }
.v-pill.on-green { background: rgb(var(--v-green)); border-color: rgb(var(--v-green)); color: #fff; }

/* ── ฟอร์ม ── */
.v-label { display: block; font-size: .8rem; font-weight: 600; color: rgb(var(--v-muted)); margin-bottom: .35rem; }
.v-input { width: 100%; border: 1.5px solid rgb(var(--v-line)); border-radius: 12px; padding: .7rem .9rem; font-size: .95rem; background: #fff; color: rgb(var(--v-ink)); outline: none; }
.v-input:focus { border-color: rgb(var(--v-navy)); box-shadow: 0 0 0 3px rgb(var(--v-navy) / .12); }
.v-input-lg { padding: .95rem 1.1rem; font-size: 1.05rem; border-radius: 14px; }
select.v-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' 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 .8rem center; padding-right: 2.4rem; }

/* ── ชิป / สถานะ ── */
.v-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .25rem .65rem; border-radius: 999px; white-space: nowrap; }
.v-chip-blue { background: rgb(var(--v-blue-bg)); color: rgb(var(--v-navy)); }
.v-chip-green { background: rgb(var(--v-green-bg)); color: #15803d; }
.v-chip-red { background: rgb(var(--v-red-bg)); color: #b91c1c; }
.v-chip-amber { background: rgb(var(--v-amber-bg)); color: #b45309; }
.v-chip-orange { background: rgb(var(--v-orange-bg)); color: #c2410c; }
.v-chip-purple { background: rgb(var(--v-purple-bg)); color: #6d28d9; }
.v-chip-gray { background: #f1f5f9; color: rgb(var(--v-muted)); }
.v-chip-navy { background: rgb(var(--v-navy)); color: #fff; }
.v-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }

/* ── ตาราง ── */
.v-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.v-table th { text-align: left; font-weight: 600; color: rgb(var(--v-muted)); font-size: .8rem; padding: .7rem .9rem; border-bottom: 1px solid rgb(var(--v-line)); white-space: nowrap; background: #f8fafc; }
.v-table td { padding: .8rem .9rem; border-bottom: 1px solid rgb(var(--v-line) / .7); vertical-align: middle; }
.v-table tr:last-child td { border-bottom: 0; }
.v-table tbody tr:hover td { background: rgb(var(--v-surface) / .6); }
.v-table th.r, .v-table td.r { text-align: right; }
.v-table th.c, .v-table td.c { text-align: center; }
.v-table tfoot td { font-weight: 700; background: #f8fafc; }
.v-phone { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .85rem; background: #f1f5f9; border-radius: 8px; padding: .2rem .5rem; display: inline-flex; align-items: center; gap: .35rem; }
.v-phone i { width: 13px; height: 13px; color: rgb(var(--v-faint)); }

/* ── progress ── */
.v-bar { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.v-bar > span { display: block; height: 100%; border-radius: 999px; background: rgb(var(--v-green)); }
.v-bar-red > span { background: #f43f5e; } .v-bar-orange > span { background: #f97316; } .v-bar-navy > span { background: rgb(var(--v-navy)); } .v-bar-blue > span { background: #2563eb; }

/* ── กล่องแจ้ง ── */
.v-note { border-radius: 14px; padding: .9rem 1.1rem; font-size: .9rem; display: flex; gap: .6rem; align-items: flex-start; }
.v-note i { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.v-note-amber { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.v-note-blue { background: #eff6ff; border: 1px solid #bfdbfe; color: rgb(var(--v-navy)); }
.v-note-green { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.v-note-red { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.v-note-gray { background: #f8fafc; border: 1px solid rgb(var(--v-line)); color: rgb(var(--v-muted)); }

/* ── ขั้นตอน wizard ── */
.v-steps { display: flex; align-items: flex-start; }
.v-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; position: relative; font-size: .75rem; color: rgb(var(--v-faint)); }
.v-step:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: 50%; width: 100%; height: 2px; background: rgb(var(--v-line)); z-index: 0; }
.v-step-n { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; background: #e2e8f0; color: rgb(var(--v-faint)); z-index: 1; position: relative; }
.v-step.on .v-step-n { background: rgb(var(--v-navy)); color: #fff; box-shadow: 0 0 0 4px rgb(var(--v-navy) / .15); }
.v-step.on { color: rgb(var(--v-navy)); font-weight: 600; }
.v-step.done .v-step-n { background: rgb(var(--v-green)); color: #fff; }
.v-step.done::after { background: rgb(var(--v-green)); }
.v-step.done { color: rgb(var(--v-green)); }

/* ── ตัวกรองแถว ── */
.v-filter { background: #fff; border-radius: 16px; box-shadow: var(--v-shadow); padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.v-filter > div { min-width: 150px; }

/* ── กราฟ div ── */
.v-vbars { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.v-vbars > div { flex: 1; border-radius: 6px 6px 0 0; background: rgb(var(--v-navy)); min-width: 6px; }
.v-hbar { display: grid; grid-template-columns: 140px 1fr 56px; gap: .6rem; align-items: center; font-size: .85rem; }
.v-hbar > .bar { height: 22px; border-radius: 6px; background: #f97316; }
.v-heat { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
.v-heat > div { aspect-ratio: 1.4; border-radius: 6px; display: grid; place-items: center; font-size: .72rem; font-weight: 600; color: #fff; background: #ede9fe; }
.v-heat .h0 { background: #f1f5f9; color: transparent; } .v-heat .h1 { background: #ddd6fe; color: #4c1d95; } .v-heat .h2 { background: #c4b5fd; color: #4c1d95; } .v-heat .h3 { background: #a78bfa; } .v-heat .h4 { background: #7c3aed; } .v-heat .h5 { background: #5b21b6; }
.v-spark { display: flex; align-items: flex-end; gap: 2px; height: 30px; width: 70px; }
.v-spark > i { flex: 1; display: block; background: currentColor; opacity: .55; border-radius: 2px 2px 0 0; }

/* ── sidebar / topbar ── */
.v-side { width: 268px; background: #fff; border-right: 1px solid rgb(var(--v-line)); height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; }
.v-nav a, .v-nav button { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem .85rem; border-radius: 12px; font-size: .95rem; font-weight: 600; color: rgb(var(--v-navy-deep)); transition: .12s; text-align: left; }
.v-nav a:hover, .v-nav button:hover { background: rgb(var(--v-surface)); }
.v-nav a.on { background: rgb(var(--v-navy)); color: #fff; }
.v-nav a i, .v-nav button i { width: 20px; height: 20px; flex-shrink: 0; }
.v-nav .sub a { font-size: .875rem; font-weight: 500; padding: .55rem .85rem .55rem 1.25rem; }
.v-nav .sub a.on { background: rgb(var(--v-blue-bg)); color: rgb(var(--v-navy)); }
.v-nav .sub a i { width: 17px; height: 17px; }
.v-sect { font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: rgb(var(--v-faint)); padding: 1rem .85rem .35rem; }
.v-tag { font-size: .65rem; font-weight: 700; padding: .1rem .45rem; border-radius: 6px; background: #f1f5f9; color: rgb(var(--v-muted)); margin-left: auto; }
.v-nav a.on .v-tag { background: rgb(255 255 255 / .2); color: #fff; }
.v-badge { position: absolute; top: -6px; right: -6px; background: #ef4444; color: #fff; font-size: .68rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; }
.v-ava { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; color: #fff; }

/* toast */
#v-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; display: flex; flex-direction: column; gap: .5rem; }
#v-toast > div { background: rgb(var(--v-navy-deep)); color: #fff; padding: .7rem 1rem; border-radius: 12px; font-size: .9rem; box-shadow: var(--v-shadow); display: flex; align-items: center; gap: .5rem; animation: vt .2s ease-out; }
#v-toast > div.ok { background: #15803d; }
@keyframes vt { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* หน้าเว็บนำเสนอ (ชั้น 1) */
.v-hero { background: linear-gradient(180deg, #fff 0%, rgb(var(--v-surface)) 100%); }
.v-feature { background: #fff; border-radius: 18px; box-shadow: var(--v-shadow); padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.v-feature i.big { width: 26px; height: 26px; color: rgb(var(--v-navy)); }
a.v-feature:hover { transform: translateY(-2px); transition: .15s; }

@media (max-width: 1023px) { .v-side { display: none; } }
@media print { .v-side, #site-top { display: none !important; } }

/* มือถือ: หัวการ์ดที่มีปุ่มหลายปุ่มให้ตกบรรทัดแทนดันจอกว้าง */
@media (max-width: 640px) {
  .flex.justify-between { flex-wrap: wrap; row-gap: .5rem; }
  .grid-cols-\[1fr_1\.4fr\] { grid-template-columns: 1fr; }
}
/* กับดัก: grid item ไม่มี min-width:0 → การ์ดดันจอกว้างบนมือถือ (memory feedback_ui_grid_item_needs_min_width_zero) */
.grid > * { min-width: 0; }
main { overflow-x: hidden; }

/* ── เข้ากับโครง ApexOS: ฟอนต์และเมนูซ้ายใช้ของ Apex ── */
body.ts-page{font-family:Figtree,Anuphan,system-ui,sans-serif;background:var(--bg)}
.ts-page .side a,.ts-page .top a{text-decoration:none}
.ts-page .side .lbl i{display:inline-block}
.ts-page main.main{padding:20px 24px 60px}
.ts-page .side svg,.ts-page .top svg{display:inline-block}
@media(max-width:900px){.ts-page main.main{padding:14px 14px 60px}}