/* สไตล์ทั้งระบบอยู่ไฟล์นี้ไฟล์เดียว ค่าธีมทั้งหมดมาจาก project/DESIGN.md · ห้ามสร้างไฟล์ CSS แยกต่อหน้า ห้ามเขียนค่าสีหรือระยะห่างดิบ — ใช้ var(--...) เท่านั้น */ /* TOKENS:BEGIN */ /* generate จาก project/DESIGN.md — ห้ามแก้ด้วยมือ แก้ค่าที่ DESIGN.md แล้วรัน: php scripts/design-sync.php */ :root { --color-brand-primary: #0F66F0; --color-brand-on-primary: #FFFFFF; --color-brand-link: #0A5FEA; --color-brand-cta: #C2410C; --color-brand-on-cta: #FFFFFF; --color-brand-cta-fill: #FD5F18; --color-brand-on-cta-fill: #2B1102; --color-brand-cloud: #2A4FCC; --color-brand-cyan: #0E7490; --color-brand-token: #B4470E; --color-surface-page: #F7FAFE; --color-surface-card: #FFFFFF; --color-surface-raised: #EDF4FD; --color-surface-sunken: #E4EFFC; --color-surface-inverse: #0B1E45; --color-panel-soft-from: #8FBFFD; --color-panel-soft-to: #DCEBFD; --color-panel-brand-from: #1A79F3; --color-panel-brand-to: #21A1FB; --color-panel-on-brand: #FFFFFF; --color-text-strong: #0B1E45; --color-text-normal: #2F3C57; --color-text-muted: #5A667F; --color-text-on-inverse: #F2F6FD; --color-border-subtle: #E6EDF8; --color-border-normal: #D6E1F2; --color-border-strong: #AFC0DC; --color-state-success: #0F7A46; --color-state-warning: #9A5B00; --color-state-danger: #B3261E; --color-state-info: #0A5FEA; --color-tint-primary: rgb(15 102 240 / .08); --color-tint-cta: rgb(253 95 24 / .10); --color-tint-success: rgb(15 122 70 / .10); --color-tint-warning: rgb(154 91 0 / .10); --color-tint-danger: rgb(179 38 30 / .09); --color-tint-cyan: rgb(14 116 144 / .09); --color-tint-cloud: rgb(42 79 204 / .08); --color-effect-glow-primary: rgb(15 102 240 / .14); --color-effect-glow-cloud: rgb(42 79 204 / .10); --color-effect-glow-cta: rgb(253 95 24 / .12); --color-effect-grid: rgb(11 30 69 / .05); --color-effect-scrim: rgb(247 250 254 / .86); --color-effect-hairline: rgb(255 255 255 / .70); --color-focus: #0F66F0; --color-overlay: rgb(11 30 69 / .45); --font-heading: "Kanit"; --font-body: "IBM Plex Sans Thai"; --font-mono: "IBM Plex Mono"; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 3.75rem; --weight-normal: 400; --weight-medium: 500; --weight-bold: 600; --weight-heavy: 700; --leading-tight: 1.3; --leading-snug: 1.45; --leading-normal: 1.75; --leading-loose: 1.95; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px; --shadow-xs: 0 1px 2px rgb(11 30 69 / .05); --shadow-sm: 0 2px 8px rgb(11 30 69 / .06); --shadow-md: 0 10px 30px rgb(11 30 69 / .08); --shadow-lg: 0 24px 60px rgb(11 30 69 / .10); --shadow-glow: 0 10px 24px rgb(15 102 240 / .26); --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(.2,0,0,1); --ease-enter: cubic-bezier(0,0,0,1); --layout-max-width: 1280px; --layout-marketing-width: 1320px; --layout-content-width: 1120px; --layout-form-width: 420px; --layout-form-wide-width: 560px; --layout-auth-split-width: 1280px; --layout-auth-card-width: 760px; --layout-prose-width: 68ch; --layout-control: 44px; --layout-control-sm: 36px; --layout-narrow-width: 880px; --layout-drawer-width: 480px; --layout-header-height: 72px; --layout-sidebar-width: 256px; --layout-sidebar-collapsed: 68px; --layout-breakpoint: 768px; } /* โหมดตามที่ผู้ใช้เลือก — PHP เขียน data-theme ที่ เพื่อไม่ให้หน้ากะพริบตอนโหลด */ :root[data-theme="dark"] { --color-brand-primary: #2E86FF; --color-brand-on-primary: #04101F; --color-brand-link: #79B0FF; --color-brand-cta: #FF7A1F; --color-brand-on-cta: #1A0C02; --color-brand-cta-fill: #FF7A1F; --color-brand-on-cta-fill: #1A0C02; --color-brand-cloud: #8FB4FF; --color-brand-cyan: #38D9E8; --color-brand-token: #FF8A3D; --color-surface-page: #050A16; --color-surface-card: #0C1424; --color-surface-raised: #141F35; --color-surface-sunken: #020610; --color-surface-inverse: #E8EEF9; --color-panel-soft-from: #13233F; --color-panel-soft-to: #0A1322; --color-panel-brand-from: #15498F; --color-panel-brand-to: #186E9E; --color-panel-on-brand: #EAF3FF; --color-text-strong: #F2F6FD; --color-text-normal: #C2CEE4; --color-text-muted: #8797B3; --color-text-on-inverse: #0A1020; --color-border-subtle: #16223A; --color-border-normal: #1E2C49; --color-border-strong: #334770; --color-state-success: #3FD68C; --color-state-warning: #F2B33D; --color-state-danger: #FF7A72; --color-state-info: #79B0FF; --color-tint-primary: rgb(46 134 255 / .18); --color-tint-cta: rgb(255 122 31 / .14); --color-tint-success: rgb(63 214 140 / .14); --color-tint-warning: rgb(242 179 61 / .14); --color-tint-danger: rgb(255 122 114 / .14); --color-tint-cyan: rgb(56 217 232 / .13); --color-tint-cloud: rgb(143 180 255 / .14); --color-effect-glow-primary: rgb(77 163 255 / .22); --color-effect-glow-cloud: rgb(143 180 255 / .18); --color-effect-glow-cta: rgb(255 122 31 / .18); --color-effect-grid: rgb(120 160 220 / .07); --color-effect-scrim: rgb(5 10 22 / .86); --color-effect-hairline: rgb(255 255 255 / .06); --color-focus: #7CC0FF; --color-overlay: rgb(2 6 16 / .74); } /* ยังไม่เคยเลือก — ตามค่าของเครื่อง */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-brand-primary: #2E86FF; --color-brand-on-primary: #04101F; --color-brand-link: #79B0FF; --color-brand-cta: #FF7A1F; --color-brand-on-cta: #1A0C02; --color-brand-cta-fill: #FF7A1F; --color-brand-on-cta-fill: #1A0C02; --color-brand-cloud: #8FB4FF; --color-brand-cyan: #38D9E8; --color-brand-token: #FF8A3D; --color-surface-page: #050A16; --color-surface-card: #0C1424; --color-surface-raised: #141F35; --color-surface-sunken: #020610; --color-surface-inverse: #E8EEF9; --color-panel-soft-from: #13233F; --color-panel-soft-to: #0A1322; --color-panel-brand-from: #15498F; --color-panel-brand-to: #186E9E; --color-panel-on-brand: #EAF3FF; --color-text-strong: #F2F6FD; --color-text-normal: #C2CEE4; --color-text-muted: #8797B3; --color-text-on-inverse: #0A1020; --color-border-subtle: #16223A; --color-border-normal: #1E2C49; --color-border-strong: #334770; --color-state-success: #3FD68C; --color-state-warning: #F2B33D; --color-state-danger: #FF7A72; --color-state-info: #79B0FF; --color-tint-primary: rgb(46 134 255 / .18); --color-tint-cta: rgb(255 122 31 / .14); --color-tint-success: rgb(63 214 140 / .14); --color-tint-warning: rgb(242 179 61 / .14); --color-tint-danger: rgb(255 122 114 / .14); --color-tint-cyan: rgb(56 217 232 / .13); --color-tint-cloud: rgb(143 180 255 / .14); --color-effect-glow-primary: rgb(77 163 255 / .22); --color-effect-glow-cloud: rgb(143 180 255 / .18); --color-effect-glow-cta: rgb(255 122 31 / .18); --color-effect-grid: rgb(120 160 220 / .07); --color-effect-scrim: rgb(5 10 22 / .86); --color-effect-hairline: rgb(255 255 255 / .06); --color-focus: #7CC0FF; --color-overlay: rgb(2 6 16 / .74); } } /* TOKENS:END */ /* ฟอนต์ทั้งหมด self-host อยู่ใน public/assets/fonts/ — ห้ามโหลดจาก CDN (กฎเหล็กข้อ 2) โหลดเฉพาะน้ำหนักที่ใช้จริง และแยก subset ไทย/ละติน เพื่อไม่ให้ผู้ใช้ดาวน์โหลดของที่ไม่ได้ใช้ */ @font-face { font-family: "Kanit"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/kanit-500-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: "Kanit"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/kanit-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Kanit"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/kanit-600-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: "Kanit"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/kanit-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Kanit"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/kanit-700-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: "Kanit"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/kanit-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-thai-400-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-thai-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-thai-500-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-thai-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-thai-600-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-thai-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @layer reset, base, layout, components, utilities; @layer reset { *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, fieldset { margin: 0; } fieldset, legend { padding: 0; border: 0; } ul[class], ol[class] { list-style: none; padding: 0; margin: 0; } img, picture, svg { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } summary::-webkit-details-marker { display: none; } } @layer base { html { color-scheme: light dark; scroll-behavior: smooth; /* ‼️ กันหน้าขยับตอนเปิด modal — ไม่มีบรรทัดนี้แล้วเนื้อหาทั้งหน้าจะกระตุกไปทางขวา ตอน scrollbar หายไป ซึ่งเห็นชัดมากบนหน้าที่มี modal เปิดปิดบ่อย */ scrollbar-gutter: stable; } body { background: var(--color-surface-page); color: var(--color-text-normal); font-family: var(--font-body), system-ui, sans-serif; font-size: var(--text-base); line-height: var(--leading-normal); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-heading), system-ui, sans-serif; line-height: var(--leading-tight); color: var(--color-text-strong); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } /* ลิงก์ในเนื้อความมีเส้นใต้ ลิงก์ที่เป็นปุ่ม/เมนูไม่มี — แยกด้วย class ไม่ใช่ด้วยการเดา */ a { color: var(--color-brand-link); text-underline-offset: .18em; } a:hover { text-decoration-thickness: 2px; } /* ‼️ ภาษาไทยไม่มีช่องว่างระหว่างคำ ถ้าปล่อยให้เบราว์เซอร์ตัดเองจะตัดกลางคำ */ :lang(th) { word-break: normal; overflow-wrap: break-word; line-break: normal; } /* ‼️ หัวข้อไทยต้องหายใจมากกว่าละติน สระบนกับวรรณยุกต์ซ้อนกันสองชั้น ถ้าใช้ line-height เดียวกับละติน บรรทัดบนกับล่างจะชนกัน */ :lang(th) h1, :lang(th) h2, :lang(th) h3, :lang(th) h4 { line-height: var(--leading-snug); } code, kbd, samp { font-family: var(--font-mono), ui-monospace, monospace; font-size: var(--text-sm); } ::selection { background: var(--color-tint-primary); color: var(--color-text-strong); } /* ‼️ select ที่อยู่นอกฟอร์ม (ตัวสลับภาษาบนหัวเว็บ) ต้องหน้าตาเหมือนกับที่อยู่ในฟอร์ม ปล่อยให้เป็นค่าเริ่มต้นของเบราว์เซอร์ = กล่องขาวโดดออกมาบนพื้นมืด และผิดจากทั้งระบบ */ select { min-height: var(--layout-control); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); color: var(--color-text-strong); } /* focus ต้องเห็นชัดทุกจุดที่กดได้ — ห้าม outline:none โดยไม่ใส่แบบอื่นแทน */ :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* ผู้ใช้บางคนเวียนหัวจากการเคลื่อนไหว */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } } @layer layout { /* ------------------------------------------------------- โครงหน้าร้าน */ .container { width: 100%; max-width: var(--layout-marketing-width); margin-inline: auto; padding-inline: var(--space-6); } .container-narrow { max-width: var(--layout-narrow-width); } /* ‼️ หน้าที่เปิดได้ทั้งตอนล็อกอินและไม่ล็อกอิน (คู่มือ) ใช้ layout คนละตัวกันตามสถานะ layout ของ Client Area มี padding ให้อยู่แล้ว แต่ layout หน้าร้านไม่มี เพราะ section ต้องเต็มจอ ตัวห่อนี้จึงเติม padding ให้เฉพาะตอนอยู่ในหน้าร้าน ไม่งั้นเนื้อหาจะชนขอบจอ */ .page-shell { width: 100%; } .site-main > .page-shell { max-width: var(--layout-content-width); margin-inline: auto; padding: var(--space-10) var(--space-6) var(--space-16); } @media (max-width: 768px) { .site-main > .page-shell { padding-inline: var(--space-4); } } /* ‼️ ระยะห่างของ section มาจากตัวแปรตัวเดียว ไม่ได้เขียนค่าซ้ำในแต่ละ section ตอนแรกใช้ 96px คงที่ทุกจอ ผลคือบนโน้ตบุ๊กเห็นเนื้อหาได้ทีละส่วนครึ่ง หน้าจึงดูโล่ง clamp ทำให้จอเล็กแน่นขึ้นและจอใหญ่ยังหายใจได้ */ .section { padding-block: var(--section-y); } .section-tight { padding-block: calc(var(--section-y) * .6); } /* ‼️ หน้าแรกใช้จังหวะแน่นกว่าหน้าอื่นโดยตั้งใจ หน้าแรกต้องให้เห็นว่ามีอะไรขายบ้างภายในหน้าจอเดียวถึงสองจอ ไม่ใช่ไล่เลื่อนทีละส่วน หน้ารายละเอียดสินค้ายังใช้จังหวะเดิม เพราะที่นั่นคนมาอ่าน ไม่ได้มากวาดสายตา */ .section-flow { padding-block: clamp(var(--space-6), 2.2vw, var(--space-10)); } /* ‼️ ส่วนที่มีแถบยกขึ้นคร่อมรอยต่อ ต้องไม่มี padding ของตัวเอง ไม่งั้นจะเกิดช่องว่างสองชั้นซ้อนกันจนหน้าดูโล่งตรงกลาง */ .section-flush { padding-block: 0; } :root { --section-y: clamp(var(--space-12), 6vw, var(--space-20)); } /* สลับพื้นหลังเพื่อสร้างจังหวะการอ่าน ไม่ใช่ให้ทุกส่วนลอยบนพื้นเดียวกันทั้งหน้า */ .section-alt { background: var(--color-surface-sunken); border-block: 1px solid var(--color-border-subtle); } .section-raised { background: var(--color-surface-raised); border-block: 1px solid var(--color-border-subtle); } .site-main { flex: 1; } /* หัวเว็บลอยติดบนสุด พื้นโปร่งแสงเพื่อให้แสงของ hero ทะลุขึ้นมาเล็กน้อย */ .site-header { position: sticky; inset-block-start: 0; z-index: 50; background: var(--color-effect-scrim); backdrop-filter: blur(var(--space-3)); border-block-end: 1px solid var(--color-border-subtle); } .site-header .container { min-height: var(--layout-header-height); display: flex; align-items: center; gap: var(--space-6); } /* กล่องเดียวที่รวมเมนู ตัวสลับภาษา/โหมด และปุ่มบัญชี — ยุบพร้อมกันทั้งก้อนบนจอแคบ */ .site-menu { display: flex; align-items: center; gap: var(--space-4); flex: 1; min-width: 0; } .site-nav { display: flex; align-items: center; gap: var(--space-1); flex: 1; min-width: 0; justify-content: center; } .site-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-text-normal); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); } .site-nav a:hover { background: var(--color-surface-raised); color: var(--color-text-strong); } .site-nav a[aria-current="page"] { color: var(--color-brand-link); background: var(--color-tint-primary); } .site-actions { display: flex; align-items: center; gap: var(--space-2); } /* ‼️ ตัวเลือกภาษาบนหัวเว็บต้องแคบ ไม่งั้นเมนู 7 รายการบวกปุ่มสองปุ่มล้นออกนอกจอที่ 1280px */ .select-compact { min-width: var(--space-16); padding-inline: var(--space-2); font-size: var(--text-sm); } /* เส้นคั่นบาง ๆ ก่อนกลุ่มปุ่มบัญชี บอกว่าคนละหน้าที่กับเมนู */ .site-actions::before { content: ""; width: 1px; height: var(--space-6); background: var(--color-border-normal); margin-inline-end: var(--space-1); } /* ------------------------------------------------------- โครงแอป (Client Area) */ .shell { display: flex; flex: 1; min-height: 0; } .sidebar { width: var(--layout-sidebar-width); flex-shrink: 0; background: var(--color-surface-card); border-inline-end: 1px solid var(--color-border-normal); display: flex; flex-direction: column; /* ‼️ ไม่มี transition บน width โดยตั้งใจ การเคลื่อน width ทำให้เบราว์เซอร์คำนวณ layout ใหม่ทุกเฟรมแล้วกระตุก และการพับเมนูคือสิ่งที่ผู้ใช้ทำซ้ำหลายสิบครั้งต่อวัน ทรานซิชันจึงกลายเป็นความหน่วง */ } /* พับแล้วต้องย่อ ไม่ใช่ปิดหาย — ผู้ใช้ยังกดใช้งานได้ทุกเมนู */ .sidebar[data-collapsed="true"] { width: var(--layout-sidebar-collapsed); } .sidebar[data-collapsed="true"] .nav-label, .sidebar[data-collapsed="true"] .nav-group-label, .sidebar[data-collapsed="true"] .brand-name { display: none; } .sidebar[data-collapsed="true"] .nav a { justify-content: center; } .sidebar[data-collapsed="true"] .brand { justify-content: center; } .sidebar-foot { margin-block-start: auto; padding: var(--space-3); border-block-start: 1px solid var(--color-border-subtle); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; inset-block-start: 0; z-index: 30; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-6); border-block-end: 1px solid var(--color-border-normal); background: var(--color-effect-scrim); backdrop-filter: blur(var(--space-3)); } .topbar h1 { font-size: var(--text-xl); } .content { flex: 1; padding: var(--space-8) var(--space-6) var(--space-12); max-width: var(--layout-content-width); width: 100%; } /* ------------------------------------------------- หน้าก่อนเข้าสู่ระบบ */ /* ‼️ โครงคือแถบบน → กล่องกลางหน้า → ท้ายหน้า ไม่ใช่ผ่าครึ่งจอซ้าย/ขวา ผ่าครึ่งจอทำให้ฟอร์มไปติดขอบจอบนจอกว้าง และไม่เหลือที่ใต้กล่องให้วางแถบความน่าเชื่อถือ */ .auth-body { min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(60rem 40rem at 12% 8%, var(--color-tint-primary), transparent 70%), radial-gradient(50rem 36rem at 92% 82%, var(--color-tint-cyan), transparent 70%), var(--color-surface-page); } .auth-topbar { background: var(--color-surface-card); border-block-end: 1px solid var(--color-border-subtle); } .auth-topbar-inner { max-width: var(--layout-marketing-width); margin-inline: auto; padding: var(--space-4) var(--space-6); display: flex; align-items: center; gap: var(--space-4); } .auth-topbar-tools { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-3); } .auth-topbar-rule { width: 1px; align-self: stretch; background: var(--color-border-subtle); } .auth-back { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-normal); font-size: var(--text-sm); text-decoration: none; } .auth-back:hover { color: var(--color-brand-link); } .auth-main { flex: 1; display: flex; justify-content: center; padding: clamp(var(--space-6), 4vw, var(--space-12)) var(--space-6); } .auth-shell { width: 100%; display: flex; flex-direction: column; gap: clamp(var(--space-8), 4vw, var(--space-12)); } .auth-main.is-split .auth-shell { max-width: var(--layout-auth-split-width); } .auth-main.is-card .auth-shell { max-width: var(--layout-auth-card-width); } /* --------------------------------------- กล่องสองฝั่ง (เข้าสู่ระบบ/สมัคร) */ .auth-card { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); background: var(--color-surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; } /* ‼️ หน้าสมัครมีช่องเรียงสองคอลัมน์ ฝั่งฟอร์มจึงต้องได้ที่มากกว่าฝั่งแบรนด์ ให้สองฝั่งเท่ากันเมื่อไหร่ ช่อง "ชื่อ/นามสกุล" จะแคบจนอ่านค่าที่กรอกไม่จบบรรทัด */ .auth-card.is-wide { grid-template-columns: minmax(0, .58fr) minmax(0, 1fr); } .auth-aside { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(var(--space-8), 3.4vw, var(--space-16)); } .auth-aside.is-soft { background: linear-gradient(150deg, var(--color-panel-soft-from), var(--color-panel-soft-to)); color: var(--color-text-strong); } .auth-aside.is-brand { background: linear-gradient(160deg, var(--color-panel-brand-from), var(--color-panel-brand-to)); color: var(--color-panel-on-brand); } .auth-aside-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-6); } /* ‼️ จำกัดความยาวบรรทัดให้หัวข้อตัดเป็นสองบรรทัดตามต้นแบบ ปล่อยยาวบรรทัดเดียวแล้วหัวข้อจะเล็กลงเมื่อเทียบกับความกว้างของแผง และน้ำหนักสายตาหาย */ .auth-aside-title { font-size: clamp(var(--text-2xl), 2.5vw, var(--text-3xl)); line-height: var(--leading-tight); max-width: 18ch; } .auth-aside-lead { font-size: var(--text-base); opacity: .82; max-width: 40ch; } .auth-aside-list { display: flex; flex-direction: column; gap: var(--space-6); } .auth-aside-list li { display: flex; gap: var(--space-4); align-items: flex-start; } .auth-aside-list strong { font-size: var(--text-base); } .auth-aside-list span { font-size: var(--text-sm); opacity: .82; } /* วงกลมรองไอคอน — ฝั่งฟ้าอ่อนใช้วงขาว ฝั่งฟ้าเข้มใช้วงโปร่งบนพื้นเข้ม */ .auth-aside-chip { flex-shrink: 0; width: var(--space-10); height: var(--space-10); display: grid; place-items: center; border-radius: var(--radius-full); } .auth-aside.is-soft .auth-aside-chip { background: var(--color-surface-card); color: var(--color-brand-primary); box-shadow: var(--shadow-sm); } .auth-aside.is-brand .auth-aside-chip { background: var(--color-effect-hairline); color: var(--color-panel-on-brand); } .auth-aside-badge { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--color-effect-hairline); border-radius: var(--radius-lg); } .auth-aside-badge span { font-size: var(--text-sm); opacity: .85; } /* ‼️ ภาพประกอบเป็นของประกอบ ห้ามใหญ่กว่าข้อความที่มันประกอบ และต้องไม่ทับข้อความเมื่อฝั่งนี้แคบลง จึงยึดล่างและหดตามพื้นที่ที่เหลือ */ /* ‼️ ต้องมี mask ไล่ขอบซ้อนอีกชั้นนอกเหนือจากที่ไล่ไว้ในไฟล์ภาพ ไฟล์ภาพถูกตัดมาจากพื้นไล่สีคนละชุดกับพื้นของแผงนี้ ปล่อยขอบคมไว้จะเห็นเป็นสี่เหลี่ยมซ้อนอยู่ */ .auth-aside-art { position: relative; z-index: 0; margin-block-start: auto; align-self: center; width: min(100%, 22rem); pointer-events: none; mask-image: radial-gradient(closest-side at 50% 50%, currentColor 58%, transparent 100%); } .auth-panel { display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); padding: clamp(var(--space-8), 3.4vw, var(--space-16)); min-width: 0; } .auth-panel h1 { font-size: clamp(var(--text-xl), 2.4vw, var(--text-3xl)); } /* ------------------------------------------- การ์ดเดี่ยว (ลืมรหัสผ่าน) */ .auth-solo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(var(--space-6), 3vw, var(--space-10)); align-items: center; background: var(--color-surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: clamp(var(--space-8), 3.4vw, var(--space-12)); } /* หน้าที่มีแต่ข้อความกับปุ่มเดียว (ยืนยันอีเมล · ลิงก์หมดอายุ · ตั้งรหัสผ่านใหม่) ใช้การ์ดใบเดียวคอลัมน์เดียว ไม่ต้องมีภาพประกอบ */ .auth-plain { background: var(--color-surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: clamp(var(--space-8), 3.4vw, var(--space-12)); } .auth-solo-body { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; } .auth-solo-body h1 { font-size: clamp(var(--text-2xl), 2.5vw, var(--text-3xl)); } /* ไล่ขอบเหมือนภาพในแผงแบรนด์ — ภาพถูกตัดมาจากพื้นคนละชุดกับพื้นการ์ด */ .auth-solo-art { justify-self: center; width: min(100%, 18rem); mask-image: radial-gradient(closest-side at 50% 50%, currentColor 60%, transparent 100%); } /* เส้นคั่นบาง ๆ ในการ์ด — ใช้เมื่อเนื้อหาสองก้อนคนละเรื่องแต่ยังอยู่ในกล่องเดียวกัน */ .hairline { border: 0; border-block-start: 1px solid var(--color-border-subtle); width: 100%; } /* --------------------------------------------------- ของประกอบร่วมกัน */ .auth-note { display: flex; gap: var(--space-2); align-items: center; justify-content: center; color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; } .auth-note .icon { flex-shrink: 0; color: var(--color-state-success); } .auth-switch { text-align: center; color: var(--color-text-normal); } .auth-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); justify-items: center; } .auth-trust li { display: flex; gap: var(--space-4); align-items: center; } .auth-trust strong { font-size: var(--text-sm); color: var(--color-text-strong); } .auth-trust span { font-size: var(--text-sm); color: var(--color-text-muted); } .auth-trust-chip { flex-shrink: 0; width: var(--space-12); height: var(--space-12); display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--color-surface-card); color: var(--color-brand-primary); box-shadow: var(--shadow-sm); } /* ขั้นตอนรีเซ็ตรหัสผ่าน — เส้นประเชื่อมระหว่างขั้นเป็นของตกแต่ง */ .reset-steps { display: flex; flex-direction: column; gap: var(--space-8); } .reset-steps-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } .reset-steps-list li { position: relative; display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; } .reset-step-head { display: flex; align-items: center; gap: var(--space-3); } .reset-step-head strong { color: var(--color-text-strong); } /* ‼️ เส้นประต้องลากจากวงกลมของขั้นนี้ไปจบที่วงกลมของขั้นถัดไป ลากสั้น ๆ แค่ในช่องว่างระหว่างคอลัมน์ จะได้ขีดจาง ๆ ลอยอยู่ตรงกลางที่ไม่สื่อว่าเชื่อมอะไรกับอะไร */ .reset-steps-list li:not(:last-child)::after { content: ""; position: absolute; inset-block-start: var(--space-6); inset-inline-start: calc(var(--space-12) + var(--space-4)); inset-inline-end: 0; border-block-start: 2px dashed var(--color-border-normal); } .reset-step-mark { position: relative; z-index: 1; flex-shrink: 0; width: var(--space-12); height: var(--space-12); display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-surface-card); color: var(--color-brand-primary); box-shadow: var(--shadow-sm); } .reset-step-number { flex-shrink: 0; width: var(--space-6); height: var(--space-6); display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-brand-primary); color: var(--color-brand-on-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); } /* ‼️ ภาพประกอบเป็นภาพเรนเดอร์โทนสว่าง วางบนพื้นมืดแล้วจะสว่างโพลนกว่าทั้งหน้า จึงลดความสว่างลงในโหมดมืด ไม่ใช่ปล่อยไว้เพราะ "โหมดสว่างเป็นค่าเริ่มต้นอยู่แล้ว" */ .artwork { display: block; } .artwork img { display: block; width: 100%; height: auto; } :root[data-theme="dark"] .artwork img { filter: brightness(.82) saturate(.86); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .artwork img { filter: brightness(.82) saturate(.86); } } /* ‼️ ฝั่งแบรนด์ยุบหายบนมือถือ ไม่ใช่ย่อลงมาเบียดฟอร์ม คนที่เปิดหน้านี้บนมือถือมาเพื่อเข้าระบบ ไม่ได้มาอ่านข้อความขายของ */ @media (max-width: 1024px) { .auth-card, .auth-card.is-wide { grid-template-columns: minmax(0, 1fr); } .auth-aside { display: none; } .auth-solo { grid-template-columns: minmax(0, 1fr); } .auth-solo-art { max-width: 15rem; } .auth-trust, .reset-steps-list { grid-template-columns: minmax(0, 1fr); justify-items: start; } .reset-steps-list li:not(:last-child)::after { display: none; } } @media (max-width: 560px) { .auth-main { padding-inline: var(--space-4); } .auth-topbar-inner { padding-inline: var(--space-4); } .auth-back span { display: none; } } /* ------------------------------------------------------- ตัวช่วยจัดวาง */ .stack-xs { display: flex; flex-direction: column; gap: var(--space-1); } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .stack-sm { display: flex; flex-direction: column; gap: var(--space-2); } .stack-md { display: flex; flex-direction: column; gap: var(--space-6); } .stack-lg { display: flex; flex-direction: column; gap: var(--space-8); } .row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } .row-tight { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .spacer { margin-inline-start: auto; } .centered { flex: 1; display: grid; place-items: center; padding: var(--space-6); } .grid { display: grid; gap: var(--space-5); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* เนื้อหาหลักกว้างกว่าคอลัมน์ข้าง ใช้กับหน้าที่มีสาระหลักอย่างเดียวและมีของประกอบ */ .grid-aside { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; } .site-footer { padding-block: var(--space-16) var(--space-8); border-block-start: 1px solid var(--color-border-subtle); background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: var(--text-sm); } .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: var(--space-10) var(--space-8); } .footer-bottom { margin-block-start: var(--space-10); padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border-subtle); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; } /* ‼️ ต้องเว้นซ้ายให้พ้นปุ่มแจ้งปัญหาที่ลอยอยู่มุมล่างซ้าย ไม่เว้น แล้วโลโก้กับเลขเวอร์ชันจะถูกปุ่มทับจนอ่านไม่ออก — เห็นชัดในหน้าเข้าสู่ระบบ */ .footer-compact { padding: var(--space-4) var(--space-6) var(--space-4) calc(var(--space-16) + var(--space-2)); border-block-start: 1px solid var(--color-border-normal); color: var(--color-text-muted); font-size: var(--text-sm); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; } /* ------------------------------------------------------- จอแท็บเล็ต */ @media (max-width: 1024px) { .grid-4, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-aside { grid-template-columns: minmax(0, 1fr); } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------- จอมือถือ */ /* ‼️ เมนูหน้าร้านต้องยุบก่อนถึงขนาดมือถือ บนจอโน้ตบุ๊กมีเมนู 7 รายการ ปุ่มสองปุ่ม และตัวสลับภาษา/โหมด อยู่แถวเดียวกัน ถ้ารอยุบตอนถึงขนาดมือถือ ปุ่มจะถูกบีบจนตัดบรรทัดไปก่อนแล้ว */ @media (max-width: 1180px) { .site-menu { display: none; position: absolute; inset-inline: 0; inset-block-start: 100%; flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-5); background: var(--color-surface-card); border-block-end: 1px solid var(--color-border-normal); box-shadow: var(--shadow-lg); } .site-header .container { position: relative; flex-wrap: wrap; } .site-header[data-open="true"] .site-menu { display: flex; } .site-nav { flex-direction: column; align-items: stretch; gap: var(--space-1); } .site-nav a { min-height: var(--layout-control); display: flex; align-items: center; font-size: var(--text-base); } /* ปุ่มบัญชีเรียงเต็มความกว้างในเมนู ไม่ใช่บีบให้อยู่แถวเดียวจนกดยาก */ .site-actions { flex-wrap: wrap; padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border-subtle); } .site-actions::before { content: none; } .site-actions .btn-cta, .site-actions .btn-primary, .site-actions .btn-secondary { flex: 1 1 auto; } } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: minmax(0, 1fr); } .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } .container { padding-inline: var(--space-4); } .auth-split { grid-template-columns: minmax(0, 1fr); min-height: 0; } .auth-brand { display: none; } .auth-form-side { padding-inline: var(--space-4); } .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40; transform: translateX(-100%); transition: transform var(--duration-normal) var(--ease-standard); box-shadow: var(--shadow-lg); } .sidebar[data-open="true"] { transform: translateX(0); } .content { padding: var(--space-5) var(--space-4) var(--space-10); } .topbar { padding-inline: var(--space-4); } /* ‼️ บนจอแคบ ชื่อหน้าลงไปอยู่บรรทัดของตัวเอง ถ้าปล่อยให้อยู่แถวเดียวกับปุ่ม ชื่อหน้าจะถูกบีบจนตัดกลางคำ และปุ่มออกจากระบบจะตกไปคนละบรรทัดแบบไม่ตั้งใจ */ .topbar { flex-wrap: wrap; row-gap: var(--space-2); } .topbar h1 { order: 3; flex: 1 0 100%; font-size: var(--text-lg); } } } @layer components { /* ---------------------------------------------------------------- ปุ่ม */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--layout-control); padding: var(--space-2) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--color-text-normal); font-weight: var(--weight-medium); cursor: pointer; text-decoration: none; /* ‼️ ข้อความบนปุ่มห้ามตัดบรรทัด — ปุ่มสองบรรทัดสูงไม่เท่าปุ่มข้าง ๆ แล้วหัวเว็บดูพัง ถ้าที่ไม่พอ ให้เมนูยุบเป็นปุ่มแฮมเบอร์เกอร์แทนการบีบปุ่ม */ white-space: nowrap; transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:hover { background: var(--color-surface-raised); color: var(--color-text-strong); } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; } /* ‼️ ฟ้าคือ "กดได้" — ปุ่มหลักของหน้าทั่วไปเป็นฟ้า */ .btn-primary { background: var(--color-brand-primary); color: var(--color-brand-on-primary); font-weight: var(--weight-bold); box-shadow: var(--shadow-xs); } .btn-primary:hover { background: var(--color-brand-primary); color: var(--color-brand-on-primary); filter: brightness(1.1); box-shadow: var(--shadow-glow); } /* ‼️ ส้มคือ "สิ่งที่ควรกดที่สุดในหน้านี้" — หนึ่งหน้ามีได้ปุ่มเดียว ตัวอักษรบนส้มเป็นหมึกเข้มในโหมดมืด เพราะขาวบนส้มได้ contrast ราว 3.3:1 ซึ่งต่ำกว่าเกณฑ์ 4.5:1 (เหตุผลเต็มอยู่ใน project/DESIGN.md) */ .btn-cta { background: var(--color-brand-cta); color: var(--color-brand-on-cta); font-weight: var(--weight-bold); box-shadow: var(--shadow-xs); } .btn-cta:hover { background: var(--color-brand-cta); color: var(--color-brand-on-cta); filter: brightness(1.08); box-shadow: var(--shadow-md); } .btn-secondary { border-color: var(--color-border-strong); color: var(--color-text-strong); background: var(--color-surface-card); } .btn-secondary:hover { border-color: var(--color-brand-primary); background: var(--color-surface-raised); color: var(--color-text-strong); } /* ปุ่มระดับสาม — ใช้ในแถบเครื่องมือและในการ์ด ที่ปุ่มมีกรอบเยอะเกินจะรก */ .btn-subtle { background: var(--color-surface-raised); color: var(--color-text-strong); } .btn-subtle:hover { background: var(--color-surface-raised); filter: brightness(1.06); } .btn-ghost { color: var(--color-brand-link); } .btn-ghost:hover { background: var(--color-tint-primary); color: var(--color-brand-link); } .btn-danger { background: var(--color-state-danger); color: var(--color-text-on-inverse); font-weight: var(--weight-bold); } .btn-danger:hover { background: var(--color-state-danger); filter: brightness(1.08); color: var(--color-text-on-inverse); } .btn-lg { min-height: var(--space-12); padding-inline: var(--space-6); font-size: var(--text-lg); } .btn-sm { min-height: var(--layout-control-sm); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); } .btn-block { width: 100%; } /* ปุ่มไอคอนล้วน — ต้องมี aria-label และ tooltip เสมอ */ .btn-icon { min-width: var(--layout-control); padding: var(--space-2); } .btn-sm.btn-icon { min-width: var(--layout-control-sm); } /* กันกดซ้ำ — กดแล้ว disable ทันทีพร้อมแสดงว่ากำลังทำงาน */ .btn[data-busy="true"] { pointer-events: none; opacity: .6; } .btn[data-busy="true"] .btn-label::after { content: ""; display: inline-block; width: var(--space-3); height: var(--space-3); margin-inline-start: var(--space-2); border: 2px solid currentColor; border-block-start-color: transparent; border-radius: var(--radius-full); animation: spin var(--duration-slow) linear infinite; vertical-align: -1px; } @keyframes spin { to { transform: rotate(360deg); } } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); } .btn-row-end { justify-content: flex-end; } .btn-row-center { justify-content: center; } /* ---------------------------------------------------------------- แบรนด์ */ .brand { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-strong); font-weight: var(--weight-bold); text-decoration: none; } .brand-mark { width: var(--space-10); height: var(--space-10); flex-shrink: 0; } .brand-name { font-family: var(--font-heading), system-ui, sans-serif; font-size: var(--text-lg); letter-spacing: .01em; white-space: nowrap; } .brand-name b { color: var(--color-brand-link); font-weight: var(--weight-heavy); } .sidebar .brand { padding: var(--space-5) var(--space-4); border-block-end: 1px solid var(--color-border-subtle); min-height: var(--layout-header-height); } /* ---------------------------------------------------------------- hero */ .hero { position: relative; overflow: hidden; padding-block: clamp(var(--space-8), 3.2vw, var(--space-16)) clamp(var(--space-8), 2.6vw, var(--space-12)); background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface-page)); border-block-end: 1px solid var(--color-border-subtle); } /* แสงเบื้องหลังแทนการใช้ภาพ raster — เปลี่ยนตามโหมดสว่าง/มืดได้เอง */ .hero::before, .hero::after { content: ""; position: absolute; inset-block-start: calc(var(--space-20) * -1); width: var(--space-32); height: var(--space-32); border-radius: var(--radius-full); filter: blur(var(--space-16)); pointer-events: none; } .hero::before { inset-inline-start: 8%; background: var(--color-effect-glow-primary); } .hero::after { inset-inline-end: 4%; background: var(--color-effect-glow-cloud); } .hero .container { position: relative; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(var(--space-8), 4vw, var(--space-16)); align-items: center; } .hero h1 { font-size: clamp(var(--text-2xl), 4.4vw, var(--text-4xl)); letter-spacing: var(--tracking-tight); } .hero h1 em { font-style: normal; background: linear-gradient(96deg, var(--color-brand-link), var(--color-brand-cloud)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-lead { font-size: var(--text-lg); color: var(--color-text-normal); max-width: 46ch; } .hero-visual { position: relative; } /* ‼️ ภาพ hero ไม่ขยายเกินขนาดจริงของไฟล์ (605px) — ขยายเกินแล้วภาพแตก และไล่ขอบให้กลืนกับพื้นหน้า เพราะภาพถูกตัดมาจากพื้นคนละชุด */ .hero-art { justify-self: end; width: min(100%, 605px); mask-image: radial-gradient(closest-side at 50% 50%, currentColor 62%, transparent 100%); } /* บรรทัดยืนยันสั้น ๆ ใต้ปุ่ม — ตอบคำถาม "กดแล้วจะโดนอะไรไหม" ก่อนที่ผู้ใช้จะถาม */ .hero-assurance { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); } .hero-assurance li { display: inline-flex; align-items: center; gap: var(--space-2); } .hero-assurance .icon { color: var(--color-state-success); flex-shrink: 0; } @media (max-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-visual { max-width: 30rem; margin-inline: auto; } } /* ---------------------------------------------------------------- หัวข้อส่วน */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-brand-link); } /* eyebrow ใน hero เป็นเม็ดยามีขอบ ให้เป็นจุดเริ่มสายตาของหน้า ไม่ใช่บรรทัดเล็ก ๆ ลอยอยู่ */ .hero .eyebrow { padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-full); background: var(--color-surface-card); align-self: flex-start; } .section-head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 58ch; } .section-head h2 { font-size: clamp(var(--text-xl), 2.6vw, var(--text-2xl)); } .section-head p { color: var(--color-text-muted); font-size: var(--text-lg); } .section-head.is-centered { margin-inline: auto; text-align: center; align-items: center; } /* ---------------------------------------------------------------- การ์ด */ /* ‼️ ลายเซ็นของระบบนี้ — เส้นแสงบาง ๆ ที่ขอบบนแทนเงาลึก บนพื้น navy เข้มเงามองไม่เห็น แต่แสงมองเห็น บนโหมดสว่างเติมเงาอ่อนเข้ามาด้วย เพราะเงาทำงานบนพื้นสว่าง */ .card { position: relative; background: var(--color-surface-card); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xs); } .card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--space-6); height: 1px; background: var(--color-effect-hairline); pointer-events: none; } .card-flat { box-shadow: none; } .card-flat::before { content: none; } .card-pad-lg { padding: var(--space-8); } .card-link { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .card-link:hover { border-color: var(--color-brand-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .card-link h3 { color: var(--color-text-strong); font-size: var(--text-lg); } .card-link p { color: var(--color-text-muted); font-size: var(--text-sm); } .card-link:hover .card-more .icon { transform: translateX(var(--space-1)); } .card-icon { width: var(--space-12); height: var(--space-12); display: grid; place-items: center; border-radius: var(--radius-md); background: var(--color-tint-primary); color: var(--color-brand-link); border: 1px solid var(--color-border-subtle); flex-shrink: 0; } .card-icon .icon { width: var(--space-6); height: var(--space-6); } /* ไอคอนสีอื่นสำหรับส่วนที่ไม่ใช่ "สิ่งที่กดได้" เช่น ความปลอดภัย/สำรองข้อมูล */ .card-icon.is-cyan { background: var(--color-tint-cyan); color: var(--color-brand-cyan); } .card-icon.is-cloud { background: var(--color-tint-cloud); color: var(--color-brand-cloud); } .card-more { margin-block-start: auto; color: var(--color-brand-link); font-size: var(--text-sm); font-weight: var(--weight-medium); display: inline-flex; align-items: center; gap: var(--space-2); } .card-more .icon { transition: transform var(--duration-fast) var(--ease-standard); } /* หัวการ์ดที่มีชื่อซ้ายและปุ่มขวา — ใช้ซ้ำในทุกหน้าที่มีตาราง */ .card-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-block-end: var(--space-4); border-block-end: 1px solid var(--color-border-subtle); margin-block-end: var(--space-4); } .card-head h2, .card-head h3 { font-size: var(--text-lg); } /* ---------------------------------------------------------------- แถบความน่าเชื่อถือ */ /* ‼️ auto-fit ไม่ใช่จำนวนคอลัมน์ตายตัว แถบนี้ถูกใช้ทั้งเต็มความกว้างหน้าและในคอลัมน์ซ้ายของหน้าแรกซึ่งแคบกว่าครึ่ง บังคับสี่คอลัมน์ไว้ ข้อความจะถูกบีบจนตัดคำกลางคำในที่แคบ */ .trust-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-4); padding: var(--space-5) var(--space-6); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); box-shadow: var(--shadow-sm); } .trust-item { display: flex; gap: var(--space-3); align-items: flex-start; } .trust-item .icon { color: var(--color-brand-cyan); flex-shrink: 0; margin-block-start: var(--space-1); } .trust-item strong { color: var(--color-text-strong); display: block; font-size: var(--text-base); } .trust-item span { color: var(--color-text-muted); font-size: var(--text-sm); } /* ยกแถบขึ้นคร่อมรอยต่อของ hero กับส่วนถัดไป — ผูกสองส่วนเข้าด้วยกันแทนที่จะเป็นกล่องลอย */ .trust-strip.is-overlap { margin-block-start: calc(var(--space-16) * -1); position: relative; z-index: 2; } @media (max-width: 1024px) { .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .trust-strip { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); } .trust-strip.is-overlap { margin-block-start: 0; } } /* ---------------------------------------------------------------- แพ็กเกจ */ .plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; } /* ‼️ หมวดที่มีสินค้าใบเดียวห้ามใช้ตาราง 3 คอลัมน์ ใบเดียวในตาราง 3 ช่องทำให้เกิดที่ว่างสองในสามของแถว ซึ่งอ่านเป็น "ข้อมูลหาย" แบบนี้การ์ดจะกว้างคงที่แล้วเรียงชิดซ้าย ดูเป็นความตั้งใจ ไม่ใช่ช่องที่ลืมเติม */ .plan-grid.is-packed { grid-template-columns: repeat(auto-fit, minmax(18rem, 22rem)); justify-content: start; } @media (max-width: 1024px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .plan-grid, .plan-grid.is-packed { grid-template-columns: minmax(0, 1fr); } } .plan { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; } /* ‼️ แพ็กเกจแนะนำต้องต่างจากใบอื่นมากกว่าแค่มีป้าย ไม่งั้นสายตากวาดผ่านแล้วเห็นสามใบเหมือนกัน ซึ่งแปลว่าไม่มีคำแนะนำเลย */ .plan.is-featured { border-color: var(--color-brand-primary); box-shadow: var(--shadow-glow); } .plan.is-featured::before { background: var(--color-brand-primary); opacity: .9; } .plan-flag { position: absolute; inset-block-start: 0; inset-inline-end: var(--space-5); transform: translateY(-50%); background: var(--color-brand-primary); color: var(--color-brand-on-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); } /* ‼️ ต้องมี min-width: 0 ที่คอลัมน์ข้อความของแถว flex ค่าเริ่มต้นของ flex item คือ min-width: auto ซึ่งไม่ยอมแคบกว่าคำที่ยาวที่สุดข้างใน ชื่อแพ็กเกจภาษาอังกฤษยาว ๆ จึงดันการ์ดให้กว้างเกินคอลัมน์แล้วหน้าเลื่อนแนวนอนได้ */ .plan-head { display: flex; gap: var(--space-3); align-items: center; min-width: 0; } .plan-head > .stack-sm { min-width: 0; } .plan h3 { overflow-wrap: anywhere; } .plan h3 { font-size: var(--text-lg); } .plan-desc { color: var(--color-text-muted); font-size: var(--text-sm); } .plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-4); border-block: 1px solid var(--color-border-subtle); } /* ‼️ ตัวเลข Token ใช้สีส้มของแบรนด์ แต่ไม่ใช่สีของ "สิ่งที่คลิกได้" จึงเป็น token แยก (brand.token) ไม่ใช่ brand.cta */ .price-amount { font-family: var(--font-heading), system-ui, sans-serif; font-size: var(--text-2xl); font-weight: var(--weight-heavy); color: var(--color-brand-token); font-variant-numeric: tabular-nums; line-height: 1; } .price-unit { color: var(--color-text-muted); font-size: var(--text-sm); } /* ‼️ ยังไม่มีราคาที่อนุมัติ — ต้องบอกตรง ๆ ห้ามเดาตัวเลข แต่ต้องไม่ดูเหมือนช่องว่างที่ลืมกรอก จึงจัดเป็นก้อนที่ตั้งใจออกแบบ พร้อมบรรทัดบอกว่าจะได้ราคายังไง */ .price-ask { display: flex; flex-direction: column; gap: var(--space-1); } .price-ask strong { font-family: var(--font-heading), system-ui, sans-serif; font-size: var(--text-xl); color: var(--color-text-strong); font-weight: var(--weight-bold); } .price-ask span { color: var(--color-text-muted); font-size: var(--text-sm); } .plan-features { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .plan-features li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-normal); } .plan-features .icon { color: var(--color-state-success); flex-shrink: 0; margin-block-start: var(--space-1); } .plan-foot { display: flex; flex-direction: column; gap: var(--space-2); margin-block-start: auto; } /* ---------------------------------------------------------------- ขั้นตอน */ .steps { counter-reset: step; display: grid; gap: var(--space-6); grid-template-columns: repeat(5, minmax(0, 1fr)); } .step { counter-increment: step; display: flex; flex-direction: column; gap: var(--space-3); padding-block-start: var(--space-6); border-block-start: 2px solid var(--color-border-normal); position: relative; } .step::before { content: counter(step); position: absolute; inset-block-start: calc(var(--space-4) * -1); inset-inline-start: 0; width: var(--space-8); height: var(--space-8); display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-brand-primary); color: var(--color-brand-on-primary); font-family: var(--font-heading), system-ui, sans-serif; font-weight: var(--weight-bold); font-size: var(--text-sm); } .step strong { color: var(--color-text-strong); } .step p { color: var(--color-text-muted); font-size: var(--text-sm); } @media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } } @media (max-width: 768px) { .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } } /* ---------------------------------------------------------------- FAQ */ /* ใช้
ของเบราว์เซอร์ ไม่ต้องพึ่ง JavaScript ปิด JS แล้วยังอ่านคำตอบได้ครบ และคีย์บอร์ดใช้ได้เองตั้งแต่แรก */ /* --------------------------------------------------- โครงหน้าแรกแบบแน่น */ /* ‼️ บริการอยู่ซ้าย ราคาอยู่ขวาในระดับสายตาเดียวกัน ไม่ใช่ไล่ลงมาทีละส่วน คนที่มาเลือกของต้องเห็นทั้ง "มีอะไรบ้าง" และ "ราคาเท่าไหร่" พร้อมกัน ไม่ใช่ต้องเลื่อนขึ้นลงเทียบเอง */ .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(var(--space-5), 2vw, var(--space-8)); align-items: start; } .home-heading { font-size: var(--text-xl); } .pricing-panel { background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: clamp(var(--space-5), 2vw, var(--space-8)); } /* การ์ดบริการหกใบในคอลัมน์เดียว จึงต้องแน่นกว่าการ์ดเต็มความกว้าง */ .grid.is-compact { gap: var(--space-3); } .grid.is-compact .card-link { padding: var(--space-5); gap: var(--space-3); } .grid.is-compact .card-link p { font-size: var(--text-xs); } .grid.is-compact .card-link h3 { font-size: var(--text-base); } .plan-grid.is-tight { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } .plan-grid.is-tight .plan { padding: var(--space-5); gap: var(--space-3); } .plan-grid.is-tight .plan-features li { font-size: var(--text-xs); } /* ‼️ ในคอลัมน์แคบ ชื่อแพ็กเกจต้องได้ความกว้างเต็มใบ ไอคอนจึงย้ายไปอยู่ใต้ชื่อ วางไอคอนไว้ข้างชื่อในที่แคบ ทำให้ชื่ออย่าง "OMC WordPress" ถูกตัดกลางคำ */ .plan-grid.is-tight .plan-head { flex-direction: column; align-items: center; text-align: center; } .plan-grid.is-tight .plan h3 { font-size: var(--text-base); } /* สามแผงเรียงแถวเดียว ความกว้างไม่เท่ากันตามปริมาณเนื้อหาจริงของแต่ละแผง */ .home-trio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(var(--space-4), 1.6vw, var(--space-6)); align-items: stretch; } /* ‼️ align-items ต้องเป็น stretch ไม่ใช่ flex-start flex-start ทำให้ลูกทุกตัวหดเหลือเท่าเนื้อหา ตารางห้าขั้นตอนข้างในจึงคิดความกว้าง จากเนื้อหาแทนที่จะคิดจากแผง แล้วล้นออกนอกแผงบนจอแคบ ปุ่มที่ต้องกว้างเท่าข้อความค่อยสั่ง align-self เป็นรายตัว */ .home-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-4); align-items: stretch; } .home-panel > * { min-width: 0; } .home-panel > .btn { align-self: flex-start; } .home-panel.is-support { background: linear-gradient(135deg, var(--color-surface-raised), var(--color-surface-card)); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--space-8); } /* ‼️ ภาพประกอบในแผงต้องไม่ทับข้อความเมื่อแผงแคบลง จึงยึดมุมล่างขวาและซ่อนทิ้งเมื่อพื้นที่ไม่พอ แทนที่จะย่อจนดูเป็นจุดเล็ก ๆ */ .home-panel-art, .home-agent { position: absolute; inset-block-end: 0; inset-inline-end: 0; width: 34%; max-width: 8.5rem; pointer-events: none; } .home-panel-art { mask-image: radial-gradient(closest-side at 50% 50%, currentColor 62%, transparent 100%); } /* ------------------------------------------------- หัวหน้าใน Client Area */ /* ‼️ ปุ่มหลักอยู่ขวาของหัวข้อ ไม่ใช่ใต้หัวข้อ วางไว้ใต้หัวข้อทำให้มันแย่งความสำคัญกับข้อความอธิบาย และดันเนื้อหาจริงลงไปอีกหนึ่งบรรทัด */ .page-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); } .page-head h1 { font-size: clamp(var(--text-xl), 2.2vw, var(--text-2xl)); } .page-head > .stack-sm { min-width: 0; } @media (max-width: 768px) { .page-head > .btn { margin-inline-start: 0; width: 100%; } } /* ------------------------------------------------- เริ่มใช้งาน (แดชบอร์ด) */ /* ‼️ ใช้รูปทรงเดียวกับขั้นตอนรีเซ็ตรหัสผ่านโดยตั้งใจ สองที่นี้สื่อเรื่องเดียวกันคือ "ทำสามขั้นนี้แล้วจบ" ผู้ใช้จึงไม่ต้องเรียนรู้ใหม่ */ .onboarding { gap: var(--space-8); } .onboarding-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } .onboarding-steps li { position: relative; display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; min-width: 0; } .onboarding-steps li:not(:last-child)::after { content: ""; position: absolute; inset-block-start: var(--space-6); inset-inline-start: calc(var(--space-12) + var(--space-4)); inset-inline-end: 0; border-block-start: 2px dashed var(--color-border-normal); } .onboarding-mark { position: relative; z-index: 1; flex-shrink: 0; width: var(--space-12); height: var(--space-12); display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-tint-primary); color: var(--color-brand-primary); } .onboarding-head { display: flex; align-items: center; gap: var(--space-3); } .onboarding-head strong { color: var(--color-text-strong); } .onboarding-number { flex-shrink: 0; width: var(--space-6); height: var(--space-6); display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-brand-primary); color: var(--color-brand-on-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); } @media (max-width: 768px) { .onboarding-steps { grid-template-columns: minmax(0, 1fr); } .onboarding-steps li:not(:last-child)::after { display: none; } } .check-list { display: flex; flex-direction: column; gap: var(--space-2); } .check-list li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-normal); } .check-list .icon { color: var(--color-state-success); flex-shrink: 0; margin-block-start: var(--space-1); } /* ‼️ ข้อความในแถว flex ต้องมี min-width: 0 ไม่งั้นมันไม่ยอมแคบกว่าคำที่ยาวที่สุด แล้วดันการ์ดกว้างเกินคอลัมน์บนจอมือถือจนหน้าเลื่อนแนวนอนได้ */ .check-list li > span { min-width: 0; overflow-wrap: anywhere; } .home-panel h2, .home-panel p { overflow-wrap: anywhere; } /* ปุ่มในแผงต้องตัดบรรทัดได้บนจอแคบ ไม่ใช่ยืดออกนอกกรอบ */ .home-panel > .btn { max-width: 100%; white-space: normal; } /* ห้าขั้นตอนเรียงแนวนอน — ลำดับอ่านจากซ้ายไปขวา ไม่ใช่ไล่ลงล่าง */ .flow-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); width: 100%; } .flow-steps li { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; min-width: 0; } .flow-steps strong { font-size: var(--text-sm); overflow-wrap: anywhere; } .flow-steps span { overflow-wrap: anywhere; } .flow-mark { width: var(--space-10); height: var(--space-10); display: grid; place-items: center; border-radius: var(--radius-md); background: var(--color-tint-primary); color: var(--color-brand-primary); } /* คำถามที่พบบ่อยแบบเรียงแถว — ป้ายซ้าย เม็ดคำถามตรงกลาง ลิงก์ดูทั้งหมดขวาสุด */ .faq-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); } .faq-row .faq { flex: 1; min-width: 0; } .faq-row > .btn { margin-inline-start: auto; } .faq.is-chips { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); } .faq.is-chips details { border-radius: var(--radius-full); background: var(--color-surface-card); padding: 0; } .faq.is-chips details { max-width: 100%; } .faq.is-chips summary { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); white-space: normal; } /* คำตอบกางออกเต็มความกว้างของแถว ไม่ใช่ยัดลงในเม็ดยาจนอ่านไม่ได้ */ .faq.is-chips details[open] { border-radius: var(--radius-lg); flex-basis: 100%; } /* ‼️ กฎย่อจอของหน้าแรกต้องอยู่ "หลัง" กฎฐานของมันในไฟล์นี้ .plan-grid.is-tight จำเพาะกว่า .plan-grid กฎคอลัมน์เดียวของ .plan-grid จึงไม่ชนะให้ และ media query ที่เขียนไว้ก่อนกฎฐานก็แพ้กฎฐานเพราะความจำเพาะเท่ากันแต่มาก่อน เคยพลาดข้อนี้แล้วการ์ดแพ็กเกจยังเป็นสองคอลัมน์ที่ 375px จนหน้าเลื่อนแนวนอนได้ */ @media (max-width: 1024px) { .home-grid { grid-template-columns: minmax(0, 1fr); } .home-trio { grid-template-columns: minmax(0, 1fr); } .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan-grid.is-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ภาพในแผงหายไปตอนแผงแคบ ไม่ใช่ย่อจนกลายเป็นจุดที่ยังทับข้อความอยู่ดี */ .home-panel-art, .home-agent { display: none; } .faq-row > .btn { margin-inline-start: 0; } } @media (max-width: 768px) { .plan-grid.is-tight { grid-template-columns: minmax(0, 1fr); } .grid.is-compact { grid-template-columns: minmax(0, 1fr); } .flow-steps { grid-template-columns: minmax(0, 1fr); } } .faq { display: flex; flex-direction: column; gap: var(--space-3); } .faq details { border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); transition: border-color var(--duration-fast) var(--ease-standard); } .faq details[open] { border-color: var(--color-border-strong); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); min-height: var(--layout-control); cursor: pointer; color: var(--color-text-strong); font-weight: var(--weight-medium); list-style: none; } /* ‼️ ข้อความคำถามต้องยอมแคบลงได้ ไม่งั้นบนจอมือถือมันดันเม็ดยาให้กว้างเกินจอ ภาษาไทยไม่มีช่องว่างระหว่างคำ ความกว้างขั้นต่ำของข้อความจึงเท่ากับทั้งประโยค ถ้าไม่สั่ง min-width: 0 คู่กับ overflow-wrap ไว้ */ .faq summary > span { min-width: 0; overflow-wrap: anywhere; } .faq summary .icon { color: var(--color-text-muted); flex-shrink: 0; transition: transform var(--duration-fast) var(--ease-standard); } .faq details[open] summary .icon { transform: rotate(180deg); color: var(--color-brand-link); } .faq details[open] summary { color: var(--color-brand-link); } .faq .faq-body { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-normal); } /* ---------------------------------------------------------------- ตารางเทียบ */ .compare th, .compare td { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--color-border-normal); text-align: start; vertical-align: top; } .compare thead th { background: var(--color-surface-raised); color: var(--color-text-strong); font-weight: var(--weight-bold); } .compare .icon { color: var(--color-state-success); } .compare .is-no .icon { color: var(--color-text-muted); } /* ---------------------------------------------------------------- ฟอร์ม */ .field { display: flex; flex-direction: column; gap: var(--space-2); } .field label { color: var(--color-text-strong); font-weight: var(--weight-medium); font-size: var(--text-sm); } /* ลิงก์ท้ายบรรทัด label เช่น "ลืมรหัสผ่าน" — วางติดช่องที่มันเกี่ยวข้อง ไม่ใช่ลอยอยู่ใต้ฟอร์มซึ่งผู้ใช้ต้องกวาดตาหา */ .field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .field .hint { color: var(--color-text-muted); font-size: var(--text-sm); } .field input, .field select, .field textarea { min-height: var(--layout-control); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-page); color: var(--color-text-strong); width: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .field textarea { min-height: calc(var(--space-24) + var(--space-4)); resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--color-text-muted); } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-border-strong); } /* ‼️ วงแหวนรอบช่องที่กำลังกรอก ไม่ใช่แค่เปลี่ยนสีขอบ ขอบ 1px ที่เปลี่ยนสีมองแทบไม่เห็นบนจอสว่าง ผู้ใช้จึงไม่รู้ว่าเคอร์เซอร์อยู่ช่องไหน */ .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px var(--color-tint-primary); outline: none; } .field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: var(--color-state-danger); } .field[data-invalid="true"] input:focus, .field[data-invalid="true"] select:focus, .field[data-invalid="true"] textarea:focus { box-shadow: 0 0 0 3px var(--color-tint-danger); } /* error อยู่ใต้ช่องที่ผิด ไม่กองรวมบนสุด */ .field .error { color: var(--color-state-danger); font-size: var(--text-sm); display: flex; gap: var(--space-2); align-items: flex-start; } .required-mark { color: var(--color-state-danger); } .field-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } @media (max-width: 768px) { .field-group { grid-template-columns: minmax(0, 1fr); } } /* กลุ่มช่องกรอกที่เป็นเรื่องเดียวกัน — ฟอร์มยาว ๆ ต้องมีหัวข้อคั่น ไม่ใช่ช่องเรียงยาวรวด */ .fieldset { display: flex; flex-direction: column; gap: var(--space-4); } .fieldset > legend, .fieldset-title { color: var(--color-text-strong); font-weight: var(--weight-bold); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding-block-end: var(--space-2); border-block-end: 1px solid var(--color-border-subtle); width: 100%; } /* ช่องรหัสผ่านพร้อมปุ่มแสดง/ซ่อน — ปุ่มอยู่ในกรอบเดียวกับช่อง */ .field-affix { position: relative; display: flex; } .field-affix.has-toggle input { padding-inline-end: var(--space-12); } /* ‼️ ไอคอนนำหน้าเป็นของตกแต่ง จึงต้อง pointer-events: none ไม่งั้นคนที่กดตรงไอคอนจะกดไม่โดนช่องกรอก แล้วนึกว่าช่องนั้นกดไม่ได้ */ .field-affix.has-leading input { padding-inline-start: calc(var(--space-10) + var(--space-2)); } .field-leading { position: absolute; inset-inline-start: var(--space-4); inset-block: 0; display: grid; place-items: center; color: var(--color-text-muted); pointer-events: none; } .field-affix button { position: absolute; inset-inline-end: var(--space-1); inset-block: var(--space-1); width: var(--space-10); display: grid; place-items: center; border: 0; background: transparent; color: var(--color-text-muted); border-radius: var(--radius-sm); cursor: pointer; } .field-affix button:hover { color: var(--color-text-strong); } /* ‼️ ช่องยินยอมต้องกดได้ทั้งแถวและพื้นที่กดต้องไม่เล็กกว่า 44px */ .consent { display: flex; gap: var(--space-3); align-items: flex-start; padding-block: var(--space-2); cursor: pointer; font-size: var(--text-sm); } .consent input { width: var(--space-5); height: var(--space-5); margin-block-start: var(--space-1); flex-shrink: 0; accent-color: var(--color-brand-primary); cursor: pointer; } /* ‼️ ลิงก์ที่มีไอคอนต่อท้ายต้องไม่ตัดบรรทัดระหว่างข้อความกับไอคอน ไอคอนที่ตกไปอยู่บรรทัดใหม่ลำพังอ่านไม่ออกว่าเป็นของลิงก์ไหน */ .link-inline { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; } .link-inline .icon { width: var(--space-4); height: var(--space-4); } /* ‼️ กติกาสามข้อวางเรียงแถวเดียว ไม่ใช่ซ้อนลงมาสามบรรทัด ซ้อนลงมาแล้วมันดันปุ่มสร้างบัญชีตกจอบนโน้ตบุ๊ก คนจึงไม่เห็นปุ่มโดยไม่ต้องเลื่อน */ .password-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-2) var(--space-5); } .password-rules li { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--color-text-muted); font-size: var(--text-sm); } .password-rules .icon { color: var(--color-text-muted); flex-shrink: 0; margin-block-start: var(--space-1); } /* เส้นคั่น "หรือ" ระหว่างฟอร์มกับทางเลือกอื่น */ .divider { display: flex; align-items: center; gap: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border-normal); } /* ---------------------------------------------------------------- แจ้งเตือนในหน้า */ /* ‼️ ต่างจาก toast — ตัวนี้เป็นสถานะถาวรของหน้า ไม่ใช่ผลของการกด เช่น "ยังไม่ได้ยืนยันอีเมล" ซึ่งต้องอยู่จนกว่าจะแก้จริง */ .notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-raised); } .notice .icon { flex-shrink: 0; margin-block-start: var(--space-1); } .notice-body { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; } .notice strong { color: var(--color-text-strong); display: block; } .notice p { color: var(--color-text-normal); font-size: var(--text-sm); } /* ‼️ พื้นสีอ่อนมาจาก tint ไม่ใช่ opacity ของสีเน้น สีโปร่งใสจะเปลี่ยนตามพื้นที่วางอยู่ แล้ว notice ในการ์ดกับใน hero จะสีไม่ตรงกัน */ .notice[data-type="info"] { background: var(--color-tint-primary); border-color: transparent; } .notice[data-type="warning"] { background: var(--color-tint-warning); border-color: transparent; } .notice[data-type="danger"] { background: var(--color-tint-danger); border-color: transparent; } .notice[data-type="success"] { background: var(--color-tint-success); border-color: transparent; } .notice[data-type="info"] .icon { color: var(--color-state-info); } .notice[data-type="warning"] .icon { color: var(--color-state-warning); } .notice[data-type="danger"] .icon { color: var(--color-state-danger); } .notice[data-type="success"] .icon { color: var(--color-state-success); } /* ---------------------------------------------------------------- ตัวเลขสรุป */ .stat { display: flex; flex-direction: column; gap: var(--space-2); } .stat-head { display: flex; align-items: center; gap: var(--space-2); } .stat-label { color: var(--color-text-muted); font-size: var(--text-sm); } .stat-value { font-family: var(--font-heading), system-ui, sans-serif; font-size: var(--text-2xl); font-weight: var(--weight-heavy); color: var(--color-text-strong); font-variant-numeric: tabular-nums; line-height: 1.1; } .stat-value.is-token { color: var(--color-brand-token); } .stat-note { color: var(--color-text-muted); font-size: var(--text-sm); } .stat-icon { width: var(--space-10); height: var(--space-10); border-radius: var(--radius-md); display: grid; place-items: center; background: var(--color-tint-primary); color: var(--color-brand-link); flex-shrink: 0; } .stat-icon.is-token { background: var(--color-tint-cta); color: var(--color-brand-token); } .stat-icon.is-success { background: var(--color-tint-success); color: var(--color-state-success); } .stat-icon.is-warning { background: var(--color-tint-warning); color: var(--color-state-warning); } /* ---------------------------------------------------------------- ปุ่มลัด */ /* การ์ดสี่เหลี่ยมเล็ก ๆ ที่พาไปทำงานที่ทำได้จริง — วางบนแดชบอร์ดแทนการ์ดตัวเลขล้วน */ .quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } .quick-action { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); color: var(--color-text-strong); text-decoration: none; font-weight: var(--weight-medium); transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); } .quick-action:hover { border-color: var(--color-brand-primary); background: var(--color-surface-raised); } .quick-action .icon { color: var(--color-brand-link); flex-shrink: 0; } .quick-action span { font-size: var(--text-sm); } @media (max-width: 1024px) { .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .quick-actions { grid-template-columns: minmax(0, 1fr); } } /* ---------------------------------------------------------------- รายการกิจกรรม */ .activity { display: flex; flex-direction: column; } .activity li { display: flex; gap: var(--space-3); align-items: center; padding-block: var(--space-3); border-block-end: 1px solid var(--color-border-subtle); } .activity li:last-child { border-block-end: 0; padding-block-end: 0; } .activity li:first-child { padding-block-start: 0; } .activity-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .activity-main strong { color: var(--color-text-strong); font-weight: var(--weight-medium); } .activity-time { color: var(--color-text-muted); font-size: var(--text-sm); white-space: nowrap; } .activity-dot { width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); display: grid; place-items: center; background: var(--color-surface-raised); color: var(--color-text-muted); flex-shrink: 0; } /* ---------------------------------------------------------------- ตาราง */ .table-wrap { overflow-x: auto; border-radius: var(--radius-md); } .table th, .table td { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--color-border-subtle); text-align: start; vertical-align: middle; } .table thead th { background: var(--color-surface-raised); color: var(--color-text-strong); font-weight: var(--weight-bold); font-size: var(--text-sm); white-space: nowrap; position: sticky; inset-block-start: 0; z-index: 1; } .table th a { color: inherit; text-decoration: none; display: inline-flex; gap: var(--space-1); align-items: center; } .table th a:hover { color: var(--color-brand-link); } .table .num { text-align: end; font-variant-numeric: tabular-nums; } .table tbody tr { transition: background var(--duration-fast) var(--ease-standard); } .table tbody tr:hover { background: var(--color-surface-raised); } .table tbody tr:last-child td { border-block-end: 0; } .table .actions { display: flex; gap: var(--space-1); justify-content: end; } /* บนมือถือยุบเป็นการ์ด ห้าม scroll แนวนอน */ @media (max-width: 768px) { .table thead { display: none; } .table tbody tr { display: block; border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); padding: var(--space-4); margin-block-end: var(--space-3); background: var(--color-surface-card); } .table td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border: 0; padding: var(--space-1) 0; } .table td::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-sm); flex-shrink: 0; } .table td[data-primary]::before { content: none; } .table td[data-primary] { font-weight: var(--weight-bold); color: var(--color-text-strong); font-size: var(--text-lg); padding-block-end: var(--space-2); margin-block-end: var(--space-2); border-block-end: 1px solid var(--color-border-subtle); } .table .actions { justify-content: flex-start; } .compare { display: block; } .compare thead { display: none; } .compare tbody tr { display: block; border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); padding: var(--space-4); margin-block-end: var(--space-3); } .compare td { display: flex; justify-content: space-between; gap: var(--space-3); border: 0; padding: var(--space-1) 0; } .compare td::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-sm); } } /* ---------------------------------------------------------------- สถานะ */ .empty-state, .error-state { text-align: center; padding: var(--space-12) var(--space-5); color: var(--color-text-muted); display: flex; flex-direction: column; gap: var(--space-3); align-items: center; } .empty-state h3, .error-state h3 { color: var(--color-text-strong); } .empty-state p, .error-state p { max-width: 46ch; } /* ‼️ empty state ต้องบอกขั้นตอนถัดไป ไม่ใช่แค่บอกว่าว่าง ไอคอนจึงอยู่ในวงกลมที่ดูตั้งใจ ไม่ใช่ไอคอนเทาลอย ๆ ที่เหมือนหน้ายังโหลดไม่เสร็จ */ .empty-mark { width: var(--space-16); height: var(--space-16); border-radius: var(--radius-full); display: grid; place-items: center; background: var(--color-tint-primary); color: var(--color-brand-link); margin-block-end: var(--space-1); } .empty-mark.is-warning { background: var(--color-tint-warning); color: var(--color-state-warning); } .empty-mark.is-success { background: var(--color-tint-success); color: var(--color-state-success); } .empty-mark.is-danger { background: var(--color-tint-danger); color: var(--color-state-danger); } .empty-mark .icon { width: var(--space-8); height: var(--space-8); } .empty-state .btn-row { justify-content: center; margin-block-start: var(--space-2); } /* รายการ "ทำอะไรต่อได้" ใน empty state — จัดชิดซ้ายเพราะเป็นขั้นตอน ไม่ใช่ข้อความโปรย */ .empty-next { text-align: start; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-raised); max-width: 32rem; width: 100%; } .empty-next li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); } .empty-next .icon { color: var(--color-brand-link); flex-shrink: 0; margin-block-start: var(--space-1); } .skeleton { background: var(--color-surface-raised); border-radius: var(--radius-sm); height: 1em; animation: pulse 1.4s ease-in-out infinite; } .skeleton-line { height: .9em; } .skeleton-line.is-short { width: 40%; } .skeleton-line.is-half { width: 60%; } .skeleton-block { height: var(--space-12); border-radius: var(--radius-md); } .skeleton-stack { display: flex; flex-direction: column; gap: var(--space-3); } @keyframes pulse { 50% { opacity: .5; } } /* ---------------------------------------------------------------- toast */ /* ต้องลอย ห้ามแทรกในหน้า เพราะแบบแทรกจะดัน component อื่นเลื่อนตำแหน่ง */ .toasts { position: fixed; inset-block-end: var(--space-4); inset-inline-end: var(--space-4); z-index: 60; display: flex; flex-direction: column; gap: var(--space-2); max-width: min(380px, calc(100vw - var(--space-8))); } .toast { display: flex; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--color-border-normal); background: var(--color-surface-card); box-shadow: var(--shadow-lg); animation: toast-in var(--duration-normal) var(--ease-enter); } /* ‼️ ไม่ใช้แถบสีหนาข้างซ้าย โดยตั้งใจ มันคือลายเซ็นที่จำได้ทันทีว่าเป็น UI ที่ AI สร้าง และซ้ำซ้อนด้วย เพราะมาตรฐานบังคับให้แต่ละแบบต่างกันทั้งสีและไอคอนอยู่แล้ว */ .toast .toast-icon { flex-shrink: 0; } .toast[data-type="success"] .toast-icon { color: var(--color-state-success); } .toast[data-type="warning"] .toast-icon { color: var(--color-state-warning); } .toast[data-type="danger"] .toast-icon { color: var(--color-state-danger); } .toast[data-type="info"] .toast-icon { color: var(--color-state-info); } .toast .ref { color: var(--color-text-muted); font-size: var(--text-sm); } @keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-2)); } } /* ---------------------------------------------------------------- modal / drawer */ dialog { border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); color: var(--color-text-normal); padding: 0; max-width: min(560px, calc(100vw - var(--space-8))); width: 100%; box-shadow: var(--shadow-lg); } dialog::backdrop { background: var(--color-overlay); } .dialog-head, .dialog-foot { padding: var(--space-5); display: flex; align-items: center; gap: var(--space-3); } .dialog-head { border-block-end: 1px solid var(--color-border-subtle); } .dialog-head h2 { font-size: var(--text-lg); } .dialog-foot { border-block-start: 1px solid var(--color-border-subtle); justify-content: end; background: var(--color-surface-raised); } .dialog-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } /* ‼️ drawer ใช้กับงานสั้น (แก้ค่าเดียว ดูรายละเอียดย่อ) เท่านั้น งานที่มีข้อมูลเยอะต้องเป็นหน้าเต็ม ไม่ใช่ยัดลง drawer จนต้อง scroll ในกล่อง */ dialog.drawer { max-width: min(var(--layout-drawer-width), 100vw); width: 100%; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0; border-block: 0; border-inline-end: 0; display: flex; flex-direction: column; animation: drawer-in var(--duration-normal) var(--ease-enter); } dialog.drawer .dialog-body { flex: 1; overflow-y: auto; } @keyframes drawer-in { from { transform: translateX(100%); } } @media (max-width: 768px) { dialog { max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; } dialog.drawer { max-width: 100vw; } } /* ---------------------------------------------------------------- แท็บ */ .tabs { display: flex; gap: var(--space-1); border-block-end: 1px solid var(--color-border-normal); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs a, .tabs button { padding: var(--space-3) var(--space-4); border: 0; background: transparent; color: var(--color-text-muted); text-decoration: none; font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; border-block-end: 2px solid transparent; margin-block-end: -1px; } .tabs a:hover, .tabs button:hover { color: var(--color-text-strong); } .tabs [aria-current="page"], .tabs [aria-selected="true"] { color: var(--color-brand-link); border-block-end-color: var(--color-brand-primary); } /* ตัวเลือกแบบปุ่มติดกัน — ใช้กับตัวกรองที่มีไม่เกิน 4 ตัวเลือก */ .segmented { display: inline-flex; padding: var(--space-1); gap: var(--space-1); background: var(--color-surface-raised); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); } .segmented a, .segmented button { padding: var(--space-1) var(--space-4); min-height: var(--layout-control-sm); display: inline-flex; align-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; white-space: nowrap; } /* ‼️ บนจอแคบ ปุ่มช่วงเวลา 5 ปุ่มเรียงติดกันดันหน้าจนเกิด scroll แนวนอน ให้เลื่อนในตัวเองแทนการดันทั้งหน้า — วัดเจอที่ /admin/audit-logs 375px (scrollWidth 408) */ /* ‼️ flex item ที่ scroll ในตัวเองต้องมี min-width: 0 ด้วย ไม่มีบรรทัดนั้น min-content ของปุ่มทั้ง 5 จะยังดันความกว้างของฟอร์มทั้งก้อน ทั้งที่ตั้ง overflow-x: auto ไว้แล้ว — วัดเจอที่ /admin/audit-logs 375px */ @media (max-width: 600px) { .segmented { max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; } .segmented::-webkit-scrollbar { display: none; } .toolbar-range { flex-wrap: wrap; min-width: 0; } .toolbar-range > .segmented { flex: 1 1 auto; } } .segmented [aria-current="true"], .segmented [aria-pressed="true"] { background: var(--color-surface-card); color: var(--color-text-strong); box-shadow: var(--shadow-xs); } /* ---------------------------------------------------------------- เมนูแอป */ .nav { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); } .nav-group-label { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: var(--space-4) var(--space-3) var(--space-1); } .nav a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--layout-control); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-text-normal); text-decoration: none; font-weight: var(--weight-medium); transition: background var(--duration-fast) var(--ease-standard); } .nav a .icon { flex-shrink: 0; color: var(--color-text-muted); } .nav a:hover { background: var(--color-surface-raised); color: var(--color-text-strong); } .nav a:hover .icon { color: var(--color-text-strong); } .nav a[aria-current="page"] { background: var(--color-tint-primary); color: var(--color-brand-link); } .nav a[aria-current="page"] .icon { color: var(--color-brand-link); } /* ---------------------------------------------------------------- ป้ายสถานะ */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; color: var(--color-text-normal); } .badge .icon { width: var(--space-4); height: var(--space-4); } /* ‼️ สถานะต้องต่างกันทั้งสีและข้อความ ห้ามสื่อด้วยสีอย่างเดียว คนตาบอดสีแยกแดง/เขียวไม่ออก */ .badge[data-status="active"], .badge[data-status="confirmed"] { background: var(--color-tint-success); border-color: transparent; color: var(--color-state-success); } .badge[data-status="pending"], .badge[data-status="reserved"], .badge[data-status="provisioning"] { background: var(--color-tint-warning); border-color: transparent; color: var(--color-state-warning); } .badge[data-status="suspended"], .badge[data-status="failed"] { background: var(--color-tint-danger); border-color: transparent; color: var(--color-state-danger); } .badge[data-status="released"], .badge[data-status="closed"] { background: var(--color-surface-raised); border-color: transparent; color: var(--color-text-muted); } .badge-brand { background: var(--color-tint-cta); border-color: transparent; color: var(--color-brand-token); } .badge-primary { background: var(--color-tint-primary); border-color: transparent; color: var(--color-brand-link); } /* ---------------------------------------------------------------- แถบเครื่องมือ */ /* ‼️ ตัวกรอง/ค้นหา/เรียง ต้องอยู่ตำแหน่งเดียวกันทุกหน้า ย้ายที่ในแต่ละหน้าแล้วผู้ใช้ต้องมองหาใหม่ทุกครั้งที่เปลี่ยนหน้า */ .toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); margin-block-end: var(--space-5); } .toolbar .field { flex: 1 1 12rem; min-width: 0; } /* ‼️ ตัวกรองไม่ต้องบอกว่า "(ไม่บังคับ)" ทุกช่อง ตัวกรองเป็นของที่ไม่บังคับอยู่แล้วโดยธรรมชาติ ป้ายนี้จึงเป็นเสียงรบกวนล้วน ๆ ซ่อนที่ CSS ไม่ใช่ที่ partial เพราะช่องเดียวกันในฟอร์มจริงยังต้องมีป้ายนี้อยู่ */ .toolbar .field label .muted { display: none; } .toolbar .field input, .toolbar .field select { background: var(--color-surface-card); } .toolbar-end { margin-inline-start: auto; display: flex; gap: var(--space-2); align-items: flex-end; } /* ‼️ ต้องปิด flex-wrap ตอนเปลี่ยนเป็นแนวตั้งด้วย flex-wrap: wrap คู่กับ flex-direction: column แปลว่า "ให้ขึ้นคอลัมน์ใหม่ได้" ความกว้างของแต่ละคอลัมน์จึงยึดตาม min-content ของช่องข้างใน ไม่ใช่ความกว้างของกล่องแม่ ผลคือช่องกรอกกว้างเกินฟอร์มแล้วดันทั้งหน้าจน scroll แนวนอน — วัดเจอที่ 375px */ @media (max-width: 768px) { .toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; } .toolbar-end { margin-inline-start: 0; } } /* แถวปุ่มช่วงเวลาอยู่ในฟอร์มเดียวกับตัวกรอง แต่ขึ้นบรรทัดของตัวเอง */ .toolbar-range { flex: 1 0 100%; align-items: center; } .result-count { color: var(--color-text-muted); font-size: var(--text-sm); } .pagination { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; } .pagination a, .pagination span { min-width: var(--layout-control-sm); min-height: var(--layout-control-sm); display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--space-2); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text-normal); } .pagination a:hover { background: var(--color-surface-raised); color: var(--color-text-strong); } .pagination [aria-current="page"] { background: var(--color-brand-primary); color: var(--color-brand-on-primary); font-weight: var(--weight-bold); } /* ---------------------------------------------------------------- อื่น ๆ */ .breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--color-text-muted); } .breadcrumb a { color: var(--color-text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--color-brand-link); } .breadcrumb .sep { color: var(--color-border-strong); } .support-fab { position: fixed; inset-block-end: var(--space-5); inset-inline-start: var(--space-5); z-index: 50; border-radius: var(--radius-full); background: var(--color-surface-card); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-md); } .prose { max-width: var(--layout-prose-width); display: flex; flex-direction: column; gap: var(--space-4); } .prose h2 { margin-block-start: var(--space-6); font-size: var(--text-xl); } .prose h3 { margin-block-start: var(--space-4); } .prose ol, .prose ul { padding-inline-start: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); } .prose ol { list-style: decimal; } .prose ul { list-style: disc; } .prose figure { display: flex; flex-direction: column; gap: var(--space-2); } .prose figcaption { color: var(--color-text-muted); font-size: var(--text-sm); } /* คู่ ชื่อ/ค่า ที่ใช้ในหน้ารายละเอียด — แทนตารางสองคอลัมน์ที่บนมือถือพัง */ .spec-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-3) var(--space-4); } .spec-list dt { color: var(--color-text-muted); font-size: var(--text-sm); } .spec-list dd { margin: 0; color: var(--color-text-strong); } @media (max-width: 560px) { .spec-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } .spec-list dd { margin-block-end: var(--space-3); } } .footer-col h4 { color: var(--color-text-strong); font-size: var(--text-sm); margin-block-end: var(--space-3); } .footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); } .footer-col a { color: var(--color-text-muted); text-decoration: none; } .footer-col a:hover { color: var(--color-brand-link); } /* ปุ่มเปิดเมนู — โผล่พร้อมกับตอนที่เมนูยุบ ต้องใช้ breakpoint เดียวกันเป๊ะ ไม่งั้นจะมีช่วงที่เมนูหายแต่ยังไม่มีปุ่มให้กด */ .nav-toggle { display: none; } @media (max-width: 1180px) { .nav-toggle { display: inline-flex; } } /* ---------------------------------------------------------------- แถบปิดท้าย */ .cta-band { position: relative; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--color-border-normal); background: var(--color-surface-card); padding: clamp(var(--space-8), 4vw, var(--space-16)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; } .cta-band::before { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; width: 45%; aspect-ratio: 1; border-radius: var(--radius-full); background: var(--color-effect-glow-primary); filter: blur(var(--space-20)); pointer-events: none; } .cta-band > * { position: relative; } .cta-band h2 { font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); } .cta-band p { color: var(--color-text-muted); max-width: 52ch; } @media (max-width: 768px) { .cta-band { grid-template-columns: minmax(0, 1fr); } } } @layer utilities { .muted { color: var(--color-text-muted); } .strong { color: var(--color-text-strong); } .small { font-size: var(--text-sm); } .tiny { font-size: var(--text-xs); } .lead { font-size: var(--text-lg); } .nowrap { white-space: nowrap; } .center { text-align: center; } .icon-lg { width: var(--space-10); height: var(--space-10); } .full { width: 100%; } .flex-fill { flex: 1; min-width: 0; } .mono { font-family: var(--font-mono), ui-monospace, monospace; font-variant-numeric: tabular-nums; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ข้ามไปเนื้อหาหลัก — ต้องเป็นจุดแรกที่ Tab ไปถึงในทุกหน้า */ .skip-link { position: absolute; inset-inline-start: var(--space-4); inset-block-start: calc(var(--space-16) * -1); z-index: 70; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-brand-primary); color: var(--color-brand-on-primary); text-decoration: none; } .skip-link:focus { inset-block-start: var(--space-4); } }