/* ============================================================================ CPBOT v8 — ธีม "Cosmos" ============================================================================ หลักที่ยึด (แผงนี้จัดการเงินจริง — สวยต้องไม่แลกกับความชัดและความเร็ว): 1. ⚡ ไม่เพิ่ม DOM แม้แต่ node เดียว — ดาว/เนบิวลาทำด้วย radial-gradient 2. ⚡ animate เฉพาะ transform / opacity — GPU จัดการ ไม่เกิด reflow 3. ♿ prefers-reduced-motion → หยุดทุก animation 4. 👁 ตัวอักษร/ตัวเลขอยู่บนพื้นทึบเสมอ — ไม่วางบน gradient ที่อ่านยาก 5. 🔌 ไม่พึ่ง build tool / CDN (CSP บล็อกโฮสต์ภายนอก) ============================================================================ */ /* ── ธีม 3 สถานะ ───────────────────────────────────────────── auto → ตามระบบ (ไม่มี data-theme) light → ชนะระบบเสมอ dark → ชนะระบบเสมอ ค่าเริ่มต้นคือ "มืด" · โทเคนชุดสว่างเขียนไว้ 2 ที่โดยจำเป็น (CSS ล้วนไม่มี mixin — แก้ที่หนึ่งต้องแก้อีกที่ด้วย) ────────────────────────────────────────────────────────── */ :root { color-scheme: dark; /* อวกาศลึก */ --void: #070b14; --deep: #0b1120; --surface: #111a2e; --surface-2: #16203a; --border: #1e2b47; --border-lit:#2b3d63; --text: #e8edf7; --muted: #8798b8; --dim: #5a6b8c; /* แสงดาว */ --cyan: #22d3ee; --violet: #a78bfa; --blue: #3b82f6; --accent: var(--cyan); --accent-glow: rgba(34, 211, 238, .35); --ok: #34d399; --warn: #fbbf24; --danger: #fb7185; --ok-bg: rgba(52, 211, 153, .1); --warn-bg: rgba(251, 191, 36, .1); --danger-bg: rgba(251, 113, 133, .1); --info-bg: rgba(34, 211, 238, .08); --radius: 10px; --mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; } /* โหมดสว่าง — ยังคงโทนจักรวาลแต่กลับด้าน (A) ตามระบบ — เฉพาะเมื่อผู้ใช้ไม่ได้บังคับมืด */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --void: #eef2fa; --deep: #f5f7fc; --surface: #ffffff; --surface-2: #f7f9fe; --border: #dde4f2; --border-lit:#b9c8e6; --text: #0e1729; --muted: #5a6b8c; --dim: #8798b8; --cyan: #0891b2; --violet: #7c3aed; --accent: var(--cyan); --accent-glow: rgba(8, 145, 178, .22); --ok: #059669; --warn: #b45309; --danger: #e11d48; } } /* (B) ผู้ใช้บังคับสว่าง — ชนะระบบเสมอ */ :root[data-theme="light"] { color-scheme: light; --void: #eef2fa; --deep: #f5f7fc; --surface: #ffffff; --surface-2: #f7f9fe; --border: #dde4f2; --border-lit:#b9c8e6; --text: #0e1729; --muted: #5a6b8c; --dim: #8798b8; --cyan: #0891b2; --violet: #7c3aed; --accent: var(--cyan); --accent-glow: rgba(8, 145, 178, .22); --ok: #059669; --warn: #b45309; --danger: #e11d48; } /* (C) ผู้ใช้บังคับมืด — ใช้ค่า :root ที่เป็นค่าเริ่มต้นอยู่แล้ว ประกาศไว้เพื่อกำหนด color-scheme ให้ scrollbar/form ถูกโทน */ :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } /* ── พื้นหลังอวกาศ — ไม่มี DOM เพิ่มเลย ────────────────────── 3 ชั้น: เนบิวลา 2 ก้อน + สนามดาว (radial-gradient ซ้ำเป็น tile) */ body { margin: 0; min-height: 100vh; color: var(--text); font-family: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; background-color: var(--void); background-image: radial-gradient(1100px 600px at 12% -8%, rgba(124, 58, 237, .16), transparent 60%), radial-gradient(900px 500px at 92% 4%, rgba(34, 211, 238, .12), transparent 60%), radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7) 50%, transparent 50%), radial-gradient(1px 1px at 65% 12%, rgba(255,255,255,.5) 50%, transparent 50%), radial-gradient(1px 1px at 42% 78%, rgba(255,255,255,.45) 50%, transparent 50%), radial-gradient(1px 1px at 85% 62%, rgba(255,255,255,.55) 50%, transparent 50%), radial-gradient(1px 1px at 10% 88%, rgba(255,255,255,.4) 50%, transparent 50%); background-size: 100% 100%, 100% 100%, 340px 340px, 420px 420px, 300px 300px, 380px 380px, 460px 460px; background-attachment: fixed; } /* โหมดสว่างไม่ต้องมีดาว — บนพื้นสว่างจะกลายเป็นจุดรบกวน เขียน 2 ที่ให้ตรงกับกติกาโทเคนด้านบน */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body { background-image: radial-gradient(1100px 600px at 12% -8%, rgba(124, 58, 237, .07), transparent 60%), radial-gradient(900px 500px at 92% 4%, rgba(8, 145, 178, .07), transparent 60%); } } :root[data-theme="light"] body { background-image: radial-gradient(1100px 600px at 12% -8%, rgba(124, 58, 237, .07), transparent 60%), radial-gradient(900px 500px at 92% 4%, rgba(8, 145, 178, .07), transparent 60%); } /* บังคับมืด — ต้องได้ดาวคืนแม้ระบบตั้งเป็นสว่าง */ :root[data-theme="dark"] body { background-image: radial-gradient(1100px 600px at 12% -8%, rgba(124, 58, 237, .16), transparent 60%), radial-gradient(900px 500px at 92% 4%, rgba(34, 211, 238, .12), transparent 60%), radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7) 50%, transparent 50%), radial-gradient(1px 1px at 65% 12%, rgba(255,255,255,.5) 50%, transparent 50%), radial-gradient(1px 1px at 42% 78%, rgba(255,255,255,.45) 50%, transparent 50%), radial-gradient(1px 1px at 85% 62%, rgba(255,255,255,.55) 50%, transparent 50%), radial-gradient(1px 1px at 10% 88%, rgba(255,255,255,.4) 50%, transparent 50%); } /* ── ปุ่มสลับธีม ──────────────────────────────────────────── */ .theme-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: .78rem; cursor: pointer; transition: color .14s, border-color .14s, box-shadow .14s; } .theme-btn:hover { color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .theme-btn .ico { transition: transform .3s cubic-bezier(.2,.8,.2,1); } .theme-btn:hover .ico { transform: rotate(20deg) scale(1.1); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 1.5rem; margin: 0 0 .2rem; letter-spacing: -.01em; } h2 { font-size: 1.02rem; margin: 0; } h1 .ico, h2 .ico { vertical-align: -.15em; margin-right: .35rem; color: var(--accent); } code, .mono { font-family: var(--mono); font-size: .85em; } .muted { color: var(--muted); } .small { font-size: .85em; } .ok { color: var(--ok); } .danger { color: var(--danger); font-weight: 600; } .accent { color: var(--accent); } .center { text-align: center; } .inline { display: inline; } .spacer { flex: 1; } .ico { flex-shrink: 0; vertical-align: -.15em; } /* ── โครงหน้า ─────────────────────────────────────────────── */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 248px; flex-shrink: 0; background: color-mix(in srgb, var(--surface) 82%, transparent); border-right: 1px solid var(--border); backdrop-filter: blur(14px); } @media (max-width: 880px) { .sidebar { display: none; } } .brand { padding: 1.05rem 1.15rem; font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; } .brand a { color: var(--text); } .brand a:hover { text-decoration: none; } .brand span { background: linear-gradient(92deg, var(--cyan), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: .6rem; min-height: 54px; padding: .4rem 1.1rem; background: color-mix(in srgb, var(--surface) 70%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 20; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; } .content { flex: 1; padding: 1.35rem; max-width: 1140px; width: 100%; } .footer { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .85rem 1.35rem; font-size: .8rem; color: var(--dim); border-top: 1px solid var(--border); } /* ── แถบเตือนโหมดผู้ดูแล ──────────────────────────────────── */ .platform-banner { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .42rem 1.1rem; font-size: .86rem; font-weight: 500; color: #1a1204; background: linear-gradient(92deg, #fbbf24, #f59e0b); position: relative; overflow: hidden; } /* แสงกวาดช้า ๆ — บอกว่ากำลังอยู่ในโหมดพิเศษ */ .platform-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45), transparent 70%); transform: translateX(-100%); animation: sweep 5s ease-in-out infinite; } @keyframes sweep { 0%,60% { transform: translateX(-100%);} 100% { transform: translateX(100%);} } .platform-banner code { background: rgba(0,0,0,.16); padding: .05rem .35rem; border-radius: 4px; } /* ── เมนู ─────────────────────────────────────────────────── */ nav { padding: .3rem .55rem 1.2rem; } nav h3 { margin: 1rem .65rem .3rem; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); } nav a { display: flex; align-items: center; gap: .6rem; padding: .48rem .7rem; margin-bottom: 2px; border-radius: 8px; color: var(--muted); font-size: .9rem; position: relative; transition: color .16s, background-color .16s, transform .16s; } nav a .ico { color: var(--dim); transition: color .16s; } nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; transform: translateX(2px); } nav a:hover .ico { color: var(--accent); } nav a[aria-current="page"] { background: linear-gradient(92deg, var(--accent-glow), transparent 75%); color: var(--text); font-weight: 600; } nav a[aria-current="page"] .ico { color: var(--accent); } /* ขีดเรืองแสงด้านซ้ายของเมนูที่เลือก */ nav a[aria-current="page"]::before { content: ""; position: absolute; left: -.55rem; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 10px var(--accent); } nav .locked { display: flex; align-items: center; gap: .6rem; padding: .48rem .7rem; color: var(--dim); font-size: .9rem; } nav .locked s { text-decoration-color: var(--border-lit); } .pkg-box { margin: .8rem .6rem 0; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: .78rem; } /* ── การ์ด ────────────────────────────────────────────────── */ .card { background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.1rem; padding: 1.1rem; backdrop-filter: blur(10px); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -1.1rem -1.1rem 1.1rem; padding: .78rem 1.1rem; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--surface-2), transparent); border-radius: var(--radius) var(--radius) 0 0; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; flex-wrap: wrap; } /* ── ปุ่ม ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; padding: .48rem .95rem; border: 1px solid var(--border-lit); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-size: .875rem; cursor: pointer; text-decoration: none; transition: transform .14s, border-color .14s, box-shadow .14s, background-color .14s; } .btn:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 4px 16px -6px var(--accent-glow); } .btn:active { transform: translateY(0); } .btn-primary { background: linear-gradient(94deg, var(--cyan), var(--blue)); border-color: transparent; color: #051018; font-weight: 600; } .btn-primary:hover { box-shadow: 0 6px 22px -6px var(--accent-glow); } .btn-line { background: #06c755; border-color: #06c755; color: #fff; font-weight: 600; } .btn-block { width: 100%; } .btn-link { background: none; border: none; color: var(--muted); font: inherit; font-size: .875rem; cursor: pointer; padding: 0; transition: color .14s; } .btn-link:hover { color: var(--danger); } /* ── แจ้งเตือน ────────────────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: .5rem; padding: .65rem .95rem; border: 1px solid; border-radius: 8px; margin-bottom: .9rem; font-size: .875rem; } .alert .ico { margin-top: .18rem; } .alert-ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); } .alert-error { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); } .alert-warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); } .alert-info { background: var(--info-bg); border-color: color-mix(in srgb, var(--cyan) 35%, transparent); color: var(--text); } /* ── ป้าย ─────────────────────────────────────────────────── */ .chip, .tag { display: inline-flex; align-items: center; gap: .25rem; padding: .08rem .5rem; border-radius: 999px; font-size: .72rem; line-height: 1.7; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); } .tag-locked { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); } .tag-custom { background: var(--info-bg); border-color: var(--cyan); color: var(--cyan); } .tag-nopkg { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); } .tag-play { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); } /* ⚡ ตัวชี้วัดความเร็ว — ตัวเลขจริงจาก server ไม่ใช่ของประดับ */ .speed { display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .5rem; border-radius: 999px; font-family: var(--mono); font-size: .72rem; background: var(--ok-bg); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); } .speed .ico { animation: flick 2.4s ease-in-out infinite; } .speed.is-slow { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); } @keyframes flick { 0%,88%,100% { opacity: 1; } 92% { opacity: .35; } } /* ── ฟอร์ม ────────────────────────────────────────────────── */ .form label { display: block; margin-bottom: .85rem; } .form label > span { display: block; margin-bottom: .28rem; font-size: .84rem; color: var(--muted); } input[type=text], input[type=password], input[type=search], select { width: 100%; padding: .55rem .7rem; border: 1px solid var(--border-lit); border-radius: 8px; background: var(--deep); color: var(--text); font: inherit; font-size: .9rem; transition: border-color .14s, box-shadow .14s; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; } input:disabled, input:disabled + * { cursor: not-allowed; } .input-icon { position: relative; display: inline-block; } .input-icon .ico { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--dim); pointer-events: none; } .input-icon input { padding-left: 2rem; } .toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.05rem; flex-wrap: wrap; } .toolbar input[type=search] { width: 250px; } .toolbar .btn-primary { margin-left: auto; } .sticky-bottom { position: sticky; bottom: 0; z-index: 10; padding: .8rem 0; background: linear-gradient(to top, var(--void) 62%, transparent); } .rules { list-style: none; padding: 0; margin: .2rem 0 1rem; font-size: .82rem; } .rules li { color: var(--dim); padding-left: 1.3rem; position: relative; } .rules li::before { content: "○"; position: absolute; left: .25rem; } .rules li.pass { color: var(--ok); } .rules li.pass::before { content: "●"; } /* ── หน้า login ───────────────────────────────────────────── */ body.bare { display: grid; place-items: center; min-height: 100vh; padding: 1.2rem; } .bare-wrap { width: 100%; max-width: 400px; } .bare-theme { position: fixed; top: 1rem; right: 1rem; z-index: 10; } .login-card { padding: 1.8rem; } .login-title { text-align: center; margin-bottom: .15rem; font-size: 1.7rem; } .login-title span { background: linear-gradient(92deg, var(--cyan), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; } .divider { display: flex; align-items: center; gap: .7rem; margin: 1.1rem 0; color: var(--dim); font-size: .78rem; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .hint { font-size: .78rem; color: var(--dim); margin-top: .8rem; } /* ── ตัวเลขสรุป ───────────────────────────────────────────── */ .stat-row { display: grid; gap: .9rem; margin-bottom: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); } .stat { margin: 0; position: relative; overflow: hidden; } /* เส้นเรืองแสงบนขอบบน — ไล่สีต่างกันตามลำดับ */ .stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--violet)); opacity: .8; } .stat-label { font-size: .8rem; color: var(--muted); } .stat-value { font-size: 1.85rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .kv { display: grid; grid-template-columns: 150px 1fr; gap: .45rem 1rem; margin: 0; } .kv dt { color: var(--muted); font-size: .85rem; } .kv dd { margin: 0; } /* แถบวัดสัดส่วน */ .meter { height: 6px; border-radius: 999px; overflow: hidden; background: var(--deep); border: 1px solid var(--border); margin-bottom: .9rem; } .meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 12px var(--accent-glow); animation: grow .7s cubic-bezier(.2,.8,.2,1) both; } @keyframes grow { from { transform: scaleX(0); transform-origin: left; } } /* ── ⭐ หน้ากติกาห้อง ─────────────────────────────────────── */ .policy-group { padding-bottom: .6rem; } .policy-grid { display: grid; gap: 1px; background: var(--border); grid-template-columns: repeat(auto-fill, minmax(304px, 1fr)); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .policy-item { display: flex; align-items: flex-start; gap: .65rem; padding: .62rem .78rem; background: var(--surface); cursor: pointer; transition: background-color .13s; } .policy-item:hover { background: var(--surface-2); } .policy-item input { margin-top: .28rem; flex-shrink: 0; } .policy-item.is-locked, .policy-item.is-nopkg { cursor: not-allowed; opacity: .6; } .policy-text { min-width: 0; } .policy-name { display: block; font-size: .88rem; } .policy-key { display: block; font-size: .7rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .defaults-table { width: 100%; border-collapse: collapse; } .defaults-table th { text-align: left; font-size: .78rem; color: var(--muted); font-weight: 600; padding: .4rem .6rem; border-bottom: 1px solid var(--border); } .defaults-table td { padding: .42rem .6rem; border-bottom: 1px solid var(--border); } .defaults-table tr:last-child td { border-bottom: none; } .defaults-table tr:hover td { background: var(--surface-2); } .col-sw { width: 72px; text-align: center; } /* ── รายการห้อง ───────────────────────────────────────────── */ .room-list { display: grid; gap: 1.05rem; grid-template-columns: repeat(auto-fit, minmax(324px, 1fr)); } .room-card { display: flex; flex-direction: column; transition: transform .16s, border-color .16s; } .room-card:hover { transform: translateY(-2px); border-color: var(--border-lit); } .room-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; } .room-stats { display: flex; gap: 1.05rem; text-align: right; } .room-stats strong { display: block; font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; } .room-meta { display: grid; grid-template-columns: 96px 1fr; gap: .32rem .85rem; margin: 0 0 .95rem; font-size: .85rem; } .room-meta dt { color: var(--muted); } .room-meta dd { margin: 0; overflow: hidden; text-overflow: ellipsis; } .room-foot { margin-top: auto; } /* ── หน้า error ───────────────────────────────────────────── */ .big { font-size: 3.2rem; line-height: 1; margin-bottom: .45rem; } .pre-error { text-align: left; background: var(--deep); border: 1px solid var(--border); border-radius: 8px; padding: .75rem; overflow-x: auto; font-size: .8rem; white-space: pre-wrap; word-break: break-word; } .table-wrap { overflow-x: auto; } .table { width: 100%; font-size: .9rem; } /* ── เข้าหน้าใหม่แบบนุ่ม ๆ ────────────────────────────────── */ .content > * { animation: rise .32s cubic-bezier(.2,.8,.2,1) both; } .content > *:nth-child(2) { animation-delay: .04s; } .content > *:nth-child(3) { animation-delay: .08s; } .content > *:nth-child(4) { animation-delay: .12s; } @keyframes rise { from { opacity: 0; transform: translateY(6px); } } /* ── ♿ เคารพการตั้งค่าผู้ใช้ — ปิด animation ทั้งหมด ──────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .content > * { opacity: 1; transform: none; } } /* ── ป้ายบอกว่านี่แผงไหน ───────────────────────────────────────── 2 แผงใช้ route ชุดเดียวกันโดยเจตนา หน้าตาจึงเหมือนกันเกือบหมด ถ้าไม่ติดป้าย คนเปิด 2 แท็บพร้อมกันจะแยกไม่ออกว่ากำลังแก้ของใคร */ .brand .panel-tag { display: block; margin-top: .15rem; font-size: .68rem; font-style: normal; letter-spacing: .02em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; width: fit-content; } /* แผงเจ้าของ = สีเตือน เพราะแก้ข้อมูลลูกค้าได้ */ .brand .panel-tag-owner { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); } /* ── ตาราง / ฟอร์ม / sticky bar ที่หน้าแพ็คเกจใช้ ─────────────── */ .form label { display: block; margin-bottom: .9rem; } .form label > span:first-child { display: block; margin-bottom: .3rem; font-weight: 600; font-size: .9rem; } .form input[type=text], .form input[type=number], .form input[type=password], .form input[type=search], .form textarea, .form select { width: 100%; padding: .55rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--fg); font: inherit; } .form textarea { resize: vertical; } .input-icon { position: relative; display: inline-flex; align-items: center; } .input-icon svg { position: absolute; left: .55rem; opacity: .55; pointer-events: none; } .input-icon input { padding: .5rem .7rem .5rem 2.1rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--fg); font: inherit; min-width: 15rem; } /* แถบบันทึกที่ลอยติดขอบล่าง — ฟอร์ม 109 ฟีเจอร์ยาวเกินกว่าจะเลื่อนกลับไปกดบนสุด */ .sticky-bottom { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: .8rem; margin-top: 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--bg-soft) 92%, transparent); backdrop-filter: blur(8px); } .table-wrap { overflow-x: auto; } /* ตารางเทียบกว้างเกินจอแน่ ๆ */ .table { border-collapse: collapse; width: 100%; font-size: .9rem; } .table th, .table td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); text-align: left; } .table thead th { position: sticky; top: 0; background: var(--bg-soft); z-index: 1; } .table .center { text-align: center; }