/* ════════════════════════════════════════════════════════════════════════ VisionX — Design System v2 · "Premium Retail, Trusted SaaS" ──────────────────────────────────────────────────────────────────────── Single deployable stylesheet. Drop into any PHP-echoed page: Load fonts once in : จุดยืน: navy แบรนด์เดิม วางบน "กระดาษอุ่น" (warm paper) แทนเทาเย็น → ดูแพงแบบร้านแฟชั่นจริง ไม่ใช่ dashboard ทั่วไป. ทุกสถานะแยกด้วย สี + รูปทรง + ไอคอน (ไม่พึ่งสีอย่างเดียว). Prefix ทุกคลาสด้วย .vx- เพื่อไม่ชนกับ app.css เดิม. ════════════════════════════════════════════════════════════════════════ */ :root{ /* ── Brand (navy) ── */ --vx-navy:#004199; --vx-navy-deep:#002A63; --vx-navy-ink:#032e6b; --vx-navy-600:#0056c7; --vx-navy-50:#EFF4FB; --vx-navy-100:#DBE6F5; --vx-navy-200:#B8CEEA; --vx-grad-navy:linear-gradient(145deg,#032e6b 0%,#004199 55%,#0a55c2 100%); /* ── Ink / neutrals (warm-leaning) ── */ --vx-ink:#171A20; --vx-ink-2:#3A4150; --vx-ink-3:#5A6272; --vx-muted:#737B8A; --vx-muted-2:#9AA1AE; --vx-muted-3:#B4ABA0; /* ── Surfaces & lines (warm paper) ── */ --vx-bg:#FBFAF7; --vx-surface:#FFFFFF; --vx-surface-2:#FAF8F3; --vx-surface-3:#F4F1EA; --vx-line:#ECE8E0; --vx-line-2:#F0ECE4; --vx-line-strong:#DCD6CC; /* ── Accent (premium gold — sparing) ── */ --vx-gold:#A87C3C; --vx-gold-50:#FBF3E4; /* ── Semantic status ── */ --vx-ok:#0E7A50; --vx-ok-bg:#E8F5EE; --vx-ok-line:#B9E3CC; --vx-warn:#B4791B; --vx-warn-bg:#FBF3E4; --vx-warn-line:#F1E4C6; --vx-danger:#C0453A; --vx-danger-bg:#FBEBE9; --vx-danger-line:#F3CFCB; --vx-info:#004199; --vx-info-bg:#EFF4FB; --vx-info-line:#DBE6F5; --vx-violet:#6b4a9a; --vx-violet-bg:#F2ECFA; /* ── Type ── */ --vx-sans:"Inter","Noto Sans Thai","Noto Sans Lao",system-ui,sans-serif; --vx-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace; /* ── Radius ── */ --vx-r-sm:8px; --vx-r:11px; --vx-r-md:14px; --vx-r-lg:16px; --vx-r-xl:20px; --vx-r-pill:100px; /* ── Elevation ── */ --vx-sh-sm:0 1px 2px rgba(15,23,42,.05); --vx-sh:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04); --vx-sh-md:0 4px 20px rgba(3,25,60,.07); --vx-sh-lg:0 12px 40px rgba(3,25,60,.14); --vx-ring:0 0 0 3px var(--vx-navy-50); /* ── Layout ── */ --vx-side-w:248px; --vx-page-max:1400px; } /* ── Base reset ── */ *,*::before,*::after{box-sizing:border-box} .vx html,.vx body{margin:0} .vx{font-family:var(--vx-sans);color:var(--vx-ink);background:var(--vx-bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} .vx ::selection{background:#cfe0f7} .vx a{color:var(--vx-navy);text-decoration:none} .vx a:hover{color:var(--vx-navy-deep)} .vx-mono{font-family:var(--vx-mono);font-variant-numeric:tabular-nums} .vx-num{font-variant-numeric:tabular-nums} /* Icon sizing helper — use with stroke line-icons (fill:none;stroke:currentColor) */ .vx-ic{width:16px;height:16px;stroke-width:1.7;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none} .vx-ic-sm{width:14px;height:14px} .vx-ic-lg{width:19px;height:19px} /* ════════════ APP SHELL ════════════ */ .vx-app{display:grid;grid-template-columns:var(--vx-side-w) 1fr;height:100vh;height:100dvh;overflow:hidden} .vx-main{min-width:0;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden} /* ── Sidebar ── */ .vx-side{background:var(--vx-surface);border-right:1px solid var(--vx-line);display:flex;flex-direction:column;height:100vh;height:100dvh} .vx-brand{display:flex;align-items:center;gap:11px;padding:17px 18px;border-bottom:1px solid var(--vx-line-2)} .vx-brand__logo{width:36px;height:36px;border-radius:10px;background:var(--vx-navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;letter-spacing:-.02em;flex:none} .vx-brand__name{font-weight:800;font-size:14px;letter-spacing:-.01em;line-height:1.2} .vx-brand__name small{display:block;font-size:10px;color:var(--vx-muted-2);font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px} .vx-nav{flex:1;overflow-y:auto;padding:12px 10px} .vx-nav__label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--vx-muted-3);padding:8px 12px 6px} .vx-nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--vx-r);color:var(--vx-ink-2);font-size:13.5px;font-weight:500;margin-bottom:2px;transition:background .12s,color .12s} .vx-nav a .vx-ic{width:18px;height:18px;stroke-width:1.6;color:var(--vx-muted)} .vx-nav a:hover{background:var(--vx-surface-3);color:var(--vx-ink)} .vx-nav a:hover .vx-ic{color:var(--vx-ink-2)} .vx-nav a.is-active{background:var(--vx-navy);color:#fff;font-weight:700} .vx-nav a.is-active .vx-ic{color:#fff} .vx-nav a .vx-nav__badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:11px;font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums;background:var(--vx-warn-bg);color:var(--vx-warn)} .vx-nav a.is-active .vx-nav__badge{background:rgba(255,255,255,.2);color:#fff} .vx-side__user{padding:12px 14px;border-top:1px solid var(--vx-line-2);display:flex;align-items:center;gap:10px} .vx-side__user .vx-av{width:32px;height:32px;border-radius:50%;background:var(--vx-navy-50);color:var(--vx-navy);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none} .vx-side__user .who{font-size:12px;line-height:1.35;min-width:0} .vx-side__user .who b{display:block;color:var(--vx-ink);font-weight:700} .vx-side__user .who span{color:var(--vx-muted-2)} /* ── Topbar ── */ .vx-topbar{flex:none;z-index:60;background:rgba(251,250,247,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--vx-line);padding:11px 26px;display:flex;align-items:center;gap:14px} .vx-crumb{font-size:12.5px;color:var(--vx-muted-2);display:flex;align-items:center;gap:8px;font-weight:500;min-width:0} .vx-crumb a{color:var(--vx-muted-2)} .vx-crumb .sep{color:#CDC7BB} .vx-crumb b{color:var(--vx-ink);font-weight:700} .vx-search{margin-left:auto;width:280px;position:relative} .vx-search .vx-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--vx-muted-2);pointer-events:none} .vx-search input{width:100%;font-family:inherit;font-size:13px;padding:9px 12px 9px 34px;border:1px solid var(--vx-line-strong);background:var(--vx-surface);border-radius:var(--vx-r);color:var(--vx-ink)} .vx-search input:focus{outline:none;border-color:var(--vx-navy);box-shadow:var(--vx-ring)} .vx-tb-btn{position:relative;width:38px;height:38px;border:1px solid var(--vx-line-strong);background:var(--vx-surface);border-radius:var(--vx-r);cursor:pointer;display:grid;place-items:center;color:var(--vx-ink-3);flex:none} .vx-tb-btn:hover{border-color:var(--vx-navy);color:var(--vx-navy)} .vx-tb-btn__dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--vx-danger);border:1.5px solid #fff} .vx-burger{display:none;width:38px;height:38px;border:1px solid var(--vx-line-strong);background:var(--vx-surface);border-radius:var(--vx-r);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:none} .vx-burger span{display:block;width:17px;height:2px;background:var(--vx-ink-2);border-radius:2px;transition:transform .2s,opacity .2s} /* ── Page container ── */ .vx-page{flex:1;min-height:0;overflow-y:auto;padding:24px 26px 46px;max-width:var(--vx-page-max);width:100%} .vx-page-head{margin-bottom:20px} .vx-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--vx-navy);margin-bottom:8px} .vx-eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--vx-navy)} .vx-page-head h1{font-size:27px;font-weight:800;letter-spacing:-.025em;margin:0 0 6px} .vx-page-head .sub{font-size:13.5px;color:var(--vx-ink-3);margin:0} /* ════════════ BUTTONS ════════════ */ .vx-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;font-family:inherit;font-weight:700;font-size:13px;line-height:1;padding:10px 14px;border-radius:var(--vx-r);border:1px solid var(--vx-line-strong);background:var(--vx-surface);color:var(--vx-ink);cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s,color .12s,box-shadow .12s;min-height:40px} .vx-btn:hover{border-color:var(--vx-navy);color:var(--vx-navy)} .vx-btn:focus-visible{outline:none;box-shadow:var(--vx-ring)} .vx-btn--primary{background:var(--vx-navy);border-color:var(--vx-navy);color:#fff} .vx-btn--primary:hover{background:var(--vx-navy-deep);border-color:var(--vx-navy-deep);color:#fff} .vx-btn--ghost{border-color:transparent;background:transparent;color:var(--vx-muted)} .vx-btn--ghost:hover{background:var(--vx-surface-3);color:var(--vx-ink);border-color:transparent} .vx-btn--success{background:var(--vx-ok);border-color:var(--vx-ok);color:#fff} .vx-btn--success:hover{filter:brightness(.94);color:#fff} /* raise anchor-button color above .vx a (0,1,1) */ .vx a.vx-btn{color:var(--vx-ink)} .vx a.vx-btn--primary,.vx a.vx-btn--success{color:#fff} .vx a.vx-btn--danger{color:var(--vx-danger)} .vx a.vx-btn--ghost{color:var(--vx-muted)} .vx-btn--danger{background:var(--vx-surface);color:var(--vx-danger);border-color:var(--vx-danger-line)} .vx-btn--danger:hover{background:var(--vx-danger);color:#fff;border-color:var(--vx-danger)} .vx-btn--sm{padding:6px 10px;font-size:12px;min-height:32px;border-radius:var(--vx-r-sm)} .vx-btn--block{width:100%} .vx-btn[disabled]{opacity:.5;cursor:not-allowed} /* ════════════ CARDS ════════════ */ .vx-card{background:var(--vx-surface);border:1px solid var(--vx-line);border-radius:var(--vx-r-lg);overflow:hidden;box-shadow:var(--vx-sh-sm)} .vx-card+.vx-card{margin-top:16px} .vx-card__head{padding:14px 18px;border-bottom:1px solid var(--vx-line-2);display:flex;align-items:center;justify-content:space-between;gap:10px} .vx-card__head h2{margin:0;font-size:14px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:8px} .vx-card__head h2 .vx-ic{color:var(--vx-navy)} .vx-card__body{padding:16px 18px} .vx-card__link{font-size:12.5px;font-weight:700;color:var(--vx-navy)} /* ── Grids ── */ .vx-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .vx-cols{display:grid;grid-template-columns:1.6fr 1fr;gap:16px} /* ════════════ KPI ════════════ */ .vx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px} .vx-kpi{background:var(--vx-surface);border:1px solid var(--vx-line);border-radius:var(--vx-r-lg);padding:17px 18px} .vx-kpi__top{display:flex;align-items:center;justify-content:space-between;gap:8px} .vx-kpi__label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-muted-2)} .vx-kpi__ico{width:30px;height:30px;border-radius:9px;background:var(--vx-navy-50);color:var(--vx-navy);display:grid;place-items:center;flex:none} .vx-kpi__val{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:8px;font-variant-numeric:tabular-nums} .vx-kpi__sub{font-size:12px;color:var(--vx-muted-2);margin-top:2px} .vx-kpi--accent{background:var(--vx-grad-navy);border-color:transparent;color:#fff;position:relative;overflow:hidden} .vx-kpi--accent::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 90% -20%,rgba(255,255,255,.16),transparent 60%)} .vx-kpi--accent>*{position:relative} .vx-kpi--accent .vx-kpi__label{color:#fff;opacity:.85} .vx-kpi--accent .vx-kpi__ico{background:rgba(255,255,255,.16);color:#fff} .vx-kpi--warn .vx-kpi__val{color:var(--vx-warn)} .vx-kpi--warn .vx-kpi__ico{background:var(--vx-warn-bg);color:var(--vx-warn)} .vx-kpi--ok .vx-kpi__ico{background:var(--vx-ok-bg);color:var(--vx-ok)} /* ════════════ TABLES ════════════ */ .vx-tbl{width:100%;border-collapse:collapse} .vx-tbl thead th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-muted);font-weight:700;text-align:left;padding:11px 14px;background:var(--vx-surface-2);border-bottom:1px solid var(--vx-line);white-space:nowrap} .vx-tbl thead th.r{text-align:right} .vx-tbl thead th.c{text-align:center} .vx-tbl tbody td{padding:12px 14px;border-bottom:1px solid var(--vx-line-2);font-size:13px;vertical-align:middle} .vx-tbl tbody tr:last-child td{border-bottom:none} .vx-tbl tbody tr:hover td{background:var(--vx-surface-2)} .vx-tbl td.r{text-align:right;font-variant-numeric:tabular-nums} .vx-tbl td.c{text-align:center} .vx-tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ════════════ PILLS / STATUS ════════════ */ /* สถานะแยกด้วย สี + จุด(รูปทรง) + ข้อความ — a11y-safe */ .vx-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--vx-r-pill);font-size:11px;font-weight:800;white-space:nowrap;line-height:1.6} .vx-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .vx-pill--ok{background:var(--vx-ok-bg);color:var(--vx-ok)} .vx-pill--warn{background:var(--vx-warn-bg);color:var(--vx-warn)} .vx-pill--danger{background:var(--vx-danger-bg);color:var(--vx-danger)} .vx-pill--info{background:var(--vx-info-bg);color:var(--vx-info)} .vx-pill--neutral{background:var(--vx-surface-3);color:var(--vx-ink-3)} .vx-pill--violet{background:var(--vx-violet-bg);color:var(--vx-violet)} .vx-pill--sq::before{border-radius:2px} /* ทรงเหลี่ยม = อีกความหมาย */ .vx-pill--nodot::before{display:none} /* chip (filter/tab-like) */ .vx-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--vx-ink-2);border:1px solid var(--vx-line-strong);background:var(--vx-surface);border-radius:var(--vx-r-pill);padding:6px 13px;cursor:pointer;text-decoration:none} .vx-chip:hover{border-color:var(--vx-navy);color:var(--vx-navy)} .vx-chip.is-active{background:var(--vx-navy);border-color:var(--vx-navy);color:#fff} .vx-chip__count{font-family:var(--vx-mono);font-size:11px;background:rgba(0,0,0,.08);border-radius:var(--vx-r-pill);padding:0 7px} .vx-chip.is-active .vx-chip__count{background:rgba(255,255,255,.22)} /* ════════════ FORMS ════════════ */ .vx-label{display:block;font-size:12px;font-weight:700;color:var(--vx-ink-2);margin-bottom:5px} .vx-input,.vx-select,.vx-textarea{font-family:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--vx-line-strong);background:var(--vx-surface);border-radius:var(--vx-r);color:var(--vx-ink);width:100%;max-width:100%} .vx-textarea{resize:vertical} .vx-input:focus,.vx-select:focus,.vx-textarea:focus{outline:none;border-color:var(--vx-navy);box-shadow:var(--vx-ring)} .vx-input::placeholder,.vx-textarea::placeholder{color:var(--vx-muted-2)} .vx-filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--vx-surface);border:1px solid var(--vx-line);border-radius:var(--vx-r-md);padding:12px 14px;margin-bottom:16px;box-shadow:var(--vx-sh-sm)} .vx-hint{color:var(--vx-muted);font-size:12px} /* ── Radio/checkbox option card ── */ .vx-optcard{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;border:1px solid var(--vx-line-strong);border-radius:var(--vx-r);padding:11px 13px;cursor:pointer} .vx-optcard:has(input:checked){border-color:var(--vx-navy);background:var(--vx-navy-50);color:var(--vx-navy)} .vx-optcard input{accent-color:var(--vx-navy);width:16px;height:16px} /* ════════════ MODAL / DIALOG (click-to-open forms) ════════════ */ /* Pure CSS toggle: a hidden checkbox before the overlay controls visibility. Markup:
…
*/ .vx-modal-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .vx-modal{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;padding:6vh 16px 16px;overflow-y:auto} .vx-modal-toggle:checked ~ .vx-modal{display:flex} .vx-modal__scrim{position:fixed;inset:0;background:rgba(3,25,60,.44);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:vx-fade .18s ease} .vx-modal__box{position:relative;background:var(--vx-surface);border:1px solid var(--vx-line);border-radius:var(--vx-r-lg);box-shadow:var(--vx-sh-lg);width:100%;max-width:520px;animation:vx-pop .2s cubic-bezier(.4,0,.2,1)} .vx-modal__head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--vx-line-2)} .vx-modal__head h3{margin:0;font-size:15px;font-weight:800;letter-spacing:-.01em} .vx-modal__body{padding:18px} .vx-modal__x{margin-left:auto;width:30px;height:30px;border-radius:9px;background:var(--vx-surface-3);color:var(--vx-ink-3);display:grid;place-items:center;cursor:pointer;font-size:15px;line-height:1;flex:none} .vx-modal__x:hover{background:var(--vx-danger-bg);color:var(--vx-danger)} .vx-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .vx-form-grid .full{grid-column:1/-1} .vx-modal__foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px} @keyframes vx-fade{from{opacity:0}to{opacity:1}} @keyframes vx-pop{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}} @media (max-width:560px){.vx-form-grid{grid-template-columns:1fr}.vx-modal__box{max-width:none}} @media (prefers-reduced-motion:reduce){.vx-modal__scrim,.vx-modal__box{animation:none}} /* ════════════ FEEDBACK ════════════ */ .vx-msg,.vx-err{border-radius:var(--vx-r);padding:11px 14px;margin-bottom:14px;font-size:13px;font-weight:600;display:flex;gap:8px;align-items:center} .vx-msg{background:var(--vx-ok-bg);border:1px solid var(--vx-ok-line);color:var(--vx-ok)} .vx-err{background:var(--vx-danger-bg);border:1px solid var(--vx-danger-line);color:var(--vx-danger)} .vx-empty{text-align:center;padding:30px 16px;color:var(--vx-muted-2)} .vx-empty__ico{width:48px;height:48px;border-radius:50%;background:var(--vx-surface-3);display:grid;place-items:center;margin:0 auto 10px;color:var(--vx-muted-3)} .vx-empty .t{font-weight:700;color:var(--vx-ink-3);font-size:13.5px} .vx-empty .s{font-size:12px;margin-top:4px} /* ════════════ RESPONSIVE — tablet/mobile ════════════ */ @media (max-width:980px){ .vx-app{grid-template-columns:1fr} .vx-side{position:fixed;top:0;left:0;bottom:0;width:270px;max-width:82vw;z-index:200;transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);box-shadow:8px 0 40px rgba(3,25,60,.2)} body.vx-side-open .vx-side{transform:translateX(0)} body.vx-side-open::before{content:"";position:fixed;inset:0;z-index:150;background:rgba(3,25,60,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} body.vx-side-open{overflow:hidden} .vx-burger{display:flex} .vx-topbar{padding-left:14px;padding-right:14px} .vx-search{display:none} .vx-page{padding:16px 14px 40px} .vx-cols{grid-template-columns:1fr} } @media (max-width:720px){ .vx-kpis{grid-template-columns:repeat(2,1fr)} .vx-grid-2{grid-template-columns:1fr} .vx-page-head h1{font-size:22px} /* prevent iOS input zoom */ .vx-input,.vx-select,.vx-textarea{font-size:16px} } @media (max-width:460px){ .vx-kpis{grid-template-columns:1fr} } /* ════════════ LOADING · SKELETON · ERROR states ════════════ */ .vx-spinner{width:20px;height:20px;border:2.5px solid var(--vx-navy-100);border-top-color:var(--vx-navy);border-radius:50%;display:inline-block;animation:vx-spin .7s linear infinite;vertical-align:middle} .vx-spinner--lg{width:34px;height:34px;border-width:3px} @keyframes vx-spin{to{transform:rotate(360deg)}} .vx-loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:36px 16px;color:var(--vx-muted)} .vx-loading .t{font-size:13px;font-weight:600} /* skeleton shimmer — drop .vx-skel on a sized block */ .vx-skel{background:linear-gradient(90deg,var(--vx-surface-3) 25%,#efece5 37%,var(--vx-surface-3) 63%);background-size:400% 100%;border-radius:8px;animation:vx-shimmer 1.4s ease infinite} .vx-skel--text{height:12px;margin:6px 0} .vx-skel--line{height:14px} @keyframes vx-shimmer{0%{background-position:100% 0}100%{background-position:0 0}} /* button busy state: