/* ════════════════════════════════════════════════════════════════════════ VisionX — Design System v3 · "Quiet Retail Ops" (03 ส.ค. 2569) ──────────────────────────────────────────────────────────────────────── v3 = ขัดเงาจาก v2 ตามดีไซน์ที่อนุมัติ (แบบ 2a) — ไม่มีการเปลี่ยนชื่อ class แม้แต่ตัวเดียว ทุกอย่างเป็นการปรับค่าใน CSS เท่านั้น: 1) ระยะห่างแน่นขึ้น (density 80) — ขอบหน้า 24/26 → 14/20px, ช่องไฟการ์ด 16 → 12px, แถวตาราง 12 → 7px, หัวการ์ด 14/18 → 10/14px 2) เลิกใช้สีเป็นพื้นการ์ด — .vx-kpi ทุกตัวเป็นกล่องขาวกรอบเส้นบาง 1px + เส้นหนา 2px ใต้กล่องเป็นตัวบอกความหมาย (navy=ยอด, เขียว=กำไร, เหลือง=ต้องตามงาน, แดง=ปัญหา). ไอคอนกลมสีใน KPI ถูกซ่อน 3) ตัวเลขทุกตัวเป็นฟอนต์ mono เรียงหลักตรงกัน (tabular-nums) 4) .vx-eyebrow ถูกซ่อน — ซ้ำกับ breadcrumb + หัวข้อ h1 (ลดคำฟุ่มเฟือย) 5) แถบบนเป็นพื้นขาว 52px + ช่องค้นหามีคีย์ลัด ⌘K (ใส่ด้วย ::after) 6) เมนูข้าง 248 → 224px, ปุ่มเมนูแน่นขึ้น, หน้าที่อยู่เป็นแถบ navy เต็ม ── โหลดฟอนต์ครั้งเดียวใน ── ════════════════════════════════════════════════════════════════════════ */ :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 (v3: แบนลงเล็กน้อย ให้ดูเป็นเครื่องมือทำงาน) ── */ --vx-r-sm:7px; --vx-r:9px; --vx-r-md:11px; --vx-r-lg:12px; --vx-r-xl:16px; --vx-r-pill:100px; /* ── Elevation (v3: ใช้เส้นแทนเงาเกือบทั้งหมด) ── */ --vx-sh-sm:none; --vx-sh:0 1px 2px rgba(15,23,42,.04); --vx-sh-md:0 4px 16px rgba(3,25,60,.06); --vx-sh-lg:0 12px 40px rgba(3,25,60,.14); --vx-ring:0 0 0 3px var(--vx-navy-50); /* ── Layout (v3) ── */ --vx-side-w:224px; --vx-page-max:1520px; --vx-gap:12px; /* ช่องไฟมาตรฐานระหว่างการ์ด */ --vx-pad-page:14px 20px 20px; --vx-pad-card:12px 14px; /* ตัวการ์ด */ --vx-pad-cardhead:10px 14px; --vx-pad-cell:7px 14px; /* ช่องตาราง */ } /* ── 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:10px;padding:14px 16px;border-bottom:1px solid var(--vx-line-2)} .vx-brand__logo{width:32px;height:32px;border-radius:9px;background:var(--vx-navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:-.02em;flex:none} .vx-brand__name{font-weight:800;font-size:13.5px;letter-spacing:-.01em;line-height:1.2} .vx-brand__name small{display:block;font-size:10.5px;color:var(--vx-muted-2);font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px} .vx-nav{flex:1;overflow-y:auto;padding:8px} .vx-nav__label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--vx-muted-3);padding:8px 10px 4px} .vx-nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--vx-r);color:var(--vx-ink-2);font-size:13px;font-weight:500;margin-bottom:1px;transition:background .12s,color .12s} .vx-nav a .vx-ic{width:17px;height:17px;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:19px;height:19px;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,.22);color:#fff} .vx-side__user{padding:10px 14px;border-top:1px solid var(--vx-line-2);display:flex;align-items:center;gap:9px} .vx-side__user .vx-av{width:30px;height:30px;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 (v3: พื้นขาว สูง 52px) ── */ .vx-topbar{flex:none;z-index:60;background:var(--vx-surface);border-bottom:1px solid var(--vx-line);padding:0 20px;min-height:52px;display:flex;align-items:center;gap:12px} .vx-crumb{font-size:12.5px;color:var(--vx-muted-2);display:flex;align-items:center;gap:7px;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} /* ค้นหา + คีย์ลัด ⌘K (แสดงด้วย ::after — ไม่ต้องแก้ HTML) */ .vx-search{margin-left:auto;width:270px;position:relative} .vx-search .vx-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--vx-muted-2);pointer-events:none;width:15px;height:15px} .vx-search::after{content:"⌘K";position:absolute;right:9px;top:50%;transform:translateY(-50%);font-family:var(--vx-mono);font-size:11px;background:var(--vx-surface);border:1px solid var(--vx-line);border-radius:5px;padding:1px 5px;color:var(--vx-muted);pointer-events:none} .vx-search input{width:100%;font-family:inherit;font-size:13px;padding:8px 46px 8px 32px;border:1px solid var(--vx-line-strong);background:var(--vx-surface-2);border-radius:var(--vx-r);color:var(--vx-ink)} .vx-search input::placeholder{color:var(--vx-muted-2)} .vx-search input:focus{outline:none;border-color:var(--vx-navy);background:var(--vx-surface);box-shadow:var(--vx-ring)} .vx-tb-btn{position:relative;width:36px;height:36px;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:6px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--vx-danger);border:1.5px solid #fff} .vx-burger{display:none;width:36px;height:36px;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:var(--vx-pad-page);max-width:var(--vx-page-max);width:100%} .vx-page-head{margin-bottom:var(--vx-gap)} /* v3: eyebrow ซ่อน — ข้อความซ้ำกับ breadcrumb และหัวข้อ */ .vx-eyebrow{display:none} .vx-page-head h1{font-size:21px;font-weight:800;letter-spacing:-.025em;margin:0 0 3px} .vx-page-head .sub{font-size:12.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:0 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:36px} .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:0 10px;font-size:12px;min-height:30px;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:var(--vx-gap)} .vx-card__head{padding:var(--vx-pad-cardhead);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:13px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:8px} .vx-card__head h2 .vx-ic{width:15px;height:15px;color:var(--vx-navy)} .vx-card__body{padding:var(--vx-pad-card)} .vx-card__link{font-size:12px;font-weight:700;color:var(--vx-navy)} /* การ์ดที่มี .vx-dd อยู่ข้างใน ต้องเปิด overflow ไม่ให้เมนูถูกตัด (ใช้กับการ์ดที่ไม่มีตารางเลื่อน) */ .vx-card--dd{overflow:visible} /* ── Grids ── */ .vx-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--vx-gap)} .vx-cols{display:grid;grid-template-columns:1.45fr 1fr;gap:var(--vx-gap)} /* ── ระบบ layout กลาง — จังหวะ/ระยะเดียวกันทุกหน้า ── */ .vx-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px} .vx-chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 10px} /* R13: Pagination ตัวเลข (ภาพตัวอย่าง Aus 08-03) — ‹ 1 2 3 … n › กล่อง 32px active navy */ .vx-pager{display:flex;gap:6px;align-items:center;justify-content:center;padding:14px;flex-wrap:wrap} .vx-pager a,.vx-pager span{min-width:32px;height:32px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--vx-line-strong);border-radius:8px;background:var(--vx-surface);font-size:13px;font-weight:600;color:var(--vx-ink-2);font-variant-numeric:tabular-nums;text-decoration:none} .vx-pager a:hover{border-color:var(--vx-navy);color:var(--vx-navy)} .vx-pager .is-active{background:var(--vx-navy);border-color:var(--vx-navy);color:#fff;font-weight:800} .vx-pager .dots{border:0;background:none;color:var(--vx-muted-2);min-width:auto;padding:0 2px} .vx-pager .is-off{opacity:.4} .vx-mt{margin-top:var(--vx-gap)} .vx-form-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px} .vx-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:var(--vx-gap)} /* ════════════ KPI — v3: กล่องขาว กรอบเส้นบาง + เส้นสีใต้กล่อง ════════════ */ .vx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--vx-gap);margin-bottom:var(--vx-gap)} .vx-kpi{background:var(--vx-surface);border:1px solid var(--vx-line);border-bottom:2px solid var(--vx-navy);border-radius:var(--vx-r-lg);padding:12px 14px 11px} .vx-kpi{position:relative;overflow:visible} .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)} /* v3: ไอคอนกลมสีใน KPI ถูกซ่อน — ลดการใช้สีในการ์ด */ .vx-kpi__ico{display:none} .vx-kpi__val{font-size:29px;font-weight:800;letter-spacing:-.03em;margin-top:3px;font-family:var(--vx-mono);font-variant-numeric:tabular-nums;line-height:1.05;color:var(--vx-ink)} .vx-kpi__sub{font-size:12px;color:var(--vx-muted-2);margin-top:3px} /* accent = ตัวเลขหลักของหน้า (เดิมเป็นการ์ดไล่สี navy) */ .vx-kpi--accent{background:var(--vx-surface);border-color:var(--vx-line);border-bottom-color:var(--vx-navy);color:var(--vx-ink)} .vx-kpi--accent::after{content:none} .vx-kpi--accent .vx-kpi__label{color:var(--vx-muted-2);opacity:1} .vx-kpi--accent .vx-kpi__val{color:var(--vx-ink)} .vx-kpi--warn{border-bottom-color:var(--vx-warn)} .vx-kpi--warn .vx-kpi__val{color:var(--vx-ink)} .vx-kpi--ok{border-bottom-color:var(--vx-ok)} .vx-kpi--ok .vx-kpi__val{color:var(--vx-ok)} .vx-kpi--danger{border-bottom-color:var(--vx-danger)} .vx-kpi--danger .vx-kpi__val{color:var(--vx-danger)} a.vx-kpi{display:block;color:inherit;text-decoration:none} a.vx-kpi:hover{border-color:var(--vx-line-strong)} /* ════════════ 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:8px 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:var(--vx-pad-cell);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} /* เลื่อนเฉพาะส่วน: ลิสต์/ตารางยาวเลื่อนในการ์ดตัวเอง ไม่ดันทั้งหน้า */ .vx-scrollbox{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .vx-scrollbox .vx-tbl thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--vx-line)} /* ── หัวคอลัมน์เรียงลำดับได้: คลิกสลับน้อย→มาก / มาก→น้อย ── */ .vx-sort{display:flex;width:100%;min-height:34px;align-items:center;gap:5px;padding:8px 14px;color:inherit;text-decoration:none;white-space:nowrap;font:inherit;cursor:pointer} .vx-tbl thead th:has(.vx-sort){padding:0} .vx-tbl thead th.r .vx-sort{justify-content:flex-end} .vx-tbl thead th.c .vx-sort{justify-content:center} .vx-sort__ic{width:10px;height:13px;flex:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none} .vx-sort__ic .up,.vx-sort__ic .dn{stroke:var(--vx-muted-3)} .vx-sort:hover{color:var(--vx-navy)} .vx-sort:hover .vx-sort__ic .up,.vx-sort:hover .vx-sort__ic .dn{stroke:var(--vx-navy-200)} .vx-sort.is-asc,.vx-sort.is-desc{color:var(--vx-navy)} .vx-sort.is-asc .vx-sort__ic .up{stroke:var(--vx-navy)} .vx-sort.is-asc .vx-sort__ic .dn{stroke:var(--vx-line-strong)} .vx-sort.is-desc .vx-sort__ic .dn{stroke:var(--vx-navy)} .vx-sort.is-desc .vx-sort__ic .up{stroke:var(--vx-line-strong)} .vx-sort:hover{background:var(--vx-surface-3)} @media (max-width:720px){.vx-sort{min-height:44px}} /* ════════════ PILLS / STATUS ════════════ */ /* สถานะแยกด้วย สี + จุด(รูปทรง) + ข้อความ — a11y-safe */ .vx-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--vx-r-pill);font-size:11px;font-weight:800;white-space:nowrap;line-height:1.6} .vx-pill::before{content:"";width:5px;height:5px;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:5px 12px;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)} /* ════════════ DROPDOWN (คลิกแล้วเลื่อนลงมาเลือก) ════════════ */ /* ใช้
+ +
— ไม่ใช้ JS, ปิดเองเมื่อคลิกที่อื่นด้วย vxCloseDD() ที่หน้าเพจ (ออปชัน) */ .vx-dd{position:relative;display:inline-block} .vx-dd>summary{list-style:none;cursor:pointer} .vx-dd>summary::-webkit-details-marker{display:none} .vx-dd>summary::marker{content:""} .vx-dd .chev{transition:transform .15s} .vx-dd[open]>summary .chev{transform:rotate(180deg)} .vx-dd[open]>summary{border-color:var(--vx-navy);color:var(--vx-navy)} .vx-dd__menu{position:absolute;z-index:90;top:calc(100% + 6px);left:0;min-width:236px;max-height:340px;overflow-y:auto;background:var(--vx-surface);border:1px solid var(--vx-line-strong);border-radius:var(--vx-r-md);box-shadow:var(--vx-sh-md);padding:6px;display:flex;flex-direction:column;gap:1px} .vx-dd__menu--right{left:auto;right:0} .vx-dd__menu--wide{min-width:300px} .vx-dd__label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--vx-muted-3);padding:6px 10px 4px} .vx-dd__menu a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--vx-r-sm);font-size:13px;font-weight:600;color:var(--vx-ink-2);text-decoration:none} .vx-dd__menu a:hover{background:var(--vx-surface-3);color:var(--vx-ink)} .vx-dd__menu a.is-active{background:var(--vx-navy);color:#fff;font-weight:700} .vx-dd__menu a .n{margin-left:auto;font-family:var(--vx-mono);font-size:11.5px;color:var(--vx-muted)} .vx-dd__menu a.is-active .n{color:rgba(255,255,255,.82)} .vx-dd__sep{height:1px;background:var(--vx-line-2);margin:5px 0} .vx-dd__body{padding:4px 8px 8px;display:flex;flex-direction:column;gap:8px} /* ── Date range picker (.vx-range) ───────────────────────────────────── โครง:
+ ปุ่มตั้งใจให้เงียบ (ไม่มีกรอบ) จนกว่าจะชี้/เปิด — เป็นตัวกรอง ไม่ใช่ CTA พรีเซ็ตเป็น · ช่วงกำหนดเองเป็น
ทั้งคู่ส่งเป็น query string ตรง ๆ PHP อ่าน $_GET['range'] / from,to ได้เลย */ .vx-range__btn{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 9px;border:1px solid transparent;border-radius:var(--vx-r-sm); background:transparent;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--vx-ink-2);cursor:pointer;white-space:nowrap} .vx-range__btn:hover{background:var(--vx-surface-3);border-color:var(--vx-line)} .vx-range__btn .vx-ic{width:14px;height:14px;color:var(--vx-muted)} .vx-range__btn .chev{width:12px;height:12px;color:var(--vx-muted-2)} .vx-range[open]>.vx-range__btn{background:var(--vx-surface);border-color:var(--vx-navy);color:var(--vx-navy)} .vx-range[open]>.vx-range__btn .vx-ic{color:var(--vx-navy)} .vx-range__menu{min-width:262px;padding:6px} .vx-range__menu a{font-size:12.5px;padding:7px 9px} .vx-range__menu a .n{font-size:11px} .vx-range__form{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:2px 2px 0} .vx-range__form .full{grid-column:1/-1} .vx-range__form .vx-label{font-size:11px;margin-bottom:3px} .vx-range__form .vx-input{font-size:12.5px;padding:6px 8px;min-height:32px;font-family:var(--vx-mono)} @media (max-width:720px){.vx-range__form .vx-input{font-size:16px;min-height:40px}} /* ── dropdown ระดับแถวในตาราง: กางลง "ในเซลล์" (ไม่ absolute) จึงไม่ถูก .vx-card overflow ตัด ── */ .vx-rowdd{display:inline-block;min-width:0;position:relative} .vx-rowdd>summary{list-style:none;cursor:pointer;white-space:nowrap} .vx-rowdd>summary::-webkit-details-marker{display:none} .vx-rowdd>summary::marker{content:""} .vx-rowdd .chev{transition:transform .15s} .vx-rowdd[open]>summary .chev{transform:rotate(180deg)} .vx-rowdd[open]>summary{border-color:var(--vx-navy);color:var(--vx-navy)} /* เมนูเป็น position:fixed → ไม่ถูก overflow ของการ์ด/กรอบเลื่อนตัด และไม่รีเซ็ต scroll ของตาราง ตำแหน่งคำนวณด้วย vxRowDDPos() ในหน้าเพจ (เปิด/เลื่อน/ย่อ-ขยายจอ แล้ววางตำแหน่งใหม่) */ .vx-rowdd__menu{position:fixed;z-index:200;top:0;left:0;width:min(252px,86vw);background:var(--vx-surface);border:1px solid var(--vx-line-strong);border-radius:var(--vx-r-md);box-shadow:var(--vx-sh-md);padding:8px;text-align:left} .vx-rowdd:not([open]) .vx-rowdd__menu{display:none} .vx-tbl tbody tr:has(.vx-rowdd[open]) td{background:var(--vx-surface-2)} .vx-rowdd__menu .acts{flex-direction:column;align-items:stretch;gap:6px} .vx-rowdd__menu .acts>*{width:100%} .vx-rowdd__menu .vx-btn{width:100%;justify-content:flex-start} .vx-rowdd__menu .shipf{max-width:none;margin-top:0} .vx-rowdd__menu .vx-select,.vx-rowdd__menu .vx-input{max-width:100%} .vx-rowdd__menu .shipd{display:block} .vx-rowdd__menu .vx-pill{align-self:flex-start;white-space:normal} .vx-rowdd__menu .vx-hint:empty{display:none} /* ════════════ FORMS ════════════ */ .vx-label{display:block;font-size:12px;font-weight:700;color:var(--vx-ink-2);margin-bottom:4px} .vx-input,.vx-select,.vx-textarea{font-family:inherit;font-size:13.5px;padding:8px 11px;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%;min-height:36px} .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)} /* ── inline validation: ช่องผิด/ไม่ครบ ขึ้นแดง (ไม่ล้างข้อมูลที่กรอกไว้) ── */ .vx-input.is-err,.vx-select.is-err,.vx-textarea.is-err{border-color:var(--vx-danger)!important;box-shadow:0 0 0 3px var(--vx-danger-bg)!important} .vx-fielderr{color:var(--vx-danger);font-size:12px;font-weight:700;margin-top:4px} tr.is-err td{background:var(--vx-danger-bg)} .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:10px 12px;margin-bottom:var(--vx-gap);box-shadow:var(--vx-sh-sm)} .vx-hint{color:var(--vx-muted);font-size:12px} /* ไฮไลต์รายการที่เลือกด้วยคีย์บอร์ดในช่องค้นหาเดิมของหน้า (04 / 16) */ .ord-cbo__item.is-on,.pos-cbo__item.is-on{background:var(--vx-navy-50)!important;box-shadow:inset 2px 0 0 var(--vx-navy)} /* ── Autocomplete / Combobox (.vx-combo) ──────────────────────────────── ครอบ ตัวจริงยังอยู่ (ซ่อน) — name/onchange/ค่าเดิมทำงานเหมือนเดิม */ .vx-combo{position:relative;display:block} .vx-combo__hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .vx-combo__in{font-family:inherit;font-size:13.5px;padding:8px 28px 8px 11px;border:1px solid var(--vx-line-strong);background:var(--vx-surface);border-radius:var(--vx-r);color:var(--vx-ink);width:100%;min-height:36px;text-overflow:ellipsis} .vx-combo__in::placeholder{color:var(--vx-muted-2)} .vx-combo__in:focus{outline:none;border-color:var(--vx-navy);box-shadow:var(--vx-ring)} .vx-combo__in.is-err{border-color:var(--vx-danger)!important;box-shadow:0 0 0 3px var(--vx-danger-bg)!important} .vx-combo__cv{position:absolute;right:9px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--vx-muted-2);width:13px;height:13px} .vx-combo.is-open .vx-combo__cv{transform:translateY(-50%) rotate(180deg)} /* เมนูใช้ position:fixed — ไม่ถูกตัดด้วย overflow ของตาราง/การ์ด */ .vx-combo__menu{position:fixed;z-index:340;background:var(--vx-surface);border:1px solid var(--vx-line-strong);border-radius:var(--vx-r);box-shadow:var(--vx-sh-lg);padding:4px;max-height:266px;overflow-y:auto;display:none} .vx-combo__menu.is-open{display:block} .vx-combo__opt{display:block;width:100%;text-align:left;font-family:inherit;font-size:13px;color:var(--vx-ink);background:none;border:0;border-radius:var(--vx-r-sm);padding:7px 9px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vx-combo__opt:hover,.vx-combo__opt.is-on{background:var(--vx-navy-50);color:var(--vx-navy)} .vx-combo__opt.is-sel{font-weight:700} .vx-combo__opt b{color:var(--vx-navy);font-weight:800} .vx-combo__opt--new{color:var(--vx-navy);font-weight:700;border-top:1px solid var(--vx-line-2);border-radius:0;margin-top:3px} .vx-combo__none{padding:10px;font-size:12.5px;color:var(--vx-muted-2);text-align:center} /* ── File Upload · ลาก & วาง (.vx-drop) ───────────────────────────────── โครงสร้าง: .vx-drop > label.vx-drop__zone > input[type=file] + .vx-drop__list พฤติกรรมทั้งหมดอยู่ใน vx.js (`data-vx-drop`) — input จริงยังชื่อ name เดิม */ .vx-drop{display:block} .vx-drop__in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .vx-drop__zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center; min-height:132px;padding:18px;cursor:pointer;border:1.5px dashed var(--vx-line-strong);border-radius:var(--vx-r-md); background:var(--vx-surface-2);transition:border-color .14s,background .14s,color .14s} .vx-drop__zone:hover{border-color:var(--vx-navy);background:var(--vx-navy-50)} .vx-drop__zone:focus-within{outline:none;border-color:var(--vx-navy);box-shadow:var(--vx-ring)} .vx-drop.is-over .vx-drop__zone{border-color:var(--vx-navy);border-style:solid;background:var(--vx-navy-50)} .vx-drop__ico{color:var(--vx-muted-2);margin-bottom:4px} .vx-drop__zone:hover .vx-drop__ico,.vx-drop.is-over .vx-drop__ico{color:var(--vx-navy)} .vx-drop__t{font-size:13.5px;font-weight:700;color:var(--vx-ink-2)} .vx-drop__s{font-size:12px;color:var(--vx-muted)} .vx-drop__s u{text-decoration:underline;color:var(--vx-navy)} .vx-drop__hint{font-size:11px;color:var(--vx-muted-2);margin-top:5px} /* รายการไฟล์ที่เลือกแล้ว */ .vx-drop__list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .vx-drop__list:empty{display:none} .vx-file{position:relative;width:78px} .vx-file__img{width:78px;height:78px;border-radius:var(--vx-r-sm);border:1px solid var(--vx-line);background:var(--vx-surface-3) center/cover no-repeat;display:grid;place-items:center;color:var(--vx-muted-2)} .vx-file__nm{font-size:10.5px;color:var(--vx-muted);margin-top:3px;line-height:1.3;word-break:break-all;max-height:26px;overflow:hidden} .vx-file__x{position:absolute;top:-5px;right:-5px;width:20px;height:20px;border-radius:50%;border:1px solid var(--vx-line); background:var(--vx-surface);color:var(--vx-ink-3);font-size:11px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:var(--vx-sh-md)} .vx-file__x:hover{background:var(--vx-danger);border-color:var(--vx-danger);color:#fff} .vx-file--main .vx-file__img{border:2px solid var(--vx-navy)} .vx-file__tag{position:absolute;bottom:22px;left:0;right:0;font-size:9.5px;font-weight:800;text-align:center;background:var(--vx-navy);color:#fff;padding:1px 0} /* ── Radio/checkbox option card ── */ .vx-optcard{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;border:1px solid var(--vx-line-strong);border-radius:var(--vx-r);padding:9px 12px;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) ════════════ */ .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.is-open{display:flex} /* เปิดด้วย JS: vxConfirm() */ .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:13px 16px;border-bottom:1px solid var(--vx-line-2)} .vx-modal__head h3{margin:0;font-size:14.5px;font-weight:800;letter-spacing:-.01em} .vx-modal__body{padding:16px} .vx-modal__x{margin-left:auto;width:28px;height:28px;border-radius:8px;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:10px} .vx-form-grid .full{grid-column:1/-1} .vx-modal__foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px} @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:9px 12px;margin-bottom:10px;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:26px 16px;color:var(--vx-muted-2)} .vx-empty__ico{width:44px;height:44px;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} /* ════════════ TOAST / SNACKBAR ════════════ */ /* วางกล่อง
ไว้ท้าย body ครั้งเดียว แล้วเรียก vxToast('ข้อความ','ok|warn|danger') — ดูสคริปต์ตัวอย่างใน 17-components.html */ .vx-toasts{position:fixed;z-index:400;bottom:18px;right:18px;display:flex;flex-direction:column;gap:8px;width:min(380px,92vw);pointer-events:none} .vx-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:9px;background:var(--vx-ink);color:#fff;border-radius:var(--vx-r);padding:11px 13px;box-shadow:var(--vx-sh-lg);font-size:13px;font-weight:600;line-height:1.45;animation:vx-toast-in .22s cubic-bezier(.4,0,.2,1)} .vx-toast .vx-ic{margin-top:1px;color:#fff;opacity:.9} .vx-toast--ok{background:var(--vx-ok)} .vx-toast--warn{background:var(--vx-warn)} .vx-toast--danger{background:var(--vx-danger)} .vx-toast__act{margin-left:auto;background:none;border:0;color:#fff;font-family:inherit;font-size:12.5px;font-weight:800;text-decoration:underline;cursor:pointer;padding:0 2px;white-space:nowrap} .vx-toast__x{background:none;border:0;color:#fff;opacity:.65;cursor:pointer;font-size:14px;line-height:1;padding:1px 2px} .vx-toast__x:hover{opacity:1} .vx-toast.is-out{animation:vx-toast-out .18s ease forwards} @keyframes vx-toast-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}} @keyframes vx-toast-out{to{opacity:0;transform:translateY(6px)}} @media (max-width:560px){.vx-toasts{left:12px;right:12px;bottom:12px;width:auto}} /* ════════════ TOOLTIP ════════════ */ /* (--wrap = ข้อความหลายบรรทัด) */ .vx-tip{position:relative;display:inline-flex} .vx-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%) translateY(3px);background:var(--vx-ink);color:#fff;font-size:11.5px;font-weight:600;line-height:1.45;padding:5px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:320} .vx-tip::before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--vx-ink);opacity:0;transition:opacity .12s;z-index:320} .vx-tip:hover::after,.vx-tip:focus-within::after{opacity:1;transform:translateX(-50%) translateY(0)} .vx-tip:hover::before,.vx-tip:focus-within::before{opacity:1} .vx-tip--wrap::after{white-space:normal;width:min(210px,44vw);text-align:left} /* ถ้าตัวชี้อยู่ใกล้ขอบซ้าย/ขวาของการ์ด ใช้ตัวปรับทิศให้กล่องไม่ล้น */ .vx-tip--start::after{left:0;transform:translateY(3px)} .vx-tip--start:hover::after,.vx-tip--start:focus-within::after{transform:translateY(0)} .vx-tip--end::after{left:auto;right:0;transform:translateY(3px)} .vx-tip--end:hover::after,.vx-tip--end:focus-within::after{transform:translateY(0)} .vx-tip--right::after{bottom:auto;top:50%;left:calc(100% + 8px);transform:translateY(-50%)} .vx-tip--right::before{bottom:auto;top:50%;left:calc(100% + 3px);transform:translateY(-50%);border-top-color:transparent;border-right-color:var(--vx-ink)} .vx-tip__ic{width:14px;height:14px;border-radius:50%;background:var(--vx-surface-3);color:var(--vx-muted);display:grid;place-items:center;font-size:9.5px;font-weight:800;cursor:help;flex:none} /* ════════════ CONFIRMATION DIALOG (บนโครง .vx-modal เดิม) ════════════ */ .vx-modal__box--confirm{max-width:430px} .vx-confirm{display:flex;gap:12px;padding:18px} .vx-confirm__ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--vx-danger-bg);color:var(--vx-danger)} .vx-confirm--warn .vx-confirm__ico{background:var(--vx-warn-bg);color:var(--vx-warn)} .vx-confirm--info .vx-confirm__ico{background:var(--vx-info-bg);color:var(--vx-info)} .vx-confirm h3{margin:0 0 4px;font-size:15px;font-weight:800;letter-spacing:-.01em} .vx-confirm p{margin:0;font-size:13px;color:var(--vx-ink-3);line-height:1.55} .vx-confirm__what{margin-top:8px;background:var(--vx-surface-2);border:1px solid var(--vx-line);border-radius:var(--vx-r-sm);padding:8px 10px;font-size:12.5px} .vx-confirm__foot{display:flex;justify-content:flex-end;gap:8px;padding:0 18px 16px} /* ════════════ NOTIFICATION PANEL (ใช้กับ .vx-dd) ════════════ */ .vx-notif{display:flex;gap:9px;padding:9px 10px;border-radius:var(--vx-r-sm);text-decoration:none;color:inherit} .vx-notif:hover{background:var(--vx-surface-3)} .vx-notif__dot{width:7px;height:7px;border-radius:50%;background:var(--vx-navy);margin-top:5px;flex:none} .vx-notif.is-read .vx-notif__dot{background:var(--vx-line-strong)} .vx-notif__tx b{display:block;font-size:12.5px;font-weight:700} .vx-notif__tx span{font-size:11.5px;color:var(--vx-muted)} .vx-notif__time{margin-left:auto;font-size:11px;color:var(--vx-muted-2);font-family:var(--vx-mono);white-space:nowrap} /* ════════════ RESPONSIVE — tablet/mobile ════════════ */ @media (max-width:980px){ .vx-app{grid-template-columns:1fr} .vx-side{position:fixed;top:0;left:0;bottom:0;width:262px;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:12px;padding-right:12px} .vx-search{display:none} .vx-page{padding:12px 12px 32px} .vx-cols{grid-template-columns:1fr} } @media (max-width:720px){ .vx-kpis{grid-template-columns:repeat(2,1fr)} .vx-kpi__val{font-size:24px} .vx-grid-2{grid-template-columns:1fr} .vx-page-head h1{font-size:19px} /* ปุ่มบนมือถือต้องกดง่าย ≥44px */ .vx-btn{min-height:44px} .vx-btn--sm{min-height:36px} .vx-tb-btn,.vx-burger{width:44px;height:44px} /* prevent iOS input zoom */ .vx-input,.vx-select,.vx-textarea{font-size:16px;min-height:44px} } @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:30px 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: