/* สไตล์ทั้งระบบอยู่ไฟล์นี้ไฟล์เดียว
   ค่าธีมทั้งหมดมาจาก project/DESIGN.md · ห้ามสร้างไฟล์ CSS แยกต่อหน้า
   ห้ามเขียนค่าสีหรือระยะห่างดิบ — ใช้ var(--...) เท่านั้น */

/* TOKENS:BEGIN */
/* generate จาก project/DESIGN.md — ห้ามแก้ด้วยมือ
   แก้ค่าที่ DESIGN.md แล้วรัน: php scripts/design-sync.php */

:root {
  --color-brand-primary: #102A43;
  --color-brand-on-primary: #FFFFFF;
  --color-brand-accent: #0F6B4F;
  --color-brand-on-accent: #FFFFFF;
  --color-brand-highlight: #D7F43B;
  --color-brand-on-highlight: #102A43;
  --color-brand-soft: #E7ECF2;
  --color-brand-wash: #F1F4F8;
  --color-brand-link: #0F6B4F;
  --color-brand-logo: #0F6B4F;
  --color-surface-page: #F7F8F4;
  --color-surface-card: #FFFFFF;
  --color-surface-raised: #EBEFE8;
  --color-surface-sidebar: #102A43;
  --color-surface-on-sidebar: #DCE6F0;
  --color-surface-court: #E9EEE9;
  --color-surface-head: #F2F5F2;
  --color-surface-mist: #E4F1E9;
  --color-surface-qr: #FFFFFF;
  --color-text-strong: #0B1F33;
  --color-text-normal: #3E5265;
  --color-text-muted: #55697B;
  --color-text-on-dark: #FFFFFF;
  --color-border-normal: #E3E8DF;
  --color-border-strong: #728694;
  --color-border-sidebar: #24405C;
  --color-state-success: #0B7B52;
  --color-state-warning: #B25E09;
  --color-state-danger: #B3261E;
  --color-state-info: #1B5FA8;
  --color-state-violet: #6B4BC2;
  --color-state-rose: #BE3A68;
  --color-state-teal: #0E7A7E;
  --color-tint-success: #E8F6EF;
  --color-tint-warning: #FCF2E3;
  --color-tint-danger: #FBECEA;
  --color-tint-info: #E9F1FA;
  --color-tint-neutral: #F0F3EE;
  --color-tint-highlight: #F4FBD3;
  --color-tint-violet: #F1ECFB;
  --color-tint-rose: #FCEBF1;
  --color-tint-teal: #E2F4F3;
  --color-slot-free: #FFFFFF;
  --color-slot-free-border: #CBD8CB;
  --color-slot-booked: #0F6B4F;
  --color-slot-on-booked: #FFFFFF;
  --color-slot-held: #FCF2E3;
  --color-slot-blocked: #EBEFE8;
  --color-slot-past: #F4F5F1;
  --color-slot-class: #6B4BC2;
  --color-slot-on-class: #FFFFFF;
  --color-slot-selected: #0F6B4F;
  --color-slot-taken: #7D8784;
  --color-slot-on-selected: #FFFFFF;
  --color-grid-booked: #2CF2A9;
  --color-grid-coach: #CCE5FF;
  --color-grid-class: #D8AAFD;
  --color-grid-vip: #FFC766;
  --color-chart-series1: #102A43;
  --color-chart-series2: #0F6B4F;
  --color-chart-series3: #B25E09;
  --color-chart-series4: #1B5FA8;
  --color-chart-series5: #6B7F3A;
  --color-chart-grid: #E3E8DF;
  --color-heat-level1: #DCEFE4;
  --color-heat-level2: #9CD3B6;
  --color-heat-level3: #3E9D75;
  --color-heat-level4: #0F6B4F;
  --color-stage-surface: #050807;
  --color-stage-text: #F2F6F3;
  --color-stage-muted: #A7B6AE;
  --color-stage-accent: #5FD6A8;
  --color-stage-line: #2A3A33;
  --color-social-line: #06C755;
  --color-social-line-hover: #05B34C;
  --color-social-line-press: #048B3B;
  --color-social-on-line: #FFFFFF;
  --color-social-facebook: #1877F2;
  --color-social-instagram: #E4405F;
  --color-tenant-omc: #0F6B4F;
  --color-tenant-omc-on: #FFFFFF;
  --color-tenant-omc-primary: #102A43;
  --color-tenant-omc-on-primary: #FFFFFF;
  --color-tenant-omc-soft: #E7ECF2;
  --color-tenant-omc-wash: #F1F4F8;
  --color-tenant-omc-booked: #0F6B4F;
  --color-tenant-omc-page: #F7F8F4;
  --color-tenant-red: #BB0F18;
  --color-tenant-red-on: #FFFFFF;
  --color-tenant-red-soft: #F1CFD1;
  --color-tenant-red-wash: #FBF1F1;
  --color-tenant-maroon: #9B1B30;
  --color-tenant-maroon-on: #FFFFFF;
  --color-tenant-maroon-soft: #EBD1D6;
  --color-tenant-maroon-wash: #F9F1F3;
  --color-tenant-orange: #A04703;
  --color-tenant-orange-on: #FFFFFF;
  --color-tenant-orange-soft: #ECDACD;
  --color-tenant-orange-wash: #F9F4F0;
  --color-tenant-gold: #885802;
  --color-tenant-gold-on: #FFFFFF;
  --color-tenant-gold-soft: #E7DECC;
  --color-tenant-gold-wash: #F8F5F0;
  --color-tenant-green: #007215;
  --color-tenant-green-on: #FFFFFF;
  --color-tenant-green-soft: #CCE3D0;
  --color-tenant-green-wash: #F0F7F1;
  --color-tenant-teal: #026B77;
  --color-tenant-teal-on: #FFFFFF;
  --color-tenant-teal-soft: #CCE1E4;
  --color-tenant-teal-wash: #F0F6F7;
  --color-tenant-blue: #0063AE;
  --color-tenant-blue-on: #FFFFFF;
  --color-tenant-blue-soft: #CCE0EF;
  --color-tenant-blue-wash: #F0F6FA;
  --color-tenant-navy: #1F3A68;
  --color-tenant-navy-on: #FFFFFF;
  --color-tenant-navy-soft: #D2D8E1;
  --color-tenant-navy-wash: #F2F3F6;
  --color-tenant-violet: #6C36EA;
  --color-tenant-violet-on: #FFFFFF;
  --color-tenant-violet-soft: #E2D7FB;
  --color-tenant-violet-wash: #F6F3FE;
  --color-tenant-magenta: #A013B1;
  --color-tenant-magenta-on: #FFFFFF;
  --color-tenant-magenta-soft: #ECD0EF;
  --color-tenant-magenta-wash: #F9F1FA;
  --color-tenant-pink: #B90454;
  --color-tenant-pink-on: #FFFFFF;
  --color-tenant-pink-soft: #F1CDDD;
  --color-tenant-pink-wash: #FBF0F5;
  --color-tenant-brown: #795548;
  --color-tenant-brown-on: #FFFFFF;
  --color-tenant-brown-soft: #E4DDDA;
  --color-tenant-brown-wash: #F7F5F4;
  --color-tenant-graphite: #37474F;
  --color-tenant-graphite-on: #FFFFFF;
  --color-tenant-graphite-soft: #D7DADC;
  --color-tenant-graphite-wash: #F3F4F4;
  --color-tenant-grape: #6A1B9A;
  --color-tenant-grape-on: #FFFFFF;
  --color-tenant-grape-soft: #E1D1EB;
  --color-tenant-grape-wash: #F6F1F9;
  --color-tenant-red-page: #F6E9E7;
  --color-tenant-red-raised: #EAD9DA;
  --color-tenant-red-head: #EEDDDE;
  --color-tenant-red-court: #E9D8D9;
  --color-tenant-maroon-page: #F6E9E9;
  --color-tenant-maroon-raised: #E7DADC;
  --color-tenant-maroon-head: #EBDEE0;
  --color-tenant-maroon-court: #E6D9DB;
  --color-tenant-orange-page: #F5EAE5;
  --color-tenant-orange-raised: #E7DED7;
  --color-tenant-orange-head: #ECE3DC;
  --color-tenant-orange-court: #E6DDD7;
  --color-tenant-gold-page: #F2EBE3;
  --color-tenant-gold-raised: #E5E0D7;
  --color-tenant-gold-head: #E9E4DC;
  --color-tenant-gold-court: #E4DFD6;
  --color-tenant-green-page: #E7EFE7;
  --color-tenant-green-raised: #D7E3D9;
  --color-tenant-green-head: #DCE7DE;
  --color-tenant-green-court: #D6E2D8;
  --color-tenant-teal-page: #E2EFF1;
  --color-tenant-teal-raised: #D7E2E3;
  --color-tenant-teal-head: #DCE6E8;
  --color-tenant-teal-court: #D6E1E2;
  --color-tenant-blue-page: #E6EDF6;
  --color-tenant-blue-raised: #D7E1E9;
  --color-tenant-blue-head: #DCE6ED;
  --color-tenant-blue-court: #D6E0E8;
  --color-tenant-navy-page: #E7EDF6;
  --color-tenant-navy-raised: #DADDE2;
  --color-tenant-navy-head: #DFE1E6;
  --color-tenant-navy-court: #D9DCE1;
  --color-tenant-violet-page: #ECEBF6;
  --color-tenant-violet-raised: #E2DDEF;
  --color-tenant-violet-head: #E6E1F3;
  --color-tenant-violet-court: #E1DCEE;
  --color-tenant-magenta-page: #F1EAF2;
  --color-tenant-magenta-raised: #E7D9E9;
  --color-tenant-magenta-head: #ECDEED;
  --color-tenant-magenta-court: #E6D8E8;
  --color-tenant-pink-page: #F5E9EB;
  --color-tenant-pink-raised: #EAD8E0;
  --color-tenant-pink-head: #EEDCE4;
  --color-tenant-pink-court: #E9D7DF;
  --color-tenant-brown-page: #F5EAE5;
  --color-tenant-brown-raised: #E3E0DE;
  --color-tenant-brown-head: #E8E4E3;
  --color-tenant-brown-court: #E2DFDD;
  --color-tenant-graphite-page: #E7EEF1;
  --color-tenant-graphite-raised: #DDDEDF;
  --color-tenant-graphite-head: #E1E3E4;
  --color-tenant-graphite-court: #DCDDDE;
  --color-tenant-grape-page: #EFEAF4;
  --color-tenant-grape-raised: #E2DAE7;
  --color-tenant-grape-head: #E6DEEB;
  --color-tenant-grape-court: #E1D9E6;
  --color-focus: #0F6B4F;
  --color-overlay: rgb(11 31 51 / .48);
  --font-heading: "IBM Plex Sans Thai";
  --font-body: "IBM Plex Sans Thai";
  --font-mono: "ui-monospace";
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.9375rem;
  --text-4xl: 2.5rem;
  --text-display: 3.5rem;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 600;
  --weight-heavy: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.6;
  --leading-loose: 1.75;
  --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;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;
  --icon-sm: 16px;
  --icon-base: 20px;
  --icon-lg: 28px;
  --icon-xl: 44px;
  --icon-stroke: 1.8;
  --shadow-sm: 0 1px 2px rgb(11 31 51 / .04), 0 6px 18px -12px rgb(11 31 51 / .12);
  --shadow-md: 0 2px 4px rgb(11 31 51 / .05), 0 12px 28px -14px rgb(11 31 51 / .20);
  --shadow-lg: 0 18px 40px -16px rgb(11 31 51 / .18);
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 280ms;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-enter: cubic-bezier(0,0,.2,1);
  --tennis-loader-width: 360px;
  --tennis-loader-cycle: 2400ms;
  --tennis-loader-racket-pivot: 0 60px;
  --tennis-loader-resting-ball: translate(114px, -20px);
  --panel-padding: 24px;
  --panel-padding-mobile: 16px;
  --panel-radius: 14px;
  --panel-gap: 20px;
  --stepper-min-width: 144px;
  --stepper-dot: 32px;
  --table-row-height: 52px;
  --table-cell-padding: 0 16px;
  --table-head-background: var(--color-surface-head);
  --table-head-padding: 10px 16px;
  --table-font-size: 0.8125rem;
  --badge-radius: 6px;
  --badge-status-radius: 999px;
  --badge-dot-size: 6px;
  --badge-type-border-style: dashed;
  --badge-status-border-style: solid;
  --kpi-min-width: 280px;
  --kpi-gap: 16px;
  --kpi-value-size: 1.9375rem;
  --kpi-icon-box: 40px;
  --kpi-spark-h: 32px;
  --grid-label-width: 132px;
  --grid-row-height: 46px;
  --grid-row-gap: 6px;
  --grid-hour-width: 76px;
  --grid-hour-min-width: 54px;
  --grid-now-line: 2px;
  --slot-height: 40px;
  --slot-gap: 4px;
  --slot-week-gap: 1px;
  --slot-radius: 8px;
  --slot-min-width: 84px;
  --calendar-cell-height: 116px;
  --calendar-dot-size: 6px;
  --chart-height: 220px;
  --chart-height-sm: 132px;
  --chart-bar-gap: 6px;
  --chart-bar-radius: 4px;
  --chart-grid-stroke: 1px;
  --chart-donut-size: 148px;
  --chart-donut-stroke: 12;
  --drawer-width: 560px;
  --tabs-indicator: 3px;
  --avatar-sm: 28px;
  --avatar-md: 40px;
  --avatar-lg: 72px;
  --avatar-xl: 128px;
  --timeline-dot: 10px;
  --timeline-line: 2px;
  --rail-dot: 12px;
  --rail-line: 2px;
  --progress-height: 6px;
  --feed-icon: 40px;
  --hero-min-height: 600px;
  --hero-min-height-mobile: 460px;
  --hero-gap: 48px;
  --hero-image-ratio: 4 / 3;
  --hero-scrim: linear-gradient(to top, rgb(11 31 51 / .78) 0%, rgb(11 31 51 / .46) 44%, rgb(11 31 51 / .10) 100%);
  --hero-on-image: #FFFFFF;
  --product-card-image-ratio: 1 / 1;
  --product-card-gap: 16px;
  --product-card-grid-gap: 28px;
  --product-card-name-size: 1.0625rem;
  --product-card-meta-size: 0.8125rem;
  --court-card-image-ratio: 16 / 10;
  --court-card-gap: 14px;
  --coach-card-image-ratio: 3 / 4;
  --coach-card-gap: 14px;
  --prose-max-width: 68ch;
  --prose-paragraph-gap: 16px;
  --prose-heading-gap: 36px;
  --news-item-image-ratio: 16 / 9;
  --news-item-image-width: 300px;
  --news-item-gap: 24px;
  --news-item-divider-style: 1px solid var(--color-border-normal);
  --form-control-height: 48px;
  --form-filter-height: 52px;
  --form-short-width: 12rem;
  --form-medium-width: 24rem;
  --form-time-width: 15rem;
  --form-time-part-width: 4.5rem;
  --form-aside-width: 340px;
  --form-section-gap: 20px;
  --form-choice-min: 280px;
  --form-choice-icon: 40px;
  --form-summary-icon: 56px;
  --sticky-cta-height: 72px;
  --z-raised: 5;
  --z-dropdown: 20;
  --z-sticky: 30;
  --z-header: 40;
  --z-float: 45;
  --z-overlay: 60;
  --z-skip: 100;
  --layout-max-width: 100%;
  --layout-form-width: 100%;
  --layout-page-gutter: 24px;
  --layout-page-gutter-mobile: 16px;
  --layout-field-min-width: 220px;
  --layout-detail-min-width: 280px;
  --layout-tile-min-width: 240px;
  --layout-sidebar-width: 256px;
  --layout-sidebar-collapsed: 68px;
  --layout-breakpoint: 960px;
  --layout-topbar-height: 64px;
  --layout-subnav-height: 46px;
  --layout-aside-width: 340px;
  --layout-public-width: 1440px;
}

/* โหมดตามที่ผู้ใช้เลือก — PHP เขียน data-theme ที่ <html> เพื่อไม่ให้หน้ากะพริบตอนโหลด */
:root[data-theme="dark"] {
  --color-brand-primary: #33C08C;
  --color-brand-on-primary: #05231A;
  --color-brand-accent: #5FD6A8;
  --color-brand-on-accent: #05231A;
  --color-brand-highlight: #D7F43B;
  --color-brand-on-highlight: #102A43;
  --color-brand-soft: #16303F;
  --color-brand-wash: #102630;
  --color-brand-link: #5FD6A8;
  --color-brand-logo: #5FD6A8;
  --color-surface-page: #0B1620;
  --color-surface-card: #122029;
  --color-surface-raised: #1A2C38;
  --color-surface-sidebar: #08111A;
  --color-surface-on-sidebar: #C3D2CB;
  --color-surface-court: #16252F;
  --color-surface-head: #172A35;
  --color-surface-mist: #12302A;
  --color-surface-qr: #FFFFFF;
  --color-text-strong: #EEF3EF;
  --color-text-normal: #C3D2CB;
  --color-text-muted: #8FA3AD;
  --color-text-on-dark: #EEF3EF;
  --color-border-normal: #263A47;
  --color-border-strong: #6C8290;
  --color-border-sidebar: #16252F;
  --color-state-success: #3ECF97;
  --color-state-warning: #F5B83D;
  --color-state-danger: #FF7A70;
  --color-state-info: #6FB2F5;
  --color-state-violet: #B9A4F7;
  --color-state-rose: #F48DB2;
  --color-state-teal: #5CCFD2;
  --color-tint-success: #0E2B21;
  --color-tint-warning: #2E2413;
  --color-tint-danger: #301917;
  --color-tint-info: #12253A;
  --color-tint-neutral: #1D2F3B;
  --color-tint-highlight: #2B3316;
  --color-tint-violet: #241D3A;
  --color-tint-rose: #35192A;
  --color-tint-teal: #10302F;
  --color-slot-free: #122029;
  --color-slot-free-border: #2E4A3E;
  --color-slot-booked: #33C08C;
  --color-slot-on-booked: #05231A;
  --color-slot-held: #2E2413;
  --color-slot-blocked: #1A2C38;
  --color-slot-past: #111D25;
  --color-slot-class: #B9A4F7;
  --color-slot-on-class: #1A1030;
  --color-slot-selected: #5FD6A8;
  --color-slot-taken: #4A5654;
  --color-slot-on-selected: #05231A;
  --color-grid-booked: #2CF2A9;
  --color-grid-coach: #CCE5FF;
  --color-grid-class: #D8AAFD;
  --color-grid-vip: #FFC766;
  --color-chart-series1: #7FB2E8;
  --color-chart-series2: #33C08C;
  --color-chart-series3: #F5B83D;
  --color-chart-series4: #6FB2F5;
  --color-chart-series5: #C5DE5C;
  --color-chart-grid: #263A47;
  --color-heat-level1: #14322A;
  --color-heat-level2: #1D6B4C;
  --color-heat-level3: #2F9A6F;
  --color-heat-level4: #5FD6A8;
  --color-stage-surface: #050807;
  --color-stage-text: #F2F6F3;
  --color-stage-muted: #A7B6AE;
  --color-stage-accent: #5FD6A8;
  --color-stage-line: #2A3A33;
  --color-social-line: #06C755;
  --color-social-line-hover: #05B34C;
  --color-social-line-press: #048B3B;
  --color-social-on-line: #FFFFFF;
  --color-social-facebook: #4B9BFF;
  --color-social-instagram: #F7728C;
  --color-tenant-omc: #5FD6A8;
  --color-tenant-omc-on: #05231A;
  --color-tenant-omc-primary: #33C08C;
  --color-tenant-omc-on-primary: #05231A;
  --color-tenant-omc-soft: #16303F;
  --color-tenant-omc-wash: #102630;
  --color-tenant-omc-booked: #33C08C;
  --color-tenant-omc-page: #0B1620;
  --color-tenant-red: #FC6358;
  --color-tenant-red-on: #0B1620;
  --color-tenant-red-soft: #372B31;
  --color-tenant-red-wash: #1E1C24;
  --color-tenant-maroon: #EF6C74;
  --color-tenant-maroon-on: #0B1620;
  --color-tenant-maroon-soft: #352C35;
  --color-tenant-maroon-wash: #1D1D27;
  --color-tenant-orange: #F16E05;
  --color-tenant-orange-on: #0B1620;
  --color-tenant-orange-soft: #362C23;
  --color-tenant-orange-wash: #1D1D1E;
  --color-tenant-gold: #F9A825;
  --color-tenant-gold-on: #0B1620;
  --color-tenant-gold-soft: #373628;
  --color-tenant-gold-wash: #1E2220;
  --color-tenant-green: #50AD53;
  --color-tenant-green-on: #0B1620;
  --color-tenant-green-soft: #1C3730;
  --color-tenant-green-wash: #112224;
  --color-tenant-teal: #12A8B9;
  --color-tenant-teal-on: #0B1620;
  --color-tenant-teal-soft: #123640;
  --color-tenant-teal-wash: #0C222C;
  --color-tenant-blue: #399DFB;
  --color-tenant-blue-on: #0B1620;
  --color-tenant-blue-soft: #18344B;
  --color-tenant-blue-wash: #0F2132;
  --color-tenant-navy: #7B9CD1;
  --color-tenant-navy-on: #0B1620;
  --color-tenant-navy-soft: #233444;
  --color-tenant-navy-wash: #14212E;
  --color-tenant-violet: #9B8AFD;
  --color-tenant-violet-on: #0B1620;
  --color-tenant-violet-soft: #28314B;
  --color-tenant-violet-wash: #171F32;
  --color-tenant-magenta: #E654F9;
  --color-tenant-magenta-on: #0B1620;
  --color-tenant-magenta-soft: #34284A;
  --color-tenant-magenta-wash: #1D1B31;
  --color-tenant-pink: #FF8FBF;
  --color-tenant-pink-on: #0B1620;
  --color-tenant-pink-soft: #383241;
  --color-tenant-pink-wash: #1F202D;
  --color-tenant-brown: #B99183;
  --color-tenant-brown-on: #0B1620;
  --color-tenant-brown-soft: #2D3237;
  --color-tenant-brown-wash: #192028;
  --color-tenant-graphite: #8A9CA5;
  --color-tenant-graphite-on: #0B1620;
  --color-tenant-graphite-soft: #25343D;
  --color-tenant-graphite-wash: #15212B;
  --color-tenant-grape: #BF78F8;
  --color-tenant-grape-on: #0B1620;
  --color-tenant-grape-soft: #2E2E4A;
  --color-tenant-grape-wash: #191E31;
  --color-tenant-red-page: #1B1A20;
  --color-tenant-red-raised: #2B2B34;
  --color-tenant-red-head: #272730;
  --color-tenant-red-court: #26272E;
  --color-tenant-maroon-page: #1B1A21;
  --color-tenant-maroon-raised: #2A2C36;
  --color-tenant-maroon-head: #262832;
  --color-tenant-maroon-court: #252730;
  --color-tenant-orange-page: #1B1A1B;
  --color-tenant-orange-raised: #2A2C2E;
  --color-tenant-orange-head: #26282A;
  --color-tenant-orange-court: #252728;
  --color-tenant-gold-page: #1B1E1D;
  --color-tenant-gold-raised: #2B3030;
  --color-tenant-gold-head: #272C2C;
  --color-tenant-gold-court: #262B2B;
  --color-tenant-green-page: #111E1F;
  --color-tenant-green-raised: #1F3033;
  --color-tenant-green-head: #1B2D30;
  --color-tenant-green-court: #1A2C2E;
  --color-tenant-teal-page: #0D1E25;
  --color-tenant-teal-raised: #1A303B;
  --color-tenant-teal-head: #172C37;
  --color-tenant-teal-court: #162B35;
  --color-tenant-blue-page: #101D29;
  --color-tenant-blue-raised: #1D2F3F;
  --color-tenant-blue-head: #192C3B;
  --color-tenant-blue-court: #182B3A;
  --color-tenant-navy-page: #141D27;
  --color-tenant-navy-raised: #222F3C;
  --color-tenant-navy-head: #1E2B38;
  --color-tenant-navy-court: #1D2B37;
  --color-tenant-violet-page: #161C2A;
  --color-tenant-violet-raised: #242E3F;
  --color-tenant-violet-head: #202A3C;
  --color-tenant-violet-court: #1F293A;
  --color-tenant-magenta-page: #1A1929;
  --color-tenant-magenta-raised: #292A3F;
  --color-tenant-magenta-head: #25263B;
  --color-tenant-magenta-court: #252639;
  --color-tenant-pink-page: #1C1C26;
  --color-tenant-pink-raised: #2B2E3B;
  --color-tenant-pink-head: #272B37;
  --color-tenant-pink-court: #262A35;
  --color-tenant-brown-page: #171C22;
  --color-tenant-brown-raised: #262E37;
  --color-tenant-brown-head: #222B33;
  --color-tenant-brown-court: #212A31;
  --color-tenant-graphite-page: #151D24;
  --color-tenant-graphite-raised: #232F39;
  --color-tenant-graphite-head: #1F2B35;
  --color-tenant-graphite-court: #1E2B34;
  --color-tenant-grape-page: #181B29;
  --color-tenant-grape-raised: #262D3F;
  --color-tenant-grape-head: #23293B;
  --color-tenant-grape-court: #222839;
  --color-focus: #33C08C;
  --color-overlay: rgb(0 0 0 / .66);
}

/* ยังไม่เคยเลือก — ตามค่าของเครื่อง */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-brand-primary: #33C08C;
    --color-brand-on-primary: #05231A;
    --color-brand-accent: #5FD6A8;
    --color-brand-on-accent: #05231A;
    --color-brand-highlight: #D7F43B;
    --color-brand-on-highlight: #102A43;
    --color-brand-soft: #16303F;
    --color-brand-wash: #102630;
    --color-brand-link: #5FD6A8;
    --color-brand-logo: #5FD6A8;
    --color-surface-page: #0B1620;
    --color-surface-card: #122029;
    --color-surface-raised: #1A2C38;
    --color-surface-sidebar: #08111A;
    --color-surface-on-sidebar: #C3D2CB;
    --color-surface-court: #16252F;
    --color-surface-head: #172A35;
    --color-surface-mist: #12302A;
    --color-surface-qr: #FFFFFF;
    --color-text-strong: #EEF3EF;
    --color-text-normal: #C3D2CB;
    --color-text-muted: #8FA3AD;
    --color-text-on-dark: #EEF3EF;
    --color-border-normal: #263A47;
    --color-border-strong: #6C8290;
    --color-border-sidebar: #16252F;
    --color-state-success: #3ECF97;
    --color-state-warning: #F5B83D;
    --color-state-danger: #FF7A70;
    --color-state-info: #6FB2F5;
    --color-state-violet: #B9A4F7;
    --color-state-rose: #F48DB2;
    --color-state-teal: #5CCFD2;
    --color-tint-success: #0E2B21;
    --color-tint-warning: #2E2413;
    --color-tint-danger: #301917;
    --color-tint-info: #12253A;
    --color-tint-neutral: #1D2F3B;
    --color-tint-highlight: #2B3316;
    --color-tint-violet: #241D3A;
    --color-tint-rose: #35192A;
    --color-tint-teal: #10302F;
    --color-slot-free: #122029;
    --color-slot-free-border: #2E4A3E;
    --color-slot-booked: #33C08C;
    --color-slot-on-booked: #05231A;
    --color-slot-held: #2E2413;
    --color-slot-blocked: #1A2C38;
    --color-slot-past: #111D25;
    --color-slot-class: #B9A4F7;
    --color-slot-on-class: #1A1030;
    --color-slot-selected: #5FD6A8;
    --color-slot-taken: #4A5654;
    --color-slot-on-selected: #05231A;
    --color-grid-booked: #2CF2A9;
    --color-grid-coach: #CCE5FF;
    --color-grid-class: #D8AAFD;
    --color-grid-vip: #FFC766;
    --color-chart-series1: #7FB2E8;
    --color-chart-series2: #33C08C;
    --color-chart-series3: #F5B83D;
    --color-chart-series4: #6FB2F5;
    --color-chart-series5: #C5DE5C;
    --color-chart-grid: #263A47;
    --color-heat-level1: #14322A;
    --color-heat-level2: #1D6B4C;
    --color-heat-level3: #2F9A6F;
    --color-heat-level4: #5FD6A8;
    --color-stage-surface: #050807;
    --color-stage-text: #F2F6F3;
    --color-stage-muted: #A7B6AE;
    --color-stage-accent: #5FD6A8;
    --color-stage-line: #2A3A33;
    --color-social-line: #06C755;
    --color-social-line-hover: #05B34C;
    --color-social-line-press: #048B3B;
    --color-social-on-line: #FFFFFF;
    --color-social-facebook: #4B9BFF;
    --color-social-instagram: #F7728C;
    --color-tenant-omc: #5FD6A8;
    --color-tenant-omc-on: #05231A;
    --color-tenant-omc-primary: #33C08C;
    --color-tenant-omc-on-primary: #05231A;
    --color-tenant-omc-soft: #16303F;
    --color-tenant-omc-wash: #102630;
    --color-tenant-omc-booked: #33C08C;
    --color-tenant-omc-page: #0B1620;
    --color-tenant-red: #FC6358;
    --color-tenant-red-on: #0B1620;
    --color-tenant-red-soft: #372B31;
    --color-tenant-red-wash: #1E1C24;
    --color-tenant-maroon: #EF6C74;
    --color-tenant-maroon-on: #0B1620;
    --color-tenant-maroon-soft: #352C35;
    --color-tenant-maroon-wash: #1D1D27;
    --color-tenant-orange: #F16E05;
    --color-tenant-orange-on: #0B1620;
    --color-tenant-orange-soft: #362C23;
    --color-tenant-orange-wash: #1D1D1E;
    --color-tenant-gold: #F9A825;
    --color-tenant-gold-on: #0B1620;
    --color-tenant-gold-soft: #373628;
    --color-tenant-gold-wash: #1E2220;
    --color-tenant-green: #50AD53;
    --color-tenant-green-on: #0B1620;
    --color-tenant-green-soft: #1C3730;
    --color-tenant-green-wash: #112224;
    --color-tenant-teal: #12A8B9;
    --color-tenant-teal-on: #0B1620;
    --color-tenant-teal-soft: #123640;
    --color-tenant-teal-wash: #0C222C;
    --color-tenant-blue: #399DFB;
    --color-tenant-blue-on: #0B1620;
    --color-tenant-blue-soft: #18344B;
    --color-tenant-blue-wash: #0F2132;
    --color-tenant-navy: #7B9CD1;
    --color-tenant-navy-on: #0B1620;
    --color-tenant-navy-soft: #233444;
    --color-tenant-navy-wash: #14212E;
    --color-tenant-violet: #9B8AFD;
    --color-tenant-violet-on: #0B1620;
    --color-tenant-violet-soft: #28314B;
    --color-tenant-violet-wash: #171F32;
    --color-tenant-magenta: #E654F9;
    --color-tenant-magenta-on: #0B1620;
    --color-tenant-magenta-soft: #34284A;
    --color-tenant-magenta-wash: #1D1B31;
    --color-tenant-pink: #FF8FBF;
    --color-tenant-pink-on: #0B1620;
    --color-tenant-pink-soft: #383241;
    --color-tenant-pink-wash: #1F202D;
    --color-tenant-brown: #B99183;
    --color-tenant-brown-on: #0B1620;
    --color-tenant-brown-soft: #2D3237;
    --color-tenant-brown-wash: #192028;
    --color-tenant-graphite: #8A9CA5;
    --color-tenant-graphite-on: #0B1620;
    --color-tenant-graphite-soft: #25343D;
    --color-tenant-graphite-wash: #15212B;
    --color-tenant-grape: #BF78F8;
    --color-tenant-grape-on: #0B1620;
    --color-tenant-grape-soft: #2E2E4A;
    --color-tenant-grape-wash: #191E31;
    --color-tenant-red-page: #1B1A20;
    --color-tenant-red-raised: #2B2B34;
    --color-tenant-red-head: #272730;
    --color-tenant-red-court: #26272E;
    --color-tenant-maroon-page: #1B1A21;
    --color-tenant-maroon-raised: #2A2C36;
    --color-tenant-maroon-head: #262832;
    --color-tenant-maroon-court: #252730;
    --color-tenant-orange-page: #1B1A1B;
    --color-tenant-orange-raised: #2A2C2E;
    --color-tenant-orange-head: #26282A;
    --color-tenant-orange-court: #252728;
    --color-tenant-gold-page: #1B1E1D;
    --color-tenant-gold-raised: #2B3030;
    --color-tenant-gold-head: #272C2C;
    --color-tenant-gold-court: #262B2B;
    --color-tenant-green-page: #111E1F;
    --color-tenant-green-raised: #1F3033;
    --color-tenant-green-head: #1B2D30;
    --color-tenant-green-court: #1A2C2E;
    --color-tenant-teal-page: #0D1E25;
    --color-tenant-teal-raised: #1A303B;
    --color-tenant-teal-head: #172C37;
    --color-tenant-teal-court: #162B35;
    --color-tenant-blue-page: #101D29;
    --color-tenant-blue-raised: #1D2F3F;
    --color-tenant-blue-head: #192C3B;
    --color-tenant-blue-court: #182B3A;
    --color-tenant-navy-page: #141D27;
    --color-tenant-navy-raised: #222F3C;
    --color-tenant-navy-head: #1E2B38;
    --color-tenant-navy-court: #1D2B37;
    --color-tenant-violet-page: #161C2A;
    --color-tenant-violet-raised: #242E3F;
    --color-tenant-violet-head: #202A3C;
    --color-tenant-violet-court: #1F293A;
    --color-tenant-magenta-page: #1A1929;
    --color-tenant-magenta-raised: #292A3F;
    --color-tenant-magenta-head: #25263B;
    --color-tenant-magenta-court: #252639;
    --color-tenant-pink-page: #1C1C26;
    --color-tenant-pink-raised: #2B2E3B;
    --color-tenant-pink-head: #272B37;
    --color-tenant-pink-court: #262A35;
    --color-tenant-brown-page: #171C22;
    --color-tenant-brown-raised: #262E37;
    --color-tenant-brown-head: #222B33;
    --color-tenant-brown-court: #212A31;
    --color-tenant-graphite-page: #151D24;
    --color-tenant-graphite-raised: #232F39;
    --color-tenant-graphite-head: #1F2B35;
    --color-tenant-graphite-court: #1E2B34;
    --color-tenant-grape-page: #181B29;
    --color-tenant-grape-raised: #262D3F;
    --color-tenant-grape-head: #23293B;
    --color-tenant-grape-court: #222839;
    --color-focus: #33C08C;
    --color-overlay: rgb(0 0 0 / .66);
  }
}

/* TOKENS:END */

@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  /* ‼️ [hidden] ของเบราว์เซอร์คือ display:none ที่ specificity ต่ำสุด
     component ไหนตั้ง display:flex/grid ไว้ จะทับมันทั้งหมด
     ผลคือ JS ตั้ง element.hidden = true สำเร็จจริง ตัวนับถูก แต่ของยังโผล่บนหน้า
     เป็นบั๊กที่ตรวจจากโค้ดไม่เห็นเลย เห็นได้ทางเดียวคือเปิดหน้าดู
     !important ในชั้นล่างชนะ declaration ปกติของชั้นที่สูงกว่า ซึ่งคือสิ่งที่ต้องการตรงนี้พอดี */
  [hidden] { display: none !important; }

  /* ‼️ ไอคอนต้องมีขนาดของตัวเองทุกขนาดที่ view เรียกใช้
     empty-state.php เรียก icon('...', 'icon-lg') มาตั้งแต่ต้น แต่ไม่มีคลาสนี้ใน CSS
     ไอคอนของสถานะว่างจึงเล็กเท่าไอคอนในปุ่ม ดูเหมือนไอคอนหลุดมา
     เป็น typo ที่ไม่มีอะไรจับได้เลย เพราะ CSS ที่ไม่มีอยู่ไม่เคยรายงาน error */
  .icon {
    width: var(--icon-base);
    height: var(--icon-base);
    flex-shrink: 0;
    stroke-width: var(--icon-stroke);
  }
  .icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
  .icon-lg { width: var(--icon-lg); height: var(--icon-lg); }
  .icon-xl { width: var(--icon-xl); height: var(--icon-xl); }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, fieldset { margin: 0; }
  fieldset, legend { padding: 0; border: 0; }
  /* ครอบฟอร์มที่ต้องปิดทั้งชุดได้ (อ่านอย่างเดียว) — fieldset ปกติไม่ยอมหดตามจอแคบถ้าไม่ตั้ง min-inline-size */
  /* การ์ดหลายใบใน fieldset เดียว (ตั้งค่าระบบ > SMS / OTP) ต้องเว้นระยะเท่ากับการ์ดในหน้า (.page gap) */
  .fieldset-plain { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--space-6); }
  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%; }
}

@layer base {
  /* ‼️ มาตรฐานเดียวของช่องกรอก/dropdown ทุกตัว — ช่องที่อยู่นอก .field เคยเป็นกล่องเหลี่ยมของเบราว์เซอร์ (ผู้ใช้ทัก 2026-10-27 "บางอันเหลี่ยม บางอันมน")
     :where() = specificity 0 + อยู่ layer base → component/หน้าที่ตั้งสไตล์เองชนะเสมอ ที่นี่แค่เติมให้ช่องที่ไม่มีใครตั้ง */
  :where(select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"], [type="submit"], [type="button"], [type="image"], [type="reset"])) {
    min-block-size: 40px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid color-mix(in srgb, var(--color-border-strong) 28%, var(--color-border-normal));
    border-radius: var(--radius-md);
    background-color: var(--color-surface-card);
  }
  :where(select, textarea, input):where(:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 1px; }

  /* ‼️ ต้องผูก color-scheme กับธีมที่ "ระบบ" เลือก ไม่ใช่ธีมของ "เครื่อง"
     ถ้าปล่อยเป็น `light dark` เฉยๆ native control (select, ปฏิทิน, แถบเลื่อน)
     จะตามธีมของ OS ผลคือผู้ใช้เลือกโหมดสว่างแต่ <select> เป็นกล่องดำบนพื้นครีม อ่านไม่ออก
     โปรเจคที่ธีมเริ่มต้นสวนกับ OS จะเจอทันทีตั้งแต่หน้าแรก */
  html { color-scheme: light dark; }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }

  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;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-heading), system-ui, sans-serif;
    line-height: var(--leading-tight);
    color: var(--color-text-strong);
  }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }

  a { color: var(--color-brand-primary); }

  /* focus ต้องเห็นชัดทุกจุดที่กดได้ — ห้าม outline:none โดยไม่ใส่แบบอื่นแทน */
  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* ผู้ใช้บางคนเวียนหัวจากการเคลื่อนไหว */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }
  }
}

@layer layout {
  .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 ใหม่ทุกเฟรมแล้วกระตุก
       และการพับเมนูคือสิ่งที่ผู้ใช้ทำซ้ำหลายสิบครั้งต่อวัน ทรานซิชันจึงกลายเป็นความหน่วง
       เคลื่อนได้เฉพาะ transform และ opacity เท่านั้น */
  }

  /* พับแล้วต้องย่อ ไม่ใช่ปิดหาย — ผู้ใช้ยังกดใช้งานได้ทุกเมนู */
  .sidebar[data-collapsed="true"] { width: var(--layout-sidebar-collapsed); }
  .sidebar[data-collapsed="true"] .nav-label,
  .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

  .topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-block-end: 1px solid var(--color-border-normal);
    background: var(--color-surface-card);
  }

  .content {
    flex: 1;
    padding: var(--panel-gap) var(--page-gutter);
    width: 100%;
  }

  /* ‼️ คอลัมน์ของ "หน้า" — ความกว้างเป็นเรื่องของหน้า ไม่ใช่ของ component
     ห้ามใส่ max-width หรือ fit-content ทีละ component เด็ดขาด
     ปล่อยให้ component คุมเองแล้วจะได้ตารางที่ยืดจนปุ่มห่างจากข้อมูล 400px
     หรือได้ที่ว่างโล่งข้างขวาข้างเดียวเพราะหัวเพจกว้างเต็มแต่การ์ดแคบและชิดซ้าย
     ทั้งสองอาการไม่มีใครสั่งให้เกิด เป็นผลข้างเคียงของการไม่มีใครคุมความกว้างของหน้า */
  .page {
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .page[data-width="form"] { max-width: var(--layout-form-width); }
  .page[data-width="list"] { max-width: var(--layout-max-width); }
  .page[data-width="wide"] { max-width: 100%; }

  /* ---------------------------------------------------------------- หัวเพจ */

  /* ‼️ ทุกหน้าเปิดด้วยหัวเพจ มาจาก layout กลางเหมือน footer
     ไม่มีหัวเพจ = ทุกอย่างในหน้ามีน้ำหนักเท่ากัน ไม่มีจุดเริ่มให้สายตา */
  .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .page-head-text { display: flex; flex-direction: column; gap: var(--space-2); }

  .page-lead {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    max-width: 70ch;
  }

  /* ปุ่มหลักของหน้าอยู่ที่นี่ ห้ามไปปนกับแถบตัวกรอง — ปนกันแล้วเส้นฐานไม่ตรงกัน */
  .page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  /* ‼️ ความกว้างของช่องกรอกต้องบอกความยาวที่คาดหวัง
     ช่องกว้างเต็มฟอร์มที่รับได้ 3 ตัวอักษร คือการบอกผู้ใช้ผิด

     ‼️ จำกัดที่ตัวช่องกรอก ไม่ใช่ที่กล่อง .field ทั้งกล่อง
     บีบทั้งกล่องแล้วป้ายชื่อช่องถูกบีบตามไปด้วย ผลคือ "ค่าสอนต่อชั่วโมง" ตัดเป็นสองบรรทัด
     และคำอธิบายใต้ช่องตัดเป็นสามบรรทัด ทั้งที่ช่องในตารางกว้างพอเหลือเฟือ */
  .field[data-width="short"]  :is(input, select, textarea) { max-inline-size: 12ch; }
  .field[data-width="medium"] :is(input, select, textarea) { max-inline-size: 32ch; }
  .field[data-width="full"]   :is(input, select, textarea) { max-inline-size: 100%; }

  /* ‼️ "เต็ม" ต้องกินทั้งแถวของกริด ไม่ใช่กินทั้งช่องเดียวของกริด
     ไม่เขียนข้อนี้ ช่องประวัติหรือคำอธิบายจะได้ความกว้างเท่าช่องเบอร์โทร
     ทั้งที่มันรับข้อความหลายบรรทัด ซึ่งเป็นการบอกความยาวที่คาดหวังผิด */
  .field-grid > .field[data-width="full"] { grid-column: 1 / -1; }

  /* ฟอร์มเกิน 4 ช่องต้องแบ่งกลุ่ม และช่องสั้นเรียงกันเป็น grid ไม่ใช่เรียงลงมาทีละช่อง */
  .field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-field-min-width)), 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  fieldset.group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
  }

  fieldset.group > legend {
    padding-inline: var(--space-2);
    color: var(--color-text-strong);
    font-weight: var(--weight-medium);
  }

  /* ---------------------------------------------------- การ์ดทางเข้า (tile) */

  /* ‼️ เป็น component กลาง ไม่ใช่สไตล์ของหน้าคู่มือ
     หน้าที่ทำหน้าที่ "เลือกทางเข้า" ทุกหน้าใช้ตัวนี้ — หน้ารวมคู่มือ หน้าสรุป หน้าเลือกโมดูล
     รายการลิงก์เปล่าไม่มีลำดับสายตา และไม่บอกว่าปลายทางเกี่ยวกับอะไร */
  .tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--layout-tile-min-width), 1fr));
    gap: var(--space-4);
  }

  .tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    color: var(--color-text-normal);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
  }

  .tile:hover { border-color: var(--color-brand-primary); box-shadow: var(--shadow-md); }

  .tile-icon {
    display: inline-flex;
    color: var(--color-brand-primary);
  }

  .tile-title {
    color: var(--color-text-strong);
    font-weight: var(--weight-medium);
  }

  .tile-summary {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .site-footer {
    padding: var(--space-4) var(--space-5);
    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;
  }

  .stack { display: flex; flex-direction: column; gap: var(--space-4); }
  .row   { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
  .spacer { margin-inline-start: auto; }

  .centered {
    flex: 1;
    display: grid;
    place-items: center;
    padding: var(--space-6);
  }

  @media (max-width: 768px) {
    .sidebar {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      z-index: var(--z-header);
      transform: translateX(-100%);
      transition: transform var(--duration-normal) var(--ease-standard);
    }
    .sidebar[data-open="true"] { transform: translateX(0); }
    .content { padding: var(--space-4) var(--page-gutter); }
  }
}

@layer components {

  /* ---------------------------------------------------------------- ปุ่ม */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--tenant-radius-button, var(--radius-md));
    background: transparent;
    color: var(--color-text-normal);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard);
  }

  .btn:hover { background: var(--color-surface-raised); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
  /* ‼️ ปุ่มทุกตัวต้องมีสถานะ "กดอยู่" — วัดทั้งระบบ 2026-10-27 กดแล้วไม่มีอะไรเปลี่ยนเลยสักปุ่ม */
  .btn:active:not(:disabled, [aria-disabled="true"]) { translate: 0 1px; }

  /* ‼️ ปุ่มหลักเป็น brand.primary — navy ในโหมดสว่าง · เขียวในโหมดมืด (DESIGN.md "ภาษาภาพ" 2026-09-21)
     เดิมเป็นเขียว accent ตามต้นแบบชุด v2 ตอนที่หลังบ้านยังมี sidebar สี navy ซึ่งปุ่ม navy จะกลืน
     ตอนนี้แถบบนเป็นพื้นขาว ปุ่ม navy จึงเด่นที่สุดในหน้า และเขียวคืนไปทำหน้าที่ "ว่าง/สำเร็จ/เลือกแล้ว" อย่างเดียว
     ‼️ ที่นี่คือจุดเดียวที่ตัดสินสีปุ่มหลักทั้งระบบ */
  .btn-primary {
    background: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
  }
  .btn-primary:hover { filter: brightness(1.15); background: var(--color-brand-primary); }

  /* ‼️ navy ยังใช้ได้กับปุ่มที่อยู่ "ในกล่องที่เป็นเขียวอยู่แล้ว" ซึ่งปุ่มเขียวจะกลืนไป
     ใช้เท่าที่จำเป็น ไม่ใช่ทางเลือกที่สองของปุ่มหลักทั่วไป */
  .btn-secondary { border-color: var(--color-border-strong); }

  /* ‼️ lime เป็นพื้นปุ่มได้เฉพาะคู่กับตัวอักษร navy (contrast 11.8:1)
     lime เป็นสีตัวอักษรบนพื้นขาวได้ 1.24:1 ซึ่งอ่านไม่ออก — DESIGN.md จึงห้ามไว้
     ปุ่มนี้ใช้กับ "ตัวเลือกที่เราแนะนำ" ตัวเดียวต่อหน้าเท่านั้น
     ใช้หลายที่ในหน้าเดียวเมื่อไหร่ มันก็เลิกแปลว่าแนะนำ */
  .btn-highlight {
    background: var(--color-brand-highlight);
    color: var(--color-brand-on-highlight);
    border-color: var(--color-brand-highlight);
    font-weight: var(--weight-bold);
  }

  .btn-highlight:hover {
    background: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
    border-color: var(--color-brand-primary);
  }

  .btn-danger {
    background: var(--color-state-danger);
    color: var(--color-brand-on-primary);
  }
  /* ‼️ .btn:hover เคยทับพื้นแดงเป็นสีขาว ตัวหนังสือขาวเลยหาย (ผู้ใช้แจ้ง 2026-10-28) — วางคู่แบบ .btn-primary:hover */
  .btn-danger:hover { filter: brightness(1.1); background: var(--color-state-danger); color: var(--color-brand-on-primary); }

  /* ปุ่มไอคอนล้วน — ต้องมี aria-label และ tooltip เสมอ */
  .btn-icon {
    min-width: 44px;
    padding: var(--space-2);
  }

  /* กันกดซ้ำ — กดแล้ว disable ทันทีพร้อมแสดงว่ากำลังทำงาน */
  .btn[data-busy="true"] { pointer-events: none; opacity: .6; }
  /* ส่งแล้วรอ server (เช่นสร้างรายการชำระกับผู้ให้บริการ) — วงหมุนบอกว่ากำลังโหลด ไม่ใช่ปุ่มค้าง */
  .btn[data-busy="true"]::after {
    content: "";
    flex: none;
    inline-size: 1em;
    block-size: 1em;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: var(--radius-full);
    animation: spin .7s linear infinite;
  }

  @keyframes spin { to { transform: rotate(360deg); } }

  /* ---------------------------------------------------------------- ฟอร์ม */

  .field { display: flex; flex-direction: column; gap: var(--space-1); }

  .field label { color: var(--color-text-strong); font-weight: var(--weight-medium); }
  .field .hint { color: var(--color-text-muted); font-size: var(--text-sm); }

  .field input,
  .field select,
  .field textarea {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-page);
  }

  .field[data-invalid="true"] input,
  .field[data-invalid="true"] select,
  .field[data-invalid="true"] textarea { border-color: var(--color-state-danger); }

  /* error อยู่ใต้ช่องที่ผิด ไม่กองรวมบนสุด */
  .field .error { color: var(--color-state-danger); font-size: var(--text-sm); }

  .required-mark { color: var(--color-state-danger); }

  /* ---------------------------------------------------------------- ตาราง */

  .table-wrap { overflow-x: auto; }

  /* ‼️ ค่ารูปทรงของตารางมาจาก component.table ใน DESIGN.md ไม่ใช่เขียนดิบที่นี่
     เดิมเขียนดิบ ผลคือเอาดีไซน์จากภายนอกเข้ามาแล้วสีเปลี่ยนตาม แต่แถวยังสูงเท่าเดิม */
  .table { font-size: var(--table-font-size); }

  .table th, .table td {
    padding: var(--table-cell-padding);
    height: var(--table-row-height);
    border-block-end: 1px solid var(--color-border-normal);
    text-align: start;
    vertical-align: middle;
  }

  .table thead th {
    background: var(--table-head-background);
    padding: var(--table-head-padding);
    height: auto;
    color: var(--color-text-strong);
    font-weight: var(--weight-medium);
    white-space: nowrap;
  }

  .table th a { color: inherit; text-decoration: none; display: inline-flex; gap: var(--space-1); }
  .table .num { text-align: end; font-variant-numeric: tabular-nums; }
  .table tbody tr:hover { background: var(--color-surface-raised); }
  .table .actions { display: flex; gap: var(--space-1); justify-content: end; }

  /* บนมือถือยุบเป็นการ์ด ห้าม scroll แนวนอน
     ‼️ screen เท่านั้น — กระดาษ A4 กว้าง ~720px เข้าเงื่อนไขนี้ ตอนพิมพ์ทุกตารางเลยกลายเป็นการ์ดทีละแถว (ผู้ใช้ทัก 2026-10-15) */
  @media screen and (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-3);
      margin-block-end: var(--space-3);
    }
    .table td {
      display: flex;
      justify-content: space-between;
      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);
    }
    .table td[data-primary]::before { content: none; }
    .table td[data-primary] { font-weight: var(--weight-bold); color: var(--color-text-strong); }
  }

  /* ---------------------------------------------------------------- สถานะ */

  .empty-state, .error-state {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    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); }

  @keyframes pulse { 50% { opacity: .5; } }

  /* ---------------------------------------------------------------- toast */

  /* ต้องลอย ห้ามแทรกในหน้า เพราะแบบแทรกจะดัน component อื่นเลื่อนตำแหน่ง */
  .toasts {
    position: fixed;
    inset-block-end: var(--space-4);
    inset-inline-end: var(--space-4);
    z-index: var(--z-overlay);
    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 */

  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%;

    /* ‼️ ต้องเป็น fit-content ห้ามปล่อยเป็น auto
       เบราว์เซอร์วาง <dialog> แบบ modal เป็น absolute พร้อม inset: 0
       height: auto จึงยืดเต็มความสูงที่มี แล้วโดน max-height ของ UA หนีบไว้
       ผลคือกล่องที่มีข้อความสองบรรทัด สูง 774px บนจอ 812px
       เนื้อหากองอยู่ด้านบน ที่เหลือเป็นพื้นว่าง — ดูเหมือนแผงเต็มจอ ไม่ใช่กล่องยืนยัน
       มองจากโค้ดไม่เห็นเลย เห็นตอนวัดความสูงจริงเทียบกับความสูงของเนื้อหา */
    height: fit-content;
  }

  dialog::backdrop { background: var(--color-overlay); }

  .dialog-head, .dialog-foot {
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .dialog-head { border-block-end: 1px solid var(--color-border-normal); }
  .dialog-foot { border-block-start: 1px solid var(--color-border-normal); justify-content: end; }
  .dialog-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }

  @media (max-width: 768px) {
    /* ‼️ max-height กับ margin ต้องสั่งด้วย ไม่งั้นไม่เต็มจอจริงตามสเปค
       UA ตั้ง max-height: calc(100% - 38px) และ margin: auto ให้ dialog แบบ modal
       สั่งแค่ height: 100dvh จึงถูกหนีบเหลือ 774px บนจอสูง 812px
       เหลือขอบบนล่างข้างละ 19px ซึ่งอ่านออกมาเป็น "กล่องที่พยายามเต็มจอแต่ไม่สุด" */
    dialog {
      max-width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
      margin: 0;
      border-radius: 0;
    }
  }

  /* กล่องยืนยัน — เล็กกว่า modal ปกติ และไม่เต็มจอบนมือถือ
     กล่องที่มีข้อความสองบรรทัดแล้วกินเต็มจอ ทำให้ผู้ใช้เสียบริบทว่ากดมาจากแถวไหน */
  dialog.dialog-sm {
    max-width: min(420px, calc(100vw - var(--space-8)));
  }

  @media (max-width: 768px) {
    /* กล่องยืนยันไม่เต็มจอ — ต้องคืนค่า margin กับ max-height ที่ dialog ปกติสั่งไว้ด้วย */
    dialog.dialog-sm {
      height: fit-content;
      max-height: calc(100dvh - var(--space-6));
      margin: auto;
      max-width: calc(100vw - var(--space-6));
      border-radius: var(--radius-lg);
    }
  }

  /* หัวกล่องแบบมีไอคอน + คำอธิบายหนึ่งบรรทัด — ภาษาเดียวกับหัวการ์ด (partials/section.php) */
  .dialog-title { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
  .dialog-title h2 { font-size: var(--text-lg); font-weight: var(--weight-heavy); color: var(--color-text-strong); }
  .dialog-lead { color: var(--color-text-muted); font-size: var(--text-sm); }

  /* ข้อผิดพลาดของทั้งฟอร์มที่ไม่ได้ผูกกับช่องใด (สิทธิ์ไม่พอ · เครือข่ายล่ม) — ‼️ ห้ามตั้ง display ไม่งั้น [hidden] ไม่มีผล */
  .form-alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-tint-danger);
    color: var(--color-state-danger);
    font-size: var(--text-sm);
  }

  /* "กำลังทำกับใคร" ในกล่อง — ชื่อบัญชีที่จะถูกตั้งรหัสใหม่ */
  .dialog-subject {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-page);
  }

  .dialog-subject .cell-stack { display: flex; flex-direction: column; min-inline-size: 0; }
  .dialog-subject strong { color: var(--color-text-strong); }
  .dialog-subject small { color: var(--color-text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }

  /* กล่องที่มีฟอร์ม (.dialog-form) ตรึงหัวและท้ายไว้ เลื่อนเฉพาะ .dialog-body
     ‼️ ใช้ทั้ง drawer และ modal ที่เต็มจอบนมือถือ — ไม่งั้นปุ่มบันทึกลอยกลางจอแล้วเหลือพื้นว่างใต้ปุ่ม
     บนจอใหญ่ modal สูงเท่าเนื้อหา (fit-content) กฎนี้จึงไม่เปลี่ยนอะไร */
  dialog[open]:has(> .dialog-form) { display: flex; flex-direction: column; }
  dialog > .dialog-form { flex: 1; min-block-size: 0; display: flex; flex-direction: column; }
  dialog > .dialog-form > .dialog-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

  /* ---------------------------------------------------- drawer (แผงจากขวา)

     ‼️ เป็น <dialog> ตัวเดียวกับ modal — ได้ ESC · กักโฟกัส · พื้นหลังกดไม่ได้ จาก showModal()
     ‼️ ตรึงหัวและท้าย เลื่อนเฉพาะ .dialog-body — ฟอร์มยาวแล้วปุ่มบันทึกต้องไม่หลุดจอ */
  dialog.drawer {
    margin: 0 0 0 auto;
    inline-size: var(--drawer-width);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-block: 0;
    border-inline-end: 0;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }

  dialog.drawer[open] { animation: drawer-in var(--duration-normal) var(--ease-enter); }

  @keyframes drawer-in {
    from { opacity: 0; transform: translateX(var(--space-8)); }
  }

  @media (max-width: 768px) {
    dialog.drawer { inline-size: 100vw; border-radius: 0; border: 0; }
  }

  /* ฟอร์มของปุ่มที่ต้องยืนยัน — อยู่ในแถวตารางจึงต้องไม่ดันความสูงของแถว */
  .confirm-form { display: inline-flex; }

  /* ------------------------------------------------------------ แนบไฟล์ */

  .upload { gap: var(--space-2); }

  /* ‼️ กรอบลากวางถูกสร้างโดย app.js — ถ้า JS ไม่ทำงาน ผู้ใช้จะเห็น input ปกติ
     ซึ่งใช้งานได้จริง ดีกว่ากรอบสวยๆ ที่ลากแล้วไม่เกิดอะไร */
  .upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    /* ‼️ <button> หดตามเนื้อหาโดยปริยาย ต้องสั่งความกว้างเอง
       ไม่สั่งแล้วได้กรอบกว้าง 42px ที่ข้อความไหลลงเป็นแนวตั้ง
       และดันกล่อง modal จนเลื่อนแนวนอนได้ ซึ่งผิดกฎ "หน้าห้ามเลื่อนแนวนอน" */
    width: 100%;
    min-height: calc(var(--space-16) + var(--space-12));
    padding: var(--space-5);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
  }

  .upload-zone:hover,
  .upload-zone:focus-visible { border-color: var(--color-brand-primary); }

  /* สถานะตอนลากผ่าน — ต้องเห็นชัดว่าปล่อยได้แล้ว ไม่งั้นผู้ใช้ไม่รู้ว่าวางตรงไหน */
  .upload-zone[data-dragging="true"] {
    border-color: var(--color-brand-primary);
    background: var(--color-surface-card);
    border-style: solid;
  }

  .upload-list { display: flex; flex-direction: column; gap: var(--space-2); margin-block-start: var(--space-3); }

  .upload-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
  }

  .upload-item[data-invalid="true"] { border-color: var(--color-state-danger); }

  /* ชื่อไฟล์ยาวต้องหดได้ ไม่ใช่ดันปุ่มลบตกขอบ */
  .upload-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .upload-size { color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
  .upload-why  { color: var(--color-state-danger); font-size: var(--text-sm); }
  .upload-thumb { width: var(--space-10); height: var(--space-10); object-fit: cover; border-radius: var(--radius-sm); flex: none; }

  /* แถบความคืบหน้า — เขียนเป็น element ของเราเอง ไม่ใช้ <progress> ของ OS
     ด้วยเหตุผลเดียวกับ control อื่นในข้อ 5.12 คือจัดสไตล์ข้ามเบราว์เซอร์ไม่ได้จริง */
  /* ‼️ ขยับด้วย transform: scaleX() ห้ามขยับ width
     design.md หมวด motion เขียนไว้เองว่า "เคลื่อนแค่ transform และ opacity เท่านั้น"
     เคลื่อน width ทำให้เบราว์เซอร์คำนวณ layout ใหม่ทุกเฟรมแล้วกระตุก
     ซึ่งเห็นชัดที่สุดตอนอัปโหลดไฟล์ใหญ่ เพราะแถบขยับถี่ๆ ตลอดเวลาที่รอ

     JS สั่งความคืบหน้าด้วย el.style.transform = 'scaleX(0.42)' */
  /* ------------------------------------------------------------- tooltip */

  /* ‼️ tooltip ของ OS คือจุดที่ระบบหลุดคาแรกเตอร์ เหมือน select ในข้อ 5.12
     มันขึ้นช้าประมาณ 1 วินาที · ใช้ฟอนต์และสีของ Windows · ไม่ตามธีมที่ระบบเลือก
     และกฎบังคับว่าปุ่มไอคอนล้วน "ทุกตัว" ต้องมี tooltip จึงเจอทุกหน้า

     ‼️ ห้ามใส่ข้อมูลที่จำเป็นไว้ใน tooltip — บนมือถือไม่มี hover
        ตัวนี้จึงขึ้นตอน focus ด้วย เพื่อให้คีย์บอร์ดและจอสัมผัสยังเห็น */
  .tooltip {
    position: fixed;
    z-index: var(--z-overlay);
    max-width: var(--layout-field-min-width);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-text-strong);
    color: var(--color-surface-page);
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
    /* ข้อความหลายบรรทัด (รายละเอียดการจองในตารางคอร์ท) ขึ้นบรรทัดใหม่ตาม \n */
    white-space: pre-line;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-standard);
  }

  .tooltip[data-shown="true"] { opacity: 1; }

  /* ---------------------------------------------------------------- เมนู */

  .nav { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); }

  .nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-normal);
    text-decoration: none;
  }

  .nav a:hover { background: var(--color-surface-raised); }

  .nav a[aria-current="page"] {
    background: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
    color: var(--color-text-strong);
    font-weight: var(--weight-bold);
  }

  /* ‼️ เส้นแบ่งเป็นของ sidebar ไม่ใช่ของ .brand
     layout auth เอา .brand ไปวางบนหน้าเข้าสู่ระบบด้วย ซึ่งไม่มี sidebar
     ปล่อยไว้จะได้เส้นใต้สั้นๆ ค้างอยู่ใต้ชื่อร้านโดยไม่มีใครสั่ง */
  .sidebar .brand { border-block-end: 1px solid var(--color-border-normal); }

  /* --------------------------------------------- แถบบนสองชั้นของหลังบ้าน
     ‼️ ชั้นแรก = กลุ่มงาน · ชั้นสอง = หน้าย่อยของกลุ่มที่เปิดอยู่
        เลิกใช้ sidebar เพราะหลังบ้านมีหน้าย่อยเกิน 40 หน้า เรียงเป็นแถบข้างแล้วยาวเกินจอ
        และกินความกว้าง 256px ที่ตารางข้อมูลต้องใช้ตลอดเวลา

     ‼️ .shell[data-nav="header"] คือโหมดที่ใช้จริง — โหมด sidebar ยังอยู่ให้ DESIGN.md สลับกลับได้ */
  .shell[data-nav="header"] { flex-direction: column; }

  .appbar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background: var(--color-surface-card);
    border-block-end: 1px solid var(--color-border-normal);
  }

  .appbar-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-block-size: var(--layout-topbar-height);
    padding-inline: var(--space-5);
  }

  .appbar .brand-logo { flex: 0 0 auto; }

  .appbar-burger { display: none; }

  /* ‼️ เมนูกลุ่มเลื่อนแนวนอนได้แทนการตัดบรรทัด
     ตัดบรรทัดแล้วความสูงของแถบเปลี่ยนตามจำนวนเมนูที่ผู้ใช้คนนั้นมีสิทธิ์
     ซึ่งแปลว่าหน้าเดียวกันสูงไม่เท่ากันในแต่ละบัญชี และเนื้อหาเลื่อนลงโดยไม่มีใครสั่ง */
  .appbar-menu {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .appbar-menu::-webkit-scrollbar { display: none; }

  .appbar-menu-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: var(--space-2) 10px;
    border-radius: var(--radius-md);
    color: var(--color-text-normal);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
  }

  /* ‼️ 10 กลุ่มพร้อมไอคอน เรียงบนจอ 1366 ไม่พอ
     ทิ้งไอคอนก่อนทิ้งข้อความ เพราะชื่อกลุ่มคือสิ่งที่บอกว่าอยู่ที่ไหน ไอคอนเป็นของแถม */
  @media (max-width: 1700px) {
    .appbar-menu-item .icon { display: none; }
    .appbar-menu-item[aria-current] .icon { display: inline-flex; }
  }

  /* ‼️ ที่ 1366 แถบบนใส่ไม่ครบทั้ง 9 เมนู + ชิปสนาม + ชื่อผู้ใช้
     ตัดชื่อผู้ใช้ออกก่อน ไม่ใช่ชื่อสนาม — ผู้ใช้รู้อยู่แล้วว่าตัวเองเป็นใคร
     แต่ "กำลังแก้ข้อมูลของสนามไหน" คือสิ่งที่คนสลับสนามไปมาต้องเห็นตลอดเวลา
     รูปโปรไฟล์ยังอยู่ และชื่อเต็มอยู่ในเมนูที่กดลงมา */
  /* ‼️ จุดตัดทุกอันด้านล่างวัดจากภาษาอังกฤษ ไม่ใช่ภาษาไทย
     คำอังกฤษกว้างกว่าอย่างมีนัย — ปรับจากภาษาไทยแล้วผู้ใช้ภาษาอังกฤษจะเห็น "Repor"
     และเมนูตั้ง overflow-x: auto โดยซ่อน scrollbar ไว้ จึงไม่มีอะไรบอกว่ายังมีต่อ
     แปลว่าเมนูที่ตกขอบคือเมนูที่กดไม่ถึงจริงๆ ไม่ใช่แค่ต้องเลื่อน
     วัดด้วย bin/qa/navfit.js ทุกครั้งที่แตะจุดตัดพวกนี้ */
  @media (max-width: 1600px) {
    .appbar-menu-item { padding-inline: var(--space-2); }
    .appbar-row { gap: var(--space-3); }

    /* ‼️ ตัดชื่อผู้ใช้ออกก่อนชื่อสนาม — ผู้ใช้รู้อยู่แล้วว่าตัวเองเป็นใคร
       แต่ "กำลังแก้ข้อมูลของสนามไหน" คือสิ่งที่คนสลับสนามไปมาต้องเห็นตลอดเวลา
       รูปโปรไฟล์ยังอยู่ และชื่อเต็มอยู่ในเมนูที่กดลงมา */
    .appbar-user-text { display: none; }

    /* ‼️ ย่อ ไม่ใช่ซ่อน — ชื่อสนามที่ถูกตัดท้ายยังบอกได้ว่าอยู่สนามไหน
       ส่วนชื่อสาขาอ่านต่อได้จากแผงที่กดลงมา
       ‼️ ต้องเจาะจง .appbar — ชิปตัวเดียวกันถูกใช้ในลิ้นชักมือถือด้วย
          ซึ่งกว้างเต็มจอและมีที่เหลือเฟือ ไม่มีเหตุให้ตัดชื่อสาขาทิ้ง */
    .appbar .venue-chip { max-inline-size: 168px; }
    .appbar .venue-chip-text small { display: none; }
  }

  @media (max-width: 1440px) {
    .appbar-menu { gap: 0; }
    .appbar-menu-item { padding-inline: var(--space-1); }
  }

  /* ‼️ ต่ำกว่า 1400 เหลือแค่รูปสนาม — ยังบอกได้ว่าสนามไหนจากรูปและจากแผงที่กดลงมา
     ปล่อยชื่อไว้แล้วสองเมนูท้ายตกขอบ ซึ่งคือหน้าที่กดไม่ถึงเลย */
  @media (max-width: 1400px) {
    .appbar .venue-chip-text { display: none; }
    .appbar .venue-chip { max-inline-size: none; }
  }

  /* ‼️ ช่วงแคบสุดก่อนเมนูย้ายเข้าลิ้นชัก (1200) ต้องบีบตัวอักษรลงอีกขั้น
     ไม่บีบ แล้วผู้ใช้ภาษาอังกฤษบนจอ 1280 จะเข้าสองเมนูท้ายไม่ได้เลย */
  @media (max-width: 1366px) {
    .appbar-menu-item { font-size: var(--text-xs); }
  }

  .appbar-menu-item .icon {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    opacity: .75;
  }

  .appbar-menu-item:hover { background: var(--color-surface-raised); color: var(--color-text-strong); }

  /* ‼️ กลุ่มที่เปิดอยู่ใช้พื้นเขียวจาง ไม่ใช่ navy ทึบ
     navy ทึบบนแถบขาวหนักเกินไปเมื่อมี 10 กลุ่มเรียงกัน และไปแย่งสายตากับปุ่มหลักของหน้า */
  .appbar-menu-item[aria-current] {
    background: var(--color-tint-success);
    color: var(--color-brand-accent);
    font-weight: var(--weight-bold);
  }

  .appbar-menu-item[aria-current] .icon { opacity: 1; }

  /* ‼️ ห้ามตัดบรรทัด — เครื่องมือฝั่งขวาต้องอยู่แถวเดียวเสมอ
     ชื่อผู้ใช้ยาวไม่เท่ากันในแต่ละบัญชี ปล่อยให้ตัดบรรทัดได้เมื่อไหร่
     ปุ่มสลับภาษาจะตกลงไปอยู่ใต้แถบในบางบัญชีเท่านั้น ซึ่งหาสาเหตุยากมาก
     เพราะหน้าเดียวกันดูปกติบนเครื่องคนที่ชื่อสั้น */
  .appbar-tools {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-1);
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  /* ชื่อยาวหดได้ แต่ไม่ดันของอื่นตก */
  .appbar-user-text { max-inline-size: 13ch; }
  .appbar-user-text strong,
  .appbar-user-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .appbar-tools form { display: flex; }

  /* ‼️ กล่องนี้ห่อสองฟอร์ม (โหมด + ภาษา) ที่เป็น block ตามค่าเริ่มต้น
     ไม่สั่ง flex แล้วช่องเลือกภาษาจะตกไปอยู่ใต้ปุ่มสลับโหมด แล้วแถบสูงขึ้นสองเท่า */
  .appbar-prefs { display: flex; align-items: center; gap: var(--space-1); }
  .appbar-bell { position: relative; }

  .appbar-bell-dot {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    min-inline-size: 16px;
    block-size: 16px;
    padding-inline: 3px;
    border-radius: var(--radius-full);
    background: var(--color-state-danger);
    color: var(--color-text-on-dark);
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* ---- ป๊อปอัปบนแถบ (ค้นหา · บัญชีผู้ใช้)
     ‼️ ใช้ <details> ไม่ใช่ JS ล้วน — app.js แค่ปิดให้เมื่อกดที่อื่น
        ถ้า JS ไม่ทำงาน ป๊อปอัปยังเปิดปิดได้ด้วยเมาส์และคีย์บอร์ดตามปกติ */
  .appbar-pop { position: relative; }

  .appbar-pop > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .appbar-pop > summary::-webkit-details-marker { display: none; }

  /* ‼️ ต้องสั่ง display:none ตอนปิดเอง ไม่พึ่งค่าเริ่มต้นของ <details>
     Chrome รุ่นใหม่ซ่อนเนื้อหาด้วย content-visibility ซึ่งยังมีกล่อง layout อยู่
     ผลคือแผงที่ปิดอยู่กว้าง 240px ยังดันหน้าให้เลื่อนซ้ายขวาได้บนมือถือ และทับปุ่มอื่นที่กดไม่ติด */
  .appbar-pop:not([open]) > .appbar-pop-panel { display: none; }

  .appbar-pop-panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-end: 0;
    z-index: var(--z-header);
    min-inline-size: 240px;
    padding: var(--space-2);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }

  .appbar-pop-panel a,
  .appbar-pop-panel button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: 100%;
    min-block-size: 40px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text-normal);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  .appbar-pop-panel a:hover,
  .appbar-pop-panel button:hover { background: var(--color-surface-raised); color: var(--color-text-strong); }

  .appbar-search { display: flex; gap: var(--space-2); }
  .appbar-search input { flex: 1; min-inline-size: 220px; }

  .appbar-user > summary { padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); }
  .appbar-user > summary:hover { background: var(--color-surface-raised); }

  .appbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
  }

  .appbar-user-text { display: flex; flex-direction: column; line-height: 1.2; min-inline-size: 0; }
  .appbar-user-text strong { font-size: var(--text-sm); color: var(--color-text-strong); }
  .appbar-user-text small { font-size: var(--text-xs); color: var(--color-text-muted); }

  /* --------------------------------------------- กล่องแจ้งเตือน (072) — กระดิ่งมุมขวาบน · หน้า /app/inbox · /platform/inbox
     ‼️ รายการ (.notify-list) ใช้ร่วมระหว่างกระดิ่งกับหน้ากล่อง — แก้ที่นี่ที่เดียว
     ‼️ แผงกระดิ่งล้างสไตล์ปุ่ม/ลิงก์ทั่วไปของ .appbar-pop-panel ก่อน (ตัวนั้นทำให้ทุกลิงก์กว้างเต็มแถว) */
  .notify-panel { inline-size: min(420px, calc(100vw - var(--space-6))); padding: 0; overflow: hidden; }

  .notify-panel a,
  .notify-panel button { inline-size: auto; min-block-size: 0; }

  .notify-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-2);
  }

  .notify-panel-head > div { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
  .notify-panel-head strong { font-size: var(--text-base); color: var(--color-text-strong); }
  .notify-panel .notify-panel-head .btn-icon { flex: none; padding: var(--space-2); color: var(--color-text-muted); }

  .notify-tabs {
    display: flex;
    gap: var(--space-1);
    padding: 0 var(--space-3) var(--space-2);
    border-block-end: 1px solid var(--color-border-normal);
    overflow-x: auto;
  }

  .notify-panel .notify-tabs a {
    flex: none;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-text-normal);
  }

  .notify-panel .notify-tabs a[aria-current] { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }

  .notify-panel .notify-list { max-block-size: min(60vh, 440px); overflow-y: auto; }

  .notify-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-block-start: 1px solid var(--color-border-normal);
    background: var(--color-surface-head);
  }

  .notify-panel .notify-panel-foot .btn-strong {
    justify-content: center;
    flex: 1;
    min-block-size: var(--space-10);
    background: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
  }

  .notify-panel .notify-panel-foot .btn-strong:hover { background: var(--color-brand-primary); color: var(--color-brand-on-primary); opacity: .92; }
  .notify-panel-foot form { display: flex; }

  .notify-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-8) var(--space-4);
  }

  /* ---- รายการ */
  .notify-list { list-style: none; margin: 0; padding: 0; }
  .notify-item + .notify-item { border-block-start: 1px solid var(--color-border-normal); }
  .notify-item form { display: block; }

  .notify-item-button,
  .notify-panel .notify-item-button {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--space-3);
    inline-size: 100%;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-text-normal);
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .notify-item-button:hover,
  .notify-panel .notify-item-button:hover { background: var(--color-surface-raised); color: var(--color-text-normal); }

  .notify-item-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
  .notify-item[data-read="0"] .notify-item-button { background: var(--color-brand-wash); }
  .notify-item[data-read="0"] .notify-item-button:hover { background: var(--color-surface-raised); }
  .notify-item[data-open="0"] .notify-icon { opacity: .6; }

  .notify-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: var(--space-8);
    block-size: var(--space-8);
    border-radius: var(--radius-md);
    background: var(--color-tint-info);
    color: var(--color-state-info);
  }

  .notify-icon svg { inline-size: var(--space-4); block-size: var(--space-4); }
  .notify-icon[data-tone="success"] { background: var(--color-tint-success); color: var(--color-state-success); }
  .notify-icon[data-tone="warning"] { background: var(--color-tint-warning); color: var(--color-state-warning); }
  .notify-icon[data-tone="danger"]  { background: var(--color-tint-danger);  color: var(--color-state-danger); }

  .notify-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
  .notify-text strong { color: var(--color-text-strong); font-size: var(--text-sm); line-height: var(--leading-tight); }
  .notify-body { font-size: var(--text-sm); color: var(--color-text-normal); line-height: var(--leading-normal); }
  .notify-meta { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }

  .notify-list.is-compact .notify-body {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .notify-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }

  .notify-unread-dot {
    inline-size: var(--space-2);
    block-size: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-state-info);
  }

  /* ---- หน้ากล่องแจ้งเตือน */
  .notify-page-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: 0 var(--space-4) var(--space-2);
    border-block-end: 1px solid var(--color-border-normal);
  }

  /* ---- หน้าต่างประเภทการแจ้งเตือน */
  .notify-types { display: grid; gap: var(--space-4); margin-block-start: var(--space-3); }
  .notify-type-group { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); }

  .notify-type-group h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-strong);
  }

  .notify-type-group h3 .notify-icon { inline-size: var(--space-6); block-size: var(--space-6); }
  .notify-type-group h3 .notify-icon svg { inline-size: var(--space-3); block-size: var(--space-3); }
  .notify-type-group > p { margin: var(--space-1) 0 var(--space-2); }
  .notify-type-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
  .notify-type-group li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
  .notify-type-group li .badge { flex: none; }

  @media (max-width: 640px) {
    .notify-panel { inline-size: auto; }
    /* จอแคบ: ปุ่ม "ดูทั้งหมด" เต็มแถว · "อ่านทั้งหมด" ลงบรรทัดถัดไป (ไม่บีบข้อความเป็น 3 บรรทัด) */
    .notify-panel-foot { flex-wrap: wrap; }
    .notify-panel .notify-panel-foot .btn-strong { flex: 1 1 100%; }
    .notify-panel-foot form { flex: 1 1 100%; justify-content: center; }
    .notify-item-button,
    .notify-panel .notify-item-button { grid-template-columns: auto 1fr; }
    .notify-side { grid-column: 2; flex-direction: row; align-items: center; }
  }

  /* --------------------------------------------- การ์ดลูกค้า (สนาม) บนหน้าแพลตฟอร์ม

     ‼️ เป็นการ์ดไม่ใช่ตาราง เพราะการกระทำหลักคือ "เลือกสนามนี้เข้าไปจัดการ"
        ไม่ใช่ "เทียบค่าข้ามแถว" — ปุ่มหลักจึงอยู่ในการ์ด ไม่ใช่ท้ายแถวที่ต้องกวาดตาไปหา */
  .tenant-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  }

  .tenant-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
  }

  .tenant-card:hover { border-color: color-mix(in srgb, var(--color-brand-accent) 45%, var(--color-border-normal)); box-shadow: var(--shadow-md); }

  /* ‼️ ป้ายสถานะวางทับภาพ ไม่ใช่อยู่ข้างชื่อสนาม
     ข้างชื่อแล้วชื่อยาวๆ จะดันป้ายตกบรรทัด ทำให้การ์ดในแถวเดียวกันสูงไม่เท่ากัน
     และสถานะคือสิ่งที่ต้องเห็นก่อนชื่อ เพราะสนามที่ระงับอยู่กดเข้าไปไม่ได้ */
  .tenant-card-media { position: relative; }

  .tenant-card-media > .badge {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-sm);
    padding: var(--space-1) var(--space-4);
    font-weight: var(--weight-bold);
  }

  /* ภาพปกกว้าง 16:6 ตามภาพต้นแบบ — ภาพเป็นตัวจำสนาม ไม่ใช่ของตกแต่ง */
  .tenant-card-cover {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 6.2;
    block-size: auto;
    object-fit: cover;
    background: var(--color-surface-court);
  }

  .tenant-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1;
    padding: var(--space-5) var(--space-5) var(--space-5);
  }

  .tenant-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
  .tenant-card-name { min-inline-size: 0; }

  .tenant-card-name h3 { font-size: var(--text-lg); line-height: var(--leading-tight); }
  .tenant-card-name h3 a { color: var(--color-text-strong); text-decoration: none; }
  .tenant-card-name h3 a:hover { color: var(--color-brand-accent); }

  .tenant-card-name p {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-block-start: 2px;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .tenant-card-name p .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  /* ‼️ สามช่องเสมอ ไม่ใช่ auto-fit — การ์ดที่ตัวเลขเรียงไม่ตรงกันข้ามใบ เทียบด้วยตาไม่ได้
     แต่ละช่องมีกล่องไอคอนกับป้าย/ค่าเรียงสองบรรทัด คั่นด้วยเส้นตั้ง (ภาพต้นแบบ v2)
     ‼️ dt เป็น display: contents เพื่อให้ไอคอนกับป้ายเป็นลูกของกริดโดยตรง — HTML ของ <dl> ยังถูกต้อง */
  .tenant-card-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-block: var(--space-3);
    border-block: 1px solid var(--color-border-normal);
  }

  .tenant-card-facts > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--space-3);
    align-items: center;
    padding-inline: var(--space-3);
  }

  .tenant-card-facts > div:first-child { padding-inline-start: 0; }
  .tenant-card-facts > div + div { border-inline-start: 1px solid var(--color-border-normal); }

  .tenant-card-facts dt { display: contents; }

  .tenant-card-facts .fact-icon {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
    color: var(--color-text-normal);
  }

  .tenant-card-facts .fact-icon .icon { inline-size: 20px; block-size: 20px; }

  .tenant-card-facts dt > span:last-child {
    align-self: end;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .tenant-card-facts dd {
    align-self: start;
    color: var(--color-text-strong);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media (max-width: 420px) {
    .tenant-card-facts .fact-icon { display: none; }
    .tenant-card-facts > div { grid-template-columns: minmax(0, 1fr); }
  }

  /* ‼️ สองช่องเท่ากันด้วย grid ไม่ใช่ flex
     flex ให้ปุ่มที่ข้อความยาวกว่าดันอีกปุ่มจนล้นการ์ด แล้ว overflow:hidden ก็ตัดมันหาย
     ปุ่มที่ถูกตัดครึ่งคือปุ่มที่กดได้แต่อ่านไม่ออกว่ากดแล้วเกิดอะไร */
  .tenant-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-block-start: auto;
  }

  .tenant-card-actions form { min-inline-size: 0; }
  .tenant-card-actions .btn { inline-size: 100%; white-space: nowrap; }

  /* ------------------------------------------------ ตัวเลือกสนามบนแถบบน

     ‼️ เป็นจุดที่บอกว่า "ข้อมูลที่เห็นอยู่เป็นของสนามไหน" จึงต้องเด่นกว่าปุ่มเครื่องมืออื่น
        แต่ต้องไม่เด่นกว่าเมนูหลัก — ใช้กรอบและพื้นอ่อน ไม่ใช่สีทึบ */
  .venue-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    max-inline-size: 260px;
    padding: 5px var(--space-2);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    background: var(--color-surface-page);
    cursor: pointer;
    list-style: none;
  }

  .venue-chip::-webkit-details-marker { display: none; }
  .venue-chip[data-static="true"] { cursor: default; }
  .venue-switch > summary:hover,
  .work-context > summary:hover { border-color: var(--color-brand-accent); }

  .venue-chip-thumb {
    inline-size: var(--space-8);
    block-size: var(--space-8);
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    object-fit: cover;
  }

  .venue-chip-text { display: flex; flex-direction: column; line-height: 1.2; min-inline-size: 0; }

  .venue-chip-text strong {
    font-size: var(--text-sm);
    color: var(--color-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .venue-chip-text small {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .venue-chip .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-text-muted); }

  /* ---- แผงเลือกสนาม */
  /* ‼️ แผงสูงไม่เกินจอ แล้วเลื่อนในแผง · ท้ายแผง (กลับสู่ OMC Platform) ติดล่างเสมอ
     เดิมจำกัดแค่รายการสนาม พอมีส่วน "สาขา" ด้านบน แผงเลยยาวเกินจอ กดปุ่มกลับไม่ถึง (ผู้ใช้ทัก 2026-10-14) */
  .venue-panel {
    inline-size: 320px;
    padding: var(--space-3);
    max-block-size: calc(100dvh - var(--layout-topbar-height) - var(--space-4));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .venue-panel-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    letter-spacing: .04em;
    margin-block-end: var(--space-2);
  }

  .venue-panel-search { inline-size: 100%; margin-block-end: var(--space-2); }

  /* ‼️ จำกัดความสูงแล้วเลื่อนในแผง — แพลตฟอร์มที่มี 80 สนามจะได้เมนูยาวเกินจอ
     และปุ่ม "กลับสู่ OMC Platform" ที่อยู่ท้ายสุดจะกดไม่ถึง ซึ่งคือทางตัน */
  .venue-panel-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-block-size: 300px;
    overflow-y: auto;
  }

  .venue-panel-list form { display: block; }

  /* ‼️ เลื่อนชั้นเดียว (ผู้ใช้ทัก 2026-10-14 "slide ซ้อน slide") — ในแผงเลือกสนาม ทั้งแผงเลื่อนทีเดียว
     รายการสาขา/สนามไม่มีแถบเลื่อนของตัวเอง · ปุ่มกลับสู่ OMC Platform ติดล่าง
     ช่องค้นหาไม่ติดบน — ติดแล้วบังหัวข้อ "เปลี่ยนสนาม" ครึ่งตัว ดูเหมือนตัวหนังสือตก (ผู้ใช้ทัก 2026-10-14) */
  .venue-panel .venue-panel-list,
  .venue-panel .venue-panel-list[data-kind="context"] { max-block-size: none; overflow: visible; }

  .venue-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: 100%;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .venue-option:hover { background: var(--color-surface-raised); }

  .venue-option[data-current="true"] {
    background: var(--color-tint-success);
  }

  .venue-option img {
    inline-size: var(--space-10);
    block-size: var(--space-8);
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    object-fit: cover;
  }

  .venue-option-text { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; line-height: 1.25; }
  .venue-option-text strong { font-size: var(--text-sm); color: var(--color-text-strong); }
  .venue-option-text small { font-size: var(--text-xs); color: var(--color-text-muted); }
  .venue-option .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-brand-accent); }

  /* ---- บริบทการทำงาน (สาขา › สนาม · work-context-options.php) — กล่องไอคอนแทนรูปสนาม */
  .venue-option-icon {
    display: inline-grid;
    place-items: center;
    inline-size: var(--space-8);
    block-size: var(--space-8);
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
  }

  .venue-option-icon .icon { color: var(--color-text-muted); }
  .venue-panel-list[data-kind="context"] { max-block-size: 220px; margin-block-end: var(--space-2); }

  .venue-panel-note {
    display: flex;
    gap: var(--space-2);
    margin-block-end: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
  }

  .venue-panel-note .icon { flex: 0 0 auto; inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  .venue-panel-foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-block-start: var(--space-2);
    padding-block: var(--space-2) var(--space-3);
    border-block-start: 1px solid var(--color-border-normal);
    position: sticky;
    inset-block-end: calc(var(--space-3) * -1);
    margin-block-end: calc(var(--space-3) * -1);
    background: var(--color-surface-card);
  }

  .venue-panel-foot form { display: block; }

  .venue-panel-foot a,
  .venue-panel-foot button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: 100%;
    min-block-size: 40px;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text-normal);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  .venue-panel-foot a:hover,
  .venue-panel-foot button:hover { background: var(--color-surface-raised); color: var(--color-text-strong); }

  /* ---- การ์ดสนามที่กำลังจัดการ บนหัวลิ้นชักมือถือ */
  .appnav-drawer-venue { padding: var(--space-4) var(--space-4) 0; }
  .appnav-drawer-venue .venue-chip {
    inline-size: 100%;
    max-inline-size: none;
    background: var(--color-border-sidebar);
    border-color: transparent;
  }

  .appnav-drawer-venue .venue-chip-text strong { color: var(--color-text-on-dark); }
  .appnav-drawer-venue .venue-chip-text small { color: var(--color-surface-on-sidebar); }
  .appnav-drawer-venue .venue-chip .icon { color: var(--color-surface-on-sidebar); }
  .appnav-drawer-venue :is(.venue-switch, .work-context) { display: block; }

  /* ‼️ ในลิ้นชักแผงต้องกางในสายเลย์เอาต์ ไม่ใช่ลอยทับ
     ลอยทับแล้วมันหลุดออกนอกลิ้นชักที่กว้างแค่ 320px แล้วโดนขอบจอตัด */
  .appnav-drawer-venue .appbar-pop-panel {
    position: static;
    inline-size: 100%;
    margin-block-start: var(--space-2);
    box-shadow: none;
  }

  @media (max-width: 1200px) {
    .appbar .venue-chip-text { display: none; }
    .appbar .venue-chip { max-inline-size: none; }
  }

  @media (max-width: 640px) {
    .appbar > .appbar-row > .venue-chip,
    .appbar > .appbar-row > .venue-switch,
    .appbar > .appbar-row > .work-context { display: none; }
  }

  /* ---- ชั้นที่สอง */
  .subnav {
    border-block-start: 1px solid var(--color-border-normal);
    background: var(--color-surface-card);
  }

  .subnav-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-5);
    min-block-size: var(--layout-subnav-height);
    padding-inline: var(--space-5);
    overflow-x: auto;
    scrollbar-width: none;

    /* ‼️ overflow-x อย่างเดียวไม่พอ — แท็บตัวสุดท้ายยังดันเอกสารกว้างเกินจอ 13px ที่ 375
       ทั้งหน้าจึงเลื่อนซ้ายขวาได้ ซึ่งบนมือถือคือหน้าพัง
       เป็นอาการเดียวกับที่ .court-grid-wrap เคยเจอ และแก้ด้วยกติกาเดียวกัน */
    contain: paint;
  }

  .subnav-row::-webkit-scrollbar { display: none; }

  .subnav-row a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    padding-block: var(--space-2);
    border-block-end: 2px solid transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
  }

  .subnav-row a:hover { color: var(--color-text-strong); }

  .subnav-row a[aria-current="page"] {
    color: var(--color-brand-accent);
    border-block-end-color: var(--color-brand-accent);
    font-weight: var(--weight-bold);
  }

  .subnav-row a[data-locked] { opacity: .72; }

  /* ตุ่มแดงนับจำนวนข้างเมนู (App\Lib\NavBadge · แท็บลูกค้าใหม่ 2026-11-12) — สีเดียวกับตุ่มกระดิ่ง */
  .nav-count {
    display: inline-block;
    min-inline-size: 18px;
    block-size: 18px;
    padding-inline: 5px;
    border-radius: var(--radius-full);
    background: var(--color-state-danger);
    color: var(--color-text-on-dark);
    font-size: 11px;
    font-weight: var(--weight-bold);
    line-height: 18px;
    text-align: center;
    flex: none;
  }

  /* ---- ลิ้นชักเมนูบนจอแคบ
     ‼️ ไม่ใช่เมนูคนละชุด — ใช้ partials/nav.php ตัวเดียวกับโหมด sidebar */
  .appnav-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--color-overlay);
  }

  .appnav-drawer[hidden] { display: none; }

  .appnav-drawer-sheet {
    inline-size: min(320px, 86vw);
    block-size: 100%;
    overflow-y: auto;
    background: var(--color-surface-sidebar);
    color: var(--color-surface-on-sidebar);
  }

  .appnav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-border-sidebar);
  }

  .appnav-drawer-head .btn-icon { color: var(--color-surface-on-sidebar); }
  .appnav-drawer .nav a { color: var(--color-surface-on-sidebar); }
  .appnav-drawer .nav a:hover { background: var(--color-border-sidebar); color: var(--color-text-on-dark); }

  .appnav-drawer .nav a[aria-current="page"] {
    background: var(--color-border-sidebar);
    color: var(--color-text-on-dark);
    box-shadow: inset 3px 0 0 var(--color-brand-highlight);
  }

  .appnav-drawer .nav-group-label { color: var(--color-surface-on-sidebar); opacity: .62; }

  /* ‼️ 10 กลุ่ม + ชื่อผู้ใช้ เรียงบนแถบเดียวไม่พอตั้งแต่ราวๆ แท็บเล็ตแนวนอน
     จุดตัดจึงเป็น 1200px ไม่ใช่ breakpoint มือถือปกติ */
  @media (max-width: 1200px) {
    .appbar-burger { display: inline-flex; }
    .appbar-menu { display: none; }
    .appbar-user-text { display: none; }
    .appbar-row { gap: var(--space-2); padding-inline: var(--space-4); }
  }

  /* ‼️ ที่ 375 แถบบนใส่ทุกอย่างไม่พอ — ที่เหลือคือ เมนู โลโก้ ค้นหา แจ้งเตือน บัญชี
     สลับโหมดกับสลับภาษาย้ายไปอยู่ในลิ้นชัก ไม่ใช่ซ่อนทิ้ง
     ปล่อยทุกตัวไว้บนแถบ หน้าจะกว้างเกินจอ 155px ซึ่งแปลว่าต้องเลื่อนซ้ายขวาอ่านทั้งหน้า */
  @media (max-width: 640px) {
    .appbar-row { padding-inline: var(--space-3); gap: var(--space-1); }
    .subnav-row { --subnav-pad: var(--space-3); padding-inline: var(--space-3); gap: var(--space-4); }

    .appbar .brand-logo-name { display: none; }
    .appbar-prefs { display: none; }

    .appbar-pop-panel {
      position: fixed;
      inset-inline: var(--space-3);
      inset-block-start: calc(var(--layout-topbar-height) + var(--space-2));
    }

    .appbar-search input { min-inline-size: 0; }
  }

  /* สลับโหมดและภาษาในลิ้นชัก — โผล่เฉพาะตอนที่แถบบนซ่อนมันไว้ */
  .appnav-drawer-foot { display: none; }

  @media (max-width: 640px) {
    .appnav-drawer-foot {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-4);
      border-block-start: 1px solid var(--color-border-sidebar);
    }

    .appnav-drawer-foot .btn-icon { color: var(--color-surface-on-sidebar); }
  }

  /* ---------------------------------------------------------------- อื่นๆ */

  .card {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
  }

  /* ‼️ "ประเภท" กับ "สถานะ" ต้องต่างกันด้วยรูปทรง ไม่ใช่แค่สี (design.md 5.6)
     เดิม .badge มีแบบเดียว ทั้งสองอย่างจึงหน้าตาเหมือนกันหมด
     กวาดตาแล้วแยกความหมายไม่ออก ซึ่งเป็นอาการที่ feedback รอบแรกรายงานไว้ตรงๆ

     รูปแบบเส้นขอบมาจาก component.badge ใน DESIGN.md เพื่อให้ดีไซน์กำหนดได้
     ไม่ใช่ฝังไว้ที่นี่แล้วดีไซน์เปลี่ยนไม่ได้ */
  /* ‼️ ป้ายสถานะกับป้ายชนิดต้องแยกออกจากกันด้วย "รูปทรง" ไม่ใช่แค่เส้นขอบ
     ของเดิมต่างกันที่เส้นประกับเส้นทึบ ซึ่งมองไม่ออกเลยที่ขนาดตัวอักษร 13px
     สถานะเป็นแคปซูลมีจุดนำ · ชนิดเป็นสี่เหลี่ยมมุมมนไม่มีจุด — แยกได้แม้พิมพ์ขาวดำ
     ค่ามุมมนและขนาดจุดมาจาก component.badge ใน DESIGN.md เพื่อให้ดีไซน์กำหนดได้ */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-3);
    border-radius: var(--badge-status-radius);
    border: 1px solid transparent;
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  /* ‼️ จุดนำหน้าเฉพาะป้ายที่ไม่มีไอคอนของตัวเอง — มีทั้งคู่แล้วจะเป็นวงกลมสองอันติดกัน
     :has() รองรับในเบราว์เซอร์ปัจจุบันทุกตัว แต่กันไว้ด้วย @supports
     เบราว์เซอร์เก่าจะได้ป้ายไม่มีจุด ซึ่งยังอ่านออกครบ ไม่ใช่ป้ายที่พัง */
  @supports selector(:has(*)) {
    .badge:not(.badge-type):not(:has(.icon))::before {
      content: "";
      flex: none;
      inline-size: var(--badge-dot-size);
      block-size: var(--badge-dot-size);
      border-radius: var(--radius-full);
      background: currentColor;
    }
  }

  .badge-type {
    border-radius: var(--badge-radius);
    padding-inline: var(--space-2);
    font-size: var(--text-xs);
  }

  /* ‼️ แถบตัวกรองเป็นการ์ดของตัวเอง ไม่ใช่แถวลอยบนพื้นหน้า
     ลอยอยู่บนพื้นแล้วมันอ่านเหมือนส่วนท้ายของหัวเพจ ทั้งที่มันเป็นเครื่องมือของตาราง
     ‼️ ปุ่มของแถบนี้ชิดขวาและอยู่แถวเดียวกับช่องเสมอ — margin-inline-start:auto ที่กลุ่มปุ่ม
        ไม่ใช่ justify-content ของแถว เพราะแถวต้องเรียงจากซ้ายเมื่อช่องตกบรรทัด */
  .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: end;
    padding: var(--space-4);
    margin-block-end: var(--space-4);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  /* ‼️ ช่องค้นหาต้องยืดกินพื้นที่ที่เหลือ ไม่ใช่กว้างเท่าช่องเลือก
     กว้างเท่ากันแล้วคำค้นยาวๆ (ชื่อไทยเต็ม) จะมองไม่เห็นตัวที่พิมพ์ไปแล้ว */
  .toolbar .field-search { flex: 1 1 18rem; min-inline-size: 0; }

  .pagination { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; }
  .pagination [aria-current="page"] { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }

  /* ‼️ ปุ่มลอยแจ้งปัญหาถูกถอดออกแล้ว — ทางเข้าคือลิงก์ที่ footer กลาง
     มันตรึงกับ viewport ที่มุมล่างซ้าย จึงทับคอลัมน์แรกของตารางในหน้ารายการถาวร
     และเลื่อนเท่าไหร่ก็ไม่พ้น เพราะมันไม่ได้อยู่ในกระแสของหน้า
     ที่กันไว้ท้ายหน้าสำหรับปุ่มนั้นก็ถอดออกพร้อมกัน ไม่งั้นทุกหน้าจะมีที่ว่างที่ไม่มีอะไรใช้ */

  .prose { max-width: var(--prose-max-width); display: flex; flex-direction: column; gap: var(--prose-paragraph-gap); }
  .prose h2 { margin-block-start: var(--prose-heading-gap); font-weight: var(--weight-normal); font-size: var(--text-xl); }
  .prose ol, .prose ul { padding-inline-start: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
  .prose figure { display: flex; flex-direction: column; gap: var(--space-2); }
  .prose figcaption { color: var(--color-text-muted); font-size: var(--text-sm); }

  /* ------------------------------------------------ ส่วนเปิดหน้า (hero)

     ‼️ component ชุดนี้เป็นของหน้าสาธารณะ ต่างจากที่เหลือในไฟล์ซึ่งเป็นของหลังบ้าน
        ค่าทุกตัวมาจาก component: ใน DESIGN.md ห้ามเขียนค่าดิบเพิ่มที่นี่          */

  .hero {
    display: grid;
    gap: var(--hero-gap);
    align-items: center;
    min-height: var(--hero-min-height-mobile);
    padding-block: var(--space-12);
  }

  .hero-body { display: flex; flex-direction: column; gap: var(--space-5); }

  .hero-eyebrow {
    font-size: var(--text-sm);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .hero-title {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    font-weight: var(--weight-normal);
    color: var(--color-text-strong);
  }

  .hero-lead {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--color-text-normal);
    max-width: 46ch;
  }

  .hero-image {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--hero-image-ratio);
    object-fit: cover;
    border-radius: var(--radius-lg);
  }

  @media (min-width: 768px) {
    .hero {
      grid-template-columns: 1fr 1fr;
      min-height: var(--hero-min-height);
      padding-block: var(--space-16);
    }
  }

  /* ------------------------------------------------ แหกกรอบความกว้างของหน้า

     ‼️ กฎ 5.4 บอกว่าหนึ่งหน้ามีความกว้างเดียว ซึ่งถูกสำหรับหน้าหลังบ้าน
        แต่หน้าสาธารณะที่ทุกอย่างอยู่ในกรอบ 1120px จะไม่มีอะไรสะดุดตาเลย
        ข้อ 5.16 จึงอนุญาตให้แหกกรอบได้ และนี่คือเครื่องมือที่ใช้แหก

     ‼️ ใช้ 100vw ไม่ได้ เพราะมันรวมความกว้างของ scrollbar แล้วจะเกิด scroll แนวนอน
        ต้องใช้ 100dvw ซึ่งไม่รวม และ fallback เป็น 100% สำหรับเบราว์เซอร์เก่า */
  .bleed {
    width: 100%;
    width: 100dvw;
    margin-inline: calc(50% - 50dvw);
  }

  /* ------------------------------------------------ ส่วนเปิดแบบเต็มจอ ข้อความทับภาพ */

  .hero-full { position: relative; display: grid; align-items: end; min-height: 82svh; padding: 0; }
  .hero-full > .hero-media { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }

  /* ‼️ ชั้นไล่สีคั่นระหว่างภาพกับตัวอักษร ไม่ใช่ของตกแต่ง
     ภาพถ่ายมีทั้งส่วนสว่างและมืด วางตัวอักษรลงไปตรงๆ แล้ววัด contrast ไม่ผ่านเป็นเรื่องปกติ */
  .hero-full::after {
    content: "";
    grid-area: 1 / 1;
    background: var(--hero-scrim);
  }

  .hero-full > .hero-body {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    align-self: end;
    max-width: var(--layout-max-width);
    margin-inline: auto;
    padding: var(--space-16) var(--space-6);
    width: 100%;
  }

  /* ‼️ ตัวอักษรบนภาพใช้สีคงที่ ไม่ใช่ token ของธีม
     เพราะพื้นหลังคือภาพ ไม่ใช่พื้นของระบบ จึงไม่เปลี่ยนตามโหมดสว่าง/มืด */
  .hero-full .hero-title,
  .hero-full .hero-lead,
  .hero-full .hero-eyebrow { color: var(--hero-on-image); }
  .hero-full .hero-title { font-size: var(--text-display); line-height: var(--leading-tight); }
  .hero-full .hero-lead { max-width: 52ch; }

  /* ------------------------------------------------ ตะแกรงการ์ดสินค้า */

  .product-grid {
    display: grid;
    gap: var(--product-card-grid-gap);
    grid-template-columns: repeat(auto-fill, minmax(var(--layout-tile-min-width), 1fr));
    list-style: none;
    padding: 0;
  }

  .product-card {
    display: flex;
    flex-direction: column;
    gap: var(--product-card-gap);
    text-decoration: none;
    color: inherit;
  }

  .product-card-image {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--product-card-image-ratio);
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    transition: opacity var(--duration-fast) var(--ease-standard);
  }

  .product-card:hover .product-card-image { opacity: .88; }

  .product-card-name {
    font-size: var(--product-card-name-size);
    color: var(--color-text-strong);
  }

  .product-card-meta {
    font-size: var(--product-card-meta-size);
    color: var(--color-text-muted);
  }

  /* ------------------------------------------------ รายการข่าว */

  .news-list { list-style: none; padding: 0; display: flex; flex-direction: column; }
  .news-list > li + li { border-block-start: var(--news-item-divider-style); }

  .news-item {
    display: grid;
    gap: var(--news-item-gap);
    padding-block: var(--space-6);
    text-decoration: none;
    color: inherit;
  }

  .news-item-image {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--news-item-image-ratio);
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
  }

  .news-item-body { display: flex; flex-direction: column; gap: var(--space-2); }
  .news-item-date { font-size: var(--text-sm); color: var(--color-text-muted); }

  .news-item-title {
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    color: var(--color-text-strong);
  }

  .news-item:hover .news-item-title { color: var(--color-brand-primary); }
  .news-item-lead { color: var(--color-text-normal); }

  @media (min-width: 620px) {
    .news-item { grid-template-columns: var(--news-item-image-width) 1fr; align-items: start; }
  }

  /* ------------------------------------------------ ส่วนของหน้าสาธารณะ */

  /* ‼️ จังหวะของหน้าขาย ไม่ใช่ของหลังบ้าน
     หน้าขายต้องการอากาศเยอะเพื่อให้แต่ละส่วนเล่าเรื่องทีละเรื่อง
     หลังบ้านเป็นการ์ดต่อการ์ด ระยะ 48px + เส้นคั่นทำให้เกิดช่องว่างที่ไม่มีอะไรอยู่
     และทำให้ตารางถัดไปหลุดขอบจอบนโน้ตบุ๊ก 1366×768 ทั้งที่มีที่ว่างเหลือ */
  .page-section { padding-block: var(--space-12); }
  .page-section + .page-section { border-block-start: 1px solid var(--color-border-normal); }

  .page[data-page="app"] .page-section { padding-block: 0 var(--space-5); }
  .page[data-page="app"] .page-section + .page-section { border-block-start: 0; }
  .page-section > h2 { font-size: var(--text-2xl); font-weight: var(--weight-normal); }
  .page-section > .lead { color: var(--color-text-muted); margin-block-end: var(--space-8); }

  .split { display: grid; gap: var(--space-10); align-items: center; }
  @media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; } }
}

@layer utilities {
  .muted   { color: var(--color-text-muted); }
  .strong  { color: var(--color-text-strong); }
  .small   { font-size: var(--text-sm); }
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   OMC SPORTS — ส่วนที่เพิ่มจากโครงมาตรฐาน
   ‼️ ค่าทั้งหมดมาจาก token ใน DESIGN.md เท่านั้น ห้ามเขียนค่าดิบ
   ═══════════════════════════════════════════════════════════════════ */

@layer layout {

  /* ---------------------------------------------------------- sidebar navy
     ‼️ sidebar เป็นพื้นเข้มเสมอทั้งสองโหมด (DESIGN.md ลายเซ็นข้อ 4)
        ตัวอักษรบนนั้นจึงใช้ token ของตัวเอง ไม่ใช่ text.normal ของหน้า
        ใช้ text.normal จะได้ตัวอักษรเข้มบนพื้นเข้มในโหมดสว่าง ซึ่งอ่านไม่ออก */
  .sidebar {
    background: var(--color-surface-sidebar);
    color: var(--color-surface-on-sidebar);
    border-inline-end: 1px solid var(--color-border-sidebar);
  }

  .sidebar .brand { color: var(--color-text-on-dark); border-block-end-color: var(--color-border-sidebar); }

  .sidebar .nav a { color: var(--color-surface-on-sidebar); }
  .sidebar .nav a:hover { background: var(--color-border-sidebar); color: var(--color-text-on-dark); }

  /* ‼️ เมนูที่เปิดอยู่ใช้พื้นอ่อนของแบรนด์ ไม่ใช่ทาสีแบรนด์เต็มแถบ
     ทาเต็มแถบแล้วบน sidebar navy จะกลายเป็นน้ำเงินบนน้ำเงิน แยกไม่ออก */
  .sidebar .nav a[aria-current="page"] {
    background: var(--color-brand-accent);
    color: var(--color-brand-on-accent);
    font-weight: var(--weight-medium);
  }

  .nav-group { display: flex; flex-direction: column; gap: var(--space-1); }
  .nav-group + .nav-group { margin-block-start: var(--space-4); }

  .nav-group-label {
    font-size: var(--text-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding-inline: var(--space-3);
    margin-block-end: var(--space-1);
  }

  .sidebar .nav-group-label { color: var(--color-surface-on-sidebar); opacity: .62; }

  .nav-lock { margin-inline-start: auto; opacity: .6; display: inline-flex; }
  .nav-lock .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  /* พับแล้วซ่อนหัวหมวด เพราะเหลือแต่ไอคอนซึ่งไม่ต้องมีหัวข้อกำกับ */
  .sidebar[data-collapsed="true"] .nav-group-label,
  .sidebar[data-collapsed="true"] .nav-lock { display: none; }

  /* -------------------------------------------------------- หน้าสาธารณะ */

  .skip-link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    transform: translateY(-100%);
    background: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
    padding: var(--space-3) var(--space-5);
    z-index: var(--z-skip);
  }

  .skip-link:focus { transform: translateY(0); }

  .public-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background: var(--color-surface-card);
    border-block-end: 1px solid var(--color-border-normal);
  }

  .public-bar-inner {
    max-inline-size: var(--layout-public-width);
    margin-inline: auto;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .public-bar .brand { padding: 0; border: 0; color: var(--color-text-strong); }
  .public-bar .brand .icon { color: var(--color-brand-logo); }
  .public-nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }

  .public-nav a {
    color: var(--color-text-normal);
    text-decoration: none;
    padding-block: var(--space-2);
    border-block-end: var(--tabs-indicator) solid transparent;
  }

  .public-nav a:hover { color: var(--color-text-strong); }

  /* ‼️ ขีดใต้แท็บ = เขียวเข้มของธีม (ผู้ใช้สั่ง 2026-11-02 · เดิมเป็น lime) */
  .public-nav a[aria-current="page"] {
    color: var(--color-text-strong);
    border-block-end-color: var(--color-brand-accent);
    font-weight: var(--weight-medium);
  }

  .public-bar-actions { margin-inline-start: auto; display: flex; gap: var(--space-3); align-items: stretch; }

  @media (max-width: 860px) {
    .public-bar-inner { flex-wrap: wrap; row-gap: var(--space-3); }
    .public-nav { order: 3; inline-size: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .public-nav a { white-space: nowrap; min-block-size: 44px; display: inline-flex; align-items: center; }
    .public-bar-actions { margin-inline-start: auto; }
  }

  .page[data-width="public"] { max-inline-size: var(--layout-public-width); }

  .public-footer {
    margin-block-start: var(--space-16);
    background: var(--color-surface-raised);
    border-block-start: 1px solid var(--color-border-normal);
  }

  .public-footer-inner {
    max-inline-size: var(--layout-public-width);
    margin-inline: auto;
    padding: var(--space-12) var(--space-5);
    display: grid;
    gap: var(--space-8);
  }

  @media (min-width: 768px) {
    .public-footer-inner { grid-template-columns: 2fr 1fr; }
    .public-footer-legal { grid-column: 1 / -1; }
  }

  .public-footer-address { display: flex; flex-direction: column; gap: var(--space-1); font-style: normal;
    color: var(--color-text-muted); margin-block-start: var(--space-3); font-size: var(--text-sm); }
  .public-footer-address a { display: inline-flex; align-items: center; gap: var(--space-2); }

  .public-footer-legal { color: var(--color-text-muted); font-size: var(--text-sm);
    border-block-start: 1px solid var(--color-border-normal); padding-block-start: var(--space-5); }

  /* ‼️ แถบจองบนมือถือ — หน้าที่ต้องเลื่อนขึ้นไปหาปุ่มจอง คือหน้าที่เสียยอดจองไปเปล่าๆ */
  .sticky-cta {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-float);
    min-block-size: var(--sticky-cta-height);
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface-card);
    border-block-start: 1px solid var(--color-border-normal);
    box-shadow: var(--shadow-lg);
  }

  .sticky-cta-text { display: flex; flex-direction: column; line-height: var(--leading-tight); }
  .sticky-cta-text span { color: var(--color-text-muted); font-size: var(--text-sm); }

  @media (max-width: 860px) {
    .sticky-cta { display: flex; }

    /* ‼️ ต้องกันที่ให้แถบทั้งหน้า ไม่ใช่แค่ footer
       แถบลอยทับอะไรก็ตามที่อยู่ท้ายหน้า — บนหน้าจองคอร์ท สิ่งนั้นคือช่องเวลาที่กดจองได้
       ผู้ใช้เล็งกดช่องแล้วโดนปุ่มจองแทน ซึ่งเป็นความผิดพลาดที่ผู้ใช้โทษตัวเองทั้งที่เป็นความผิดของเรา */
    /* ‼️ กันที่เฉพาะหน้าที่มีแถบจริง — กันทุกหน้า หน้าที่ไม่มีแถบ (เช่นเข้าสู่ระบบ) ได้ที่ว่างเปล่าท้าย footer */
    body[data-surface="public"]:has(.sticky-cta) .public-footer { padding-block-end: var(--sticky-cta-height); }
  }
}

@layer components {

  /* ---------------------------------------------------------------- KPI
     ‼️ ใบที่คลิกได้มีขีดล่างสี accent — ต่างจากใบที่ดูอย่างเดียวด้วยรูปทรง ไม่ใช่แค่ cursor
        cursor เห็นได้เฉพาะคนใช้เมาส์ ซึ่งไม่ใช่คนส่วนใหญ่บนมือถือ */
  .kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--kpi-min-width), 1fr));
    gap: var(--kpi-gap);
  }

  .kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
  }

  /* ‼️ ไอคอน · ตัวเลข · เส้นแนวโน้ม อยู่แถวเดียวกัน ไม่ใช่ซ้อนลงมาเป็นชั้น
     ซ้อนลงมาทำให้การ์ดสูงขึ้นราว 40% โดยไม่ได้ข้อมูลเพิ่ม
     และแถว KPI คือสิ่งที่ต้องอยู่เหนือขอบจอพร้อมกับเนื้อหาชิ้นแรกของหน้า */
  .kpi-top {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .kpi-text { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; flex: 1; }

  /* ‼️ เส้นแนวโน้มเป็นของประกอบ จึงจางและไม่มีแกน — มันบอกรูปร่าง ไม่ได้บอกค่า
     ทำให้เด่นเท่าตัวเลขเมื่อไหร่ คนจะพยายามอ่านค่าจากมัน ซึ่งมันเล็กเกินกว่าจะอ่านได้ถูก */
  .kpi-spark {
    flex: none;
    inline-size: calc(var(--space-16) + var(--space-4));
    block-size: var(--kpi-spark-h);
    color: var(--color-brand-accent);
    opacity: .55;
    align-self: center;
  }

  .kpi[data-tone="warning"] .kpi-spark { color: var(--color-state-warning); }
  .kpi[data-tone="danger"]  .kpi-spark { color: var(--color-state-danger); }
  .kpi[data-tone="info"]    .kpi-spark { color: var(--color-state-info); }

  /* ‼️ แถวล่างแยกด้วยเส้น ไม่ใช่แค่ระยะห่าง
     ตัวเลขเทียบช่วงก่อนเป็นข้อมูลคนละชุดกับตัวเลขหลัก ปนกันแล้วคนอ่านรวมเป็นก้อนเดียว */
  .kpi-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border-normal);
  }

  a.kpi::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: var(--tabs-indicator);
    background: var(--color-brand-accent);
  }

  a.kpi:hover { border-color: var(--color-border-strong); }

  .kpi-icon {
    inline-size: var(--kpi-icon-box);
    block-size: var(--kpi-icon-box);
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    background: var(--color-tint-neutral);
    color: var(--color-text-normal);
    flex: none;
  }

  .kpi[data-tone="success"] .kpi-icon { background: var(--color-tint-success); color: var(--color-state-success); }
  .kpi[data-tone="warning"] .kpi-icon { background: var(--color-tint-warning); color: var(--color-state-warning); }
  .kpi[data-tone="danger"]  .kpi-icon { background: var(--color-tint-danger);  color: var(--color-state-danger); }
  .kpi[data-tone="info"]    .kpi-icon { background: var(--color-tint-info);    color: var(--color-state-info); }
  .kpi[data-tone="highlight"] .kpi-icon { background: var(--color-tint-highlight); color: var(--color-text-strong); }

  .kpi-label { color: var(--color-text-muted); font-size: var(--text-sm); }

  /* ‼️ ตัวเลขใช้ tabular-nums เสมอ — คอลัมน์ยอดเงินต้องเรียงหลักตรงกัน (DESIGN.md ลายเซ็นข้อ 2) */
  .kpi-value {
    font-size: var(--kpi-value-size);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
  }

  .kpi-unit { font-size: var(--text-base); font-weight: var(--weight-normal); color: var(--color-text-muted); }
  .kpi-hint { color: var(--color-text-muted); font-size: var(--text-sm); }

  .kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }

  .kpi-delta[data-dir="up"]   { color: var(--color-state-success); }
  .kpi-delta[data-dir="down"] { color: var(--color-state-danger); }
  .kpi-delta .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  /* ------------------------------------------------------------- การ์ด */

  .card[data-flush="true"] > .card-body { padding: 0; }
  .card { padding: 0; }
  .card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }

  .card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    border-block-end: 1px solid var(--color-border-normal);

    /* ‼️ ต้องขึ้นบรรทัดใหม่ได้เมื่อหัวกล่องกับปุ่มรวมกันยาวเกินจอ
       ไม่ให้ห่อ = flex ดันกล่องให้กว้างเกินจอแล้วปุ่มหลุดออกไปทางขวา
       เห็นชัดที่สุดบนจอ 375px ซึ่งหัวกล่องภาษาไทยยาวๆ กินความกว้างเกือบหมดอยู่แล้ว */
    flex-wrap: wrap;
  }

  /* ‼️ ลูกของ flex ไม่ยอมแคบกว่าเนื้อหาตัวเองถ้าไม่ตั้ง min-inline-size
     หัวกล่องที่เป็นข้อความยาวจะดันกล่องกว้างแทนที่จะตัดบรรทัด */
  .card-head > * { min-inline-size: 0; }

  .card-head h2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-text-strong);
  }

  .card-head h2 .icon { color: var(--color-brand-accent); }
  .card-lead { color: var(--color-text-muted); font-size: var(--text-sm); margin-block-start: var(--space-1); }
  .card-actions { margin-inline-start: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }

  /* -------------------------------------------------------------- แท็บ */

  .tabs {
    display: flex;
    gap: var(--space-5);
    border-block-end: 1px solid var(--color-border-normal);
    overflow-x: auto;
  }

  .tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-3);
    white-space: nowrap;
    color: var(--color-text-muted);
    text-decoration: none;
    border-block-end: var(--tabs-indicator) solid transparent;
    min-block-size: 44px;
  }

  .tab:hover { color: var(--color-text-strong); }

  .tab[aria-current="page"] {
    color: var(--color-text-strong);
    border-block-end-color: var(--color-brand-primary);
    font-weight: var(--weight-medium);
  }

  .tab-count {
    background: var(--color-tint-neutral);
    color: var(--color-text-normal);
    border-radius: var(--radius-full);
    padding-inline: var(--space-2);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }

  /* ------------------------------------------------------ รายการหัวข้อ↔ค่า */

  /* ‼️ ต้องวัดจากความกว้างของกล่องที่มันอยู่ ไม่ใช่ความกว้างของจอ
     วัดจากจอ แล้วรายการเดียวกันนี้ที่อยู่ในคอลัมน์ขวากว้าง 340px บนจอ 1440
     จะถูกบังคับให้แบ่งสองคอลัมน์ เหลือที่ให้ค่าไม่ถึงครึ่ง
     ผลคือ "20 ก.ย. 2026 18:00" ตัดเป็นสามบรรทัด ทั้งที่จอกว้างพอเหลือเฟือ
     เคสนี้เจอจริงตอนย้ายหน้าใบจองมาเป็นสองคอลัมน์ */
  .detail-list { display: grid; gap: 0; container-type: inline-size; }

  .detail-row {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--color-border-normal);
  }

  .detail-row:last-child { border-block-end: 0; }
  .detail-row dt { color: var(--color-text-muted); font-size: var(--text-sm); }
  .detail-row dd { color: var(--color-text-strong); margin: 0; }
  .detail-row dd.numeric { font-variant-numeric: tabular-nums; }

  @container (min-width: 34rem) {
    .detail-row { grid-template-columns: minmax(0, 14rem) 1fr; align-items: baseline; }
  }

  /* ‼️ โหมดกระชับ — ใช้ในคอลัมน์ข้างที่แคบเกินกว่าจะแบ่งสองคอลัมน์ด้วย container query
     ที่นั่นทุกคู่จะซ้อนสองบรรทัด ทำให้การ์ดสรุปยอดหกรายการสูงเกือบ 400px
     โหมดนี้จึงดันค่าไปชิดท้ายบรรทัดเดียวกัน แบบเดียวกับที่ใบเสร็จเขียนยอด */
  .detail-list[data-compact="true"] .detail-row {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    padding-block: var(--space-2);
  }

  .detail-list[data-compact="true"] .detail-row dd { text-align: end; }

  .numeric { font-variant-numeric: tabular-nums; }
}

@layer components {

  /* ═════════════════════════════ ตารางคอร์ท — ลายเซ็นของระบบ ═════════════════════════════
     ‼️ เลื่อนแนวนอนได้เฉพาะตัวตาราง โดยคอลัมน์ชื่อคอร์ทตรึงไว้
        นี่คือข้อยกเว้นของกฎ "ห้าม scroll แนวนอน" ที่ใช้กับตารางข้อมูลทั่วไป
        เพราะตารางเวลาเป็นผังสองแกน ยุบเป็นการ์ดแล้วความหมายหายทั้งหมด */

  /* ‼️ เส้นเวลาปัจจุบัน — ลายเซ็นของระบบนี้ตาม DESIGN.md ข้อ 1
     ตารางที่ไม่บอกว่าตอนนี้กี่โมง บังคับให้แอดมินไล่หาคอลัมน์เองทุกครั้งที่เปิดหน้า

     ‼️ วาดเป็นขอบซ้ายของช่อง ไม่ใช่เส้นลอยที่วางด้วย inline style
        ตำแหน่งจึงตรงกับตารางเสมอแม้ความกว้างช่องเปลี่ยน และไม่ขัดกฎเหล็กข้อ 15 */
  /* ‼️ เส้นเขียวของเวลาปัจจุบันในช่อง + ขีดใต้หัวชั่วโมงเอาออก (ผู้ใช้สั่ง 2026-10-30) — เหลือหัวชั่วโมงตัวหนา */

  .court-grid-hour[data-now="true"] {
    position: relative;
    color: var(--color-text-strong);
    font-weight: var(--weight-bold);
  }



  .court-grid-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);

    /* ‼️ overflow-x: auto อย่างเดียวไม่พอ — ทั้งหน้ายังเลื่อนซ้ายขวาตามกริดได้อยู่
       เพราะเนื้อหาที่ล้นยังถูกนับเป็น scrollable overflow ของ document
       ผลคือทุกหน้าที่มีตารางเวลา (ปฏิทิน · หน้าจองของลูกค้า) เลื่อนไปเจอพื้นที่ว่าง
       ทางขวาได้ทุกขนาดจอ ซึ่งบนมือถือทำให้เลื่อนอ่านยากมาก

       contain: paint บอกเบราว์เซอร์ว่าลูกทั้งหมดจะไม่วาดออกนอกกล่องนี้
       จึงไม่ถูกนับรวมเป็น overflow ของหน้า — วัดแล้วหน้าเลื่อนจาก 800px เหลือ 0
       โดยกริดยังเลื่อนเองได้เหมือนเดิม และหัวตารางยัง sticky เหมือนเดิม */
    contain: paint;
  }

  .court-grid { min-inline-size: max-content; }

  .court-grid-head,
  .court-grid-row { display: flex; align-items: stretch; }

  .court-grid-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--color-surface-raised);
    border-block-end: 1px solid var(--color-border-normal);
  }

  .court-grid-label {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    flex: 0 0 var(--grid-label-width);
    inline-size: var(--grid-label-width);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-card);
    border-inline-end: 1px solid var(--color-border-normal);
  }

  .court-grid-head .court-grid-label {
    background: var(--color-surface-raised);
    font-size: var(--text-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .court-grid-name { font-weight: var(--weight-medium); color: var(--color-text-strong); font-size: var(--text-sm); }
  .court-grid-meta { color: var(--color-text-muted); font-size: var(--text-xs); }

  .court-grid-hours { display: flex; }

  .court-grid-hour {
    flex: 0 0 var(--slot-min-width);
    inline-size: var(--slot-min-width);
    padding: var(--space-2) 0;
    text-align: center;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
  }

  .court-grid-cells { display: flex; gap: var(--slot-gap); padding: var(--slot-gap) 0; }
  .court-grid-row + .court-grid-row { border-block-start: 1px solid var(--color-border-normal); }

  .court-cell {
    flex: 0 0 calc(var(--slot-min-width) - var(--slot-gap));
    inline-size: calc(var(--slot-min-width) - var(--slot-gap));
    block-size: var(--slot-height);
    border-radius: var(--slot-radius);
    border: 1px solid var(--color-slot-free-border);
    background: var(--color-slot-free);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-1);
    text-decoration: none;
    font-size: var(--text-xs);
    overflow: hidden;
  }

  /* ‼️ ช่องว่างเป็นพื้นขาวขอบเขียวจาง — เขียวแปลว่า "จองได้" ไม่ใช่ "สำเร็จ" ในบริบทนี้
     ช่องที่จองแล้วเป็นบล็อกทึบ navy ซึ่งอ่านชื่อลูกค้าบนนั้นได้ */
  a.court-cell[data-state="free"]:hover,
  button.court-cell[data-state="free"]:hover {
    background: var(--color-tint-success);
    border-color: var(--color-slot-selected);
  }

  .court-cell[data-state="booked"] {
    background: var(--color-slot-booked);
    border-color: var(--color-slot-booked);
    color: var(--color-slot-on-booked);
  }

  .court-cell[data-state="partial"] {
    background: var(--color-slot-held);
    border-color: var(--color-state-warning);
    color: var(--color-text-strong);
  }

  .court-cell[data-state="blocked"] {
    background: var(--color-slot-blocked);
    border-color: var(--color-border-strong);
    border-style: dashed;
    color: var(--color-text-muted);
  }

  /* ‼️ "ปิดซ่อม" กับ "มีคลาสเรียน" ต้องแยกออกจากกันด้วยสายตา
     คนรับโทรศัพท์ตอบลูกค้าคนละแบบ — อันหนึ่งบอกว่าพรุ่งนี้มาได้ อีกอันชวนสมัครเรียน
     เทาเหมือนกันหมด แปลว่าต้องเปิดอีกหน้าทุกครั้งที่มีคนถาม */
  .court-cell[data-state="blocked"][data-reason="private"],
  .court-cell[data-state="blocked"][data-reason="event"],
  .court-cell[data-state="blocked"][data-reason="tournament"] {
    background: var(--color-tint-info);
    border-color: var(--color-state-info);
    border-style: solid;
    color: var(--color-text-strong);
  }

  .court-cell[data-state="past"],
  .court-cell[data-state="closed"] {
    background: var(--color-slot-past);
    border-color: var(--color-border-normal);
    opacity: .7;
  }

  .court-cell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* เวลาที่เส้นแบ่งช่อง พร้อมขีดบอกเส้น — ขอบของแถบการจองชนเส้นเวลาเริ่ม/จบพอดี */
  .court-grid-hour { text-align: start; }
  .court-grid-tick { position: relative; display: inline-block; padding-inline-start: var(--space-1); }
  .court-grid-tick::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-inline-start: 1px solid var(--color-border-normal);
  }

  /* ‼️ ช่องของการจอง/ช่วงปิดเดียวกันต่อเป็นแถบเดียว (data-run) — ปิดช่องไฟ · มุมมนเฉพาะหัวท้าย
        ชื่อ + เวลาเขียนครั้งเดียวที่หัวแถบ ยาวได้เท่าแถบ (data-run-len = จำนวนช่อง) */
  .court-cell:is([data-run="mid"], [data-run="end"]) { margin-inline-start: calc(var(--slot-gap) * -1); flex-basis: var(--slot-min-width); inline-size: var(--slot-min-width); }
  .court-cell[data-run="start"] { border-start-end-radius: 0; border-end-end-radius: 0; }
  .court-cell[data-run="mid"] { border-radius: 0; }
  .court-cell[data-run="end"] { border-start-start-radius: 0; border-end-start-radius: 0; }
  .court-cell:is([data-run="mid"], [data-run="end"])[data-state] { border-inline-start-color: transparent; }
  .court-cell:is([data-run="start"], [data-run="solo"]) { position: relative; z-index: 1; overflow: visible; justify-content: flex-start; }
  .court-cell[data-run] .court-cell-text { display: block; flex: none; max-inline-size: calc(var(--slot-min-width) - var(--space-2)); }
  .court-cell[data-run-len="2"] .court-cell-text { max-inline-size: calc(var(--slot-min-width) * 2 - var(--space-3)); }
  .court-cell[data-run-len="3"] .court-cell-text { max-inline-size: calc(var(--slot-min-width) * 3 - var(--space-3)); }
  .court-cell[data-run-len="4"] .court-cell-text { max-inline-size: calc(var(--slot-min-width) * 4 - var(--space-3)); }
  .court-cell[data-run-len="5"] .court-cell-text { max-inline-size: calc(var(--slot-min-width) * 5 - var(--space-3)); }
  .court-cell[data-run-len="6"] .court-cell-text { max-inline-size: calc(var(--slot-min-width) * 6 - var(--space-3)); }
  .court-cell:is([data-run-len="7"], [data-run-len="8"], [data-run-len="9"], [data-run-len="10"], [data-run-len="11"], [data-run-len="12"],
                 [data-run-len="13"], [data-run-len="14"], [data-run-len="15"], [data-run-len="16"], [data-run-len="17"], [data-run-len="18"],
                 [data-run-len="19"], [data-run-len="20"], [data-run-len="21"], [data-run-len="22"], [data-run-len="23"], [data-run-len="24"]) .court-cell-text {
    max-inline-size: calc(var(--slot-min-width) * 7 - var(--space-3));
  }
  .court-cell-range { margin-inline-end: var(--space-1); font-variant-numeric: tabular-nums; opacity: .85; font-weight: var(--weight-normal); }
  .court-cell[data-run] .court-cell-text { overflow: hidden; }

  .court-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-start: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .court-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }

  .court-legend-swatch {
    inline-size: var(--space-4);
    block-size: var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-slot-free-border);
    background: var(--color-slot-free);
  }

  .court-legend-swatch[data-state="booked"]  { background: var(--color-slot-booked); border-color: var(--color-slot-booked); }
  .court-legend-swatch[data-state="partial"] { background: var(--color-slot-held); border-color: var(--color-state-warning); }
  .court-legend-swatch[data-state="blocked"] { background: var(--color-slot-blocked); border-style: dashed;
    border-color: var(--color-border-strong); }
  .court-legend-swatch[data-state="past"],
  .court-legend-swatch[data-state="closed"]  { background: var(--color-slot-past); border-color: var(--color-border-normal); }
}

@layer components {

  /* ---------------------------------------------------------------- กราฟ */

  .chart { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }

  .chart-bars {
    display: flex;
    align-items: flex-end;
    gap: var(--chart-bar-gap);
    block-size: var(--chart-height);
  }

  .chart-bar-col {
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    block-size: 100%;
  }

  .chart-bar-value {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .chart-bar-track { flex: 1 1 auto; inline-size: 100%; display: flex; align-items: flex-end; }

  .chart-bar-fill {
    inline-size: 100%;
    border-radius: var(--chart-bar-radius) var(--chart-bar-radius) 0 0;
    background: var(--color-chart-series1);
    min-block-size: 2px;
  }

  .chart-bar[data-series="2"] .chart-bar-fill { background: var(--color-chart-series2); }
  .chart-bar[data-series="3"] .chart-bar-fill { background: var(--color-chart-series3); }
  .chart-bar[data-series="4"] .chart-bar-fill { background: var(--color-chart-series4); }
  .chart-bar[data-series="5"] .chart-bar-fill { background: var(--color-chart-series5); }

  .chart-bar-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chart-line svg { inline-size: 100%; block-size: var(--chart-height); overflow: visible; }
  .chart-grid   { stroke: var(--color-chart-grid); stroke-width: var(--chart-grid-stroke); vector-effect: non-scaling-stroke; }
  .chart-area   { fill: var(--color-tint-info); opacity: .5; }
  .chart-stroke { fill: none; stroke: var(--color-chart-series1); stroke-width: 2px; vector-effect: non-scaling-stroke;
    stroke-linejoin: round; stroke-linecap: round; }

  .chart-axis {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* --------------------------------------------------------- heatmap */

  .heatmap-wrap { overflow-x: auto; display: flex; flex-direction: column; gap: var(--space-3); }
  .heatmap { border-collapse: separate; border-spacing: 2px; min-inline-size: max-content; }

  .heatmap th {
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
    padding: 0 var(--space-1);
    text-align: center;
  }

  .heatmap th[scope="row"] { text-align: end; padding-inline-end: var(--space-2); }

  .heatmap td {
    inline-size: var(--space-6);
    block-size: var(--space-6);
    border-radius: var(--radius-sm);
    background: var(--color-tint-neutral);
  }

  /* ‼️ ความเข้มของสีเดียว ไม่ใช่ไล่หลายสี — คนอ่านไม่ต้องจำว่าสีไหนแปลว่ามากกว่า */
  .heatmap td[data-level="1"] { background: var(--color-heat-level1); }
  .heatmap td[data-level="2"] { background: var(--color-heat-level2); }
  .heatmap td[data-level="3"] { background: var(--color-heat-level3); color: var(--color-text-on-dark); }
  .heatmap td[data-level="4"] { background: var(--color-heat-level4); color: var(--color-text-on-dark); }

  .heatmap-scale { display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); color: var(--color-text-muted); }

  .heatmap-swatch {
    inline-size: var(--space-4);
    block-size: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-tint-neutral);
  }

  .heatmap-swatch[data-level="1"] { background: var(--color-heat-level1); }
  .heatmap-swatch[data-level="2"] { background: var(--color-heat-level2); }
  .heatmap-swatch[data-level="3"] { background: var(--color-heat-level3); }
  .heatmap-swatch[data-level="4"] { background: var(--color-heat-level4); }

  /* ‼️ บนจอแคบ ช่องตารางยอมแคบลงแทนการเลื่อนซ้ายขวา
     ผังความหนาแน่นอ่านจาก "รูปรวม" — ช่องเล็กลงแต่เห็นทั้งสัปดาห์ อ่านได้ดีกว่าช่องใหญ่ที่เห็นทีละครึ่ง
     และที่สำคัญกว่า: ตารางที่เลื่อนได้ทำให้ทั้งหน้ารายงานว่ากว้างเกินจอ */
  @media (max-width: 900px) {
    .heatmap { min-inline-size: 0; inline-size: 100%; table-layout: fixed; border-spacing: 1px; }
    .heatmap td { inline-size: auto; block-size: var(--space-5); }
    .heatmap th { padding: 0; font-size: 10px; }
    .heatmap th[scope="row"] { padding-inline-end: var(--space-1); }
  }

  /* --------------------------------------------------- ป้ายและปุ่มเพิ่มเติม */

  .badge[data-tone="success"]   { background: var(--color-tint-success);
    color: var(--color-state-success); }
  .badge[data-tone="warning"]   { background: var(--color-tint-warning);
    color: var(--color-state-warning); }
  .badge[data-tone="danger"]    { background: var(--color-tint-danger);
    color: var(--color-state-danger); }
  .badge[data-tone="info"]      { background: var(--color-tint-info);
    color: var(--color-state-info); }
  .badge[data-tone="neutral"]   { background: var(--color-tint-neutral); color: var(--color-text-normal); }
  .badge[data-tone="highlight"] { background: var(--color-tint-highlight);
    color: var(--color-text-strong); }
  .badge .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  .btn-secondary {
    background: var(--color-surface-card);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border-strong);
  }

  .btn-secondary:hover { background: var(--color-surface-raised); }

  .toolbar-actions { display: flex; gap: var(--space-2); align-items: center; margin-inline-start: auto; }
  .field-search { flex: 1 1 var(--layout-field-min-width); }
}

@layer components {

  /* ความสูงของแท่งกราฟ — ขั้นละ 2%
     ‼️ ต้องเป็นคลาส ไม่ใช่ style="" เพราะกฎเหล็กข้อ 15 ห้าม inline style
        และ CSP ที่ไม่มี unsafe-inline ก็บล็อก style attribute ในบางการตั้งค่าด้วย */
  .chart-bar-fill[data-height="0"] { block-size: 0%; }
  .chart-bar-fill[data-height="2"] { block-size: 2%; }
  .chart-bar-fill[data-height="4"] { block-size: 4%; }
  .chart-bar-fill[data-height="6"] { block-size: 6%; }
  .chart-bar-fill[data-height="8"] { block-size: 8%; }
  .chart-bar-fill[data-height="10"] { block-size: 10%; }
  .chart-bar-fill[data-height="12"] { block-size: 12%; }
  .chart-bar-fill[data-height="14"] { block-size: 14%; }
  .chart-bar-fill[data-height="16"] { block-size: 16%; }
  .chart-bar-fill[data-height="18"] { block-size: 18%; }
  .chart-bar-fill[data-height="20"] { block-size: 20%; }
  .chart-bar-fill[data-height="22"] { block-size: 22%; }
  .chart-bar-fill[data-height="24"] { block-size: 24%; }
  .chart-bar-fill[data-height="26"] { block-size: 26%; }
  .chart-bar-fill[data-height="28"] { block-size: 28%; }
  .chart-bar-fill[data-height="30"] { block-size: 30%; }
  .chart-bar-fill[data-height="32"] { block-size: 32%; }
  .chart-bar-fill[data-height="34"] { block-size: 34%; }
  .chart-bar-fill[data-height="36"] { block-size: 36%; }
  .chart-bar-fill[data-height="38"] { block-size: 38%; }
  .chart-bar-fill[data-height="40"] { block-size: 40%; }
  .chart-bar-fill[data-height="42"] { block-size: 42%; }
  .chart-bar-fill[data-height="44"] { block-size: 44%; }
  .chart-bar-fill[data-height="46"] { block-size: 46%; }
  .chart-bar-fill[data-height="48"] { block-size: 48%; }
  .chart-bar-fill[data-height="50"] { block-size: 50%; }
  .chart-bar-fill[data-height="52"] { block-size: 52%; }
  .chart-bar-fill[data-height="54"] { block-size: 54%; }
  .chart-bar-fill[data-height="56"] { block-size: 56%; }
  .chart-bar-fill[data-height="58"] { block-size: 58%; }
  .chart-bar-fill[data-height="60"] { block-size: 60%; }
  .chart-bar-fill[data-height="62"] { block-size: 62%; }
  .chart-bar-fill[data-height="64"] { block-size: 64%; }
  .chart-bar-fill[data-height="66"] { block-size: 66%; }
  .chart-bar-fill[data-height="68"] { block-size: 68%; }
  .chart-bar-fill[data-height="70"] { block-size: 70%; }
  .chart-bar-fill[data-height="72"] { block-size: 72%; }
  .chart-bar-fill[data-height="74"] { block-size: 74%; }
  .chart-bar-fill[data-height="76"] { block-size: 76%; }
  .chart-bar-fill[data-height="78"] { block-size: 78%; }
  .chart-bar-fill[data-height="80"] { block-size: 80%; }
  .chart-bar-fill[data-height="82"] { block-size: 82%; }
  .chart-bar-fill[data-height="84"] { block-size: 84%; }
  .chart-bar-fill[data-height="86"] { block-size: 86%; }
  .chart-bar-fill[data-height="88"] { block-size: 88%; }
  .chart-bar-fill[data-height="90"] { block-size: 90%; }
  .chart-bar-fill[data-height="92"] { block-size: 92%; }
  .chart-bar-fill[data-height="94"] { block-size: 94%; }
  .chart-bar-fill[data-height="96"] { block-size: 96%; }
  .chart-bar-fill[data-height="98"] { block-size: 98%; }
  .chart-bar-fill[data-height="100"] { block-size: 100%; }
}

@layer components {

  /* ------------------------------------------------------- ตะแกรงทั่วไป */

  .grid-2, .grid-3, .grid-4 { display: grid; gap: var(--space-5); }

  @media (min-width: 720px) {
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* ‼️ สี่คอลัมน์ใช้กับการ์ดสั้นๆ อย่างหน้าขายหน้าร้านเท่านั้น
       การ์ดที่มีข้อความยาวในสี่คอลัมน์จะแคบจนอ่านไม่ออกบนจอ 1366 */
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .stack { display: flex; flex-direction: column; gap: var(--space-5); }
  .stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
  .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    flex-wrap: wrap; }

  /* แถวป้ายที่ตัดบรรทัดได้ — ใช้กับชุดป้ายที่จำนวนไม่คงที่ เช่น ความเชี่ยวชาญของโค้ช */
  .badge-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  /* ‼️ ข้อความสองบรรทัดในแถว row-between — บรรทัดหลักกับบรรทัดขยาย
     ไม่แยกบรรทัด แล้วชื่อกับคำขยายจะไหลติดกันเป็นประโยคเดียวที่อ่านไม่ออกว่าตรงไหนจบ */
  .row-text { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }

  /* ------------------------------------------------------ การ์ดของเว็บสนาม */

  .tile-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
  }

  a.tile-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }

  .tile-media {
    inline-size: 100%;
    aspect-ratio: var(--court-card-image-ratio);
    object-fit: cover;
    background: var(--color-surface-court);
    display: block;
  }

  .tile-card[data-shape="portrait"] .tile-media { aspect-ratio: var(--coach-card-image-ratio); }
  .tile-card[data-shape="square"] .tile-media { aspect-ratio: var(--product-card-image-ratio); }

  .tile-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--court-card-gap); flex: 1 1 auto; }
  .tile-title { font-weight: var(--weight-medium); color: var(--color-text-strong); font-size: var(--product-card-name-size); }
  .tile-meta { color: var(--color-text-muted); font-size: var(--product-card-meta-size); display: flex;
    flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .tile-foot { margin-block-start: auto; display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-3); }

  .tile-price { font-weight: var(--weight-bold); color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
  .tile-price small { font-weight: var(--weight-normal); color: var(--color-text-muted); font-size: var(--text-sm); }

  /* ‼️ ตัวเลข "ว่างวันนี้" ใช้พื้น lime ซึ่งอ่านออกเพราะตัวอักษรเป็น navy
     lime เป็นตัวอักษรบนพื้นขาวไม่ได้ ได้ contrast แค่ 1.24:1 */
  .tile-free {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-brand-highlight);
    color: var(--color-brand-on-highlight);
    border-radius: var(--radius-full);
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
  }

  .tile-full { color: var(--color-text-muted); font-size: var(--text-xs); }

  /* ---------------------------------------------------------- ตัวช่วยอื่น */

  .avatar {
    inline-size: var(--avatar-md);
    block-size: var(--avatar-md);
    border-radius: var(--radius-full);
    object-fit: cover;
    background: var(--color-surface-raised);
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
    flex: none;
  }

  .avatar[data-size="sm"] { inline-size: var(--avatar-sm); block-size: var(--avatar-sm); }
  .avatar[data-size="lg"] { inline-size: var(--avatar-lg); block-size: var(--avatar-lg); }
  .avatar[data-size="xl"] { inline-size: var(--avatar-xl); block-size: var(--avatar-xl); }

  .callout {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-normal);
    background: var(--color-tint-neutral);
    color: var(--color-text-normal);
    font-size: var(--text-sm);
  }

  .callout[data-tone="info"]    { background: var(--color-tint-info);    border-color: var(--color-state-info); }
  .callout[data-tone="warning"] { background: var(--color-tint-warning); border-color: var(--color-state-warning); }
  .callout[data-tone="danger"]  { background: var(--color-tint-danger);  border-color: var(--color-state-danger); }
  .callout[data-tone="success"] { background: var(--color-tint-success); border-color: var(--color-state-success); }
  .callout .icon { flex: none; }

  .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    list-style: none; padding: 0; margin: 0; font-size: var(--text-sm); }
  .breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
  .breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
  .breadcrumb a:hover { color: var(--color-text-strong); }
  .breadcrumb [aria-current="page"] { color: var(--color-text-strong); }
  .breadcrumb .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-text-muted); }

  /* ‼️ เส้นเวลาใช้ไอคอนเป็นหมุด ไม่ใช่จุดกลมเปล่า
     จุดกลมเหมือนกันทุกบรรทัดทำให้ต้องอ่านข้อความทุกบรรทัดเพื่อหาว่าอันไหนคือการคืนเงิน
     ไอคอนกับสีทำให้กวาดตาหาเหตุการณ์ที่สนใจได้โดยไม่ต้องอ่าน */
  .timeline { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 0; }

  .timeline-item {
    display: grid;
    grid-template-columns: var(--space-8) 1fr;
    gap: var(--space-3);
    position: relative;
    padding-block-end: var(--space-5);
  }

  .timeline-item:last-child { padding-block-end: 0; }

  .timeline-mark {
    grid-column: 1;
    inline-size: var(--space-8);
    block-size: var(--space-8);
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    background: var(--color-tint-neutral);
    border: 1px solid var(--color-border-normal);
    color: var(--color-text-muted);
    z-index: 1;
  }

  .timeline-mark .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  .timeline-item[data-tone="success"] .timeline-mark {
    background: var(--color-tint-success); border-color: var(--color-state-success); color: var(--color-state-success);
  }
  .timeline-item[data-tone="warning"] .timeline-mark {
    background: var(--color-tint-warning); border-color: var(--color-state-warning); color: var(--color-state-warning);
  }
  .timeline-item[data-tone="danger"] .timeline-mark {
    background: var(--color-tint-danger); border-color: var(--color-state-danger); color: var(--color-state-danger);
  }
  .timeline-item[data-tone="info"] .timeline-mark {
    background: var(--color-tint-info); border-color: var(--color-state-info); color: var(--color-state-info);
  }

  /* เส้นต่อระหว่างหมุด — เริ่มใต้หมุดพอดี ไม่ทับมัน */
  .timeline-item:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block: var(--space-8) 0;
    inset-inline-start: calc(var(--space-8) / 2 - var(--timeline-line) / 2);
    inline-size: var(--timeline-line);
    background: var(--color-border-normal);
  }

  /* ‼️ ต้องบังคับให้อยู่คอลัมน์ 2 เสมอ ไม่ใช่ปล่อยให้ grid วางเอง
     หน้าที่ลืมใส่ .timeline-mark จะได้เนื้อหาตกไปคอลัมน์แรกที่กว้าง 32px
     แล้วข้อความถูกบีบเหลือตัวอักษรละบรรทัดทั้งรายการ ซึ่งเกิดขึ้นจริงบนแดชบอร์ด
     บังคับคอลัมน์ไว้ที่นี่ แปลว่าอาการนั้นจะเหลือแค่ "ไม่มีหมุด" ซึ่งยังอ่านออก */
  .timeline-body {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
  }

  .timeline-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }

  .timeline-title { color: var(--color-text-strong); font-size: var(--text-sm);
    font-weight: var(--weight-medium); }
  .timeline-title a { color: inherit; }

  .timeline-amount { color: var(--color-text-strong); font-size: var(--text-sm); flex: none; }

  .timeline-change { color: var(--color-text-normal); font-size: var(--text-sm); }

  /* หมายเหตุที่คนพิมพ์เอง — แยกออกจากข้อความที่ระบบสร้าง ด้วยเส้นนำหน้า */
  .timeline-note {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    border-inline-start: 2px solid var(--color-border-normal);
    padding-inline-start: var(--space-3);
  }

  .timeline-meta { color: var(--color-text-muted); font-size: var(--text-xs); }
}

@layer components {

  /* ------------------------------------------------------ หัวรายงานและพิมพ์ */

  .report-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
    padding: var(--space-5);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
  }

  .report-range { display: flex; gap: var(--space-2); flex-wrap: wrap; }

  .report-chip {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-normal);
    color: var(--color-text-normal);
    text-decoration: none;
    font-size: var(--text-sm);
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }

  .report-chip[aria-current="true"] {
    background: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
    border-color: var(--color-brand-primary);
  }

  /* ‼️ ต้องเขียน minmax(0, 1fr) ไม่ใช่ 1fr เฉยๆ
     track ของ grid มีขั้นต่ำเท่ากับ min-content ของสิ่งที่อยู่ข้างในโดยปริยาย
     การ์ดที่มีตารางกว้างจึงดัน track ให้กว้างเกินจอ แล้วทั้งหน้าเลื่อนซ้ายขวาได้
     วัดที่ 375px ได้ track 530.8px ทั้งที่กรอบกว้าง 351px */

  /* ----------------------------------------------------- แดชบอร์ดและวงแหวน

     ‼️ สองคอลัมน์: คอลัมน์หลักคือ "วันนี้เป็นยังไง" · รางขวาคือ "ต้องทำอะไรต่อ"
        รางขวาไม่ยุบลงล่างจนกว่าจะแคบกว่า 1280px เพราะงานค้างที่อยู่ใต้กราฟสามจอ
        คือของที่ไม่มีใครเลื่อนลงไปเห็น ซึ่งเท่ากับไม่มี */
  .dash-layout {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr);
  }

  @media (min-width: 1280px) {
    .dash-layout { grid-template-columns: minmax(0, 1fr) var(--layout-aside-width); align-items: start; }
  }

  .dash-main,
  .dash-rail { display: flex; flex-direction: column; gap: var(--space-5); min-inline-size: 0; }

  /* ---- งานที่ต้องทำ */
  .task-list { display: flex; flex-direction: column; gap: var(--space-1); }

  .task-list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: 44px;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    color: var(--color-text-normal);
    text-decoration: none;
  }

  .task-list a:hover { background: var(--color-surface-raised); }

  .task-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 30px;
    block-size: 30px;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--color-tint-neutral);
    color: var(--color-text-muted);
  }

  .task-icon .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
  .task-icon[data-tone="warning"] { background: var(--color-tint-warning); color: var(--color-state-warning); }
  .task-icon[data-tone="danger"]  { background: var(--color-tint-danger);  color: var(--color-state-danger); }
  .task-icon[data-tone="info"]    { background: var(--color-tint-info);    color: var(--color-state-info); }

  .task-label { flex: 1; min-inline-size: 0; font-size: var(--text-sm); }

  .task-count {
    flex: 0 0 auto;
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
  }

  /* ‼️ งานที่ไม่เหลือแล้วยังต้องแสดง แต่จางลง
     ซ่อนไปเลยแล้วผู้ใช้จะไม่รู้ว่าระบบตรวจเรื่องนั้นให้อยู่ และเข้าใจว่าหน้านี้พัง */
  .task-list a[data-done="true"] { opacity: .5; }
  .task-list a[data-done="true"] .task-count { color: var(--color-text-muted); font-weight: var(--weight-normal); }

  /* ---- ทางลัด */
  .quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }

  .quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 76px;
    padding: var(--space-3);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
    background: var(--color-surface-page);
    color: var(--color-text-normal);
    font-size: var(--text-sm);
    text-align: center;
    text-decoration: none;
  }

  .quick-action:hover { border-color: var(--color-brand-accent); color: var(--color-brand-accent); }
  .quick-action .icon { inline-size: var(--icon-base); block-size: var(--icon-base); }

  /* ---- วงแหวนสัดส่วน */
  .chart-donut { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }

  .chart-donut-body {
    position: relative;
    inline-size: var(--chart-donut-size);
    block-size: var(--chart-donut-size);
  }

  .chart-donut-ring { inline-size: 100%; block-size: 100%; }
  .chart-donut-track { stroke: var(--color-surface-raised); }

  .chart-donut-arc[data-series="1"] { stroke: var(--color-chart-series1); }
  .chart-donut-arc[data-series="2"] { stroke: var(--color-chart-series2); }
  .chart-donut-arc[data-series="3"] { stroke: var(--color-chart-series3); }
  .chart-donut-arc[data-series="4"] { stroke: var(--color-chart-series4); }
  .chart-donut-arc[data-series="5"] { stroke: var(--color-chart-grid); }
  /* 6 = สีชุดที่ 5 (รายได้อุปกรณ์เช่าในโดนัทรายได้ตามบริการ) — 5 เป็นสีเทา "ว่าง/เหลือ" อยู่แล้ว */
  .chart-donut-arc[data-series="6"] { stroke: var(--color-chart-series5); }

  .chart-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
  }

  .chart-donut-center strong {
    font-size: var(--text-2xl);
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
  }

  .chart-donut-center span { font-size: var(--text-xs); color: var(--color-text-muted); }

  .chart-donut-legend { display: flex; flex-direction: column; gap: var(--space-2); inline-size: 100%; }

  .chart-donut-key { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

  .chart-donut-dot {
    inline-size: 10px;
    block-size: 10px;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--color-chart-grid);
  }

  .chart-donut-key[data-series="1"] .chart-donut-dot { background: var(--color-chart-series1); }
  .chart-donut-key[data-series="2"] .chart-donut-dot { background: var(--color-chart-series2); }
  .chart-donut-key[data-series="3"] .chart-donut-dot { background: var(--color-chart-series3); }
  .chart-donut-key[data-series="4"] .chart-donut-dot { background: var(--color-chart-series4); }
  .chart-donut-key[data-series="6"] .chart-donut-dot { background: var(--color-chart-series5); }

  .chart-donut-name { flex: 1; min-inline-size: 0; color: var(--color-text-normal); }
  .chart-donut-num { color: var(--color-text-strong); font-variant-numeric: tabular-nums; }

  /* ---- หน้าค้นหารวม */
  .search-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
  }

  .search-bar input { flex: 1; min-inline-size: 0; padding-inline-start: var(--space-10); }

  .search-bar-icon {
    position: absolute;
    inset-inline-start: calc(var(--space-3) + var(--space-3));
    display: inline-flex;
    color: var(--color-text-muted);
    pointer-events: none;
  }

  .search-count { color: var(--color-text-muted); font-size: var(--text-sm); }

  .report-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1024px) { .report-grid[data-cols="2"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

  /* ‼️ หน้าพิมพ์ต้องเหลือเฉพาะเนื้อหา — เมนู ปุ่ม และตัวกรองไม่มีความหมายบนกระดาษ */
  @media print {
    .sidebar, .topbar, .toolbar, .page-actions, .report-range, .sticky-cta,
    .public-bar, .public-footer, .tabs { display: none !important; }

    .page { max-inline-size: none; padding: 0; }
    .card { border-color: var(--color-border-strong); break-inside: avoid; }
    .kpi-row { break-inside: avoid; }
    .court-grid-wrap { overflow: visible; }
  }

  /* ------------------------------------------------------- ตัวเลือกช่องเวลา */

  .slot {
    min-block-size: 44px;
    border-radius: var(--slot-radius);
    border: 1px solid var(--color-slot-free-border);
    background: var(--color-slot-free);
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-sm);
    cursor: pointer;
  }

  .slot:hover:not(:disabled) { border-color: var(--color-brand-accent); background: var(--color-tint-success); }

  .slot:disabled {
    background: var(--color-slot-past);
    color: var(--color-text-muted);
    border-color: var(--color-border-normal);
    cursor: not-allowed;
  }

  .slot[aria-pressed="true"] {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
    font-weight: var(--weight-medium);
  }

  /* --------------------------------------------------------- หน้าขายของ OMC */

  .hero-sales {
    display: grid;
    gap: var(--hero-gap);
    padding-block: var(--space-16);
    align-items: center;
  }

  /* ‼️ ลูกของ grid มี min-inline-size เป็น auto โดยปริยาย = ไม่ยอมแคบกว่าเนื้อหาของตัวเอง
     การ์ดตารางเวลาในหน้าแรกจึงดันคอลัมน์ให้กว้าง 512px บนจอ 375px
     แล้วหัวเรื่องกับปุ่มถูกดันตามจนล้นออกนอกจอ
     ตั้งเป็น 0 เพื่อให้ยอมแคบลงแล้วให้เนื้อหาข้างในจัดการ overflow ของตัวเอง */
  .hero-sales > * { min-inline-size: 0; }

  @media (min-width: 900px) { .hero-sales { grid-template-columns: 1.05fr .95fr; } }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-tint-highlight);
    color: var(--color-text-strong);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    inline-size: fit-content;
  }

  .hero-title {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    margin-block: var(--space-4);
  }

  @media (min-width: 900px) { .hero-title { font-size: var(--text-4xl); } }

  .hero-lead { color: var(--color-text-normal); font-size: var(--text-lg); max-inline-size: 54ch; }
  .hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block-start: var(--space-6); }
  .hero-points { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-6);
    color: var(--color-text-muted); font-size: var(--text-sm); }
  .hero-points span { display: inline-flex; align-items: center; gap: var(--space-2); }
  .hero-points .icon { color: var(--color-brand-accent); }

  .feature-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);
  }

  .feature-item .icon { color: var(--color-brand-accent); }
  .feature-item h3 { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-text-strong); }
  .feature-item p { color: var(--color-text-muted); font-size: var(--text-sm); }

  .price-card { position: relative; }
  .price-card[data-featured="true"] { border-color: var(--color-brand-primary); box-shadow: var(--shadow-lg); }

  .price-amount {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
  }

  .price-amount small { font-size: var(--text-base); font-weight: var(--weight-normal); color: var(--color-text-muted); }
  .price-list { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
  .price-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
  .price-list .icon { color: var(--color-state-success); flex: none; }
  .price-list li[data-included="false"] { color: var(--color-text-muted); }
  .price-list li[data-included="false"] .icon { color: var(--color-text-muted); }

  .faq-item { border-block-end: 1px solid var(--color-border-normal); padding-block: var(--space-4); }
  .faq-item summary { cursor: pointer; font-weight: var(--weight-medium); color: var(--color-text-strong); }
  .faq-item p { color: var(--color-text-muted); margin-block-start: var(--space-2); }
}

@layer components {
  /* ปุ่มรองที่ไม่มีพื้น — ใช้กับการกระทำที่ไม่ใช่ทางหลักของหน้า */
  .btn-ghost {
    background: transparent;
    color: var(--color-text-normal);
    border: 1px solid transparent;
  }

  .btn-ghost:hover { background: var(--color-surface-raised); color: var(--color-text-strong); }

  .card-head-text { display: flex; flex-direction: column; min-inline-size: 0; }
}

/* ═══════════════════════════════════════════════ ฟอร์มและกล่องของหน้าหลังบ้าน
   ‼️ ทุกค่าต้องมาจาก token ใน DESIGN.md เท่านั้น ห้ามใส่ตัวเลขสีหรือระยะตรงๆ
      ค่าที่เขียนตรงๆ จะไม่เปลี่ยนตามธีม แล้วโหมดมืดจะมีจุดที่อ่านไม่ออกเสมอ */

.form-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-normal);
}

/* ‼️ บนมือถือปุ่มหลักต้องอยู่ล่างสุดและกว้างเต็ม — นิ้วโป้งเอื้อมถึงง่ายที่สุดตรงนั้น */
@media (max-width: 640px) {
    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

/* ฟอร์มสั้นที่แทรกอยู่กลางหน้ารายการ — ไม่ต้องมีเส้นคั่นเหมือนฟอร์มเต็มหน้า */
.inline-form {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
    margin-block: var(--space-4);
}

.inline-form .form-actions {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ‼️ กล่องของอันตราย แยกออกจากปุ่มบันทึกด้วยระยะและเส้นขอบสีเตือน
      วางปุ่มลบไว้ข้างปุ่มบันทึกเมื่อไหร่ จะมีคนกดพลาด */
.danger-zone {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: var(--space-12);
    padding: var(--space-4);
    border: 1px solid var(--color-state-danger);
    border-radius: var(--radius-md);
    background: var(--color-tint-danger);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--layout-field-min-width), 1fr));
    gap: var(--space-2) var(--space-4);
}

.checkbox-item {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.checkbox-item:hover {
    background: var(--color-tint-neutral);
}

/* ═══════════════════════════════════════════════ เช็กลิสต์ SEO */

.check-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-item {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-tint-neutral);
}

/* ‼️ ข้อที่ผ่านกับไม่ผ่านต้องต่างกันด้วยไอคอนด้วย ไม่ใช่สีอย่างเดียว
      คนตาบอดสีจะแยกเขียว/แดงไม่ออก — ไอคอน check กับ close ต่างกันด้วยรูปร่าง */
.check-item[data-ok="true"] {
    background: var(--color-tint-success);
    color: var(--color-state-success);
}

.check-item[data-ok="false"] {
    background: var(--color-tint-warning);
    color: var(--color-state-warning);
}

.check-item span {
    flex: 1;
    color: var(--color-text-normal);
}

/* ═══════════════════════════════════════════════ แพ็กเกจ OMC ที่ใช้อยู่ (หน้า tenant)

   ‼️ สรุปของที่มีจริงเท่านั้น — ไม่มีการ์ด "ยังไม่รวม" / ราคา add-on / ปุ่มเปิดโมดูล */

.plan-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

@media (min-width: 1024px) {
    .plan-summary { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
    .plan-summary-side { border-inline-start: 1px solid var(--color-border-normal); padding-inline-start: var(--space-5); }
}

.plan-summary-main { display: flex; gap: var(--space-4); align-items: flex-start; }

.plan-summary-icon,
.active-module-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 56px;
    block-size: 56px;
    border-radius: var(--radius-lg);
    background: var(--color-tint-success);
    color: var(--color-state-success);
}

.plan-summary-text { display: grid; gap: var(--space-2); min-inline-size: 0; }
.plan-summary-kicker { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.plan-summary-name { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.plan-summary-name h2 { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-text-strong); letter-spacing: 0.02em; }
.plan-summary-desc { margin: 0; color: var(--color-text-muted); line-height: var(--leading-normal); }
.plan-summary-side { display: grid; gap: var(--space-4); }
.plan-summary-link { justify-self: end; }

.active-modules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

@media (min-width: 640px) { .active-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .active-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.active-module {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
    background: var(--color-surface-card);
}

.active-module-icon { inline-size: 48px; block-size: 48px; border-radius: var(--radius-md); }
.active-module-text { display: grid; gap: var(--space-2); justify-items: start; min-inline-size: 0; }
.active-module-text h3 { margin: 0; font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.active-module-text p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-muted); }

@media (max-width: 639px) {
    .plan-summary-link { justify-self: stretch; justify-content: center; }
    .plan-summary-icon { inline-size: 48px; block-size: 48px; }
}

/* ═══════════════════════════════════════════════ หน้าขายหน้าร้าน (POS Lite · 2026-10-19)
   จอแบ่ง สินค้า 2/3 · ตะกร้า 1/3 (ตะกร้าติดจอเมื่อเลื่อน) · มือถือ/แท็บเล็ตแนวตั้ง = ตะกร้าลงล่าง */

.pos-toolbar { align-items: center; }
/* หน้าขายไม่มีหัวเพจ (ผู้ใช้สั่ง 2026-10-20) — แถบสาขาเป็นแถวบางๆ ไม่ใช่การ์ดเต็ม ให้สินค้า/ตะกร้าขึ้นเหนือขอบจอ */
.toolbar.pos-toolbar { background: none; border: 0; box-shadow: none; padding: 0; margin-block-end: var(--space-3); flex-wrap: wrap; }
.toolbar.pos-toolbar .field { flex-direction: row; align-items: center; gap: var(--space-2); }
.pos-toolbar .field label { margin: 0; white-space: nowrap; }
.pos-toolbar select { min-block-size: 40px; }
.pos-shift-chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); min-block-size: 44px;
    border: 1px solid var(--color-border-normal); border-radius: var(--radius-full);
    background: var(--color-surface-card); color: var(--color-text-normal); text-decoration: none; font-size: var(--text-sm);
}
.pos-shift-chip strong { color: var(--color-brand-accent); font-weight: var(--weight-medium); }
.pos-shift-chip svg { inline-size: 18px; block-size: 18px; }
.pos-sold { align-items: center; flex-wrap: wrap; }
.pos-sold > span:first-of-type { flex: 1 1 18rem; }
.pos-sold-change { font-size: var(--text-lg); }
.pos-sold-actions { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
/* เปิดกะแบบ popup (ผู้ใช้สั่ง 2026-10-27) — หน้าขายข้างหลังจางลงและกดไม่ได้ */
/* ม่านทับทั้งหน้า ขายหน้าร้าน (ใต้แถบเมนู) + กล่องเปิดกะลอยกลางจอ — เมนูบนกดได้ปกติ (ผู้ใช้สั่ง 2026-10-27 "เอาแบบทั้งหน้า · ลอยกลางจอ") */
.pos-stage { position: relative; }
.pos-stage[data-locked]::before { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-sticky) - 1); background: var(--color-overlay); } /* ใต้ .appbar (z-sticky) — เมนูบนไม่โดนม่าน */
.pos-layout[data-pos-locked] { pointer-events: none; user-select: none; }
.pos-stage > dialog.dialog-inline { position: fixed; inset-block-start: 50%; inset-inline: 0; margin: 0 auto; transform: translateY(-50%);
  z-index: calc(var(--z-sticky) - 1); inline-size: 100%; max-inline-size: min(560px, calc(100vw - var(--space-6)));
  max-block-size: calc(100dvh - var(--space-8)); overflow: auto; box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); }
dialog#pos-open-shift { max-width: min(560px, calc(100vw - var(--space-6))); }
#pos-open-shift .dialog-body { gap: var(--space-5); padding: var(--space-5); }
#pos-open-shift .dialog-foot { padding: var(--space-4) var(--space-5); }
#pos-open-shift .dialog-foot .btn-block { inline-size: 100%; min-block-size: 48px; }
.pos-open-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.pos-open-form .field { flex: 0 1 18rem; margin: 0; }
.pos-open-form > .btn { min-block-size: 44px; }

.pos-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: var(--space-4); align-items: start; }
.pos-catalog { padding: var(--space-4); min-inline-size: 0; }
.pos-catalog-head { display: flex; flex-direction: column; gap: var(--space-3); margin-block-end: var(--space-4); }
.pos-search { position: relative; }
.pos-search-row { display: flex; gap: var(--space-2); align-items: stretch; }
.pos-search-row .pos-search { flex: 1 1 auto; min-inline-size: 0; }
.pos-type { flex: 0 0 220px; margin: 0; }
.pos-type select { inline-size: 100%; min-block-size: 44px; block-size: 44px; }
@media (max-width: 640px) { .pos-search-row { flex-wrap: wrap; } .pos-type { flex-basis: 100%; } }
.pos-search > svg { position: absolute; inset-inline-start: var(--space-3); inset-block-start: 50%; translate: 0 -50%; inline-size: 18px; block-size: 18px; color: var(--color-text-muted); pointer-events: none; }
.pos-search input { inline-size: 100%; min-block-size: 44px; padding-inline-start: calc(var(--space-3) + 26px); }
.pos-cats { display: flex; gap: var(--space-2); overflow-x: auto; padding-block-end: var(--space-1); scrollbar-width: none; }
.pos-cat {
    flex: 0 0 auto; min-block-size: 36px; padding: 0 var(--space-3);
    border: 1px solid var(--color-border-normal); border-radius: var(--radius-full);
    background: var(--color-surface-card); color: var(--color-text-normal); font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.pos-cat-package { display: inline-flex; align-items: center; gap: var(--space-1); }
.pos-cat-package svg { inline-size: 16px; block-size: 16px; }
.pos-cat[aria-pressed="true"] { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-brand-on-primary); }
.pos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 คอลัมน์ (ผู้ใช้สั่ง 2026-10-20) */ grid-auto-rows: 1fr; gap: var(--space-3); } /* แถวสูงเท่ากันทุกแถว */
/* จอเล็ก (โน้ตบุ๊ก/แท็บเล็ตแนวนอน) การ์ดแคบเกินจนราคากับคงเหลือเบียดกัน — 3 คอลัมน์ · มือถือ 2 คอลัมน์ด้านล่าง */
@media (min-width: 769px) and (max-width: 1180px) { .pos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pos-tile { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; }
.pos-tile[hidden] { display: none; }
.pos-tile-btn {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
    inline-size: 100%; block-size: 100%; min-block-size: 108px; padding: var(--space-3);
    border: 1px solid var(--color-border-normal); border-radius: var(--radius-md);
    background: var(--color-surface-card); color: inherit; font: inherit; text-align: start; cursor: pointer;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.pos-tile-btn:hover:not(:disabled) { border-color: var(--color-brand-accent); box-shadow: var(--shadow-sm); }
.pos-tile-btn:focus-visible { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; }
.pos-tile[data-in-cart="true"] .pos-tile-btn { border-color: var(--color-brand-accent); border-width: 2px; padding: calc(var(--space-3) - 1px); }
/* ‼️ ของที่หมดต้องดูต่างชัดเจน ไม่ใช่แค่จางลง — จางลงอย่างเดียวจะถูกมองข้ามตอนเคาน์เตอร์ยุ่ง */
.pos-tile[data-sold-out="true"] .pos-tile-btn { border-style: dashed; opacity: .55; cursor: not-allowed; }
.pos-name {
    font-weight: var(--weight-medium); color: var(--color-text-strong); line-height: var(--leading-tight);
    /* ชื่อยาว 2 บรรทัดเสมอ (สั้นก็จองที่ไว้) — ราคา/คงเหลือตรงแนวกันทุกการ์ด */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-block-size: calc(2em * var(--leading-tight)); inline-size: 100%; overflow-wrap: anywhere;
}
/* พื้นที่รูปสินค้า 1:1 (115 · ผู้ใช้สั่ง 2026-10-19 "ขยายกรอบรูปเป็น 4:4") */
.pos-thumb {
    display: grid; place-items: center; inline-size: 100%; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: var(--radius-sm); background: var(--color-tint-neutral);
}
.pos-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.pos-thumb-empty { display: grid; place-items: center; color: var(--color-text-muted); opacity: .55; }
.pos-thumb-empty svg { inline-size: 32px; block-size: 32px; }
.product-photo-section { margin-block-start: var(--space-4); } /* เว้นจากการ์ดคู่ด้านบน เท่ากับช่องระหว่างการ์ดคู่ (ผู้ใช้แจ้ง 2026-10-20) */
.product-photo-box { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.product-photo-preview {
    flex: 0 0 200px; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden;
    border: 1px dashed var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-tint-neutral);
}
.product-photo-preview img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.product-photo-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
.product-photo-text { flex: 1 1 260px; min-inline-size: 0; }
.pos-tile-foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); inline-size: 100%; margin-block-start: auto; }
.pos-price { flex: 0 0 auto; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-brand-accent); white-space: nowrap; }
.pos-price small { font-size: var(--text-xs); font-weight: normal; color: var(--color-text-muted); }
.pos-stock { min-inline-size: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.pos-tile-badge {
    position: absolute; inset-block-start: calc(var(--space-2) * -1); inset-inline-end: calc(var(--space-2) * -1);
    min-inline-size: 26px; block-size: 26px; box-shadow: var(--shadow-sm); padding: 0 var(--space-1); display: grid; place-items: center;
    border-radius: var(--radius-full); background: var(--color-brand-accent); color: var(--color-brand-on-accent);
    font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.pos-tile-badge[hidden] { display: none; }
.pos-tile-qty { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.pos-tile-qty input { inline-size: 5rem; }
/* มี JS = แตะการ์ดเพื่อเพิ่ม · ช่องจำนวนซ่อน (ยังเป็นที่เก็บจำนวนที่ส่งไปกับฟอร์ม) */
.pos-layout[data-pos-ready="true"] .pos-tile-qty { display: none; }
.pos-no-match { margin: var(--space-4) 0 0; }

.pos-cart { position: sticky; inset-block-start: calc(var(--space-12) * 2 + var(--space-4)); /* ใต้เมนูบน+เมนูย่อยที่ตรึงไว้ */ display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.pos-cart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pos-cart-head h2 { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-lg); }
.pos-cart-head h2 svg { inline-size: 20px; block-size: 20px; }
.pos-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-block-size: 40vh; overflow-y: auto; }
.pos-line {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--space-2);
    padding-block: var(--space-2); border-block-end: 1px solid var(--color-border-normal);
}
.pos-line-name { font-size: var(--text-sm); color: var(--color-text-strong); overflow-wrap: anywhere; }
.pos-step { display: inline-flex; align-items: center; gap: var(--space-1); }
.pos-step-btn, .pos-line-remove {
    inline-size: 32px; block-size: 32px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--color-border-normal); border-radius: var(--radius-md);
    background: var(--color-surface-card); color: var(--color-text-normal); font: inherit; font-size: var(--text-lg); line-height: 1; cursor: pointer;
}
.pos-step-btn:disabled { opacity: .4; cursor: not-allowed; }
.pos-line-remove { border-color: transparent; color: var(--color-text-muted); }
.pos-step-n { min-inline-size: 1.75rem; text-align: center; font-weight: var(--weight-medium); }
.pos-line-total { min-inline-size: 4rem; text-align: end; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.pos-empty { margin: 0; padding: var(--space-4) 0; text-align: center; }
.pos-empty[hidden] { display: none; }
.pos-total { display: flex; align-items: baseline; justify-content: space-between; padding-block: var(--space-2); border-block-start: 2px solid var(--color-border-strong); }
.pos-total strong { font-size: var(--text-2xl); color: var(--color-text-strong); }
.pos-total small { font-size: var(--text-sm); font-weight: normal; color: var(--color-text-muted); }
.pos-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.pos-methods legend { margin-block-end: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-strong); }
.pos-method { position: relative; }
.pos-method input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.pos-method span {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: 44px; padding: 0 var(--space-2);
    border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card);
    font-size: var(--text-sm); cursor: pointer;
}
.pos-method span svg { inline-size: 18px; block-size: 18px; }
.pos-method input:checked + span { border-color: var(--color-brand-primary); background: var(--color-brand-primary); color: var(--color-brand-on-primary); }
.pos-method input:focus-visible + span { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; }
.pos-cash, .pos-ref, .pos-customer { display: flex; flex-direction: column; gap: var(--space-2); }
.pos-cash .field, .pos-ref .field, .pos-customer .field { margin: 0; }
/* เงินสด → ช่องรับเงิน/ทอน · QR/โอน → เลขอ้างอิง · ช่องที่ไม่เกี่ยวซ่อน */
.pos-layout:not(:has(input[name="method"][value="cash"]:checked)) .pos-cash { display: none; }
.pos-layout:not(:has(input[name="method"][value="transfer"]:checked)) .pos-ref { display: none; }
.pos-quick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pos-change { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md); background: var(--color-surface-head); }
.pos-change[hidden] { display: none; }
.pos-change strong { font-size: var(--text-xl); color: var(--color-text-strong); }
.pos-change[data-short="true"] strong { color: var(--color-state-danger); }
.pos-pay { min-block-size: 52px; font-size: var(--text-lg); }

.pos-mobile-bar { display: none; }
@media screen and (max-width: 1023px) {
    .pos-layout { grid-template-columns: minmax(0, 1fr); }
    .pos-mobile-bar:not([hidden]) {
        position: sticky; inset-block-end: var(--space-3); z-index: var(--z-raised); order: 2;
        display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
        min-block-size: 52px; padding: 0 var(--space-4); border-radius: var(--radius-full);
        background: var(--color-brand-primary); color: var(--color-brand-on-primary); text-decoration: none; box-shadow: var(--shadow-md);
    }
    .pos-mobile-bar > span { display: inline-flex; align-items: center; gap: var(--space-2); }
    .pos-mobile-bar svg { inline-size: 18px; block-size: 18px; }
    .pos-catalog { order: 1; }
    .pos-cart { order: 3; scroll-margin-block-start: calc(var(--space-12) * 2); }
    .pos-cart { position: static; }
    .pos-lines { max-block-size: none; }
}
@media screen and (max-width: 639px) {
    .pos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pos-tile-btn { min-block-size: 96px; }
}

/* ใบเสร็จ — กว้างแบบกระดาษม้วน 80 มม. บนจอและตอนพิมพ์ (เลือกขนาดกระดาษในหน้าต่างพิมพ์) */
.receipt { max-inline-size: 80mm; margin: 0 auto; padding: var(--space-4); background: var(--color-surface-card); color: var(--color-text-strong); font-size: var(--text-sm); }
.receipt-head { text-align: center; margin-block-end: var(--space-3); }
.receipt-head h1 { margin: 0; font-size: var(--text-lg); }
.receipt-head p { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.receipt-meta, .receipt-lines, .receipt-sum { inline-size: 100%; border-collapse: collapse; }
.receipt-meta td, .receipt-lines td, .receipt-sum td { padding: 2px 0; vertical-align: top; }
.receipt-lines { border-block: 1px dashed var(--color-border-strong); margin-block: var(--space-2); }
.receipt-lines td:last-child, .receipt-sum td:last-child, .receipt-meta td:last-child { text-align: end; white-space: nowrap; }
.receipt-line-sub { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.receipt-sum td[colspan] { text-align: start; }
.receipt-sum .receipt-grand td { font-size: var(--text-lg); font-weight: var(--weight-bold); border-block-start: 1px solid var(--color-border-strong); padding-block-start: var(--space-1); }
.receipt-foot { margin-block-start: var(--space-3); text-align: center; color: var(--color-text-muted); font-size: var(--text-xs); }
.receipt-void { margin-block: var(--space-2); padding: var(--space-1); border: 2px solid var(--color-border-strong); text-align: center; font-weight: var(--weight-bold); }
.receipt-actions { display: flex; justify-content: center; gap: var(--space-2); margin-block: var(--space-3); }
@media print {
    .receipt-actions { display: none !important; }
    /* หน้ากระดาษ = ม้วน ขอบ 0 (app.js ตั้ง @page) — บิลยืดเต็มความกว้างกระดาษจริง เว้นขอบเองด้านละ 4 มม. (ผู้ใช้สั่ง 2026-10-28)
       ‼️ ไม่ fix 72 มม. — เครื่องที่ไดรเวอร์ตั้งพื้นที่พิมพ์แคบกว่า (RP80 = 72 มม.) แล้วบิลตกขอบขวา/บน */
    .receipt, .receipt[data-paper="58"] { box-sizing: border-box; inline-size: 100%; max-inline-size: none; margin: 0; padding: 4mm 4mm 6mm; }
    /* เครื่องพิมพ์ความร้อนพิมพ์สีเทาเป็นจุดจางๆ — ตัวหนังสือรองใช้สีเข้มตอนพิมพ์ */
    .receipt .receipt-head p, .receipt .receipt-line-sub, .receipt .receipt-foot,
    .receipt .receipt-lines tr:is(.receipt-line-qty, .receipt-line-disc) td:nth-child(n) { color: var(--color-text-strong); }
}

/* ปิดกะ (POS Lite · 2026-10-19) — ตัวเลขเงินสดเรียงตามสูตร · ช่องนับเงิน · ส่วนต่างสด */
.shift-body { padding: var(--space-4) var(--space-5); }
.shift-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.shift-figures { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.shift-figures > div { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-1); border-block-end: 1px dashed var(--color-border-normal); }
.shift-figures dt { color: var(--color-text-muted); }
.shift-figures dd { margin: 0; font-weight: var(--weight-medium); color: var(--color-text-strong); }
.shift-figures .shift-expected { border-block-end: 0; border-block-start: 2px solid var(--color-border-strong); padding-block-start: var(--space-2); }
.shift-figures .shift-expected dd { font-size: var(--text-xl); }
.shift-close-form { display: flex; flex-direction: column; gap: var(--space-3); }
.shift-close-form .field { margin: 0; }
.shift-variance { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-head); font-weight: var(--weight-medium); }
.shift-variance[hidden] { display: none; }
.shift-variance[data-tone="danger"] { background: var(--color-tint-danger); color: var(--color-state-danger); }
.shift-methods { margin: 0 0 var(--space-3); }
@media screen and (max-width: 767px) {
    .shift-sum { grid-template-columns: minmax(0, 1fr); }
    .shift-body { padding: var(--space-3); }
}

/* สวิตช์นับสต็อกชิดซ้ายเหมือนช่องอื่น (row-reverse → justify end = ซ้าย) */
.product-track > .switch-inline { justify-content: flex-end; inline-size: fit-content; }

/* ฟอร์มรายการ (สินค้า) — ปุ่มบันทึกใต้การ์ดคู่ ชิดขวา ไม่มีกรอบซ้อน */
.item-form-actions { display: flex; justify-content: flex-end; margin-block: var(--space-4) var(--space-6); padding: 0; border: 0; background: none; }

.slip-link {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-sm);
    color: var(--color-brand-link);
}

/* ═══════════════════════════════════════════════ ตารางสิทธิ์และการเช็คชื่อ */

/* ‼️ ตารางสิทธิ์กว้างโดยธรรมชาติ เพราะความหมายของมันคือการเทียบข้าม role
      จึงเป็นข้อยกเว้นเดียวที่อนุญาตให้เลื่อนแนวนอน พร้อมตรึงคอลัมน์ชื่อสิทธิ์ไว้
      ยุบเป็นการ์ดแล้วจะเทียบไม่ได้ ซึ่งทำลายเหตุผลที่หน้านี้มีอยู่ */
.matrix-table th[scope="row"] {
    position: sticky;
    left: 0;
    background: var(--color-surface-card);
    text-align: left;
    font-weight: normal;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.matrix-table td {
    text-align: center;
}

/* ‼️ ช่องติ๊กขนาดปริยายของเบราว์เซอร์กว้างราว 13px ซึ่งต่ำกว่าเกณฑ์ WCAG 2.5.8
      (Target Size Minimum ระดับ AA = 24×24 CSS px)
      ตารางนี้มีช่องติ๊กเกือบหกร้อยช่อง การกดพลาดหนึ่งครั้งคือการให้หรือถอนสิทธิ์ผิดคน
      ซึ่งเป็นความผิดพลาดที่ไม่มีใครสังเกตจนกว่าจะมีคนเข้าถึงสิ่งที่ไม่ควรเข้าถึงได้ */
.matrix-table input[type="checkbox"] {
    inline-size: var(--icon-lg);
    block-size: var(--icon-lg);
    cursor: pointer;
}

/* บนอุปกรณ์สัมผัสเพิ่มระยะรอบช่อง เพื่อให้นิ้วที่กดเหลื่อมไปนิดเดียวยังโดนช่องเดิม */
@media (pointer: coarse) {
    .matrix-table td {
        padding-block: var(--space-2);
    }
}

.table-wrap[data-scroll="allowed"] {
    overflow-x: auto;
}

.session-block {
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-normal);
}

.session-block:first-of-type {
    border-top: 0;
}

/* ═══════════════════════════════════════════════ หน้าสาธารณะของ OMC Sports

   ‼️ ทุกค่าที่นี่มาจาก token ใน DESIGN.md เท่านั้น
      สีที่ต้องอ่อนกว่า token ใช้ color-mix() ผสมกับ token ตัวอื่น ไม่ใช่เขียนค่าใหม่
      ขนาดที่ต้องยืดตามจอใช้ clamp() ด้วย rem/vw ซึ่งไม่ผูกกับความละเอียดหน้าจอ

   ‼️ prefix lp- = landing page · ใช้กับหน้าขายของ OMC ทุกหน้า
      (หน้าแรก · ราคา · ไดเรกทอรีสนาม · ติดต่อ) เพื่อให้ทั้งชุดเป็นผลิตภัณฑ์เดียวกัน
      หน้าหลังบ้านห้ามใช้คลาสชุดนี้ เพราะความหนาแน่นคนละแบบกันโดยตั้งใจ */

@layer components {

  /* ---------------------------------------------------------- โครงของ section */

  .lp-section { padding-block: clamp(var(--space-16), 7vw, var(--space-24)); position: relative; }
  .lp-section[data-tone="wash"] { background: var(--color-surface-raised); }
  .lp-section[data-tone="soft"] { background: color-mix(in srgb, var(--color-surface-raised) 50%, var(--color-surface-card)); }
  .lp-section[data-tone="card"] { background: var(--color-surface-card); }
  .lp-section[data-tight="true"] { padding-block: clamp(var(--space-12), 5vw, var(--space-16)); }

  /* ‼️ section ที่มีพื้นหลังต้องกินเต็มความกว้างจอ แต่เนื้อหาต้องอยู่ในกรอบเดิม
     .page จำกัดความกว้างไว้แล้ว จึงต้องดึงขอบออกด้วย margin ลบเท่าครึ่งหนึ่งของส่วนที่เกิน
     แล้วคืนระยะขอบกลับด้วย padding เพื่อไม่ให้ข้อความไปชนขอบจอบนมือถือ */
  .lp-bleed {
    margin-inline: calc(50% - 50vw);
    padding-inline: max(var(--space-5), calc(50vw - 50%));
  }

  .lp-inner { max-inline-size: var(--layout-public-width); margin-inline: auto; position: relative; z-index: 1; }

  .lp-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: clamp(var(--space-8), 3vw, var(--space-12));
  }

  .lp-head-text { display: flex; flex-direction: column; gap: var(--space-3); max-inline-size: 58ch; }

  .lp-eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); font-weight: var(--weight-bold);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--color-brand-accent);
  }

  .lp-h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    line-height: var(--leading-tight);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    letter-spacing: -.01em;
  }

  .lp-h2 em { font-style: normal; color: var(--color-brand-accent); }
  .lp-sub { color: var(--color-text-muted); font-size: var(--text-lg); max-inline-size: 56ch; }

  /* ‼️ ลิงก์ "ดูทั้งหมด" ของหัว section — มีเส้นใต้ถาวร เพื่อให้รู้ว่าคลิกได้โดยไม่ต้องเอาเมาส์ไปชี้ */
  .lp-head-link {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-weight: var(--weight-medium); color: var(--color-brand-accent);
    white-space: nowrap;
  }

  /* ---------------------------------------------------------------- ส่วนเปิดหน้า */

  .lp-hero { position: relative; padding-block: clamp(var(--space-10), 4.5vw, var(--space-20)); }
  .lp-hero-grid { display: grid; gap: clamp(var(--space-8), 4vw, var(--hero-gap)); align-items: center; }
  .lp-hero-grid > * { min-inline-size: 0; }

  @media (min-width: 1000px) {
    .lp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .lp-hero-grid[data-split="text"] { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  }

  /* ‼️ ภาพคอร์ทเป็นฉากหลังของครึ่งขวา ไม่ใช่ภาพที่ต้องมอง
     ไล่จางด้วย mask สองแกน — ลงล่างเพื่อกลืนกับพื้นหน้า และไปทางซ้ายเพื่อไม่ให้ชนกับพาดหัว
     ‼️ ต้องเห็นชัดพอที่จะรู้ว่าเป็นคอร์ท ไม่ใช่จางจนกลายเป็นพื้นเทาที่ไม่ได้บอกอะไร
        เคยตั้งไว้ .55 แล้วภาพหายไปกับพื้น จนหน้าแรกดูเหมือนหน้าเอกสาร ไม่ใช่หน้าขายสนามกีฬา */
  .lp-hero-bg {
    position: absolute; inset-block-start: 0; inset-inline-end: 0;
    inline-size: 60%; block-size: 94%;
    object-fit: cover; object-position: center 56%;
    border-end-start-radius: var(--radius-xl);
    opacity: .92;
    /* ‼️ ไล่จางสองแกน — ลงล่างให้กลืนกับพื้นหน้า และไปทางซ้ายให้ขอบภาพไม่เป็นเส้นตรงพาดกลางหน้า
       ห้ามใส่ -webkit-mask-composite คู่กัน: ของ WebKit นับลำดับชั้นกลับทางกับมาตรฐาน
       ใส่ทั้งคู่แล้วภาพจางฝั่งขวาแทนฝั่งซ้าย ซึ่งตรงข้ามกับที่ตั้งใจพอดี */
    mask-image:
      linear-gradient(to bottom, currentColor 56%, transparent 100%),
      linear-gradient(to right, transparent 0%, currentColor 22%);
    mask-composite: intersect;
    pointer-events: none;
    display: none;
  }

  @media (min-width: 1000px) { .lp-hero-bg { display: block; } }

  .lp-hero-body { position: relative; display: flex; flex-direction: column; align-items: flex-start; }

  .lp-badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--color-tint-highlight);
    color: var(--color-text-strong);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm); font-weight: var(--weight-medium);
  }

  .lp-badge .icon { color: var(--color-brand-accent); }
  /* ป้ายที่อยู่ใน <h1> (หน้า /sports-booking) — หน้าตาเหมือนป้ายนอกหัวเรื่องเดิม: ขนาด/น้ำหนักของป้าย ระยะห่างเท่าเดิม */
  .lp-hero .lp-hero-body > .lp-title:has(> .lp-badge) { margin-block-start: 0; }
  .lp-title > .lp-badge { display: flex; inline-size: fit-content; margin-block-end: var(--space-5); line-height: normal; letter-spacing: normal; }

  .lp-title {
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    line-height: 1.18;
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    letter-spacing: -.02em;
    margin-block: var(--space-5) var(--space-4);
    max-inline-size: 18ch;
  }

  /* ‼️ ท่อนที่เน้นใช้ <em> เพราะเป็นการเน้นความหมายจริง ไม่ใช่แค่ทาสี
     screen reader จึงอ่านเน้นตาม — ตัวเอียงถูกปิดเพราะฟอนต์ไทยไม่มีตัวเอียงที่ออกแบบมา */
  .lp-title em { font-style: normal; color: var(--color-brand-accent); }

  .lp-lead { color: var(--color-text-normal); font-size: var(--text-lg); max-inline-size: 50ch; line-height: var(--leading-normal); }

  .lp-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-8); }
  .lp-actions .btn { padding-inline: var(--space-6); }

  /* ‼️ การ์ดใบสุดท้ายที่เหลือเดี่ยวในแถว (จำนวนการ์ดเปลี่ยนตามโมดูลที่เปิด) ยืดเต็มแถว — ไม่ทิ้งช่องว่างสองช่อง (audit 2026-10-22) */
  @media (min-width: 1000px) {
    /* ‼️ ยกเว้นการ์ดสนาม — การ์ดสนามที่เหลือใบเดียวกลายเป็นรูปยักษ์เต็มแถว (ผู้ใช้ทัก 2026-10-22 "อันใหญ่หลุดมา") */
    .lp-grid[data-cols="3"] > :last-child:nth-child(3n + 1):not(.lp-venue) { grid-column: 1 / -1; }
  }

  .lp-trust {
    display: grid; gap: var(--space-3) var(--space-6);
    margin-block-start: var(--space-8);
    font-size: var(--text-sm); color: var(--color-text-normal);
  }

  @media (min-width: 560px) { .lp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  .lp-trust li { display: flex; align-items: center; gap: var(--space-2); }

  .lp-trust .icon {
    flex: none; color: var(--color-brand-on-accent);
    background: var(--color-brand-accent);
    border-radius: var(--radius-full);
    padding: 2px;
    inline-size: var(--icon-base); block-size: var(--icon-base);
  }

  .lp-hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }

  /* ข้อความตกแต่งที่ลอยข้างภาพ — เป็นของตกแต่ง จึงเล็กและจางกว่าเนื้อหาจริงเสมอ */
  .lp-script {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.45;
    color: var(--color-brand-accent);
    opacity: .8;
    font-weight: var(--weight-medium);
    max-inline-size: 15ch;
  }

  .lp-hero-script { position: absolute; inset-block-start: 0; inset-inline-end: 0; text-align: end; display: none; }

  @media (min-width: 1240px) { .lp-hero-script { display: block; } }

  /* ---------------------------------------------------------- แถบความสามารถ */

  .lp-proof {
    display: grid; gap: var(--space-6);
    padding-block: var(--space-10);
    border-block: 1px solid var(--color-border-normal);
  }

  @media (min-width: 640px)  { .lp-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .lp-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .lp-proof-item { display: flex; align-items: center; gap: var(--space-4); }

  .lp-proof-item .icon {
    flex: none; color: var(--color-brand-accent);
    inline-size: var(--icon-lg); block-size: var(--icon-lg);
  }

  .lp-proof-text { display: flex; flex-direction: column; min-inline-size: 0; }
  .lp-proof-value { font-weight: var(--weight-bold); color: var(--color-text-strong); }
  .lp-proof-label { font-size: var(--text-sm); color: var(--color-text-muted); }

  /* ------------------------------------------------------------- การ์ดของหน้าขาย */

  .lp-grid { display: grid; gap: var(--space-6); }
  .lp-grid > * { min-inline-size: 0; }

  @media (min-width: 680px)  { .lp-grid[data-cols="2"], .lp-grid[data-cols="3"], .lp-grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .lp-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .lp-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .lp-card {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: clamp(var(--space-5), 2vw, var(--space-8));
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) var(--ease-standard),
                border-color var(--duration-normal) var(--ease-standard);
  }

  .lp-card h3 {
    font-size: var(--text-lg); font-weight: var(--weight-bold);
    color: var(--color-text-strong); line-height: var(--leading-tight);
  }

  .lp-card p { color: var(--color-text-muted); line-height: var(--leading-normal); }

  .lp-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: var(--icon-xl); block-size: var(--icon-xl);
    border-radius: var(--radius-lg);
    background: var(--color-tint-success);
    color: var(--color-brand-accent);
    margin-block-end: var(--space-2);
  }

  .lp-card-icon .icon { inline-size: var(--icon-base); block-size: var(--icon-base); }

  /* การ์ดที่คลิกได้ทั้งใบ — ลูกศรขยับตอนชี้ เพื่อบอกว่ามันพาไปที่อื่น */
  a.lp-card { color: inherit; text-decoration: none; }
  a.lp-card:hover { border-color: var(--color-brand-accent); box-shadow: var(--shadow-lg); }

  .lp-card-more {
    margin-block-start: auto; padding-block-start: var(--space-2);
    display: inline-flex; align-items: center; gap: var(--space-2);
    color: var(--color-brand-accent); font-size: var(--text-sm); font-weight: var(--weight-medium);
  }

  .lp-card-more .icon { transition: translate var(--duration-fast) var(--ease-standard); }
  a.lp-card:hover .lp-card-more .icon { translate: var(--space-1) 0; }

  /* ------------------------------------------------- ส่วนแสดงหน้าจอจริงสลับซ้ายขวา */

  .lp-show { display: grid; gap: clamp(var(--space-8), 4vw, var(--space-16)); align-items: center; }
  .lp-show > * { min-inline-size: 0; }
  .lp-show + .lp-show { margin-block-start: clamp(var(--space-12), 5vw, var(--space-20)); }

  @media (min-width: 900px) {
    .lp-show { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-show[data-flip="true"] .lp-show-media { order: -1; }
  }

  .lp-show-body { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
  .lp-show-points { display: flex; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-2); }
  .lp-show-points li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-normal); }
  .lp-show-points .icon { flex: none; color: var(--color-brand-accent); }

  /* ------------------------------------------------------------------ ราคา */

  .lp-price { display: grid; gap: clamp(var(--space-8), 4vw, var(--space-12)); align-items: center; }
  .lp-price > * { min-inline-size: 0; }

  @media (min-width: 1000px) { .lp-price { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

  .lp-price-cards { display: grid; gap: var(--space-6); }
  .lp-price-cards > * { min-inline-size: 0; }

  @media (min-width: 640px) { .lp-price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .lp-price-cards[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .lp-price-card {
    position: relative;
    display: flex; flex-direction: column; gap: var(--space-4);
    padding: clamp(var(--space-6), 2.4vw, var(--space-8));
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
  }

  .lp-price-card[data-featured="true"] {
    border-color: var(--color-brand-accent);
    box-shadow: var(--shadow-lg);
  }

  .lp-price-flag {
    position: absolute; inset-block-start: 0; inset-inline-start: 50%;
    translate: -50% -50%;
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--color-brand-accent); color: var(--color-brand-on-accent);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-4);
    font-size: var(--text-xs); font-weight: var(--weight-bold);
    white-space: nowrap;
  }

  .lp-price-head { display: flex; align-items: center; gap: var(--space-3); }
  .lp-price-name { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text-strong); letter-spacing: .04em; }
  .lp-price-note { font-size: var(--text-sm); color: var(--color-text-muted); }

  .lp-price-value {
    display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
  }

  .lp-price-value small {
    font-size: var(--text-sm); font-weight: var(--weight-normal);
    color: var(--color-text-muted); font-variant-numeric: normal;
  }

  .lp-price-list { display: flex; flex-direction: column; gap: var(--space-3); }
  .lp-price-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-normal); }
  .lp-price-list .icon { flex: none; color: var(--color-brand-accent); }
  .lp-price-list span { color: var(--color-text-muted); font-size: var(--text-sm); }
  .lp-price-card > .btn { margin-block-start: auto; }

  /* จำนวนที่รวมในแพ็กเกจ — จุดสี · ป้ายซ้าย · ตัวเลขหนาชิดขวา */
  .lp-price-qty { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding-block: var(--space-3); border-block: 1px solid var(--color-border-normal); }
  .lp-price-qty > div { display: flex; align-items: center; gap: var(--space-3); }
  .lp-price-qty dt { flex: 1; display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-normal); }
  .lp-price-qty dt::before { content: ""; inline-size: var(--space-2); block-size: var(--space-2); border-radius: 50%; background: var(--color-brand-accent); flex: none; }
  .lp-price-qty dd { margin: 0; font-weight: var(--weight-bold); color: var(--color-text-strong); font-variant-numeric: tabular-nums; }

  /* ตัวสลับรายเดือน/รายปี — เป็นกลุ่มปุ่มจริง ไม่ใช่ลิงก์ที่ทำหน้าตาเหมือนปุ่ม */
  .lp-billing {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--color-surface-raised);
    border-radius: var(--radius-full);
    padding: var(--space-1);
  }

  .lp-billing a {
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm); font-weight: var(--weight-medium);
    color: var(--color-text-normal); text-decoration: none;
  }

  .lp-billing a[aria-current="true"] { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }

  .lp-save {
    background: var(--color-brand-highlight); color: var(--color-brand-on-highlight);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs); font-weight: var(--weight-bold);
    white-space: nowrap;
  }

  /* ------------------------------------------------------------ โมดูลเสริม */

  .lp-addons { display: grid; gap: var(--space-4); }
  .lp-addons > * { min-inline-size: 0; }

  @media (min-width: 640px)  { .lp-addons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .lp-addons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .lp-addon {
    display: flex; gap: var(--space-4); align-items: flex-start;
    padding: var(--space-5);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
  }

  .lp-addon[data-tone="soft"] { background: var(--color-tint-success); border-color: color-mix(in srgb, var(--color-brand-accent) 26%, transparent); }
  .lp-addon .icon { flex: none; color: var(--color-brand-accent); }
  .lp-addon-text { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
  .lp-addon-name { font-weight: var(--weight-bold); color: var(--color-text-strong); }
  .lp-addon-note { font-size: var(--text-sm); color: var(--color-text-muted); }

  .lp-addon-price {
    font-size: var(--text-sm); font-weight: var(--weight-bold);
    color: var(--color-brand-accent); font-variant-numeric: tabular-nums;
    margin-block-start: var(--space-1);
  }

  /* ------------------------------------------------------------ ตารางเทียบ */

  .lp-compare { display: grid; gap: var(--space-6); }
  .lp-compare > * { min-inline-size: 0; }

  @media (min-width: 900px) { .lp-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  .lp-compare-col {
    display: flex; flex-direction: column; gap: var(--space-4);
    padding: clamp(var(--space-5), 2vw, var(--space-8));
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-xl);
    background: var(--color-surface-card);
  }

  .lp-compare-col[data-tone="accent"] { background: var(--color-tint-success); border-color: color-mix(in srgb, var(--color-brand-accent) 30%, transparent); }
  .lp-compare-title { font-weight: var(--weight-bold); color: var(--color-text-strong); font-size: var(--text-lg); }

  /* ------------------------------------------------------------------- FAQ */

  .lp-faq { display: grid; gap: var(--space-3) var(--space-6); align-content: start; }
  .lp-faq > * { min-inline-size: 0; }

  @media (min-width: 900px) { .lp-faq[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  .lp-faq-item {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    block-size: fit-content;
  }

  .lp-faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    cursor: pointer; list-style: none;
    font-weight: var(--weight-medium); color: var(--color-text-strong);
  }

  .lp-faq-item summary::-webkit-details-marker { display: none; }
  .lp-faq-item summary .icon { flex: none; color: var(--color-text-muted); transition: rotate var(--duration-fast) var(--ease-standard); }
  .lp-faq-item[open] summary .icon { rotate: 180deg; color: var(--color-brand-accent); }
  .lp-faq-item[open] summary { color: var(--color-brand-accent); }
  .lp-faq-item p { color: var(--color-text-muted); margin-block-start: var(--space-3); line-height: var(--leading-normal); }

  /* --------------------------------------------------------- กล่องชวนเริ่มใช้ */

  .lp-cta-card {
    display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start;
    padding: clamp(var(--space-6), 2.4vw, var(--space-8));
    border-radius: var(--radius-xl);
    background: var(--color-brand-accent);
    color: var(--color-brand-on-accent);
  }

  .lp-cta-card p { color: var(--color-brand-on-accent); font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: var(--leading-tight); }

  /* ‼️ ปุ่มบนพื้นเขียวต้องเป็นพื้นขาว ไม่ใช่ปุ่มหลักสี navy
     navy บนเขียวเข้มได้ contrast ประมาณ 2:1 ซึ่งแทบมองไม่เห็นว่าเป็นปุ่ม */
  .lp-cta-card .btn,
  .lp-banner .btn-primary {
    background: var(--color-brand-highlight);
    color: var(--color-brand-on-highlight);
    border-color: var(--color-brand-highlight);
  }

  .lp-cta-card .btn:hover,
  .lp-banner .btn-primary:hover { background: var(--color-surface-card); color: var(--color-text-strong); border-color: var(--color-surface-card); }

  /* แถบปิดการขายท้ายหน้า — พื้น navy เต็มความกว้างของกรอบเนื้อหา */
  .lp-banner {
    position: relative; overflow: hidden;
    display: grid; gap: var(--space-6); align-items: center;
    padding: clamp(var(--space-8), 3vw, var(--space-12));
    border-radius: var(--radius-xl);
    background: var(--color-brand-primary);
    color: var(--color-text-on-dark);
  }

  @media (min-width: 900px) { .lp-banner { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }

  .lp-banner-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-3); }
  .lp-banner-eyebrow { font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .16em; text-transform: uppercase; color: var(--color-brand-highlight); }
  .lp-banner-title { font-size: clamp(1.5rem, 2.8vw, 2.125rem); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-text-on-dark); }
  .lp-banner p { color: color-mix(in srgb, var(--color-text-on-dark) 82%, transparent); }
  .lp-banner-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--space-3); }

  .lp-banner .btn-secondary {
    background: transparent;
    color: var(--color-text-on-dark);
    border-color: color-mix(in srgb, var(--color-text-on-dark) 45%, transparent);
  }

  .lp-banner .btn-secondary:hover { background: color-mix(in srgb, var(--color-text-on-dark) 14%, transparent); color: var(--color-text-on-dark); }

  /* ภาพคอร์ทจางๆ ด้านหลังแถบ navy — ให้แถบมีมิติโดยไม่ลดความอ่านออกของข้อความ */
  .lp-banner-bg {
    position: absolute; inset: 0;
    inline-size: 100%; block-size: 100%;
    object-fit: cover;
    opacity: .16;
    z-index: 0;
    pointer-events: none;
  }

}

/* ═══════════════════════════════════════════════ ภาพจำลองหน้าจอระบบ

   ‼️ ไม่ใช่ภาพถ่ายหน้าจอ แต่เป็น HTML จริงที่ย่อส่วนลง
      ภาพถ่ายจะเบลอบนจอความละเอียดสูง ต้องถ่ายใหม่ทุกครั้งที่ UI เปลี่ยน
      และคนใช้ screen reader ไม่ได้อะไรจากมันเลย
   ‼️ เป็นของประกอบการขาย ไม่ใช่ข้อมูลจริง — ต้องมีป้าย "ข้อมูลตัวอย่าง" กำกับเสมอ */

@layer components {

  .mockup {
    position: relative;
    inline-size: 100%;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .mockup-bar {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-raised);
    border-block-end: 1px solid var(--color-border-normal);
  }

  .mockup-dot { inline-size: var(--space-2); block-size: var(--space-2); border-radius: var(--radius-full); background: var(--color-border-strong); opacity: .5; }
  .mockup-bar-label { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-text-muted); }

  .mockup-shell { display: grid; grid-template-columns: auto minmax(0, 1fr); }

  .mockup-side {
    display: none;
    background: var(--color-surface-sidebar);
    color: var(--color-surface-on-sidebar);
    padding: var(--space-4) var(--space-3);
    gap: var(--space-2);
    inline-size: 9.5rem;
  }

  @media (min-width: 560px) { .mockup-side { display: flex; flex-direction: column; } }

  .mockup-side-brand {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); font-weight: var(--weight-bold);
    letter-spacing: .12em; color: var(--color-text-on-dark);
    padding: var(--space-1) var(--space-2) var(--space-4);
  }


  .mockup-side-item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
  }

  .mockup-side-item .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); flex: none; }
  .mockup-side-item[data-active="true"] { background: var(--color-border-sidebar); color: var(--color-text-on-dark); font-weight: var(--weight-medium); }

  .mockup-main { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0; }

  .mockup-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
  .mockup-title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-text-strong); }
  .mockup-meta { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

  .mockup-pills { display: flex; gap: var(--space-1); }

  .mockup-pill {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
  }

  .mockup-pill[data-active="true"] { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }

  .mockup-grid { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }

  .mockup-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-2); align-items: center; }
  .mockup-row-label { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
  .mockup-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }

  .mockup-cell {
    block-size: var(--space-6);
    border-radius: var(--radius-sm);
    background: var(--color-slot-free);
    border: 1px solid var(--color-slot-free-border);
  }

  .mockup-cell[data-state="booked"]  { background: var(--color-brand-accent); border-color: var(--color-brand-accent); }
  .mockup-cell[data-state="held"]    { background: var(--color-slot-held); border-color: var(--color-state-warning); }
  .mockup-cell[data-state="blocked"] { background: var(--color-slot-blocked); border-color: var(--color-border-normal); }
  .mockup-cell[data-state="soft"]    { background: var(--color-tint-success); border-color: color-mix(in srgb, var(--color-brand-accent) 35%, transparent); }

  .mockup-hours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
  .mockup-hours span { text-align: center; font-variant-numeric: tabular-nums; }
  .mockup-row[data-head="true"] .mockup-row-label { font-weight: var(--weight-medium); color: var(--color-text-normal); }

  /* การ์ดยอดขายที่ลอยทับมุมล่างของภาพจำลอง — เป็นสิ่งแรกที่ตาไปจับ จึงต้องเป็นตัวเลขที่ขายของได้ */
  .mockup-chip {
    position: absolute;
    inset-block-end: calc(var(--space-5) * -1);
    inset-inline-end: calc(var(--space-4) * -1);
    display: none;
    align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }

  @media (min-width: 760px) { .mockup-chip { display: inline-flex; } }

  .mockup-chip .icon { color: var(--color-brand-on-accent); background: var(--color-brand-accent); border-radius: var(--radius-sm); padding: var(--space-1); flex: none; }
  .mockup-chip-text { display: flex; flex-direction: column; }
  .mockup-chip-label { font-size: var(--text-xs); color: var(--color-text-muted); }
  .mockup-chip-value { font-weight: var(--weight-bold); color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
  .mockup-chip-delta { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-state-success); }

  /* แถบเทียบสัดส่วนในภาพจำลองรายงาน */
  .mockup-bars { display: flex; align-items: flex-end; gap: var(--space-2); block-size: var(--space-20); }
  .mockup-bars span { flex: 1; background: var(--color-tint-success); border-radius: var(--radius-sm); }
  .mockup-bars span[data-peak="true"] { background: var(--color-brand-accent); }

  /* ‼️ ความสูงมาจาก data-level เพราะกฎเหล็กข้อ 15 ห้าม style= ในหน้า
     ระดับ 1-8 พอสำหรับกราฟประกอบ ถ้าต้องละเอียดกว่านี้แปลว่าควรใช้ partials/chart-bar.php ซึ่งเป็นกราฟจริง */
  .mockup-bars span[data-level="1"] { block-size: 14%; }
  .mockup-bars span[data-level="2"] { block-size: 26%; }
  .mockup-bars span[data-level="3"] { block-size: 38%; }
  .mockup-bars span[data-level="4"] { block-size: 50%; }
  .mockup-bars span[data-level="5"] { block-size: 62%; }
  .mockup-bars span[data-level="6"] { block-size: 74%; }
  .mockup-bars span[data-level="7"] { block-size: 86%; }
  .mockup-bars span[data-level="8"] { block-size: 100%; }

  .mockup-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }

  .mockup-kpi {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
    background: var(--color-surface-card);
  }

  .mockup-kpi-label { font-size: var(--text-xs); color: var(--color-text-muted); }
  .mockup-kpi-value { font-weight: var(--weight-bold); color: var(--color-text-strong); font-variant-numeric: tabular-nums; }

  .mockup-lines { display: flex; flex-direction: column; gap: var(--space-2); }

  .mockup-line {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--color-text-normal);
  }

  .mockup-line strong { color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
}

/* ═══════════════════════════════════════════════ หน้าที่ยังไม่ได้เข้าสู่ระบบ

   ‼️ หน้านี้คือหน้าแรกที่พนักงานสนามเห็นทุกเช้า และเป็นหน้าเดียวที่คนนอกเห็นก่อนซื้อ
      จึงต้องเป็นหน้าเต็มที่มีเรื่องเล่าของผลิตภัณฑ์ ไม่ใช่กล่องฟอร์มลอยกลางจอ */

@layer layout {

  .auth-shell {
    min-block-size: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--color-surface-page);
  }

  .auth-bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-10));
    background: var(--color-surface-card);
    border-block-end: 1px solid var(--color-border-normal);
  }

  .auth-bar-brand { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
  .auth-bar-brand .brand { padding: 0; border: 0; color: var(--color-text-strong); }
  .auth-bar-brand .brand .icon { color: var(--color-brand-logo); }
  .auth-bar-note {
    display: none;
    padding-inline-start: var(--space-3);
    border-inline-start: 1px solid var(--color-border-normal);
    color: var(--color-text-muted); font-size: var(--text-sm);
  }

  @media (min-width: 640px) { .auth-bar-note { display: block; } }

  .auth-bar-tools { display: flex; align-items: center; gap: var(--space-2); }

  .auth-main {
    display: grid;
    gap: clamp(var(--space-8), 4vw, var(--space-16));
    align-items: center;
    padding: clamp(var(--space-8), 4vw, var(--space-16)) clamp(var(--space-4), 4vw, var(--space-10));
    max-inline-size: var(--layout-max-width);
    inline-size: 100%;
    margin-inline: auto;
  }

  .auth-main > * { min-inline-size: 0; }

  @media (min-width: 1000px) { .auth-main { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

  .auth-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
    padding: var(--space-5) clamp(var(--space-4), 4vw, var(--space-10));
    border-block-start: 1px solid var(--color-border-normal);
    background: var(--color-surface-card);
    font-size: var(--text-sm); color: var(--color-text-muted);
  }

  .auth-foot-links { display: flex; align-items: center; gap: var(--space-3); }
  .auth-foot-sep { color: var(--color-border-strong); }
  .auth-foot-legal { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

  .auth-foot-slogan {
    font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase;
    color: var(--color-text-muted); text-align: end; line-height: var(--leading-tight);
  }

  .auth-foot .btn-icon {
    inline-size: var(--space-10); block-size: var(--space-10);
    border-radius: var(--radius-full);
  }
}

@layer components {

  /* ------------------------------------------------------- ครึ่งซ้ายของหน้าเข้าระบบ */

  /* ‼️ isolate เพื่อให้ภาพพื้นหลังที่ z-index ต่ำกว่าเนื้อหา ยังอยู่เหนือพื้นของหน้า
     ถ้าไม่มี ภาพที่ z-index ติดลบจะหลุดไปอยู่หลังพื้นหลังของ .auth-shell แล้วหายทั้งภาพ */
  .auth-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-6); }
  .auth-hero > *:not(.auth-hero-media) { position: relative; z-index: 1; }

  .auth-hero-title {
    font-size: clamp(1.9rem, 3.8vw, 2.9rem);
    line-height: 1.2;
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    letter-spacing: -.02em;
    max-inline-size: 21ch;
    text-wrap: balance;
  }

  .auth-hero-title em { font-style: normal; color: var(--color-brand-accent); display: block; }
  .auth-hero-lead { color: var(--color-text-normal); max-inline-size: 46ch; line-height: var(--leading-normal); }

  .auth-benefits { display: flex; flex-direction: column; gap: var(--space-5); }
  .auth-benefit { display: flex; gap: var(--space-4); align-items: flex-start; }

  .auth-benefit-icon {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: var(--icon-xl); block-size: var(--icon-xl);
    border-radius: var(--radius-lg);
    background: var(--color-tint-success);
    color: var(--color-brand-accent);
  }

  .auth-benefit-text { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
  .auth-benefit-title { font-weight: var(--weight-bold); color: var(--color-text-strong); }
  .auth-benefit-note { font-size: var(--text-sm); color: var(--color-text-muted); }

  /* ‼️ ภาพคอร์ทอยู่หลังข้อความ ไม่ใช่ข้างๆ — ถ้าวางข้างกันบนจอ 1000px ทั้งสองฝั่งจะแคบจนอ่านยาก
     ตัดมุมด้วย clip-path ให้เป็นแนวเฉียงตามต้นแบบ และไล่จางเพื่อไม่ให้แย่งความสนใจจากฟอร์ม */
  /* ‼️ ภาพตกแต่งต้องไม่รับเมาส์เด็ดขาด
     ภาพนี้ยื่นเลยคอลัมน์ซ้ายไปทับขอบซ้ายของการ์ดเข้าสู่ระบบบนจอ 1366px ขึ้นไป
     แล้วกลืนคลิกของช่องติ๊ก "จดจำฉันไว้" ไปทั้งดวง — กดที่กล่องไม่ติด แต่กดที่ข้อความติด
     ซึ่งเป็นอาการที่หาสาเหตุยากมาก เพราะ DOM กับ CSS ของตัวช่องติ๊กเองไม่มีอะไรผิดเลย */
  .auth-hero-media {
    pointer-events: none;
    user-select: none;
    position: absolute;
    inset-block: calc(var(--space-10) * -1) calc(var(--space-10) * -1);
    inset-inline-start: 30%;
    inset-inline-end: calc(var(--space-24) * -2);
    z-index: 0;
    display: none;
    overflow: hidden;
    border-radius: var(--radius-xl);
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  }

  @media (min-width: 1160px) { .auth-hero-media { display: block; } }

  .auth-hero-media img {
    inline-size: 100%; block-size: 100%;
    object-fit: cover;
    object-position: center 78%;

    /* ‼️ ต้องเห็นชัดพอที่จะรู้ว่าเป็นคอร์ท — ภาพที่จางจนกลมกลืนกับพื้นไม่ได้บอกอะไร
       ไล่จางด้านซ้ายกว้างขึ้น เพื่อไม่ให้ขอบภาพตัดผ่านพาดหัวที่ความกว้าง 1160-1400px */
    opacity: .95;
    mask-image: linear-gradient(to right, transparent 0, currentColor 34%, currentColor 78%, transparent 100%);
  }

  .auth-script { margin-block-start: var(--space-2); }

  /* ----------------------------------------------------------- การ์ดเข้าสู่ระบบ */

  .auth-card {
    display: flex; flex-direction: column; gap: var(--space-5);
    inline-size: 100%;
    max-inline-size: 29rem;
    margin-inline: auto;
    padding: clamp(var(--space-6), 3vw, var(--space-10));
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }

  .auth-card-title { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-text-strong); line-height: var(--leading-tight); }
  .auth-card-sub { color: var(--color-text-muted); font-size: var(--text-sm); margin-block-start: var(--space-1); }
  .auth-card form { display: flex; flex-direction: column; gap: var(--space-4); }
  .auth-card .btn-primary { inline-size: 100%; justify-content: center; padding-block: var(--space-3); font-size: var(--text-lg); }

  .auth-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
    font-size: var(--text-sm);
  }

  .auth-check { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-normal); cursor: pointer; }
  /* ‼️ ช่องติ๊กต้องไม่เล็กกว่า 24px ตาม WCAG 2.5.8 — ขนาดไอคอน 20px ไม่ผ่านเกณฑ์ */
  .auth-check input { inline-size: var(--space-6); block-size: var(--space-6); accent-color: var(--color-brand-accent); }

  .auth-divider {
    display: flex; align-items: center; gap: var(--space-4);
    color: var(--color-text-muted); font-size: var(--text-sm);
  }

  .auth-divider::before,
  .auth-divider::after { content: ""; flex: 1; block-size: 1px; background: var(--color-border-normal); }

  .auth-help {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    color: inherit; text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard);
    text-align: start;
    inline-size: 100%;
    border: 1px solid transparent;
    cursor: pointer;
  }

  .auth-help:hover { background: var(--color-tint-success); border-color: color-mix(in srgb, var(--color-brand-accent) 28%, transparent); }
  .auth-help > .icon { flex: none; color: var(--color-brand-accent); inline-size: var(--icon-lg); block-size: var(--icon-lg); }
  .auth-help-text { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
  .auth-help-title { font-weight: var(--weight-bold); color: var(--color-text-strong); font-size: var(--text-sm); }
  .auth-help-note { font-size: var(--text-sm); color: var(--color-text-muted); }
  .auth-help-go { margin-inline-start: auto; color: var(--color-text-muted); flex: none; }

  /* --------------------------------------------- ช่องกรอกที่มีไอคอนและปุ่มดูรหัสผ่าน */

  .field-control { position: relative; display: flex; align-items: center; }
  .field-control > input { inline-size: 100%; }

  .field-control > .icon {
    position: absolute; inset-inline-start: var(--space-3);
    color: var(--color-text-muted); pointer-events: none;
  }

  .field-control:focus-within > .icon { color: var(--color-brand-accent); }
  .field[data-icon="true"] .field-control > input { padding-inline-start: var(--space-10); }
  .field[data-reveal="true"] .field-control > input { padding-inline-end: var(--space-10); }

  .field-reveal {
    position: absolute; inset-inline-end: var(--space-2);
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: var(--space-8); block-size: var(--space-8);
    border: 0; background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  .field-reveal:hover { color: var(--color-brand-accent); background: var(--color-surface-raised); }
}

/* ═══════════════════════════════════════════════ ไดเรกทอรีสนามและหน้าติดต่อ */

@layer components {

  /* ---------------------------------------------------------------- ค้นหาสนาม */

  .lp-search {
    display: grid; gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }

  .lp-search > * { min-inline-size: 0; }

  @media (min-width: 900px) {
    .lp-search { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto auto; align-items: center; }
  }

  .lp-search .field { margin: 0; }
  .lp-search .field label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lp-search .btn-primary { justify-content: center; white-space: nowrap; }

  .lp-search-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); color: var(--color-text-normal);
    white-space: nowrap; cursor: pointer;
  }

  .lp-search-toggle input { inline-size: var(--space-6); block-size: var(--space-6); accent-color: var(--color-brand-accent); }

  /* ------------------------------------------- หาสนามใกล้ฉัน (/sports/{slug}) */

  .lp-near { display: grid; gap: var(--space-3); margin-block-start: var(--space-6); max-inline-size: 36rem; }
  .lp-near-button { justify-content: center; min-block-size: 52px; font-size: var(--text-lg); }
  .lp-near-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .lp-near-form .field { flex: 1 1 14rem; margin: 0; }
  .lp-near-form .field label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lp-near-status { margin: 0; font-size: var(--text-sm); color: var(--color-text-normal); }
  .lp-near-status[data-tone="error"] { color: var(--color-state-danger); }
  .lp-near-note { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
  .lp-near-note .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); flex: none; }
  .lp-near-hint { margin: 0 0 var(--space-4); color: var(--color-text-muted); }

  .lp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-6); }
  .lp-chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-block-size: 40px; padding-inline: var(--space-4);
    border: 1px solid var(--color-border-normal); border-radius: var(--radius-full);
    background: var(--color-surface-card); color: var(--color-text-normal);
    font-weight: var(--weight-medium); text-decoration: none;
  }
  .lp-chip:hover { border-color: var(--color-brand-accent); }
  .lp-chip[aria-current="true"] { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); }
  .lp-chip-count { font-size: var(--text-sm); opacity: .75; }

  .lp-venue-badge[data-tone="distance"] { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }
  .lp-venue-badge[data-tone="muted"] { background: var(--color-surface-muted); color: var(--color-text-normal); }

  /* สนาม OMC (จองได้) กับสนามนอกระบบ แยกหัวข้อ — ผู้ใช้ต้องรู้ก่อนกดว่ากลุ่มไหนจองออนไลน์ได้ */
  .lp-group-title {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    margin: var(--space-8) 0 var(--space-4); font-size: var(--text-xl); color: var(--color-text-strong);
  }
  .lp-group-title:first-of-type { margin-block-start: 0; }
  .lp-group-title > .icon { inline-size: var(--icon-md); block-size: var(--icon-md); color: var(--color-brand-accent); }
  .lp-venue[data-kind="listing"] .lp-venue-media img:not([referrerpolicy]) { filter: grayscale(.6); } /* รูปจริงจากต้นทาง (2026-11-10) ไม่ทำเทา */
  .lp-venue-note { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
  .lp-venue-claim { font-size: var(--text-sm); color: var(--color-brand-link); }

  .lp-event { display: grid; gap: var(--space-2); color: inherit; text-decoration: none; }
  .lp-event-date, .lp-event-place { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
  .lp-event-date .icon, .lp-event-place .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); flex: none; }
  .lp-event-title { margin: 0; font-size: var(--text-lg); color: var(--color-text-strong); }

  /* ------------------------------------------------------------ สนามแนะนำ */

  .lp-featured {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--color-tint-success);
    border: 1px solid color-mix(in srgb, var(--color-brand-accent) 22%, transparent);
  }

  .lp-featured-head { display: flex; align-items: center; gap: var(--space-3); }
  .lp-featured-head .icon { color: var(--color-brand-accent); inline-size: var(--icon-lg); block-size: var(--icon-lg); flex: none; }
  .lp-featured-title { font-weight: var(--weight-bold); color: var(--color-text-strong); }
  .lp-featured-note { font-size: var(--text-sm); color: var(--color-text-muted); }
  .lp-featured-list { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }

  .lp-featured-item { display: flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }

  .lp-featured-thumb {
    inline-size: var(--space-16); block-size: var(--space-10);
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--color-surface-court);
    flex: none;
  }

  .lp-featured-name { font-weight: var(--weight-medium); color: var(--color-text-strong); font-size: var(--text-sm); }
  .lp-featured-place { font-size: var(--text-xs); color: var(--color-text-muted); }
  .lp-featured-more { margin-inline-start: auto; }

  /* --------------------------------------------------------- แถบผลการค้นหา */

  .lp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block-end: var(--space-6); }
  .lp-toolbar-count { color: var(--color-text-muted); }
  .lp-toolbar-tools { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-3); }

  /* --------------------------------------------------------------- การ์ดสนาม */

  .lp-venue {
    display: flex; flex-direction: column;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) var(--ease-standard),
                border-color var(--duration-normal) var(--ease-standard);
  }

  .lp-venue:hover { box-shadow: var(--shadow-lg); border-color: var(--color-brand-accent); }

  .lp-venue-media { position: relative; aspect-ratio: var(--court-card-image-ratio); overflow: hidden; background: var(--color-surface-court); }
  .lp-venue-media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } /* รูปแนวตั้งไม่ดันกรอบ (2026-11-10) */

  .lp-venue-badges { position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }

  .lp-venue-badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: var(--weight-medium);
    background: var(--color-surface-card);
    color: var(--color-text-strong);
    box-shadow: var(--shadow-sm);
  }

  .lp-venue-badge .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
  .lp-venue-badge[data-tone="verified"] { background: var(--color-brand-accent); color: var(--color-brand-on-accent); }
  .lp-venue-badge[data-tone="coach"] { background: var(--color-state-warning); color: var(--color-text-on-dark); }

  .lp-venue-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1; }
  .lp-venue-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-strong); }
  .lp-venue-title a { color: inherit; text-decoration: none; }
  .lp-venue-title a:hover { color: var(--color-brand-accent); }

  .lp-venue-place { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
  .lp-venue-place .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  .lp-venue-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
  .lp-venue-price { text-align: end; white-space: nowrap; }
  .lp-venue-price small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
  .lp-venue-price strong { font-size: var(--text-lg); color: var(--color-text-strong); font-variant-numeric: tabular-nums; }

  .lp-venue-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  .lp-venue-tag {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-tint-success);
    color: var(--color-brand-accent);
    font-size: var(--text-xs);
  }

  .lp-venue-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--color-text-muted); font-size: var(--text-xs); }
  .lp-venue-facts span { display: inline-flex; align-items: center; gap: var(--space-1); }
  .lp-venue-facts .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  .lp-venue-actions { display: flex; gap: var(--space-2); margin-block-start: auto; padding-block-start: var(--space-2); }
  .lp-venue-actions .btn { flex: 1; justify-content: center; }

  /* -------------------------------------------------------- ช่องทางติดต่อ */

  .lp-contact {
    display: flex; align-items: center; gap: var(--space-4);
    padding: clamp(var(--space-5), 2vw, var(--space-6));
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    color: inherit; text-decoration: none;
    transition: box-shadow var(--duration-normal) var(--ease-standard),
                border-color var(--duration-normal) var(--ease-standard);
  }

  a.lp-contact:hover { border-color: var(--color-brand-accent); box-shadow: var(--shadow-lg); }

  .lp-contact-icon {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: var(--space-12); block-size: var(--space-12);
    border-radius: var(--radius-full);
    background: var(--color-tint-success);
    color: var(--color-brand-accent);
  }

  .lp-contact-text { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
  .lp-contact-label { font-size: var(--text-sm); color: var(--color-text-muted); }
  .lp-contact-value { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-strong); }
  .lp-contact-note { font-size: var(--text-sm); color: var(--color-text-muted); }
  .lp-contact-go { margin-inline-start: auto; color: var(--color-text-muted); flex: none; }
}

/* ═══════════════════════════════════════════════ โลโก้แบรนด์

   ‼️ มาจาก partials/brand.php ที่เดียว — ห้ามประกอบโลโก้เองในหน้าใดหน้าหนึ่ง
      เครื่องหมายใช้ Sports Green · ชื่อใช้ navy บนพื้นสว่าง และสว่างทั้งคู่บนพื้นเข้ม */

@layer components {

  .brand-logo {
    display: inline-flex; align-items: center; gap: var(--space-3);
    color: var(--color-text-strong);
    text-decoration: none;
    line-height: 1;
  }

  .brand-logo-mark {
    flex: none;
    inline-size: var(--icon-lg); block-size: var(--icon-lg);
    color: var(--color-brand-logo); /* ‼️ ไม่ใช่ brand-accent — ธีมสีขององค์กรห้ามเปลี่ยนสีโลโก้ OMC */
  }

  .brand-logo-name {
    display: inline-flex; align-items: baseline; gap: .4em;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: .1em;
  }

  /* ‼️ คำว่า SPORTS บางกว่าและห่างกว่า OMC — เป็นสัดส่วนของโลโก้ ไม่ใช่การตกแต่ง
     สองคำน้ำหนักเท่ากันเมื่อไหร่ โลโก้จะอ่านเป็นคำเดียวยาวๆ แล้วจำไม่ได้ */
  .brand-logo-name span { font-weight: var(--weight-medium); letter-spacing: .18em; color: var(--color-text-normal); }

  /* ภาพจำลองหน้าจอในหน้าขาย (app-mockup) — โลโก้ตัวเดียวกัน ย่อลง */
  .brand-logo[data-size="sm"] { gap: var(--space-2); }
  .brand-logo[data-size="sm"] .brand-logo-mark { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
  .brand-logo[data-size="sm"] .brand-logo-name { font-size: var(--text-xs); }

  .brand-logo[data-size="lg"] .brand-logo-mark { inline-size: var(--space-10); block-size: var(--space-10); }
  .brand-logo[data-size="lg"] .brand-logo-name { font-size: var(--text-xl); }

  /* footer มือถือย่อโลโก้ลงหนึ่งขั้น — อยู่ layer เดียวกับขนาดโลโก้ ไม่งั้นแพ้ (ส่วนอื่นของ footer มือถืออยู่ที่ .public-footer-menu) */
  @media (max-width: 767px) {
    .public-footer-brand .brand-logo[data-size="lg"] .brand-logo-mark { inline-size: var(--space-8); block-size: var(--space-8); }
    .public-footer-brand .brand-logo[data-size="lg"] .brand-logo-name { font-size: var(--text-lg); }
  }

  /* พื้นเข้ม — ทั้งเครื่องหมายและชื่อต้องสว่างพอ ไม่งั้นโลโก้หายไปกับพื้น */
  .brand-logo[data-tone="dark"] { color: var(--color-text-on-dark); }
  /* พื้นเข้มใช้มิ้นต์ ตามแบบโลโก้ Open Court รุ่นพื้นมืด (2026-10-22) — เดิมเหลืองมะนาว */
  .brand-logo[data-tone="dark"] .brand-logo-mark { color: var(--color-stage-accent); }
  .brand-logo[data-tone="dark"] .brand-logo-name span { color: color-mix(in srgb, var(--color-text-on-dark) 78%, transparent); }

  /* ในเมนูข้างของหลังบ้านซึ่งพื้นเป็น navy อยู่แล้ว */
  .sidebar .brand-logo { color: var(--color-text-on-dark); }
  .sidebar .brand-logo .brand-logo-mark { color: var(--color-brand-highlight); }
  .sidebar .brand-logo .brand-logo-name span { color: var(--color-surface-on-sidebar); }

  /* โลโก้ที่ OMC อัปโหลด (PlatformBrandService · 2026-11-10) — รูปเดียวรวมเครื่องหมาย+ชื่อ สูงพอดีแถบ กว้างตามสัดส่วนภาพ */
  .brand-logo-img { display: block; flex: none; block-size: var(--space-10); inline-size: auto; max-inline-size: 220px; object-fit: contain; }
  .brand-logo[data-size="sm"] .brand-logo-img { block-size: var(--space-6); max-inline-size: 120px; }
  .brand-logo[data-size="lg"] .brand-logo-img { block-size: var(--space-12); max-inline-size: 280px; }
  @media (max-width: 640px) {
    .brand-logo-img { block-size: var(--space-8); max-inline-size: 160px; }
  }
  /* การ์ดตั้งไอคอนโลโก้ (ตั้งค่าระบบ › การตั้งค่าทั่วไป) — ซ้าย = ตัวอย่างบนพื้นสว่าง+พื้นเข้ม · ขวา = อัปโหลด */
  #platform-logo { scroll-margin-block-start: calc(var(--space-12) * 3); }
  /* การ์ดโลโก้อยู่ในคอลัมน์ครึ่งจอ (ผู้ใช้สั่ง 2026-11-11) — ตัวอย่างสองช่องเคียงกัน แล้วช่องอัปโหลดต่อด้านล่าง ไม่ยืด ไม่มีที่ว่าง */
  .platform-logo-grid { display: grid; gap: var(--space-5); }
  .platform-logo-slot { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; }
  .platform-logo-label { margin: 0; font-weight: var(--weight-semibold); color: var(--color-text-strong); }
  .platform-logo-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  @media (max-width: 480px) { .platform-logo-previews { grid-template-columns: 1fr; } }
  .platform-logo-preview {
    display: flex; align-items: center; justify-content: center;
    min-block-size: 88px; padding: var(--space-4);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-surface-page);
  }
  .platform-logo-preview[data-bg="dark"] { background: var(--color-surface-sidebar); border-color: var(--color-surface-sidebar); }
  .platform-logo-slot .hint { margin: 0; }
  .platform-logo-form > .btn { inline-size: 100%; }
  .platform-logo-reset { display: flex; justify-content: flex-end; }

}

@layer components {
  /* ‼️ ปุ่มแสดง/ซ่อนรหัสผ่านมีไอคอนสองอันซ้อนกัน แล้วสลับกันตามสถานะ
     สร้างไอคอนจาก JS ไม่ได้เพราะชุดไอคอนอยู่ฝั่ง PHP และ CSP ห้าม inline script
     ‼️ ไอคอนบอกสถานะ ไม่ใช่การกระทำ: ตาปิด = ซ่อนอยู่ · ตาเปิด = แสดงอยู่ (sheet 2026-10-21) */
  .field-reveal .reveal-on { display: none; }
  .field-reveal[data-shown="true"] .reveal-off { display: none; }
  .field-reveal[data-shown="true"] .reveal-on { display: inline-flex; }
}

@layer components {
  /* วงกลมไอคอนตกแต่งของ footer หน้าเข้าระบบ — คู่กับลิงก์ช่วยเหลือที่อยู่ข้างๆ */
  .auth-foot-mark {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: var(--space-10); block-size: var(--space-10);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-normal);
    color: var(--color-text-muted);
    flex: none;
  }

  .auth-foot-links .btn-ghost { padding-inline: 0; font-size: var(--text-sm); text-decoration: underline; }
}

@layer components {
  /* ข้อความตกแต่งเป็นลายมือ — เบาและจางกว่าเนื้อหาจริงเสมอ ไม่ให้แย่งสายตาจากฟอร์ม */
  .lp-script {
    font-style: italic;
    font-weight: var(--weight-normal);
    opacity: .62;
    letter-spacing: .02em;
  }
}

@layer layout {
  /* ‼️ footer ของเว็บขายมี 4 ช่อง: แบรนด์ · เมนู · ติดต่อ · กล่องชวนเริ่มใช้
     เว็บของสนามมีแค่ 2 ช่อง (แบรนด์ + เมนู) เพราะช่องทางติดต่อของสนามอยู่ในที่อยู่อยู่แล้ว
     กฎเดิม 2fr 1fr จึงใช้ไม่ได้กับทั้งสองแบบ — ใช้ auto-fit ให้จำนวนช่องกำหนดเอง */
  @media (min-width: 768px) {
    .public-footer-inner {
      grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
      align-items: start;
    }

    .public-footer-brand { grid-column: span 1; }
    .public-footer-legal { grid-column: 1 / -1; }
  }

  @media (min-width: 1100px) {
    .public-footer-inner { grid-template-columns: 1.5fr 1fr 1.2fr 0.8fr 1.3fr; }
    /* ไม่มีคอลัมน์ Social (ตั้งค่าว่าง) = กลับเป็น 4 ช่องเดิม */
    .public-footer-inner:not(:has(.public-footer-social)) { grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr; }
  }

  .public-footer-tagline { color: var(--color-text-muted); font-size: var(--text-sm); margin-block-start: var(--space-3); max-inline-size: 34ch; }

  .public-footer-col { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
  .public-footer-col a,
  .public-footer-col span { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
  .public-footer-col a:hover { color: var(--color-brand-accent); }
  .public-footer-col .icon { flex: none; color: var(--color-brand-accent); inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  .public-footer-head {
    font-size: var(--text-sm); font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    margin-block-end: var(--space-2);
  }

  .public-footer-cta { margin-block-start: 0; }

  .public-footer-legal {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-3) var(--space-6);
  }

  .public-footer-slogan {
    font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .public-footer-prefs { display: flex; align-items: center; gap: var(--space-2); }
  .public-footer-prefs form { display: flex; }

  /* ‼️ มือถือ: footer เดิมสูง ~700px เพราะเมนูเรียงทีละบรรทัดและแถวล่างแตกเป็นสามบรรทัด
        เมนูเป็นสามคอลัมน์ · ลิขสิทธิ์ซ้าย ธีม/ภาษาขวา แถวเดียว · slogan ซ่อน — เหลือ ~390px (desktop ไม่เปลี่ยน) */
  @media (max-width: 767px) {
    .public-footer { margin-block-start: var(--space-10); }
    .public-footer-inner { padding: var(--space-6) var(--space-4) var(--space-4); gap: var(--space-4); }

    .public-footer-address { margin-block-start: var(--space-2); gap: 0; }
    .public-footer-address a { min-block-size: 32px; }
    .public-footer-tagline { margin-block-start: var(--space-2); }

    .public-footer-menu {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--space-3);
      row-gap: 0;
      padding-block-start: var(--space-3);
      border-block-start: 1px solid var(--color-border-normal);
    }

    .public-footer-menu .public-footer-head { grid-column: 1 / -1; margin-block-end: 0; }
    .public-footer-menu a { min-block-size: 36px; text-decoration: none; color: var(--color-text-normal); }

    .public-footer-legal { flex-wrap: nowrap; gap: var(--space-3); padding-block-start: var(--space-3); font-size: var(--text-xs); }
    .public-footer-copyright { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; }
    .public-footer-copyright > span { white-space: nowrap; }
    .public-footer-dot,
    .public-footer-slogan { display: none; }
    .public-footer-prefs { flex: none; gap: 0; }
  }

  /* ‼️ แถบบนต้องติดขอบจอตอนเลื่อน — หน้าขายที่ยาวมาก ปุ่มเริ่มใช้งานต้องอยู่ในสายตาเสมอ */
  .public-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background: var(--color-surface-card);
  }

  .public-nav a[aria-current="page"] { color: var(--color-brand-accent); font-weight: var(--weight-medium); }
}

@layer components {
  /* ‼️ ปรับหลังเทียบกับภาพต้นแบบจริงที่ 1366px — สิ่งที่แก้และเหตุผล

     1. ท่อนที่เน้นของพาดหัวขึ้นบรรทัดใหม่เสมอ
        ปล่อยให้ไหลต่อกัน ภาษาไทยจะตัดคำกลางวลีจนอ่านเป็นคนละความหมาย
     2. การ์ดยอดขายของภาพจำลองย้ายเข้ามาด้านใน
        เดิมยื่นออกนอกกรอบเนื้อหาแล้วถูกตัดหายไปครึ่งใบบนจอ 1366px
     3. ข้อความตกแต่งของ hero ย้ายไปอยู่เหนือภาพจำลอง
        เดิมทับซ้อนกับภาพจำลองจนอ่านไม่ออก */

  .lp-title { max-inline-size: 26ch; }
  .lp-title em { display: block; }

  .mockup-chip {
    inset-block-end: calc(var(--space-6) * -1);
    inset-inline-end: var(--space-5);
  }

  .lp-hero-visual { flex-direction: column; align-items: stretch; gap: var(--space-5); }

  .lp-hero-script {
    position: static;
    align-self: flex-end;
    max-inline-size: 18ch;
    margin-inline-end: var(--space-5);
  }

  /* ‼️ ภาพจำลองมีการ์ดยอดขายห้อยอยู่ใต้ขอบ — ต้องเผื่อที่ให้มันในคอลัมน์
     ไม่เผื่อแล้วหัวข้อของ section ถัดไปจะถูกการ์ดทับ */
  .lp-hero-visual .mockup { margin-block-end: var(--space-6); }
}

@layer components {
  /* ‼️ การ์ดยอดขายต้องอยู่นอก .mockup เพราะ .mockup มี overflow: hidden เพื่อตัดมุมโค้ง
     เคยวางไว้ข้างใน แล้วครึ่งล่างของการ์ดถูกตัดหายไปบนจอ 1366px */
  .mockup-frame { position: relative; inline-size: 100%; }
  .mockup-chip { inset-block-end: calc(var(--space-5) * -1); inset-inline-end: var(--space-5); }

  /* พาดหัวของ hero ที่ 1366px กว้างได้ราว 530px — ขนาดเดิมทำให้วลีแรกตัดกลางคำ */
  .lp-title { font-size: clamp(2rem, 3.9vw, 2.9rem); }
}

@layer components {

  /* ------------------------------------------------- แผนที่จำลองบนหน้าไดเรกทอรี

     ‼️ หมุดวางด้วย data-spot ไม่ใช่ inline style — กฎเหล็กข้อ 15
        ตำแหน่งเป็นเรื่องของดีไซน์ ไม่ใช่ข้อมูล จึงอยู่ใน CSS ไม่ใช่ใน markup */
  .lp-map {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-surface-court);
    box-shadow: var(--shadow-lg);
  }

  .lp-map-canvas { inline-size: 100%; block-size: 100%; display: block; }

  .lp-map-pin {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-8);
    block-size: var(--space-8);
    border-radius: var(--radius-full);
    background: var(--color-surface-card);
    color: var(--color-brand-accent);
    box-shadow: var(--shadow-md);
  }

  .lp-map-pin .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  .lp-map-pin[data-spot="a"] { inset-block-start: 36%; inset-inline-start: 16%; }
  .lp-map-pin[data-spot="b"] { inset-block-start: 34%; inset-inline-end: 24%; }
  .lp-map-pin[data-spot="c"] { inset-block-end: 26%; inset-inline-start: 38%; }
  .lp-map-pin[data-spot="d"] { inset-block-end: 16%; inset-inline-end: 14%; }

  /* ‼️ หมุดตัวแรกเป็นสนามที่การ์ดกำลังพูดถึง จึงต้องเด่นกว่าอันอื่น
     หมุดทุกอันหน้าตาเท่ากัน แล้วการ์ดจะดูเหมือนไม่ได้ผูกกับอะไรบนแผนที่เลย */
  .lp-map-pin[data-spot="a"] {
    background: var(--color-brand-accent);
    color: var(--color-brand-on-accent);
    inline-size: var(--space-10);
    block-size: var(--space-10);
  }

  .lp-map-card {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-end: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-inline-size: 78%;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
  }

  .lp-map-card img {
    inline-size: var(--space-16);
    block-size: var(--space-12);
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    object-fit: cover;
  }

  .lp-map-card-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
  .lp-map-card-text strong { color: var(--color-text-strong); font-size: var(--text-sm); }
  .lp-map-card-text > span { color: var(--color-text-muted); font-size: var(--text-xs); }

  .lp-map-card-open {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-brand-accent) !important;
    font-weight: var(--weight-medium);
  }

  .lp-map-card-open .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  @media (max-width: 640px) {
    .lp-map-card { inset-inline: var(--space-3); max-inline-size: none; }
  }

  .lp-billing-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

  /* ‼️ แถบเหตุผล 4 ข้อใต้โมดูลเสริม — ตอบสิ่งที่เจ้าของสนามถามต่อทันทีหลังเห็นราคา
     เรียงเป็นแถวเดียวบนจอกว้าง และซ้อนลงบนจอแคบ ไม่บังคับให้เลื่อนซ้ายขวา */
  .lp-benefits {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .lp-benefit { display: flex; align-items: flex-start; gap: var(--space-3); }

  .lp-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-12);
    block-size: var(--space-12);
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--color-tint-success);
    color: var(--color-brand-accent);
  }

  .lp-benefit-text { display: flex; flex-direction: column; gap: var(--space-1); }
  .lp-benefit-text strong { color: var(--color-text-strong); line-height: var(--leading-tight); }
  .lp-benefit-text span { color: var(--color-text-muted); font-size: var(--text-sm); }
}

@layer components {
  /* ภาพประกอบในกรอบ — ใช้กับหน้าที่ครึ่งซ้ายสั้นกว่าหน้าแรก (ราคา · ติดต่อ · ไดเรกทอรี) */
  .lp-photo {
    position: relative;
    margin: 0;
    border-radius: var(--radius-xl);
    background: var(--color-surface-court);
    box-shadow: var(--shadow-lg);
  }

  .lp-photo > img {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: var(--hero-image-ratio);
    object-fit: cover;
    object-position: center 66%;
    border-radius: var(--radius-xl);
    display: block;
  }


  /* ‼️ คำโปรยอยู่ในกล่องขาวทับมุมล่าง ไม่ใช่ตัวอักษรวางบนภาพตรงๆ
     ข้อความบนภาพที่มีรายละเอียดเยอะ อ่านไม่ออกเสมอไม่ว่าจะเลือกสีอะไร */
  .lp-photo-quote {
    position: absolute;
    inset-block-end: calc(var(--space-6) * -1);
    inset-inline-end: var(--space-6);
    inset-inline-start: var(--space-10);
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  .lp-photo-quote .lp-script { max-inline-size: none; }

  .lp-photo-by {
    font-size: var(--text-xs); letter-spacing: .18em;
    color: var(--color-text-muted);
  }

  /* เผื่อที่ให้คำโปรยที่ห้อยอยู่ใต้ภาพ ไม่ให้ทับเนื้อหาถัดไป */
  .lp-hero-visual .lp-photo { margin-block-end: var(--space-10); }
}

@layer components {

  /* --------------------------------------------- ส่วนเพิ่มเติมของไดเรกทอรีสนาม */

  /* แถบคุณค่าใน hero — เรียงลงแนวตั้ง ไม่ใช่เต็มความกว้างแบบแถบใต้ hero หน้าแรก */
  .lp-proof-inline {
    border: 0;
    padding-block: 0;
    margin-block-start: var(--space-8);
    gap: var(--space-4);
  }

  @media (min-width: 640px) { .lp-proof-inline { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .lp-proof-inline .lp-card-icon { inline-size: var(--space-10); block-size: var(--space-10); margin: 0; }
  .lp-featured-text { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }

  /* ปุ่มสลับมุมมองการ์ด/รายการ */
  .lp-view-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .lp-view-toggle a {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: var(--space-10); block-size: var(--space-10);
    color: var(--color-text-muted);
  }

  .lp-view-toggle a[aria-current="true"] { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }

  /* ‼️ มุมมองรายการคือการ์ดเดิมที่วางภาพไว้ซ้าย ไม่ใช่ component คนละตัว
     ทำสองชุดเมื่อไหร่ วันที่เพิ่มข้อมูลบนการ์ดจะมีมุมมองหนึ่งที่ลืมแก้ */
  @media (min-width: 680px) {
    .lp-grid[data-view="list"] { grid-template-columns: minmax(0, 1fr); }
    .lp-grid[data-view="list"] .lp-venue { flex-direction: row; }
    .lp-grid[data-view="list"] .lp-venue-media { inline-size: 18rem; flex: none; aspect-ratio: auto; }
  }

  .lp-empty { align-items: center; text-align: center; padding-block: var(--space-16); }
  .lp-empty .lp-actions { margin-block-start: var(--space-2); justify-content: center; }

  /* ── หน้า /venues แบบ matchday (ผู้ใช้สั่ง 2026-10-22): หัว "ทั้งหมด N สนาม" · ตัวกรองซ้าย (sticky) · การ์ดขวา 4 คอลัมน์ */
  .vd-head { border-block-end: 1px solid var(--color-border-normal); }
  .vd-head-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4) var(--space-6); }
  .vd-title { font-size: clamp(var(--text-2xl), 2.4vw, var(--text-3xl)); font-weight: var(--weight-bold); color: var(--color-text-strong); line-height: var(--leading-tight); margin: 0; }
  .vd-title-count { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-muted); white-space: nowrap; }
  .vd-lead { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
  .vd-sort {
    display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
    min-block-size: 44px; padding-inline: var(--space-5);
    border: 1px solid var(--color-border-normal); border-radius: var(--radius-full);
    background: var(--color-surface-card); color: var(--color-text-strong); font-weight: var(--weight-bold); font-size: var(--text-sm);
    text-decoration: none;
  }
  .vd-sort[aria-pressed="true"] { border-color: var(--color-brand-accent); color: var(--color-brand-accent); }
  .vd-body { padding-block: var(--space-8) var(--space-12); }
  .vd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  @media (min-width: 1000px) { .vd-layout { grid-template-columns: 17.5rem minmax(0, 1fr); } }

  .vd-filter form {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-5); background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  }
  @media (min-width: 1000px) { .vd-filter { position: sticky; inset-block-start: calc(var(--chrome-h, 72px) + var(--space-4)); } }
  .vd-filter-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); padding-block-end: var(--space-3); border-block-end: 1px solid var(--color-border-normal); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-strong); }
  .vd-filter-label { margin: var(--space-2) 0 calc(var(--space-1) * -1); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-strong); }
  .vd-filter .field > label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vd-filter select:disabled { opacity: .6; }
  .vd-near {
    display: flex; align-items: center; gap: var(--space-2); min-block-size: 48px; padding-inline: var(--space-3);
    border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); cursor: pointer;
    font-weight: var(--weight-bold); color: var(--color-text-strong);
  }
  .vd-near input { inline-size: 18px; block-size: 18px; accent-color: var(--color-brand-accent); }
  .vd-near:has(input:checked) { border-color: var(--color-brand-accent); color: var(--color-brand-accent); background: var(--color-brand-soft); }
  .vd-near-status { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
  .vd-near-status[data-tone="error"] { color: var(--color-state-danger); }
  .vd-submit { inline-size: 100%; min-block-size: 48px; margin-block-start: var(--space-2); }
  .vd-clear { align-self: center; font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: underline; }

  .vd-group + .vd-group { margin-block-start: var(--space-8); }
  .vd-group-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-strong); }
  .vd-group-title span { font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--color-text-muted); }
  .vd-group-note { margin: calc(var(--space-2) * -1) 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
  .vd-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }

  .vd-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--color-surface-card); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard);
  }
  .vd-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-brand-accent); }
  .vd-card-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-surface-court); }
  /* ‼️ รูปจริงจากต้นทางมีทั้งแนวตั้ง/แนวนอน — รูปต้องไม่ดันกรอบ (แนวตั้งเคยทำการ์ดสูงกว่าเพื่อน ผู้ใช้เจอ 2026-11-10) */
  .vd-card-media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
  .vd-card[data-kind="listing"] .vd-card-media img:not([data-photo="real"]) { filter: grayscale(.5); } /* รูปจริงของสนาม (2026-11-10) แสดงสีจริง · เทาเฉพาะภาพตามกีฬา */
  /* เครดิตรูปจากต้นทาง เช่น "ภาพ: Wongnai" — มุมล่างซ้ายบนรูป (ผู้ใช้สั่ง 2026-11-10 เหมือนรูปข่าว) */
  .vd-card-credit {
    position: absolute; inset-inline-start: var(--space-2); inset-block-end: var(--space-2); max-inline-size: calc(100% - 3.5rem);
    padding: 1px var(--space-2); border-radius: var(--radius-sm); font-size: 10px; line-height: 1.5;
    background: var(--color-overlay); color: var(--color-text-on-dark);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
  }
  .vd-card-credit[hidden] { display: none; }

  /* /places/{id} รายละเอียดสนามนอกระบบ (ผู้ใช้สั่ง 2026-11-10) — โครงใช้ ct-* ของหน้าติดต่อเรา · ส่วนนี้เฉพาะรูป/ปุ่ม */
  .ld-flag {
    display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
    font-size: var(--text-sm); font-weight: var(--weight-bold); background: var(--color-surface-card); color: var(--color-text-muted);
    border: 1px solid var(--color-border-normal);
  }
  .ld-flag .icon { inline-size: 1rem; block-size: 1rem; }
  /* /platform/directory?tab=leads — แท็บหาลูกค้า (2026-11-11) */
  .ld-leads-contact { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
  .ld-leads-contact a, .ld-leads-contact span { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; font-size: var(--text-sm); }
  .ld-leads-contact .icon { inline-size: 1rem; block-size: 1rem; color: var(--color-brand-accent); }
  .ld-leads-note { color: var(--color-text-muted); font-style: italic; }
  :is(.ld-leads-status, .nc-status) select { min-block-size: 2.25rem; padding-block: 0; font-size: var(--text-sm); border-radius: var(--radius-full); }
  :is(.ld-leads-status, .nc-status)[data-tone="warning"] select { background: var(--color-tint-warning); }
  :is(.ld-leads-status, .nc-status)[data-tone="info"] select { background: var(--color-tint-info); }
  :is(.ld-leads-status, .nc-status)[data-tone="success"] select { background: var(--color-tint-success); }
  :is(.ld-leads-status, .nc-status)[data-tone="highlight"] select { background: var(--color-tint-highlight); }
  :is(.ld-leads-status, .nc-status)[data-tone="danger"] select { background: var(--color-tint-danger); }
  .nc-status-by { display: block; margin-block-start: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
  .ld-leads-empty { margin: 0; padding: var(--space-6); color: var(--color-text-muted); text-align: center; }
  .ld-flags { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
  /* ปุ่มย้อนกลับหน้าชื่อสนาม (ผู้ใช้สั่ง 2026-11-10) — /places/{id} · /venues/{slug}/info */
  .ld-title-row { display: flex; align-items: center; gap: var(--space-3); }
  .ld-title-row .vd-title { margin: 0; min-inline-size: 0; }
  .ld-layout { padding-block: 0 var(--space-12); }
  .ld-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-surface-court); box-shadow: var(--shadow-md); }
  .ld-photo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
  .ld-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .ld-actions .btn { flex: 1 1 12rem; justify-content: center; }
  .ld-note { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
  .ld-note a { color: var(--color-brand-link); }
  .ld-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
  .ld-foot a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-brand-link); text-decoration: none; }
  .ld-foot .icon { inline-size: 1rem; block-size: 1rem; }
  /* /venues/{slug}/info รายละเอียดสนาม OMC ก่อนจอง (2026-11-10) — คอร์ท · ราคา · ว่างวันนี้ */
  .ld-flag[data-tone="price"] { color: var(--color-text-strong); }
  .ld-about { margin: 0; color: var(--color-text-normal); line-height: 1.7; white-space: pre-line; }
  .ld-block { display: grid; gap: var(--space-3); }
  .ld-block h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-lg); color: var(--color-text-strong); }
  .ld-block h2 .icon { inline-size: 1.15rem; block-size: 1.15rem; color: var(--color-brand-accent); }
  .ld-block h2 span { font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--color-text-muted); }
  .ld-courts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
  .ld-courts li {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
    background: var(--color-surface-card); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg);
  }
  .ld-court-main, .ld-court-side { display: grid; gap: 2px; min-inline-size: 0; }
  .ld-court-side { text-align: end; flex: none; }
  .ld-court-main span, .ld-court-side span { font-size: var(--text-sm); color: var(--color-text-muted); }
  .ld-court-side span[data-free="yes"] { color: var(--color-state-success); font-weight: var(--weight-bold); }
  .vd-card-sport {
    position: absolute; inset-inline-end: var(--space-3); inset-block-end: var(--space-3);
    display: inline-flex; align-items: center; justify-content: center; inline-size: 30px; block-size: 30px;
    border-radius: var(--radius-full); background: var(--color-surface-card); color: var(--color-brand-accent); box-shadow: var(--shadow-sm);
  }
  .vd-card-sport svg { inline-size: 16px; block-size: 16px; }
  .vd-card-flag {
    position: absolute; inset-inline-start: var(--space-3); inset-block-start: var(--space-3);
    padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-bold);
    background: var(--color-surface-card); color: var(--color-text-muted);
  }
  .vd-card-body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-4); flex: 1 1 auto; }
  .vd-card-name { margin: 0; font-size: var(--text-base); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vd-card-name a { color: inherit; text-decoration: none; }
  .vd-card-name a::after { content: ""; position: absolute; inset: 0; } /* ทั้งการ์ดกดได้ */
  .vd-card-place { display: flex; align-items: center; gap: var(--space-1); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); min-inline-size: 0; }
  .vd-card-place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vd-card-place svg { flex: none; inline-size: 14px; block-size: 14px; }
  .vd-card-foot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border-normal);
  }
  .vd-card-price { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-bold); color: var(--color-text-strong); }
  .vd-card-price svg { inline-size: 16px; block-size: 16px; color: var(--color-brand-accent); }
  .vd-card-price[data-empty="true"] { font-weight: var(--weight-normal); font-size: var(--text-sm); color: var(--color-text-muted); }
  a.vd-card-price { position: relative; z-index: 1; text-decoration: none; }
  .vd-card-more { position: relative; z-index: 1; font-size: var(--text-xs); color: var(--color-text-muted); text-decoration: underline; white-space: nowrap; }
  .vd-card-more:hover { color: var(--color-brand-accent); }
  @media (max-width: 999px) { .vd-head-inner { flex-wrap: wrap; } }
  /* มือถือ: การ์ดสองใบต่อแถว (ใบเดียวเต็มจอ = รูปสูงเท่าจอ ต้องเลื่อนนานมาก) */
  @media (max-width: 640px) {
    .vd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .vd-card-body { padding: var(--space-2) var(--space-3) var(--space-3); }
    .vd-card-name { font-size: var(--text-sm); }
    .vd-card-place { font-size: var(--text-xs); }
    .vd-card-foot { flex-wrap: wrap; row-gap: var(--space-1); }
    .vd-card-price { font-size: var(--text-sm); }
  }
}

@layer components {
  /* ‼️ รายการติ๊กถูกในแถบ navy ต้องเป็นตัวอักษรสว่าง
     สีเนื้อหาปกติบนพื้น navy ได้ contrast ต่ำกว่า 2:1 ซึ่งอ่านไม่ออกจริงๆ */
  .lp-banner .lp-show-points li { color: color-mix(in srgb, var(--color-text-on-dark) 88%, transparent); }
  .lp-banner .lp-show-points .icon { color: var(--color-brand-highlight); }

  /* ภาพพื้นหลังของแถบ navy ต้องจางมาก มันมีหน้าที่ให้มิติ ไม่ใช่ให้ดู */
  .lp-banner-bg { opacity: .10; }
}

@layer components {
  /* ‼️ คอลัมน์ที่ต้องเริ่มจากบรรทัดบนสุด ไม่ใช่กึ่งกลาง
     ใช้กับ FAQ ที่คอลัมน์ซ้ายสั้นกว่าขวามาก แล้วจัดกึ่งกลางทำให้ดูเหมือนหลุดตำแหน่ง */
  .lp-price[data-align="start"] { align-items: start; }
}

@layer components {
  /* เบอร์โทรหลายเบอร์ในการ์ดเดียว — แต่ละเบอร์กดโทรได้เอง */
  .lp-contact-numbers { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }

  .lp-contact-numbers a {
    font-size: var(--text-lg); font-weight: var(--weight-bold);
    color: var(--color-text-strong); text-decoration: none;
    font-variant-numeric: tabular-nums;
  }

  .lp-contact-numbers a:hover { color: var(--color-brand-accent); text-decoration: underline; }
}

/* ═══════════════════════════════════════════════ ชุด component กลางของหลังบ้าน

   ‼️ ทุกอย่างในบล็อกนี้คือของกลางที่ทุกหน้าใช้ร่วมกัน
      หน้าไหนอยากได้หน้าตาต่างจากนี้ ต้องแก้ที่นี่ ไม่ใช่เขียนคลาสของตัวเอง
      เขียนเองทีละหน้าเมื่อไหร่ ระบบจะกลับไปเป็น "แต่ละหน้าหน้าตาไม่เหมือนกัน" ทันที */

@layer components {

  /* ---------------------------------------------------------- หัวเพจ */

  /* ‼️ หัวเพจต้องเตี้ย เนื้อหาหลักต้องอยู่เหนือขอบจอตั้งแต่เปิดหน้า
     บนโน้ตบุ๊ก 1366×768 ทุกความสูงที่หัวเพจกินไป คือหนึ่งแถวของตารางที่หายไป */
  /* ‼️ ต้องเขียน align-items ทับด้วย — กฎเดิมตั้ง flex-start ไว้ตอนที่หัวเพจยังเป็นแถวเดียว
     พอเปลี่ยนเป็นคอลัมน์ flex-start แปลว่าลูกไม่ยืดเต็มความกว้าง
     ผลคือแถวชื่อหน้ากับปุ่มหดลงมาเท่าเนื้อหา แล้วปุ่มไปกองอยู่ติดชื่อหน้าแทนที่จะชิดขวา
     เจอตอนย้ายหน้ารายการมาใช้หัวเพจแบบใหม่ และหาสาเหตุไม่เจอจากการอ่าน CSS อย่างเดียว */
  .page-head { flex-direction: column; align-items: stretch; gap: var(--space-3); }

  .page-head-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
  }

  /* ‼️ ต้องกินพื้นที่ที่เหลือทั้งหมด ไม่งั้นปุ่มของหน้าจะเลื่อนมาชิดป้ายสถานะ
     แล้วอ่านเหมือนว่าปุ่มเป็นส่วนหนึ่งของชื่อหน้า แทนที่จะเป็นการกระทำของหน้า */
  .page-head-text { flex: 1; min-inline-size: 0; }

  /* ‼️ ไอคอนประจำหน้าอยู่หน้าชื่อ ไม่ใช่บนบรรทัดของตัวเอง
     มันทำให้จำได้ว่าอยู่โมดูลไหนโดยไม่ต้องอ่าน ซึ่งสำคัญกับระบบที่มีเมนู 40 หน้า */
  .page-head-icon {
    flex: none;
    inline-size: var(--icon-xl);
    block-size: var(--icon-xl);
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--color-brand-wash);
    color: var(--color-brand-accent);
  }

  .page-head-icon .icon { inline-size: var(--icon-lg); block-size: var(--icon-lg); }

  /* ------------------------------------------------ ภาพประกอบของหัวเพจ

     ‼️ เป็นของตกแต่ง จึงต้องหายไปก่อนของอื่นเสมอเมื่อพื้นที่ไม่พอ
        ภาพตกแต่งที่ยังอยู่ตอนจอแคบ คือภาพที่เบียดปุ่มของหน้าให้ตกบรรทัด
     ‼️ pointer-events: none เพราะมันซ้อนอยู่ใต้ปุ่ม — เคยมีเคสที่ภาพ hero
        ยื่นไปทับช่องติ๊กแล้วกดไม่ติด โดย DOM และ CSS ของช่องติ๊กเองไม่มีอะไรผิดเลย */
  .page-art {
    display: none;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-brand-accent);
    pointer-events: none;
    user-select: none;
  }

  @media (min-width: 1100px) {
    .page-head-main[data-art="true"] .page-art { display: flex; }
  }

  /* ‼️ tagline เป็นส่วนหนึ่งของภาพ ไม่ใช่เนื้อหา — จึงตัวเล็ก จาง และไม่มีน้ำหนัก
     ทำให้เด่นเมื่อไหร่ มันจะแย่งความสนใจจากชื่อหน้าซึ่งเป็นสิ่งเดียวที่ต้องอ่าน */
  .page-art-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    text-align: end;
    color: var(--color-brand-accent);
    font-size: var(--text-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .7;
    white-space: nowrap;
  }

  /* ป้ายสถานะอยู่แถวเดียวกับชื่อหน้า ไม่ใช่บรรทัดใหม่ — ประหยัดความสูงและอ่านเป็นประโยคเดียว */
  .page-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
  .page-title-row h1 { margin: 0; }

  /* บรรทัดบริบท — ตอบว่า "ที่เห็นอยู่นี้เป็นข้อมูลของอะไร ช่วงไหน" */
  .page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .page-meta > span { display: inline-flex; align-items: center; gap: var(--space-2); }
  .page-meta .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  .page-actions form { display: contents; }

  /* ‼️ ปุ่มที่ทำลายข้อมูลต้องแยกออกจากกลุ่มปุ่มปกติด้วยระยะ ไม่ใช่แค่สี
     ติดกันแล้วมือลื่นไปโดนได้ และสีแดงอย่างเดียวช่วยคนตาบอดสีไม่ได้ */
  .page-actions .btn-danger { margin-inline-start: var(--space-4); }

  /* ------------------------------------------------------------ แท็บ */

  .tabs { scrollbar-width: thin; }
  .tab-text { white-space: nowrap; }
  .tab .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); flex: none; }

  .tab-count[data-tone="success"]   { background: var(--color-tint-success); color: var(--color-state-success); }
  .tab-count[data-tone="warning"]   { background: var(--color-tint-warning); color: var(--color-state-warning); }
  .tab-count[data-tone="danger"]    { background: var(--color-tint-danger);  color: var(--color-state-danger); }
  .tab-count[data-tone="info"]      { background: var(--color-tint-info);    color: var(--color-state-info); }
  .tab-count[data-tone="highlight"] { background: var(--color-tint-highlight); color: var(--color-text-strong); }

  /* บนจอแคบแท็บเลื่อนแนวนอน และหยุดที่ขอบแท็บพอดี ไม่ค้างกลางตัวอักษร */
  @media (max-width: 640px) {
    .tabs { gap: var(--space-4); scroll-snap-type: x proximity; }
    .tab  { scroll-snap-align: start; }
  }

  /* ------------------------------------------------------- สถานะว่าง */

  .empty-state {
    border: 1px dashed var(--color-border-normal);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);
    max-inline-size: 52ch;
    margin-inline: auto;
  }

  .empty-state p { max-inline-size: 44ch; }

  .empty-icon {
    display: grid;
    place-items: center;
    inline-size: var(--space-16);
    block-size: var(--space-16);
    border-radius: var(--radius-full);
    background: var(--color-tint-neutral);
    color: var(--color-text-muted);
  }

  /* ‼️ สีของกรอบต้องบอกความหมายตั้งแต่ยังไม่ได้อ่าน
     "ยังไม่มีข้อมูล" กับ "คุณไม่มีสิทธิ์" ต่างกันมากเกินกว่าจะใช้หน้าตาเดียวกัน */
  .empty-state[data-kind="forbidden"] .empty-icon {
    background: var(--color-tint-danger); color: var(--color-state-danger);
  }
  .empty-state[data-kind="locked"] .empty-icon {
    background: var(--color-tint-highlight); color: var(--color-brand-primary);
  }
  .empty-state[data-kind="error"] .empty-icon {
    background: var(--color-tint-warning); color: var(--color-state-warning);
  }
  .empty-state[data-kind="filtered"] .empty-icon {
    background: var(--color-tint-info); color: var(--color-state-info);
  }

  /* ในกล่องเล็ก (ช่องข้างแดชบอร์ด) ต้องเตี้ยลง ไม่งั้นกล่องสูงกว่าเนื้อหาที่มันแทน */
  .empty-state[data-compact="true"] {
    padding: var(--space-6) var(--space-4);
    border: 0;
    background: transparent;
  }

  .empty-state[data-compact="true"] .empty-icon { inline-size: var(--space-10); block-size: var(--space-10); }
  .empty-state[data-compact="true"] h3 { font-size: var(--text-base); }

  /* --------------------------------------------- โมดูลที่ยังเปิดไม่ได้ */

  .locked-feature {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-normal);
    background: var(--color-surface-card);
  }

  .locked-icon {
    display: grid;
    place-items: center;
    inline-size: var(--space-16);
    block-size: var(--space-16);
    border-radius: var(--radius-full);
    flex: none;
    background: var(--color-tint-highlight);
    color: var(--color-brand-primary);
  }

  .locked-feature[data-reason="permission"] .locked-icon {
    background: var(--color-tint-danger); color: var(--color-state-danger);
  }
  .locked-feature[data-reason="disabled"] .locked-icon {
    background: var(--color-tint-neutral); color: var(--color-text-muted);
  }

  .locked-text { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; }
  .locked-text h2 { margin: 0; }

  /* คำกำกับด้านบนบอกชนิดของการถูกปิด — เป็นสิ่งแรกที่สายตาเจอ */
  .locked-kicker {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
  }

  .locked-lead { color: var(--color-text-normal); max-inline-size: 64ch; }

  .locked-benefits { list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: var(--space-2); }

  .locked-benefits li { display: flex; align-items: flex-start; gap: var(--space-2);
    font-size: var(--text-sm); color: var(--color-text-normal); }

  .locked-benefits .icon { color: var(--color-state-success); flex: none;
    inline-size: var(--icon-sm); block-size: var(--icon-sm); margin-block-start: var(--space-1); }

  .locked-price { display: flex; align-items: baseline; gap: var(--space-2); }
  .locked-price strong { font-size: var(--text-2xl); color: var(--color-text-strong); }
  .locked-price small { color: var(--color-text-muted); }

  .locked-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

  .locked-note { display: flex; align-items: flex-start; gap: var(--space-2);
    font-size: var(--text-sm); color: var(--color-text-muted); }
  .locked-note .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm);
    margin-block-start: var(--space-1); }

  .locked-feature[data-compact="true"] { padding: var(--space-5); gap: var(--space-4); }
  .locked-feature[data-compact="true"] .locked-icon {
    inline-size: var(--space-10); block-size: var(--space-10);
  }

  @media (max-width: 640px) {
    .locked-feature { flex-direction: column; padding: var(--space-5); }
  }

  /* -------------------------------------------------- รูปประจำตัว */

  /* ‼️ สีของอักษรย่อมาจาก token ไม่ใช่สีดิบ — ต้องอ่านออกทั้งโหมดสว่างและมืด */
  .avatar-text {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: .02em;
  }

  .avatar[data-size="md"] .avatar-text { font-size: var(--text-sm); }
  .avatar[data-size="lg"] .avatar-text { font-size: var(--text-lg); }
  .avatar[data-size="xl"] .avatar-text { font-size: var(--text-2xl); }

  .avatar img { inline-size: 100%; block-size: 100%; border-radius: inherit; object-fit: cover; }

  a.avatar { text-decoration: none; }

  .avatar[data-tone="1"] { background: var(--color-tint-info);      color: var(--color-state-info); }
  .avatar[data-tone="2"] { background: var(--color-tint-success);   color: var(--color-state-success); }
  .avatar[data-tone="3"] { background: var(--color-tint-warning);   color: var(--color-state-warning); }
  .avatar[data-tone="4"] { background: var(--color-tint-highlight); color: var(--color-text-strong); }
  .avatar[data-tone="5"] { background: var(--color-brand-wash);     color: var(--color-brand-primary); }
  .avatar[data-tone="6"] { background: var(--color-tint-neutral);   color: var(--color-text-normal); }

  /* ชื่อคนในตาราง — รูปกับชื่ออยู่บรรทัดเดียวกันและไม่ดันความสูงของแถว */
  /* ‼️ ไอคอนประจำแถวช่วยให้กวาดสายตาหาแถวที่ต้องการได้โดยไม่ต้องอ่านชื่อทีละแถว
     จางกว่าตัวอักษรเสมอ เพราะมันเป็นตัวช่วยหา ไม่ใช่ข้อมูล */
  .cell-icon {
    display: inline-flex;
    margin-inline-end: var(--space-2);
    color: var(--color-text-muted);
    vertical-align: middle;
  }

  .cell-icon .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  .cell-person { display: inline-flex; align-items: center; gap: var(--space-2); min-inline-size: 0; }
  .cell-person a { text-decoration: none; }
  .cell-person a:hover { text-decoration: underline; }

  /* ------------------------------------------------------------ ตาราง */

  /* ‼️ หัวตารางตรึงเมื่อเลื่อน — ตารางยาวที่หัวหายไปบังคับให้เลื่อนขึ้นไปดูว่าคอลัมน์นี้คืออะไร
     ต้องมีพื้นหลังทึบ ไม่งั้นแถวจะวิ่งทะลุหัวตอนเลื่อน */
  .table thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--table-head-background);
  }

  .table tfoot td {
    background: var(--color-surface-raised);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    border-block-start: 2px solid var(--color-border-strong);
  }

  .table td.mono { font-family: var(--font-mono); font-size: var(--text-sm); }

  .table tbody tr:hover { background: var(--color-surface-raised); }

  /* ปุ่มท้ายแถวจางไว้จนกว่าจะชี้ถึงแถว — ตารางที่มีปุ่มเข้มทุกแถวอ่านยากกว่าที่ควร
     ‼️ บนจอสัมผัสไม่มี hover จึงต้องเข้มเสมอ ไม่งั้นกดไม่ถูก */
  @media (hover: hover) and (pointer: fine) {
    .table tbody .actions { opacity: .55; transition: opacity var(--duration-fast) var(--ease-standard); }
    .table tbody tr:hover .actions,
    .table tbody .actions:focus-within { opacity: 1; }
  }

  /* ------------------------------------------------- ปุ่มขนาดเล็ก */

  /* ‼️ ปุ่มในแถบเครื่องมือและในกล่องย่อยต้องเล็กกว่าปุ่มหลักของหน้า
     ขนาดเดียวกันหมดทำให้ไม่มีอะไรดูสำคัญกว่าอะไร ซึ่งคือการไม่มีลำดับความสำคัญ
     ‼️ ยังต้องสูงพอให้นิ้วกดได้ จึงลดแค่ตัวอักษรกับระยะข้าง ไม่ลดจนต่ำกว่าเป้าหมายการกด */
  .btn-sm {
    padding-block: var(--space-2);
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
    min-block-size: var(--space-8);
  }

  .btn-sm .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  /* ------------------------------- ตัวเลือกภาษาและโหมดแสดงผลที่ใช้ร่วมกัน */

  /* ‼️ ตัวเลือกคู่นี้อยู่ 4 ที่ (แถบบน · ลิ้นชักมือถือ · หน้าเข้าสู่ระบบ · ท้ายเว็บสาธารณะ)
     จึงต้องมีคลาสของตัวเอง ไม่ใช่พึ่งคลาสของที่ที่มันไปวางอยู่
     พึ่งที่วางเมื่อไหร่ ย้ายที่แล้วมันจะหน้าตาพังโดยไม่มีอะไรฟ้อง */
  .prefs-theme, .prefs-lang { display: inline-flex; align-items: center; gap: var(--space-2); }

  .prefs-lang select {
    min-inline-size: var(--space-16);
    padding-block: var(--space-1);
    font-size: var(--text-sm);
  }

  .prefs-theme button {
    display: inline-grid;
    place-items: center;
    min-inline-size: var(--space-10);
    min-block-size: var(--space-10);
  }
}

/* ═══════════════════════════════════════════════ หน้ารายละเอียดแบบพื้นที่ทำงาน

   ‼️ หน้ารายละเอียดของระบบนี้ไม่ใช่หน้าอ่านอย่างเดียว — มันคือที่ที่เคาน์เตอร์ทำงาน
      สิ่งที่ต้องตัดสินใจ (ยอดค้าง ปุ่มรับเงิน ปุ่มยกเลิก) จึงอยู่ขวาและอยู่บนสุด
      ส่วนรายการยาวๆ ที่ใช้ "อ่าน" อยู่ซ้าย ซึ่งเลื่อนได้โดยไม่กระทบสิ่งที่ต้องกด */

@layer layout {

  .record-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--layout-aside-width);
    gap: var(--space-5);
    align-items: start;
  }

  .record-main,
  .record-side { display: flex; flex-direction: column; gap: var(--space-5); min-inline-size: 0; }

  /* ‼️ จอแคบกว่านี้ให้คอลัมน์ขวาขึ้นก่อน ไม่ใช่ลงไปอยู่ล่างสุด
     ลงล่างสุดแปลว่าบนมือถือต้องเลื่อนผ่านรายการทั้งหมดกว่าจะถึงปุ่มรับเงิน
     ซึ่งเป็นสิ่งเดียวที่คนเปิดหน้านี้บนมือถือต้องการ */
  @media (max-width: 1100px) {
    .record-layout { grid-template-columns: minmax(0, 1fr); }
    .record-side   { order: -1; }
  }
}

@layer components {

  /* บรรทัดคน — รูป ชื่อ เบอร์ และลูกศรถ้ากดเข้าไปดูต่อได้ */
  .person-line {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-normal);
    background: var(--color-surface-raised);
    color: var(--color-text-normal);
    text-decoration: none;
  }

  a.person-line:hover { border-color: var(--color-brand-accent); background: var(--color-brand-wash); }

  .person-line-text { display: flex; flex-direction: column; min-inline-size: 0; flex: 1; }
  .person-line-text strong { color: var(--color-text-strong); }
  .person-line-text small { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

  .person-line > .icon { color: var(--color-text-muted); flex: none; }
  .person-line[data-static="true"] > .icon { display: none; }
}

@layer components {

  /* ‼️ เปอร์เซ็นต์ที่ไม่บอกว่าเทียบกับอะไร คือตัวเลขที่เอาไปใช้ตัดสินใจไม่ได้
     บรรทัดนี้จึงต้องอยู่ติดกับแถวตัวเลข ไม่ใช่ซ่อนอยู่ใน tooltip */
  .report-compare {
    margin-block-start: calc(var(--space-2) * -1);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
}

/* ═══════════════════════════════════════════════ ช่องค้นหาลูกค้า (partials/customer-picker.php)

   ‼️ รายการผลลัพธ์ต้องลอยทับเนื้อหาข้างล่าง ไม่ใช่ดันของให้เลื่อนลง
      ดันของลงแปลว่าทุกครั้งที่พิมพ์ ปุ่มที่ผู้ใช้กำลังจะกดจะขยับหนี */

@layer components {

  .customer-picker { position: relative; }

  .customer-results {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: var(--z-sticky);
    margin: var(--space-1) 0 0;
    padding: var(--space-1);
    list-style: none;
    max-block-size: 18rem;
    overflow-y: auto;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
  }

  .customer-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  .customer-result:hover,
  .customer-result.is-active { background: var(--color-brand-wash); }

  .customer-result-name {
    grid-column: 1;
    color: var(--color-text-strong);
    font-weight: var(--weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .customer-result-meta {
    grid-column: 1;
    grid-row: 2;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }

  .customer-result-tag {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-tint-info);
    color: var(--color-state-info);
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  /* ‼️ "ไม่พบ" ต้องกดไม่ได้ — ให้กดได้แล้วผู้ใช้จะคิดว่ามันสร้างลูกค้าใหม่ให้ */
  .customer-result.is-empty {
    cursor: default;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    display: block;
  }

  .customer-result.is-empty:hover { background: none; }
}

/* ═══════════════════════════════════════════════ หัวข้อการ์ดที่มีตัวเลขสรุป */

@layer components {

  .card-meta {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;

    /* ‼️ ห้ามบรรทัดเดียวบนจอแคบ — "แสดง 1-25 จากทั้งหมด 300 รายการ" ยาวกว่าจอ 375
       ของเดิม nowrap ทั้งจอ ทำให้หัวการ์ดดันทั้งหน้ากว้างเกินจอ 13px
       ซึ่งอาการที่ผู้ใช้เห็นคือเลื่อนหน้าซ้ายขวาได้ทั้งหน้าบนมือถือ
       ตั้งแต่ 600px ขึ้นไปยังไม่ตัดบรรทัด เพราะที่นั่นมันอยู่ข้างหัวข้อและควรอยู่บรรทัดเดียว */
    white-space: normal;
  }

  @media (min-width: 600px) {
    .card-meta { white-space: nowrap; }
  }
}

/* ═══════════════════════════════════════════════ คาบเรียนและการเช็คชื่อ

   ‼️ คนเรียงเป็นแถวในตาราง ไม่ใช่เรียงเป็นคอลัมน์ข้างกัน
      เรียงข้างกันแล้วคอร์สที่มีผู้เรียน 20 คนจะกว้างเกินจอทุกคาบ
      และบนมือถือจะใช้ไม่ได้เลย ทั้งที่คาบเรียนคือเวลาที่คนหยิบมือถือขึ้นมาเช็คชื่อพอดี */

@layer components {

  .session-list { display: flex; flex-direction: column; }

  .session-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;
    padding-block: var(--space-1);
  }

  .session-head::-webkit-details-marker { display: none; }

  .session-no {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: var(--space-8);
    block-size: var(--space-8);
    border-radius: var(--radius-full);
    background: var(--color-tint-neutral);
    color: var(--color-text-strong);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }

  .session-when { flex: 1; min-inline-size: 0; font-size: var(--text-sm); }
  .session-when strong { color: var(--color-text-strong); }

  details.session-block[open] > .session-head { margin-block-end: var(--space-3); }

  /* ‼️ กล่องที่ปิดอยู่ต้องไม่กินความกว้างของของข้างใน
     Chrome ใช้ content-visibility กับ <details> ที่ปิด ซึ่งยังคำนวณ layout ของลูกอยู่
     เคยทำให้ทุกหน้าหลังบ้านเลื่อนซ้ายขวาได้บนมือถือโดยไม่มีอะไรบนหน้าจอบอก */
  details.session-block:not([open]) > *:not(summary) { display: none; }

  .attendance-table th[scope="row"] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: normal;
    text-align: start;
  }

  .attendance-table th[scope="row"] label { margin: 0; cursor: pointer; }
  .attendance-table td { inline-size: 40%; }
  .attendance-table select { inline-size: 100%; }

  /* ‼️ แถวที่ยังไม่ได้เช็คต้องดูต่างจากแถวที่เช็คแล้ว ไม่ใช่เหมือนกันหมด
     เหมือนกันหมดแปลว่าโค้ชต้องไล่อ่านทีละช่องว่าเหลือใครที่ยังไม่ได้ทำ */
  .attendance-table select[data-mark=""] { border-style: dashed; }
}

/* ═══════════════════════════════════════════════ แถบความคืบหน้า (partials/meter.php)

   ‼️ ความกว้างมาจาก data-pct ไม่ใช่ style= — CSP ตั้ง style-src 'self' ซึ่งบล็อก inline style
      เขียน style="width:70%" แล้วแถบจะกว้าง 0 ทุกอันบนเครื่องจริงโดยหน้าไม่ error อะไรเลย */

@layer components {

  .meter {
    display: block;
    inline-size: 100%;
    block-size: var(--progress-height);
    border-radius: var(--radius-full);
    background: var(--color-tint-neutral);
    overflow: hidden;
  }

  .meter-fill {
    display: block;
    block-size: 100%;
    border-radius: var(--radius-full);
    background: var(--color-brand-accent);
  }

  .meter[data-tone="success"] .meter-fill { background: var(--color-state-success); }
  .meter[data-tone="warning"] .meter-fill { background: var(--color-state-warning); }
  .meter[data-tone="danger"]  .meter-fill { background: var(--color-state-danger); }
  .meter[data-tone="info"]    .meter-fill { background: var(--color-state-info); }
  .meter-fill[data-pct="0"] { inline-size: 0%; }
  .meter-fill[data-pct="2"] { inline-size: 2%; }
  .meter-fill[data-pct="4"] { inline-size: 4%; }
  .meter-fill[data-pct="6"] { inline-size: 6%; }
  .meter-fill[data-pct="8"] { inline-size: 8%; }
  .meter-fill[data-pct="10"] { inline-size: 10%; }
  .meter-fill[data-pct="12"] { inline-size: 12%; }
  .meter-fill[data-pct="14"] { inline-size: 14%; }
  .meter-fill[data-pct="16"] { inline-size: 16%; }
  .meter-fill[data-pct="18"] { inline-size: 18%; }
  .meter-fill[data-pct="20"] { inline-size: 20%; }
  .meter-fill[data-pct="22"] { inline-size: 22%; }
  .meter-fill[data-pct="24"] { inline-size: 24%; }
  .meter-fill[data-pct="26"] { inline-size: 26%; }
  .meter-fill[data-pct="28"] { inline-size: 28%; }
  .meter-fill[data-pct="30"] { inline-size: 30%; }
  .meter-fill[data-pct="32"] { inline-size: 32%; }
  .meter-fill[data-pct="34"] { inline-size: 34%; }
  .meter-fill[data-pct="36"] { inline-size: 36%; }
  .meter-fill[data-pct="38"] { inline-size: 38%; }
  .meter-fill[data-pct="40"] { inline-size: 40%; }
  .meter-fill[data-pct="42"] { inline-size: 42%; }
  .meter-fill[data-pct="44"] { inline-size: 44%; }
  .meter-fill[data-pct="46"] { inline-size: 46%; }
  .meter-fill[data-pct="48"] { inline-size: 48%; }
  .meter-fill[data-pct="50"] { inline-size: 50%; }
  .meter-fill[data-pct="52"] { inline-size: 52%; }
  .meter-fill[data-pct="54"] { inline-size: 54%; }
  .meter-fill[data-pct="56"] { inline-size: 56%; }
  .meter-fill[data-pct="58"] { inline-size: 58%; }
  .meter-fill[data-pct="60"] { inline-size: 60%; }
  .meter-fill[data-pct="62"] { inline-size: 62%; }
  .meter-fill[data-pct="64"] { inline-size: 64%; }
  .meter-fill[data-pct="66"] { inline-size: 66%; }
  .meter-fill[data-pct="68"] { inline-size: 68%; }
  .meter-fill[data-pct="70"] { inline-size: 70%; }
  .meter-fill[data-pct="72"] { inline-size: 72%; }
  .meter-fill[data-pct="74"] { inline-size: 74%; }
  .meter-fill[data-pct="76"] { inline-size: 76%; }
  .meter-fill[data-pct="78"] { inline-size: 78%; }
  .meter-fill[data-pct="80"] { inline-size: 80%; }
  .meter-fill[data-pct="82"] { inline-size: 82%; }
  .meter-fill[data-pct="84"] { inline-size: 84%; }
  .meter-fill[data-pct="86"] { inline-size: 86%; }
  .meter-fill[data-pct="88"] { inline-size: 88%; }
  .meter-fill[data-pct="90"] { inline-size: 90%; }
  .meter-fill[data-pct="92"] { inline-size: 92%; }
  .meter-fill[data-pct="94"] { inline-size: 94%; }
  .meter-fill[data-pct="96"] { inline-size: 96%; }
  .meter-fill[data-pct="98"] { inline-size: 98%; }
  .meter-fill[data-pct="100"] { inline-size: 100%; }
}

/* ═══════════════════════════════════════════════ ปุ่มทำลายข้อมูลในตาราง

   ‼️ แถวละปุ่มแดงทึบทำให้สายตาไปหยุดที่ "ลบ" ก่อนข้อมูล ซึ่งเป็นสิ่งที่คนเปิดตารางมาอ่าน
      และเมื่อทุกแถวแดงเท่ากัน ความแดงก็เลิกแปลว่าอันตราย
      ปุ่มเต็มสียังอยู่ที่หัวเพจ ซึ่งมีอันเดียวต่อหน้าและหมายถึงของทั้งหน้าจริงๆ */

@layer components {

  /* ‼️ ปุ่มไอคอนที่เป็นการทำลายข้อมูล ใช้สีแดงกับตัวไอคอน ไม่ใช่พื้นหลังทึบ
     ทุกแถวมีปุ่มแดงทึบ = สายตาไปหยุดที่ "ลบ" ก่อนข้อมูล และความแดงเลิกแปลว่าอันตราย
     ปุ่มแดงเต็มใบยังอยู่ที่หัวเพจและในกล่องยืนยัน ซึ่งมีอันเดียวและหมายถึงของทั้งหน้าจริงๆ */
  .btn-icon.btn-danger {
    background: transparent;
    color: var(--color-state-danger);
  }

  .btn-icon.btn-danger:hover { background: var(--color-tint-danger); }
  .actions .confirm-form { display: contents; }
}

/* ═══════════════════════════════════════════════ แผนราคาของแพลตฟอร์ม

   ‼️ แต่ละแผนเป็นการ์ดที่ตอบสองคำถามในแถวเดียว: ขายได้เท่าไหร่ และรวมอะไรบ้าง
      ของเดิมเป็นหัวข้อที่มีป้ายกองอยู่ข้างล่าง ซึ่งต้องอ่านทุกป้ายก่อนจะรู้ว่าแผนไหนต่างกันตรงไหน */

@layer components {

  .plan-grid { display: flex; flex-direction: column; gap: var(--space-4); }

  .plan-card {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  /* ‼️ แผนที่ทำรายได้เหนือค่าเฉลี่ยมีขอบเน้น — มาจากตัวเลขจริง ไม่ใช่ป้าย "ยอดนิยม" ที่ตั้งเอง
     ป้ายที่ตั้งเองจะค้างอยู่กับแผนเดิมตลอดไป แม้วันที่มันเลิกเป็นแผนที่คนซื้อมากที่สุดแล้ว */
  .plan-card[data-featured="true"] { border-color: var(--color-brand-accent); }

  .plan-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-block-end: 1px solid var(--color-border-normal);
  }

  .plan-card-icon {
    flex: none;
    inline-size: 60px;
    block-size: 60px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--color-tint-success);
    color: var(--color-brand-accent);
  }

  .plan-card-icon .icon { inline-size: 30px; block-size: 30px; }
  .plan-card-icon[data-tone="info"]    { background: var(--color-tint-info);    color: var(--color-state-info); }
  .plan-card-icon[data-tone="warning"] { background: var(--color-tint-warning); color: var(--color-state-warning); }

  .plan-card-name { flex: 1; min-inline-size: 12rem; }
  .plan-card-name h2 { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-heavy); display: flex; align-items: center; gap: var(--space-3); }
  .plan-card-name h2 .badge { background: var(--color-brand-accent); color: var(--color-brand-on-accent); font-size: var(--text-xs); }

  /* ตัวเลขของแผนเรียงเป็นคู่ ไอคอน · ป้าย-ค่า (ภาพต้นแบบ) ไม่ใช่ประโยคเดียวที่ต้องอ่านทั้งบรรทัด */
  .plan-card-stats { display: flex; gap: var(--space-8); margin: 0; }

  .plan-card-stats > div {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: var(--space-3);
    align-items: center;
  }

  .plan-card-stats .stat-icon { grid-row: 1 / 3; color: var(--color-text-normal); display: grid; }
  .plan-card-stats dt { display: contents; color: var(--color-text-muted); font-size: var(--text-xs); }

  .plan-card-stats dd {
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
  }

  .plan-card-stats dd .muted { font-weight: var(--weight-normal); font-size: var(--text-sm); }

  .plan-card-body {
    display: grid;
    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6) var(--space-6);
    align-items: start;
  }

  .plan-card-aside { padding-inline-end: var(--space-6); border-inline-end: 1px solid var(--color-border-normal); }

  .plan-card-price { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); }

  .plan-card-price strong {
    font-size: var(--text-3xl);
    font-weight: var(--weight-heavy);
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
  }

  .plan-card-price span { color: var(--color-text-muted); font-size: var(--text-base); }

  .plan-card-quota {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
    color: var(--color-text-strong);
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
  }

  .plan-card-quota .icon { color: var(--color-brand-accent); }

  .plan-modules-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    color: var(--color-text-strong);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
  }

  .plan-modules-title .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

  /* ‼️ ชิปเรียงต่อกัน (ภาพต้นแบบ) — ที่รวม = พื้นเขียวจางมีเครื่องหมายถูก · ที่ไม่รวม = ขอบเทามีกากบาท
     ต่างกันด้วยไอคอน พื้น และน้ำหนักตัวอักษร ไม่ใช่แค่สี — คนตาบอดสีต้องอ่านออกว่าแผนนี้ได้อะไร */
  .plan-module-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .plan-module {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-3);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
  }

  .plan-module .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); flex: none; }

  .plan-module[data-included="true"] {
    color: var(--color-text-strong);
    font-weight: var(--weight-medium);
    background: var(--color-tint-success);
    border-color: color-mix(in srgb, var(--color-brand-accent) 25%, transparent);
  }

  .plan-module[data-included="true"] .icon { color: var(--color-brand-accent); }

  /* ‼️ ที่ไม่รวมต้องจางลงจริง แต่ต้องยังอ่านออก (contrast ผ่าน AA) — "ไม่ได้อะไร" คือข้อมูลที่คนต้องอ่านก่อนซื้อ */
  .plan-module[data-included="false"] { color: var(--color-text-muted); background: var(--color-surface-card); }
  .plan-module[data-included="false"] .icon { opacity: .7; }

  .plan-legend .plan-module { border: 0; background: transparent; padding-inline: 0; }

  .plan-legend {
    display: flex;
    gap: var(--space-5);
    margin-block-start: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  @media (max-width: 900px) {
    .plan-card-body { grid-template-columns: minmax(0, 1fr); }
    .plan-card-aside { padding-inline-end: 0; border-inline-end: 0; }
    .plan-card-stats { gap: var(--space-4); }
  }
}

/* ═══════════════════════════════════════════════ กล่องย่อยของหน้าที่เพิ่งยกเครื่อง */

@layer components {

  /* ‼️ ราคาและโควตาของแผนอยู่ในกล่องเดียว ไม่ใช่ลูกของ grid คนละช่อง
     แยกเป็นลูกคนละช่องเมื่อไหร่ รายการโมดูลจะตกไปอยู่คอลัมน์ซ้ายที่แคบจนเรียงได้แถวเดียว */
  .plan-card-aside { display: flex; flex-direction: column; gap: var(--space-1); }

  .plan-modules { min-inline-size: 0; }

  /* ฟอร์มสมัครเรียนที่แทรกอยู่ใต้ตารางผู้สมัคร — มีเส้นคั่นบนเพื่อบอกว่าเป็นคนละส่วนกับตาราง */
  .enroll-form {
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border-normal);
  }
}

/* ═══════════════════════════════════════════════ โครงของหน้าฟอร์ม

   ‼️ ฟอร์มของเดิมลอยอยู่กลางพื้นที่ว่าง ไม่มีกรอบ ไม่มีหัวข้อ
      ผลคือหน้าฟอร์มทุกหน้าดูเหมือนหน้าที่ยังทำไม่เสร็จ และไม่มีอะไรบอกว่าช่องกลุ่มไหนคู่กับกลุ่มไหน
      ต้นแบบชุด v2 ทุกภาพที่เป็นฟอร์ม วางฟอร์มในการ์ดเสมอ และมีการ์ดสรุปอยู่ขวา

   ‼️ การ์ดสรุปด้านขวาต้องไม่ใช่ที่เก็บข้อมูลที่ฟอร์มไม่มี — มันสรุปสิ่งที่กรอกไปแล้ว
      หรือบอกว่ากดบันทึกแล้วจะเกิดอะไร ไม่ใช่โฆษณาที่กินความกว้างของฟอร์ม */

@layer layout {

  .form-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--layout-aside-width);
    gap: var(--space-5);
    align-items: start;
  }

  .form-shell > .form-shell-main,
  .form-shell > .form-shell-side { display: flex; flex-direction: column; gap: var(--space-5); min-inline-size: 0; }

  /* ‼️ จอแคบกว่านี้ให้การ์ดสรุปลงไปอยู่ใต้ฟอร์ม ไม่ใช่ขึ้นก่อน
     ต่างจากหน้ารายละเอียด (record-layout) โดยตั้งใจ — ที่นั่นคอลัมน์ขวาคือปุ่มที่ต้องกด
     ที่นี่คอลัมน์ขวาคือสรุปของสิ่งที่ยังไม่ได้กรอก ซึ่งอ่านก่อนกรอกแล้วไม่มีประโยชน์ */
  @media (max-width: 1100px) {
    .form-shell { grid-template-columns: minmax(0, 1fr); }
  }
}

@layer components {

  /* ‼️ ฟอร์มในการ์ดต้องไม่มีเส้นคั่นซ้ำกับเส้นของการ์ด */
  .card-body > form > .field-grid:first-child { margin-block-start: 0; }

  /* กล่องสรุป — รายการไอคอน + หัวข้อ + คำอธิบาย */
  .summary-list { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }

  .summary-item { display: flex; gap: var(--space-3); align-items: flex-start; }

  .summary-item > .icon-box {
    flex: none;
    inline-size: var(--icon-xl);
    block-size: var(--icon-xl);
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-tint-neutral);
    color: var(--color-text-normal);
  }

  .summary-item[data-tone="success"] > .icon-box { background: var(--color-tint-success); color: var(--color-state-success); }
  .summary-item[data-tone="info"]    > .icon-box { background: var(--color-tint-info);    color: var(--color-state-info); }
  .summary-item[data-tone="warning"] > .icon-box { background: var(--color-tint-warning); color: var(--color-state-warning); }

  .summary-text { min-inline-size: 0; }
  .summary-text strong { display: block; color: var(--color-text-strong); }
  .summary-text span { color: var(--color-text-muted); font-size: var(--text-sm); word-break: break-word; }

  /* ‼️ แถบยืนยันท้ายกล่องสรุป — บอกว่ากดบันทึกแล้วจะเกิดอะไรขึ้นจริง
     ไม่ใช่คำโฆษณา ผู้ใช้ที่กำลังจะกดปุ่มต้องการคำตอบนี้ ไม่ใช่กำลังใจ */
  .summary-note {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-tint-success);
    color: var(--color-text-strong);
  }

  .summary-note .icon { color: var(--color-state-success); flex: none; }
  .summary-note p { margin: 0; font-size: var(--text-sm); color: var(--color-text-normal); }
  .summary-note strong { display: block; color: var(--color-text-strong); }
}

/* ═══════════════════════════════════════════════ แถบความสมบูรณ์ในตาราง */

@layer components {

  /* ‼️ แถบกับตัวเลขต้องอยู่ด้วยกัน — แถบอย่างเดียวเทียบค่าที่ใกล้กันไม่ได้
     และตัวเลขอย่างเดียวทำให้ต้องอ่านทุกแถวเพื่อหาแถวที่ต่ำสุด */
  .cell-meter { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 8rem; }
  .cell-meter .meter { flex: 1; min-inline-size: var(--space-16); }

  .cell-meter-value {
    flex: none;
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-sm);
  }
}

/* ═══════════════════════════════════════════════ แถวของการ์ดสองใบ

   ‼️ ใช้กับการ์ดที่เนื้อหาสั้นและเป็นเรื่องคู่กัน (รายละเอียด + แผน · ข้อมูล + สถานะ)
      การ์ดเต็มความกว้างที่มีฟอร์มสั้นข้างใน เหลือที่ว่างขวามือครึ่งหนึ่งที่ไม่มีอะไรอยู่
      และดันของที่คนมาหาจริงลงไปอีกหนึ่งจอ */

@layer layout {

  .card-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: start;
  }

  .card-row > .page-section { padding-block: 0; min-inline-size: 0; }

  @media (max-width: 1100px) {
    .card-row { grid-template-columns: minmax(0, 1fr); }
    .card-row > .page-section + .page-section { margin-block-start: var(--space-5); }
  }
}

/* ═══════════════════════════════════════════════ ตารางคอร์ทแบบหลายวัน

   ‼️ นี่เป็นข้อยกเว้นที่สองของกฎ "ห้ามเลื่อนแนวนอน" (อีกอันคือตารางสิทธิ์)
      เหตุผลเดียวกัน: ความหมายของตารางนี้คือการเทียบข้ามวันและข้ามคอร์ท
      ยุบเป็นการ์ดแล้วคำถาม "สัปดาห์นี้ว่างวันไหน" ตอบไม่ได้เลย ซึ่งทำลายเหตุผลที่หน้านี้มีอยู่

   ‼️ คอลัมน์ชื่อคอร์ทตรึงซ้ายและหัววันตรึงบน
      ไม่ตรึงแล้วพอเลื่อนไปวันศุกร์จะไม่รู้ว่าแถวที่ดูอยู่คือคอร์ทไหน แล้วคนอ่านผิดคอร์ท
      ซึ่งจบลงด้วยการรับจองทับของจริง */

@layer components {

  .week-grid-wrap {
    overflow: auto;
    max-block-size: 70vh;
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);

    /* ‼️ overflow: auto อย่างเดียวไม่พอ — ทั้งหน้ายังเลื่อนซ้ายขวาตามตารางได้อยู่
       เพราะเนื้อหาที่ล้นยังถูกนับเป็น scrollable overflow ของ document
       วัดแล้วหน้ากว้าง 2496px บนจอ 1366px ทั้งที่กล่องนี้กว้างแค่ 1284px
       contain: paint บอกเบราว์เซอร์ว่าลูกทั้งหมดจะไม่วาดออกนอกกล่องนี้
       จึงไม่ถูกนับรวมเป็น overflow ของหน้า — เป็นวิธีเดียวกับที่ .court-grid-wrap ใช้ */
    contain: paint;
  }

  /* ‼️ table-layout: fixed เพื่อให้เจ็ดวันกว้างเท่ากันและพอดีจอ
     ปล่อยให้เบราว์เซอร์คิดเอง (auto) วันที่มีข้อความหัวยาวกว่าจะกว้างกว่าวันอื่น
     และรวมแล้วกว้าง 2460px บนจอ 1366px ทั้งที่เนื้อหาจริงต้องการแค่ราว 1250px
     ‼️ min-inline-size กันไม่ให้แคบจนแท่งเวลาบางกว่า 2px บนมือถือ — ต่ำกว่านั้นให้เลื่อนแทน */
  .week-grid {
    inline-size: 100%;
    min-inline-size: 60rem;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }

  .week-grid th,
  .week-grid td { padding: 0; }

  .week-grid-corner,
  .week-grid-court {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    inline-size: var(--grid-label-width);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-card);
    border-inline-end: 1px solid var(--color-border-normal);
    text-align: start;
  }

  .week-grid-corner {
    z-index: 3;
    vertical-align: bottom;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
  }

  .week-grid thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: var(--color-surface-raised);
  }

  .week-grid-day {
    padding: var(--space-2) var(--space-2) var(--space-1);
    border-inline-start: 1px solid var(--color-border-normal);
    text-align: center;
  }

  .week-grid-day[data-today="true"] { background: var(--color-brand-wash); }

  .week-grid-weekday {
    display: block;
    color: var(--color-text-strong);
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .week-grid-date    { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }

  .week-grid-ticks {
    inset-block-start: calc(var(--space-12) + var(--space-1));
    padding-block-end: var(--space-1);
    border-inline-start: 1px solid var(--color-border-normal);
    font-weight: var(--weight-normal);
  }

  .week-grid-ticks[data-today="true"] { background: var(--color-brand-wash); }

  .week-grid-tick-row { display: flex; gap: var(--slot-week-gap); padding-inline: var(--space-1); }

  /* ‼️ ทุกช่องกว้างเท่ากันด้วย 1fr ไม่ใช่ความกว้างตายตัว
     ตายตัวแล้วสนามที่เปิด 06:00 ถึง 02:00 จะกว้างกว่าจอสองเท่าโดยไม่มีอะไรบอก */
  .week-grid-tick {
    flex: 1 1 0;
    min-inline-size: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-align: start;
    font-variant-numeric: tabular-nums;
  }

  .week-grid-cells {
    padding: var(--space-1);
    border-inline-start: 1px solid var(--color-border-normal);
    border-block-start: 1px solid var(--color-border-normal);
    vertical-align: middle;
  }

  .week-grid-cells[data-today="true"] { background: var(--color-brand-wash); }

  /* ตัวช่องเวลาเป็น flex อยู่ใน <span> ข้างใน — ทำ <td> เป็น flex เองจะพังโครงตาราง */
  /* ‼️ ช่องว่างระหว่างแท่งต้องเล็กกว่าของตารางรายวันมาก
     32 ช่อง × ช่องว่าง 4px = 124px ของความกว้างหายไปกับช่องว่างล้วนๆ
     ซึ่งดันเนื้อหาให้กว้างเกินคอลัมน์ แล้ว bin/qa/visual.js รายงานว่าข้อความล้นกล่อง 42 จุด */
  .week-day-slots { display: flex; gap: var(--slot-week-gap); inline-size: 100%; }

  .week-grid-court {
    border-block-start: 1px solid var(--color-border-normal);
    vertical-align: middle;
  }

  .week-grid-court-name { display: block; color: var(--color-text-strong); font-size: var(--text-sm); }
  .week-grid-court-meta { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }

  /* ‼️ ช่องว่างไม่มีเส้นขอบ เป็นแถบพื้นอ่อนต่อกัน (ภาพต้นแบบ) — ขอบทุกช่องทำให้ 32 ช่องต่อวันกลายเป็นหวีที่อ่านไม่ออก
     ช่องของการจองใบเดียวกันเชื่อมเป็นบล็อกเดียวด้วย data-run (partials/court-week.php)
     แต่ยังเป็นลิงก์แยกทุกช่องและมี title บอกทุกอย่าง ส่วนชื่อผู้จองเต็มๆ อยู่ในมุมมองรายวัน */
  .week-cell {
    flex: 1 1 0;
    min-inline-size: 2px;
    block-size: var(--space-8);
    border-radius: 2px;
    background: var(--color-surface-head);
    border: 0;
    display: block;
  }

  a.week-cell:hover { outline: 2px solid var(--color-focus); outline-offset: 1px; position: relative; z-index: 1; }

  .week-cell[data-state="booked"]  { background: var(--color-slot-booked); }
  .week-cell[data-state="course"]  { background: var(--color-tint-info); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-state-info) 35%, transparent); }
  .week-cell[data-state="partial"] { background: var(--color-slot-held); box-shadow: inset 0 0 0 1px var(--color-state-warning); }
  .week-cell[data-state="blocked"] { background: var(--color-tint-warning); }
  .week-cell[data-state="closed"]  { background: var(--color-slot-blocked); }

  /* เวลาที่ผ่านไปแล้วเป็นลายขีดจาง (ภาพต้นแบบ) — ต่างจาก "ว่าง" โดยไม่ต้องพึ่งสี */
  .week-cell[data-state="past"] {
    background: repeating-linear-gradient(135deg, var(--color-surface-head) 0 3px, var(--color-slot-past) 3px 6px);
  }

  /* ช่องที่ต่อกันเป็นก้อนเดียว: ลบช่องว่างระหว่างช่อง และมนเฉพาะหัว-ท้ายของก้อน */
  .week-cell:is([data-run="mid"], [data-run="end"]) { margin-inline-start: calc(var(--slot-week-gap) * -1); }
  .week-cell[data-run="start"] { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
  .week-cell[data-run="mid"]   { border-radius: 0; }
  .week-cell[data-run="end"]   { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  .week-cell[data-run="solo"]  { border-radius: var(--radius-sm); }

  .week-grid-closed {
    flex: 1;
    block-size: var(--space-6);
    border-radius: var(--radius-sm);
    background: var(--color-slot-blocked);
  }

  /* ‼️ จอแคบย่อคอลัมน์ชื่อคอร์ทและซ่อนบรรทัดรอง แทนการย่อตารางจนอ่านไม่ออก
     ผู้ใช้ที่ต้องการรายละเอียดเต็มสลับไปมุมมองรายวันได้จากแถบด้านบน */
  @media (max-width: 900px) {
    .week-grid-wrap { max-block-size: 60vh; }
    .week-grid-corner,
    .week-grid-court { inline-size: var(--grid-hour-min-width); }

    .week-grid-court-meta { display: none; }

    /* ‼️ คอลัมน์แคบลงเหลือ 54px แล้ว ชื่อคอร์ทต้องตัดบรรทัด ไม่ใช่ล้นออกนอกช่อง
       ล้นแล้วชื่อไปทับแถบของวันแรก อ่านไม่ออกทั้งชื่อคอร์ทและตาราง
       ตัดกลางคำได้ เพราะชื่ออย่าง "Pickleball 1" ไม่มีจุดตัดคำในความกว้างเท่านี้ */
    .week-grid-court-name { overflow-wrap: anywhere; line-height: 1.25; }
  }
}

/* ═══════════════════════════════════════════════ คำอธิบายสีของตาราง */

@layer components {

  .grid-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-block-start: var(--space-4);
    padding: 0;
    list-style: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .grid-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }

  .grid-legend-swatch {
    inline-size: var(--space-4);
    block-size: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-slot-free);
    border: 1px solid var(--color-slot-free-border);
  }

  .grid-legend-swatch[data-state="booked"]  { background: var(--color-slot-booked);  border-color: var(--color-slot-booked); }
  .grid-legend-swatch[data-state="course"]  { background: var(--color-state-info);   border-color: var(--color-state-info); }
  .grid-legend-swatch[data-state="partial"] { background: var(--color-slot-held);    border-color: var(--color-state-warning); }
  .grid-legend-swatch[data-state="blocked"] { background: var(--color-tint-warning); border-color: var(--color-state-warning); }
  .grid-legend-swatch[data-state="past"]    { background: var(--color-slot-past);    border-color: var(--color-border-strong); }
}

/* ═══════════════════════════════════════════════ การ์ดช่วงเวลาที่แนะนำ */

@layer components {

  .suggest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .suggest-card {
    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);
  }

  .suggest-icon {
    flex: none;
    inline-size: var(--icon-xl);
    block-size: var(--icon-xl);
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-tint-highlight);
    color: var(--color-state-warning);
  }

  .suggest-text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
  .suggest-text strong { color: var(--color-text-strong); }

  .suggest-time {
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-medium);
  }
}

@layer components {
  /* ‼️ แถวหัวตารางสองชั้น — ชั้นบนคือวัน ชั้นล่างคือขีดบอกชั่วโมง
     ทั้งสองแถวไม่มีสไตล์ของตัวเอง แต่ต้องมีชื่อคลาสเพื่อให้ชุดตรวจ
     และคนที่มาอ่าน CSS ทีหลัง รู้ว่าโครงหัวตารางเป็นสองชั้นโดยตั้งใจ */
  .week-grid-days { vertical-align: bottom; }
  .week-grid-hours { vertical-align: top; }
}

/* ═══════════════════════════════════════════════ ตัวเลือกวันแบบปฏิทินเล็ก

   ‼️ อยู่ในหน้าจองหน้าเคาน์เตอร์ — ธุรการเลือกวันจาก "รูปของเดือน" ไม่ใช่จากช่องพิมพ์วันที่
      ช่องพิมพ์วันที่ตอบคำถาม "วันที่เท่าไหร่" ได้ แต่ตอบ "เสาร์หน้าคือวันไหน" ไม่ได้
      ซึ่งเป็นคำถามที่ลูกค้าถามจริงตอนโทรมา */

@layer components {

  .mini-cal {
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
    padding: var(--space-3);
  }

  .mini-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block-end: var(--space-2);
  }

  .mini-cal-head strong { color: var(--color-text-strong); }

  .mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-1);
  }

  .mini-cal-weekday {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    padding-block-end: var(--space-1);
  }

  /* ‼️ พื้นที่กดต้องไม่ต่ำกว่า 32px — ต่ำกว่านั้นคนกดพลาดไปวันข้างๆ
     และการจองผิดวันคือความผิดพลาดที่ต้องโทรกลับไปแก้กับลูกค้า */
  .mini-cal-day {
    display: grid;
    place-items: center;
    min-block-size: var(--space-8);
    border-radius: var(--radius-sm);
    color: var(--color-text-normal);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
  }

  a.mini-cal-day:hover { background: var(--color-brand-wash); }

  .mini-cal-day[data-current="true"] {
    background: var(--color-brand-accent);
    color: var(--color-brand-on-accent);
    font-weight: var(--weight-bold);
  }

  .mini-cal-day[data-outside="true"] { color: var(--color-text-muted); opacity: .55; }
  .mini-cal-day[data-muted="true"]   { color: var(--color-text-muted); opacity: .4; }
}

/* ═══════════════════════════════════════════════ แท็บคอร์ทและรายการช่องเวลา */

@layer components {

  .court-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block: var(--space-4) var(--space-3);
  }

  .court-tab {
    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-normal);
    font-size: var(--text-sm);
    text-decoration: none;
    min-block-size: var(--space-8);
    display: inline-flex;
    align-items: center;
  }

  .court-tab:hover { border-color: var(--color-brand-accent); }

  .court-tab[aria-current="true"] {
    background: var(--color-brand-accent);
    border-color: var(--color-brand-accent);
    color: var(--color-brand-on-accent);
  }

  /* ‼️ ช่องเวลาเรียงลงมาเป็นแถว ไม่ใช่เรียงเป็นตาราง
     เรียงเป็นตารางแล้วต้องกวาดสายตาสองแกนเพื่อหาเวลาที่ลูกค้าเพิ่งพูด
     เรียงลงมาแกนเดียว หาเวลาที่ต้องการได้ด้วยการไล่ลงอย่างเดียว */
  .slot-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    max-block-size: 22rem;
    overflow-y: auto;
  }

  .slot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    min-block-size: var(--space-10);
    border-radius: var(--radius-sm);
    background: var(--color-slot-free);
    border: 1px solid var(--color-slot-free-border);
    color: var(--color-text-normal);
    text-decoration: none;
  }

  a.slot-row:hover { border-color: var(--color-brand-accent); background: var(--color-brand-wash); }

  .slot-row-time { font-variant-numeric: tabular-nums; color: var(--color-text-strong); }
  .slot-row-state { color: var(--color-text-muted); font-size: var(--text-sm); }

  .slot-row[data-state="chosen"] {
    background: var(--color-brand-accent);
    border-color: var(--color-brand-accent);
  }

  .slot-row[data-state="chosen"] .slot-row-time,
  .slot-row[data-state="chosen"] .slot-row-state { color: var(--color-brand-on-accent); }

  .slot-row[data-state="booked"]  { background: var(--color-tint-neutral); border-color: var(--color-border-normal); }
  .slot-row[data-state="partial"] { background: var(--color-slot-held);    border-color: var(--color-state-warning); }
  .slot-row[data-state="blocked"] { background: var(--color-tint-warning); border-color: var(--color-state-warning); }
  .slot-row[data-state="past"],
  .slot-row[data-state="closed"]  { background: var(--color-slot-past);    border-color: var(--color-border-normal); opacity: .7; }
}

/* ═══════════════════════════════════════════════ การ์ดเลือกระดับสมาชิก

   ‼️ เป็น radio ที่มีการ์ดเป็นป้าย ไม่ใช่ div ที่ผูก JavaScript
      radio ทำงานได้ด้วยคีย์บอร์ดและ screen reader ตั้งแต่ต้นโดยไม่ต้องเขียนอะไรเพิ่ม
      และฟอร์มยังส่งได้ถ้า JavaScript ไม่ทำงาน */

@layer components {

  .tier-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-4);
    border: 0;
    margin: 0;
    padding: 0;
  }

  .tier-card {
    position: relative;
    display: block;
    cursor: pointer;
  }

  /* ‼️ ซ่อน radio ด้วย opacity ไม่ใช่ display:none
     display:none เอาออกจากลำดับ focus ทั้งหมด แล้วเลือกด้วยคีย์บอร์ดไม่ได้เลย */
  .tier-card input {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-start: var(--space-4);
    inline-size: var(--space-5);
    block-size: var(--space-5);
    opacity: 0;
  }

  .tier-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    block-size: 100%;
    padding: var(--space-4);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);
  }

  .tier-card:hover .tier-card-body { border-color: var(--color-brand-accent); }

  .tier-card input:checked + .tier-card-body {
    border-color: var(--color-brand-accent);
    background: var(--color-brand-wash);
    box-shadow: inset 0 0 0 1px var(--color-brand-accent);
  }

  /* ‼️ วงแหวน focus ต้องเห็นได้ เพราะ radio ตัวจริงถูกซ่อน
     ไม่มีวงแหวน = คนที่ใช้คีย์บอร์ดไม่รู้ว่ากำลังอยู่ที่ใบไหน */
  .tier-card input:focus-visible + .tier-card-body {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .tier-card-head { display: flex; align-items: center; gap: var(--space-2); }
  .tier-card-head strong { color: var(--color-text-strong); }

  .tier-card-icon {
    inline-size: var(--icon-lg);
    block-size: var(--icon-lg);
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-tint-highlight);
    color: var(--color-state-warning);
  }

  .tier-card-price {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
  }

  .tier-card-price .muted { font-size: var(--text-sm); font-weight: var(--weight-normal); }

  .tier-card-perks { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
  .tier-card-perks > span { display: flex; align-items: center; gap: var(--space-2); }

  .tier-card-perks .icon {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    flex: none;
    color: var(--color-state-success);
  }

  /* ช่องติ๊กที่มีข้อความข้างหลัง — พื้นที่กดครอบทั้งบรรทัด ไม่ใช่แค่กล่องเล็ก */
  /* ‼️ ชิดบน ไม่ใช่กึ่งกลาง — ช่องติ๊กที่มีคำอธิบายสองบรรทัดจะลอยกลางข้อความถ้าใช้ center
     แล้วมองไม่ออกว่าช่องติ๊กนี้เป็นของบรรทัดไหน */
  .check-line { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
  .check-line input { inline-size: var(--icon-base); block-size: var(--icon-base); flex: none; margin-block-start: 2px; }
  .check-line > span { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }

  /* ‼️ ป้ายที่ห่อช่องติ๊กไว้ข้างในได้รูปแบบเดียวกับ .check-line โดยไม่ต้องไล่แก้ทุกหน้า
     ฟอร์ม 21 หน้ามีช่องติ๊กเขียน markup กันเอง ผลคือกล่องติ๊กลอยอยู่เหนือข้อความ
     เพราะ .field เป็น flex แนวตั้ง — กติกาเดียวกันตรงนี้จึงคุมทุกหน้าพร้อมกัน */
  .field label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    font-weight: var(--weight-normal);
  }

  .field label:has(> input[type="checkbox"]) > input {
    inline-size: var(--icon-base);
    block-size: var(--icon-base);
    flex: none;
  }
}

/* ═══════════════════════════════════════════════ รูปแบบหน้าฟอร์ม (DESIGN.md "รูปแบบหน้า → ฟอร์ม")

   ‼️ อยู่นอก @layer ตั้งใจ — .form-actions เดิมอยู่นอก layer
      กติกาใน layer แพ้กติกานอก layer ทุกตัวไม่ว่าจะเฉพาะเจาะจงแค่ไหน
      เขียนไว้ใน layer แล้วแถบท้ายฟอร์มจะไม่เปลี่ยนเลย โดยไม่มี error อะไรบอก

   โครง: <form class="form-layout" data-aside="true">
           <div class="form-main">  การ์ดของแต่ละส่วน + form-actions.php  </div>
           <aside class="form-aside"> summary-card.php / คำแนะนำ </aside>
         </form> */

.form-layout {
    display: grid;
    gap: var(--form-section-gap);
    align-items: start;
}

/* ‼️ container ที่ .form-main เพื่อให้ช่อง "wide" รู้ว่ามีที่พอกินสองคอลัมน์ไหม
   ใช้ media query ไม่ได้ เพราะความกว้างของฟอร์มขึ้นกับว่ามีคอลัมน์ข้างหรือไม่ ไม่ใช่ความกว้างจอ
   span 2 ในกริดที่เหลือคอลัมน์เดียว = กริดสร้างคอลัมน์ที่สองขึ้นมาเองแล้วล้นจอ */
.form-main {
    display: flex;
    flex-direction: column;
    gap: var(--form-section-gap);
    min-inline-size: 0;
    container-type: inline-size;
}

.form-aside {
    display: flex;
    flex-direction: column;
    gap: var(--form-section-gap);
    min-inline-size: 0;
}

/* ‼️ คอลัมน์ข้างอยู่ซ้ายบนจอกว้าง แต่ใน DOM อยู่หลังฟอร์ม
   บนมือถือฟอร์มต้องขึ้นก่อน — ผู้ใช้เปิดหน้านี้มาเพื่อกรอก ไม่ใช่เพื่ออ่านสรุป
   และลำดับของ screen reader กับปุ่ม Tab ก็ควรเริ่มที่ช่องกรอกเหมือนกัน */
@media (min-width: 1024px) {
    .form-layout[data-aside="true"] {
        grid-template-columns: var(--layout-aside-width) minmax(0, 1fr);
        grid-template-areas: "aside main";
    }

    .form-layout[data-aside="true"] > .form-main { grid-area: main; }

    .form-layout[data-aside="true"] > .form-aside {
        grid-area: aside;
        position: sticky;
        inset-block-start: var(--space-6);
    }
}

/* ช่องกรอกในการ์ดของฟอร์ม — สูงสุด 3 คอลัมน์ และช่องกว้างเต็มคอลัมน์ของตัวเอง
   ‼️ ความกว้างที่บอกความยาวของค่า มาจากจำนวนคอลัมน์ที่ช่องกิน ไม่ใช่การหดตัวช่องเหลือ 12ch
      ช่องหดกลางคอลัมน์ทิ้งที่ว่างขวาเป็นแถบๆ ซึ่งทำให้ฟอร์มดูแข็งและไม่เป็นระเบียบ */
.form-main .field-grid {
    grid-template-columns: repeat(auto-fill,
        minmax(max(var(--layout-field-min-width), calc((100% - 2 * var(--space-5)) / 3)), 1fr));
    gap: var(--space-4) var(--space-5);
}

.form-main .field-grid .field :is(input, select, textarea) { max-inline-size: 100%; inline-size: 100%; }

@container (min-width: 600px) {
    .form-main .field-grid > .field[data-width="wide"] { grid-column: span 2; }
}

.form-main .field-grid > .field[data-width="full"] { grid-column: 1 / -1; }

.field-count {
    align-self: flex-end;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* ---------------------------------------------------------- แถบท้ายฟอร์ม */

.form-layout .form-actions {
    margin-top: 0;
    padding: var(--space-4) 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);
    justify-content: flex-end;
    gap: var(--space-4);
}

.form-actions[data-toggle="true"] { justify-content: space-between; }

.form-actions-buttons {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-inline-start: auto;
}

.form-actions-toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    min-inline-size: 0;
}

.form-actions-toggle input[type="checkbox"] {
    inline-size: var(--icon-base);
    block-size: var(--icon-base);
    flex: none;
    margin-block-start: 2px;
}

.form-actions-toggle > span { display: flex; flex-direction: column; gap: 2px; }
.form-actions-toggle strong { color: var(--color-text-strong); font-weight: var(--weight-medium); }
.form-actions-toggle small { color: var(--color-text-muted); font-size: var(--text-sm); }

/* สองการ์ดคู่กันในฟอร์ม (เช่น ข้อมูลพื้นฐาน | การเข้าถึงระบบ) — จอกว้างวางคู่ สูงเท่ากัน · ต่ำกว่า 1024 เรียงลง */
.form-card-pair { display: grid; gap: var(--form-section-gap); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 1024px) { .form-card-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-card-pair > .card { min-inline-size: 0; }
.form-card-pair .field-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

/* สวิตช์ในการ์ด — ป้ายและคำอธิบายข้างสวิตช์ */
.switch-field { display: flex; align-items: center; gap: var(--space-3); margin-block-start: var(--space-5); cursor: pointer; }
.switch-field > span { display: flex; flex-direction: column; gap: 2px; }
.switch-field strong { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.switch-field small { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ฟอร์มของหน้าเพิ่ม/แก้ไขใน page drawer — การ์ดเรียงลงคอลัมน์เดียว · แถบปุ่มติดท้าย drawer เสมอ */
dialog[open]:has(> .page-drawer-body) { display: flex; flex-direction: column; }
.page-drawer-body { padding: 0; flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.page-drawer-body > .form-layout { flex: 1; display: flex; flex-direction: column; align-items: stretch; padding: var(--space-5) var(--space-5) 0; gap: var(--space-4); }
.page-drawer-body .form-main { flex: 1; gap: var(--space-4); }
.page-drawer-body .form-layout .form-actions { margin-block-start: auto; }
.page-drawer-body .form-card-pair { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.page-drawer-body .form-card-pair > .card { box-shadow: none; }
.page-drawer-body .form-layout .form-actions { position: sticky; inset-block-end: 0; z-index: 1; margin-inline: calc(-1 * var(--space-5)); border-radius: 0; border-inline: 0; border-block-end: 0; box-shadow: var(--shadow-md); }
.page-drawer-body .form-alert { margin: 0; }

/* ปุ่มย้อนกลับหน้าหัวข้อ (page-head.php $pageBack) */
.page-back { display: grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--color-border-normal); border-radius: var(--radius-full); background: var(--color-surface-card); color: var(--color-text-strong); box-shadow: var(--shadow-sm); text-decoration: none; }
.page-back:hover { border-color: var(--color-brand-accent); color: var(--color-brand-accent); }
.page-back:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* จอแคบ: ปุ่มย้อนกลับอยู่แถวเดียวกับหัวข้อไม่ได้อยู่แล้ว — avatar ข้างปุ่มลอยไปขวาเฉยๆ ซ่อนไว้ (ชื่อยังอยู่ใต้หัวข้อ) */
@media (max-width: 640px) { .page-head-main:has(> .page-back) > .avatar { display: none; } }

@media (max-width: 640px) {
    .form-layout .form-actions { padding: var(--space-4); align-items: stretch; flex-direction: column; }
    .form-actions-buttons { flex-direction: column-reverse; margin-inline-start: 0; }
    .form-actions-buttons .btn { inline-size: 100%; }
}

/* ---------------------------------------------------------- ตัวเลือกแบบการ์ด */

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--form-choice-min)), 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.choice-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
    background: var(--color-surface-card);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}

.choice-card:hover { border-color: var(--color-border-strong); }

/* ‼️ ที่ติ๊กแล้วต่างกันด้วยพื้น + ขอบ + ช่องติ๊ก ไม่ใช่สีอย่างเดียว */
.choice-card:has(input:checked) {
    border-color: var(--color-brand-accent);
    background: var(--color-tint-success);
}

.choice-card:has(input:focus-visible) {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.choice-card input[type="checkbox"] {
    inline-size: var(--icon-base);
    block-size: var(--icon-base);
    flex: none;
}

.choice-card-icon {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: var(--form-choice-icon);
    block-size: var(--form-choice-icon);
    border-radius: var(--radius-md);
    background: var(--color-tint-neutral);
    color: var(--color-text-normal);
}

.choice-card:has(input:checked) .choice-card-icon {
    background: var(--color-surface-card);
    color: var(--color-brand-accent);
}

.choice-card-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.choice-card-label { color: var(--color-text-strong); font-weight: var(--weight-medium); }

/* ‼️ คำอธิบายตัดที่สองบรรทัด — คำอธิบายโมดูลยาวต่างกันมาก
   ไม่ตัด การ์ดในแถวเดียวกันจะสูงไม่เท่ากันจนกริดดูเป็นขั้นบันได
   ข้อความเต็มยังอยู่ใน DOM ให้ screen reader อ่านได้ครบ */
.choice-card-hint {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------------------------------------------------------- การ์ดสรุป */

.summary-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.summary-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4) var(--space-3);
    align-items: start;
}

.summary-card-icon {
    display: grid;
    place-items: center;
    inline-size: var(--form-summary-icon);
    block-size: var(--form-summary-icon);
    border-radius: var(--radius-lg);
    background: var(--color-tint-success);
    color: var(--color-brand-accent);
}

.summary-card-icon .icon { inline-size: var(--icon-lg); block-size: var(--icon-lg); }

.summary-card-head > .badge { grid-column: 2; grid-row: 1; justify-self: end; }
.summary-card-title { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-1); }
.summary-card-title h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.summary-card-title p { color: var(--color-text-muted); font-size: var(--text-sm); }

.summary-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border-normal);
}

.summary-card-row {
    display: grid;
    grid-template-columns: var(--icon-base) minmax(0, 1fr);
    column-gap: var(--space-3);
}

.summary-card-row > .icon { grid-row: span 2; color: var(--color-brand-accent); margin-block-start: 2px; }
.summary-card-row dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.summary-card-row dd { margin: 0; color: var(--color-text-strong); font-weight: var(--weight-bold); }
.summary-card-row dd[data-warning] { color: var(--color-state-warning); }

.summary-card-tip {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-tint-success);
    font-size: var(--text-sm);
}

.summary-card-tip > .icon { flex: none; color: var(--color-brand-accent); }
.summary-card-tip strong { display: block; color: var(--color-text-strong); margin-block-end: 2px; }
.summary-card-tip p { color: var(--color-text-normal); }

/* ═══════════════════════════════════════════════ ภาษาภาพของทั้งระบบ (DESIGN.md "ภาษาภาพ")

   ‼️ ค่าที่นี่มีผลทุกหน้า ไม่ใช่เฉพาะฟอร์ม — แก้ที่เดียวเปลี่ยนทั้งระบบ */

/* การ์ดลอยจากพื้นด้วยเงาบาง — แยกชั้นพื้นหน้า / การ์ด ได้ชัดโดยไม่ต้องเพิ่มเส้น */
.card { box-shadow: var(--shadow-sm); }

/* ช่องติ๊กและปุ่มเลือกเป็นสีของระบบ ไม่ใช่น้ำเงินของเบราว์เซอร์ */
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-brand-accent); }

/* ช่องกรอกเป็นพื้นการ์ด — พื้นเทาบนการ์ดขาวทำให้ช่องดูเหมือนปิดใช้งาน */
.field input, .field select, .field textarea { background: var(--color-surface-card); }

/* ตัวเลขสรุปของการ์ดชิดขวาของหัวการ์ด ไม่ใช่ต่อท้ายชื่อ — อ่านเป็น "หัวข้อ ... ค่า" แบบใบเสร็จ */
.card-meta { margin-inline-start: auto; }

/* ═══════════════════════════════════════════════════════════════════
   ฟอนต์ของระบบ — IBM Plex Sans Thai (DESIGN.md typography.family)

   ‼️ ไฟล์ฟอนต์อยู่ใน public/assets/fonts มาตั้งแต่ต้น แต่ไม่เคยมี @font-face ที่โหลดมัน
      ทุกหน้าจึงแสดงด้วยฟอนต์สำรองของเครื่อง (Tahoma/Leelawadee บนวินโดวส์)
      ซึ่งเป็นเหตุหลักที่หัวข้อไม่หนาและไม่แน่นเท่าภาพต้นแบบ — เจอตอนเทียบภาพ v2 (2026-09-21)
   ‼️ แยกไฟล์ตาม unicode-range — หน้าภาษาอังกฤษล้วนไม่ต้องโหลดชุดตัวอักษรไทย
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-thai-thai-400.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-thai-500.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-thai-600.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: 700; font-display: swap;
  src: url("../fonts/ibm-plex-sans-thai-thai-700.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-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-thai-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-thai-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/ibm-plex-sans-thai-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-thai-latin-400.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-latin-500.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-latin-600.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: 700; font-display: swap;
  src: url("../fonts/ibm-plex-sans-thai-latin-700.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; }

/* ═══════════════════════════════════════════════════════════════════
   ผิวของระบบชุดภาพต้นแบบ v2 (DESIGN.md "ภาษาภาพ" · 2026-09-21)

   ‼️ อยู่นอก @layer และอยู่ท้ายไฟล์โดยตั้งใจ — นี่คือจุดตัดสินสุดท้ายของหน้าตา component กลาง
      ไฟล์นี้มีกติกาเก่าซ้อนกันหลายชั้น (ทั้งใน layer และนอก layer) เขียนแก้ทีละจุดแล้ว
      ตัวไหนชนะขึ้นกับลำดับที่อ่านยากมาก รวมไว้ที่นี่ที่เดียวจึงรู้แน่ว่าหน้าตาที่เห็นมาจากไหน
   ‼️ ห้ามเขียนค่าสีดิบ — ทุกสีมาจาก token ใน DESIGN.md
   ═══════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------ ตัวอักษร */

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ‼️ ตัดส่วนที่ล้นแนวนอนที่ระดับพื้นที่เนื้อหา — หมอกหลังภาพประกอบหัวเพจตั้งใจยื่นเลยขอบขวาให้ฉากต่อถึงขอบจอ
      clip ไม่สร้าง scroll container จึงไม่ทำให้หัวตารางแบบ sticky หลุด */
.content { overflow-x: clip; }

/* ------------------------------------------------------------ ปุ่ม */

.btn {
  min-block-size: 44px;
  padding-inline: var(--space-5);
  border-radius: var(--tenant-radius-button, var(--radius-md));
  font-weight: var(--weight-medium);
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.btn-icon { padding-inline: var(--space-2); }

/* ‼️ ปุ่มหลักเป็นเขียวเข้ม (brand.accent) ตามภาพต้นแบบ v2 ซึ่งใช้เขียวกับปุ่มเพิ่ม/จอง/บันทึกเกือบทุกหน้า
      แทนกฎ "ปุ่มหลักเป็น navy" เดิม (DESIGN.md "สิ่งที่จงใจไม่ทำ" แก้ตามคำสั่งผู้ใช้ 2026-09-21)
      "ว่าง/สำเร็จ" ยังแยกจากปุ่มได้ เพราะมันเป็นพื้นจางมีจุดนำ ไม่ใช่แท่งทึบมีไอคอน */
/* ‼️ --tenant-button = สีปุ่มตรงตามที่เจ้าของเลือก (174 · ธีม "เลือกสีเอง") — ไม่ตั้ง = accent เดิม */
.btn-primary {
  background: var(--tenant-button, var(--color-brand-accent));
  border-color: var(--tenant-button, var(--color-brand-accent));
  color: var(--tenant-button-on, var(--color-brand-on-accent));
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--tenant-button, var(--color-brand-accent)) 84%, var(--color-text-strong));
  border-color: color-mix(in srgb, var(--tenant-button, var(--color-brand-accent)) 84%, var(--color-text-strong));
  color: var(--tenant-button-on, var(--color-brand-on-accent));
  filter: none;
}

/* navy ทึบยังมีที่ใช้ — ปุ่มบันทึกในหน้าตั้งค่าของแพลตฟอร์มตามภาพต้นแบบ (แก้ไขแผน · แก้ไขโมดูล) */
.btn-strong {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-brand-on-primary);
  font-weight: var(--weight-bold);
}

.btn-strong:hover { filter: brightness(1.15); background: var(--color-brand-primary); }
/* ปุ่มสั่ง AI ทำงานทันที (สร้างตอนนี้ · ผู้ใช้สั่ง 2026-11-05 "ต้องเด่นๆ") — สีม่วงของหมวด AI ทึบ ต่างจากปุ่มหลักสีเขียว */
.btn-ai {
  background: var(--color-state-violet);
  border-color: var(--color-state-violet);
  color: var(--color-brand-on-primary);
  font-weight: var(--weight-bold);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-state-violet) 35%, transparent);
}
.btn-ai:hover, .btn-ai:focus-visible { filter: brightness(1.1); background: var(--color-state-violet); color: var(--color-brand-on-primary); }

.btn-secondary {
  background: var(--color-surface-card);
  border-color: color-mix(in srgb, var(--color-border-strong) 40%, var(--color-border-normal));
  color: var(--color-text-strong);
}

.btn-secondary:hover {
  background: var(--color-surface-card);
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
}

.btn-ghost:hover { background: var(--color-surface-head); }

/* ------------------------------------------------------------ หัวเพจ */

.page-head { position: relative; isolation: isolate; }

.page-head-main { align-items: center; row-gap: var(--space-3); }

.page-head h1,
.page-title-row h1 {
  font-size: clamp(var(--text-2xl), 1.1rem + 1.2vw, 2.125rem);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
  color: var(--color-text-strong);
}

.page-lead { font-size: var(--text-base); color: var(--color-text-muted); margin-block-start: var(--space-1); }

.page-head-icon {
  inline-size: 60px;
  block-size: 60px;
  border-radius: var(--radius-lg);
  background: var(--color-tint-success);
  color: var(--color-brand-accent);
}

.page-head-icon .icon { inline-size: 30px; block-size: 30px; }

/* ‼️ ภาพประกอบอยู่ในแถวเดียวกับชื่อหน้า (ไม่เพิ่มความสูง) และติดลบระยะบน/ล่าง ให้ฉากชิดแถบเมนู
      หมอกสีเขียวด้านหลัง (::before) ยื่นเลยขอบขวาถึงขอบจอ เหมือนภาพต้นแบบที่ฉากต่อเนื่องถึงขอบ
      ‼️ pointer-events: none — ภาพซ้อนใกล้ปุ่มของหน้า ห้ามมันกินการคลิก */
.page-art {
  position: relative;
  z-index: -1;
  flex: 1 1 auto;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-5);
  min-inline-size: 0;
  max-inline-size: 640px;
  margin-block: calc(var(--space-8) * -1) calc(var(--space-4) * -1);
  margin-inline-start: auto;
  pointer-events: none;
}

.page-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--space-4) * -1) -40vw calc(var(--space-2) * -1) -8%;
  background:
    radial-gradient(60% 90% at 38% 30%, var(--color-brand-wash) 0%, transparent 70%),
    radial-gradient(40% 70% at 80% 10%, var(--color-brand-wash) 0%, transparent 72%);
}

/* ‼️ ภาพถ่ายฉากกีฬา (ผู้ใช้สั่ง 2026-10-22 แทนภาพวาด SVG) — partials/page-art.php
      ขอบต้องจางหายเข้าพื้น ไม่งั้นอ่านเป็น "รูปที่แปะ" สี่เหลี่ยมขอบแข็ง ไม่ใช่ฉากของหัวเพจ */
.page-art-photo {
  display: block;
  inline-size: clamp(260px, 26vw, 380px);
  block-size: auto;
  aspect-ratio: 360 / 160;
  object-fit: cover;
  flex: none;
  /* จางทั้งสี่ด้าน: ซ้ายจางยาว (ต่อกับชื่อหน้า) · บน/ล่าง/ขวาจางสั้น — สองทิศ intersect กัน */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, var(--color-text-strong) 38%, var(--color-text-strong) 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, var(--color-text-strong) 22%, var(--color-text-strong) 66%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, var(--color-text-strong) 38%, var(--color-text-strong) 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, var(--color-text-strong) 22%, var(--color-text-strong) 66%, transparent 100%);
          mask-composite: intersect;
}

/* ‼️ โหมดมืด: ภาพถ่ายสว่างบนพื้นเข้มจ้าเกินชื่อหน้า — หรี่ลง (ภาพเปลี่ยนสีตาม token ไม่ได้เหมือน SVG) */
:root[data-theme="dark"] .page-art-photo { filter: brightness(.68) saturate(.85); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-art-photo { filter: brightness(.68) saturate(.85); }
}

/* tagline ตัวพิมพ์ใหญ่ซ้อนกันตามภาพต้นแบบ — เป็นส่วนหนึ่งของภาพ จึงจางและไม่แย่งชื่อหน้า */
.page-art-lines {
  order: 2;
  max-inline-size: 13ch;
  white-space: normal;
  flex: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: .16em;
  line-height: 1.35;
  color: var(--color-brand-accent);
  opacity: .42;
  text-align: start;
}

/* ‼️ คำคมตัวเอียงแบบลายมือ — ใช้ฟอนต์ลายมือของระบบปฏิบัติการ ไม่โหลดฟอนต์เพิ่ม
      เครื่องที่ไม่มีฟอนต์ลายมือจะได้ตัวเอียงธรรมดา ซึ่งยังอ่านเป็นคำคมได้ */
.page-art-quote {
  margin: 0;
  max-inline-size: 16ch;
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
  font-style: italic;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text-muted);
  opacity: .8;
  transform: rotate(-4deg);
}

.page-actions { position: relative; z-index: 1; }

@media (max-width: 1099px) {
  .page-art { display: none !important; }
}

/* ------------------------------------------------------------ การ์ด */

/* รูปทรงการ์ด/กรอบตั้งเองได้ (174 · --tenant-* จาก /theme/custom/{id}.css) — ไม่ตั้ง = ค่าเดิม */
.card {
  border: var(--tenant-card-border, 1px solid var(--color-border-normal));
  border-radius: var(--tenant-radius-card, var(--radius-xl));
  box-shadow: var(--tenant-card-shadow, var(--shadow-sm));
  background: var(--color-surface-card);
}

.card-head {
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-2);
  border-block-end: 0;
}

.card-head h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  color: var(--color-text-strong);
}

.card-lead { font-size: var(--text-sm); margin-block-start: 2px; }

.card-head-icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--radius-lg);
  background: var(--color-tint-success);
  color: var(--color-brand-accent);
}

.card-head-icon .icon { inline-size: 24px; block-size: 24px; }

/* ‼️ ฐาน 14rem: จอแคบให้ปุ่มหัวการ์ดตกบรรทัดใหม่ ไม่ใช่บีบชื่อ+คำอธิบายเหลือคอลัมน์แคบ
      (เจอที่ /platform/pricing-rules จอ 375px — ชื่อ Package กับคำอธิบายเหลือ ~3 คำต่อบรรทัด) */
.card-head-text { flex: 1 1 14rem; min-inline-size: 0; }

.card-body { padding: var(--space-4) var(--space-6) var(--space-6); }

/* ‼️ ตารางชนขอบการ์ดเดิม ตอนนี้เว้นขอบให้หัวตารางเป็นแถบมุมมนแบบภาพต้นแบบ */
.card[data-flush="true"] > .card-body { padding: var(--space-2) var(--space-5) var(--space-5); }

/* ------------------------------------------------ โทนของกล่องไอคอน (ใช้ร่วม KPI · หัวการ์ด) */

.card-head-icon[data-tone="info"],      .kpi[data-tone="info"] .kpi-icon      { background: var(--color-tint-info);      color: var(--color-state-info); }
.card-head-icon[data-tone="warning"],   .kpi[data-tone="warning"] .kpi-icon   { background: var(--color-tint-warning);   color: var(--color-state-warning); }
.card-head-icon[data-tone="danger"],    .kpi[data-tone="danger"] .kpi-icon    { background: var(--color-tint-danger);    color: var(--color-state-danger); }
.card-head-icon[data-tone="violet"],    .kpi[data-tone="violet"] .kpi-icon    { background: var(--color-tint-violet);    color: var(--color-state-violet); }
.card-head-icon[data-tone="rose"],      .kpi[data-tone="rose"] .kpi-icon      { background: var(--color-tint-rose);      color: var(--color-state-rose); }
.card-head-icon[data-tone="teal"],      .kpi[data-tone="teal"] .kpi-icon      { background: var(--color-tint-teal);      color: var(--color-state-teal); }
.card-head-icon[data-tone="neutral"],   .kpi[data-tone="neutral"] .kpi-icon   { background: var(--color-tint-neutral);   color: var(--color-text-normal); }
.card-head-icon[data-tone="highlight"], .kpi[data-tone="highlight"] .kpi-icon { background: var(--color-tint-highlight); color: var(--color-text-strong); }
.kpi[data-tone="success"] .kpi-icon { background: var(--color-tint-success); color: var(--color-brand-accent); }

/* ------------------------------------------------------------ KPI */

.kpi-row { gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kpi-min-width)), 1fr)); }

.kpi {
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-xl);
  border-color: var(--color-border-normal);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

/* ‼️ เลิกใช้ขีดล่างสี accent เป็นเครื่องหมาย "กดได้" — ภาพต้นแบบไม่มี และมันทำให้แถว KPI ดูเป็นแท็บ
      ใบที่กดได้ยังต่างจากใบที่ดูอย่างเดียว: ลอยขึ้นและขอบเป็นเขียวเมื่อชี้/โฟกัส และมี cursor */
a.kpi::after { content: none; }

a.kpi:hover,
a.kpi:focus-visible {
  border-color: color-mix(in srgb, var(--color-brand-accent) 45%, var(--color-border-normal));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.kpi-top { align-items: center; gap: var(--space-4); }

.kpi-icon {
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--radius-lg);
}

.kpi-icon .icon { inline-size: 26px; block-size: 26px; }

.kpi-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-normal); }

.kpi-value {
  font-size: clamp(var(--text-2xl), 1.2rem + .8vw, 2rem);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.01em;
}

.kpi-unit { font-size: var(--text-base); font-weight: var(--weight-medium); margin-inline-start: 2px; }

.kpi-spark {
  inline-size: 92px;
  block-size: 44px;
  opacity: 1;
  align-self: flex-end;
  color: var(--color-brand-accent);
}

.kpi-spark .kpi-spark-area { opacity: .12; }
.kpi[data-tone="violet"] .kpi-spark { color: var(--color-state-violet); }
.kpi[data-tone="rose"]   .kpi-spark { color: var(--color-state-rose); }
.kpi[data-tone="teal"]   .kpi-spark { color: var(--color-state-teal); }

.kpi-foot { border-block-start: 0; padding-block-start: 0; gap: var(--space-2); }

/* ตัวเลขเทียบช่วงก่อนเป็นชิปพื้นจาง ตามภาพต้นแบบ — มาจากข้อมูลจริงเท่านั้น (partials/kpi.php) */
.kpi-delta {
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

.kpi-delta[data-dir="up"]   { background: var(--color-tint-success); color: var(--color-brand-accent); }
.kpi-delta[data-dir="down"] { background: var(--color-tint-danger);  color: var(--color-state-danger); }

.kpi-hint { font-size: var(--text-sm); }

/* ------------------------------------------------------------ ป้าย */

/* ‼️ สถานะ = แคปซูลพื้นจางมีจุดนำ · ประเภท = แคปซูลพื้นจางไม่มีจุด (ภาพต้นแบบ v2)
      ยังแยกจากกันด้วยรูปทรง (จุด) ไม่ใช่แค่สี — เลิกใช้เส้นประ ซึ่งมองไม่ออกที่ตัว 13px อยู่แล้ว */
.badge {
  gap: 6px;
  padding: 3px var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.45;
}

.badge-type {
  border: 0;
  border-radius: var(--radius-full);
  padding: 3px var(--space-3);
  font-size: var(--text-sm);
}

.badge[data-tone="violet"]  { background: var(--color-tint-violet); color: var(--color-state-violet); }
.badge[data-tone="rose"]    { background: var(--color-tint-rose);   color: var(--color-state-rose); }
.badge[data-tone="teal"]    { background: var(--color-tint-teal);   color: var(--color-state-teal); }
.badge[data-tone="success"] { color: var(--color-brand-accent); }

/* ------------------------------------------------------------ ตาราง */

.table { font-size: var(--text-sm); border-collapse: separate; border-spacing: 0; inline-size: 100%; }

.table thead th {
  background: var(--color-surface-head);
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  padding-block: 14px;
  border-block-end: 0;
}

.table thead th:first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
.table thead th:last-child  { border-start-end-radius: var(--radius-md);   border-end-end-radius: var(--radius-md); }

.table td { color: var(--color-text-normal); height: 56px; }
.table td[data-primary] { color: var(--color-text-strong); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-surface-head) 70%, transparent); }
.table tbody tr:last-child td { border-block-end: 0; }

/* รหัสในตารางแสดงเป็นตัวอักษรปกติสีจาง (ภาพต้นแบบ) — ui-monospace ไม่มีบนวินโดวส์ จึงตกไปเป็นฟอนต์ serif */
.table td.mono { font-family: var(--font-body), system-ui, sans-serif; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ‼️ ปุ่มไอคอนในแถวเป็นกล่องมีขอบ ไม่ใช่ไอคอนลอย — ภาพต้นแบบ และกดโดนง่ายกว่า */
.table .actions .btn-icon {
  min-inline-size: 38px;
  min-block-size: 38px;
  padding: 0;
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  color: var(--color-text-normal);
}

.table .actions .btn-icon:hover { border-color: var(--color-brand-accent); color: var(--color-brand-accent); }

.table .cell-icon {
  display: inline-grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--radius-md);
  background: var(--color-tint-success);
  color: var(--color-brand-accent);
}

@media (max-width: 768px) {
  .table { border-collapse: collapse; }
  .table tbody tr { background: var(--color-surface-card); }
  .table td { height: auto; }
  .table .actions .btn-icon { min-inline-size: 44px; min-block-size: 44px; }
}

/* ------------------------------------------------------------ แถบตัวกรอง */

.toolbar {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.filter-field { position: relative; gap: 0; }

.filter-field :is(input, select) {
  min-block-size: var(--form-filter-height);
  border-radius: var(--radius-md);
}

/* ป้ายชื่ออยู่ในกล่อง เหนือค่าที่เลือก — partials/filters.php */
.filter-field:is([data-type="select"], [data-type="date"], [data-type="number"]) > label {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 14px;
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
  pointer-events: none;
  line-height: 1.2;
}

.filter-field:is([data-type="select"], [data-type="date"], [data-type="number"]) :is(select, input) {
  padding-block: 20px 4px;
  padding-inline-start: 14px;
  min-inline-size: 150px;
  font-weight: var(--weight-medium);
  color: var(--color-text-strong);
}

.filter-field[data-type="search"] { flex: 1 1 22rem; }
/* ช่องกรองเยอะ ($filterCompact) — ช่องค้นหาหดได้ ให้ทั้งแถวอยู่บรรทัดเดียวบนจอกว้าง (ผู้ใช้สั่ง 2026-10-27) */
.toolbar[data-compact="true"] .filter-field[data-type="search"] { flex: 1 1 12rem; min-inline-size: 12rem; }

.filter-field[data-type="search"] input {
  padding-inline-start: 44px;
  background: var(--color-surface-head);
  border-color: transparent;
}

.filter-field[data-type="search"] input:focus { background: var(--color-surface-card); }

.field-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 14px;
  transform: translateY(-50%);
  display: grid;
  color: var(--color-text-muted);
  pointer-events: none;
}

.toolbar-actions .btn { min-block-size: var(--form-filter-height); padding-inline: var(--space-6); }

.toolbar-reset {
  padding-inline: var(--space-2);
  color: var(--color-text-normal);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.toolbar-reset:hover { color: var(--color-brand-accent); }

@media (max-width: 640px) {
  .toolbar { padding: var(--space-3); }
  .filter-field { flex: 1 1 100%; }
  .filter-field :is(input, select) { inline-size: 100%; }
  .toolbar-actions { inline-size: 100%; justify-content: space-between; }
  /* ‼️ แถบที่ประกอบช่องเอง (ตารางคอร์ท · ผู้ใช้งานหลังบ้าน) ก็เต็มแถวเหมือน filter-field
        และปุ่มในแถบไม่ถูกบีบจน "วันนี้" / "ตัวกรอง" แตกสองบรรทัด (เจอบน prod 2026-10-22) */
  .toolbar > .field { flex: 1 1 100%; }
  .toolbar > .field :is(input, select) { inline-size: 100%; max-inline-size: 100%; }
  .toolbar-actions { flex-wrap: wrap; }
  .toolbar-actions .btn { padding-inline: var(--space-3); white-space: nowrap; }
}

/* ------------------------------------------------------------ ช่องกรอก */

.field label { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-strong); }

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  min-block-size: var(--form-control-height);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-border-strong) 28%, var(--color-border-normal));
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.field :is(input, select, textarea):hover { border-color: color-mix(in srgb, var(--color-border-strong) 55%, var(--color-border-normal)); }

.field :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--color-brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-accent) 18%, transparent);
}

/* ‼️ ช่องผิดต้องขอบแดง — rule ขอบแดงเดิมอยู่ใน @layer components จึงแพ้ .field input:not(...) ข้างบนที่อยู่นอก layer
      ผลคือทุกฟอร์มมีข้อความผิดใต้ช่องแต่ขอบยังเทา (เจอตอนทำหน้าโปรไฟล์ลูกค้า 2026-09-24) · โฟกัสอยู่ก็ยังแดง */
.field[data-invalid="true"] input:not([type="checkbox"]):not([type="radio"]),
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] :is(input, select, textarea):hover { border-color: var(--color-state-danger); }

.field[data-invalid="true"] :is(input, select, textarea):focus {
  border-color: var(--color-state-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-state-danger) 18%, transparent);
}

.filter-field[data-type="search"] input:focus { border-color: var(--color-brand-accent); }

/* ------------------------------------------------------------ แท็บย่อย (แถวที่สองของแถบบน) */

.subnav { background: var(--color-surface-card); }
.subnav-row a { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.subnav-row a[aria-current="page"] { color: var(--color-brand-accent); font-weight: var(--weight-bold); }

/* ------------------------------------------------------------ แถบบน */

/* ‼️ กลุ่มเมนูน้อย (ฝั่งแพลตฟอร์มมี 5 กลุ่ม) ได้ระยะโปร่งตามภาพต้นแบบ
      ฝั่งสนามมี 10 กลุ่ม ใช้จุดตัดเดิมที่วัดด้วย navfit.js — ห้ามขยายระยะของฝั่งนั้นจากที่นี่ */
.appbar-menu:not(:has(> :nth-child(7))) { gap: var(--space-2); }
.appbar-menu:not(:has(> :nth-child(7))) .appbar-menu-item { padding-inline: var(--space-4); font-size: var(--text-sm); }
.appbar-menu:not(:has(> :nth-child(7))) .appbar-menu-item .icon { display: inline-flex; }

/* ------------------------------------------------------------ footer */

.site-footer {
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-card);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.site-footer-start,
.site-footer-end { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }

.site-footer-sep { inline-size: 1px; block-size: 18px; background: var(--color-border-normal); }

.site-footer-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-normal);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.site-footer-start > a.site-footer-link { text-decoration: underline; text-underline-offset: 4px; color: var(--color-text-strong); }
.site-footer-link:hover { color: var(--color-brand-accent); }
.site-footer-tagline { font-style: italic; }
.site-footer-debug { font-size: var(--text-xs); opacity: .7; }

@media (max-width: 640px) {
  .site-footer { justify-content: center; text-align: center; }
  .site-footer-start, .site-footer-end { justify-content: center; }
}

/* ------------------------------------------------------------ สถานะว่าง */

.empty-state { border: 0; background: transparent; padding-block: var(--space-10); }
.empty-state h3 { font-size: var(--text-lg); font-weight: var(--weight-heavy); color: var(--color-text-strong); }

.empty-icon {
  inline-size: 88px;
  block-size: 88px;
  background: var(--color-surface-head);
  color: var(--color-text-normal);
}

.empty-icon .icon { inline-size: 34px; block-size: 34px; }

/* ------------------------------------------------------------ ฟอร์ม (ต่อจาก "รูปแบบหน้าฟอร์ม") */

/* คอลัมน์สรุปด้านขวา — หน้าสร้างของใหม่ที่สรุปเป็น "สิ่งที่จะเกิด" (ภาพต้นแบบ: เพิ่มลูกค้า · เพิ่มแพ็กเกจ · เพิ่มโค้ช) */
@media (min-width: 1024px) {
  .form-layout[data-aside="end"] {
    grid-template-columns: minmax(0, 1fr) var(--layout-aside-width);
    grid-template-areas: "main aside";
  }

  .form-layout[data-aside="end"] > .form-main { grid-area: main; }

  .form-layout[data-aside="end"] > .form-aside {
    grid-area: aside;
    position: sticky;
    inset-block-start: var(--space-6);
  }
}

/* ช่องกรอกสองคอลัมน์ — ฟอร์มสั้นที่ช่องยาว (ชื่อธุรกิจ · อีเมล) อ่านง่ายกว่าเมื่อไม่ถูกบีบเป็นสามคอลัมน์ */
.form-main .field-grid[data-cols="2"] {
  grid-template-columns: repeat(auto-fill,
      minmax(max(var(--layout-field-min-width), calc((100% - var(--space-6)) / 2 - 1px)), 1fr));
}

/* ‼️ แถบท้ายฟอร์มที่อยู่ "ในการ์ด" เป็นเส้นคั่น ไม่ใช่การ์ดซ้อนการ์ด — ยกเลิกชิดซ้าย บันทึกชิดขวา (ภาพต้นแบบ) */
.card-body > .form-actions {
  margin: var(--space-2) 0 0;
  padding: var(--space-5) 0 0;
  border: 0;
  border-block-start: 1px solid var(--color-border-normal);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.card-body > .form-actions:not([data-toggle="true"]) .form-actions-buttons {
  inline-size: 100%;
  justify-content: space-between;
}

.form-actions .btn { min-inline-size: 120px; }

/* ‼️ ไอคอนในช่องกรอกอยู่ในช่องแยกที่มีเส้นคั่น (ภาพต้นแบบ) ไม่ใช่ลอยปนกับข้อความ
      ช่องแยกบอกว่าไอคอนเป็นป้ายของช่อง ไม่ใช่ตัวอักษรที่พิมพ์ลงไปแล้ว */
.field-control > .icon {
  inset-inline-start: 14px;
  inline-size: 20px;
  block-size: 20px;
  z-index: 1;
}

.field[data-icon="true"] .field-control::after {
  content: "";
  position: absolute;
  inset-block: 1px;
  inset-inline-start: 48px;
  inline-size: 1px;
  background: var(--color-border-normal);
  pointer-events: none;
}

.field[data-icon="true"] .field-control > :is(input, select) { padding-inline-start: 62px; }
/* ช่องสั้น + ไอคอน: 12ch เดิมโดน padding ไอคอน 62px กินจนเหลือ 2–3 หลัก (120 เห็นเป็น 12) — บวกที่ของไอคอนคืน */
.field[data-width="short"][data-icon="true"] .field-control > :is(input, select) { max-inline-size: calc(12ch + 62px); }
.field-control > select { inline-size: 100%; }

/* ป้ายชื่อช่องอยู่ซ้าย ช่องอยู่ขวา — ฟอร์มแก้ข้อมูลสั้นในหน้ารายละเอียด (ภาพต้นแบบ: รายละเอียดลูกค้าแพลตฟอร์ม) */
.field-grid[data-layout="inline"] { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }

.field-grid[data-layout="inline"] > .field {
  display: grid;
  grid-template-columns: minmax(96px, 30%) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-4);
}

.field-grid[data-layout="inline"] > .field > label { font-weight: var(--weight-medium); color: var(--color-text-normal); }
.field-grid[data-layout="inline"] > .field > :not(label) { grid-column: 2; }
.field-grid[data-layout="inline"] .field :is(input, select) { min-block-size: var(--form-control-height); max-inline-size: 100%; }

@media (max-width: 480px) {
  .field-grid[data-layout="inline"] > .field { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
  .field-grid[data-layout="inline"] > .field > :not(label) { grid-column: 1; }
}

/* ฟอร์มหนึ่งแถว: ช่องซ้าย ปุ่มที่บันทึกช่องนั้นขวา — ปุ่มจึงอยู่ติดกับสิ่งที่มันบันทึก */
.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border-normal);
}

.inline-form > .btn { min-inline-size: 180px; }

@media (max-width: 640px) {
  .inline-form { grid-template-columns: minmax(0, 1fr); }
}

/* แถบข้อมูลสั้นพื้นเขียวจาง มีลิงก์ไปต่อทางขวา */
.info-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-tint-success);
  color: var(--color-text-normal);
  font-size: var(--text-sm);
}

.info-bar > .icon { color: var(--color-brand-accent); flex: none; }
.info-bar > span { flex: 1 1 16rem; min-inline-size: 0; }
/* ลิงก์ยาว (Webhook / Callback URL) ตัดบรรทัดได้ — จอ 400px ไม่ล้นกล่อง (ผู้ใช้สั่ง 2026-10-16)
   ‼️ รวมกรณี URL อยู่ใน <span> ป้าย: ค่า (หน้า /platform/settings/payments ล้นขอบบนจอแคบ) */
.info-bar > strong.numeric,
.info-bar > span > strong.numeric { min-inline-size: 0; overflow-wrap: anywhere; }

/* ‼️ :not(.btn) — แถบที่ปุ่มต้องเด่น (เช่น ไปหน้าการชำระเงินของสนาม) ใช้ .btn ได้โดยสีลิงก์ไม่ทับสีปุ่ม (ผู้ใช้แจ้ง 2026-10-20) */
.info-bar > a:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-brand-accent);
  font-weight: var(--weight-bold);
}

/* ตารางยาวแบ่งสองฝั่งเคียงกันบนจอกว้าง — ตารางเดียวกันที่ถูกหั่นครึ่ง ไม่ใช่สองเรื่อง */
.split-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: var(--space-5) var(--space-6);
}

.split-tables > .table-wrap + .table-wrap { position: relative; }
.kpi-value[data-kind="text"] { font-size: var(--text-xl); letter-spacing: 0; }
.kpi[data-tone="success"] .kpi-value[data-kind="text"] { color: var(--color-brand-accent); }

/* ป้าย "ยอดนิยม" ข้างชื่อแผน — พื้นทึบเขียว (ภาพต้นแบบ) ต้องอยู่นอก layer ไม่งั้นโทนป้ายกลางด้านบนทับสีตัวอักษร */
.plan-card-name h2 .badge[data-tone] { background: var(--color-brand-accent); color: var(--color-brand-on-accent); font-size: var(--text-xs); font-weight: var(--weight-bold); }

/* ช่องติ๊กที่เป็นคุณสมบัติของสิ่งที่แก้ (เปิดใช้งาน) — วางในกริดของช่องกรอก มีคำอธิบายผลใต้ชื่อ */
.field-check { justify-content: center; }

.check-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block-start: var(--space-6);
  cursor: pointer;
  font-weight: var(--weight-normal);
}

.field-grid .check-card input[type="checkbox"],
.check-card input[type="checkbox"] { inline-size: 22px; block-size: 22px; min-block-size: 0; flex: none; margin-block-start: 1px; }
.check-card > span { display: flex; flex-direction: column; gap: 2px; }
.check-card strong { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.check-card small { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-normal); }

/* รูปย่อหน้าชื่อในตาราง (สนาม · คอร์ส) — สัดส่วนภาพปก ไม่ใช่วงกลมแบบรูปคน */
.cell-thumb {
  display: inline-block;
  inline-size: 52px;
  block-size: 34px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  vertical-align: middle;
  margin-inline-end: var(--space-3);
  background: var(--color-surface-court);
}

.table .cell-icon[data-tone="info"]    { background: var(--color-tint-info);    color: var(--color-state-info); }
.table .cell-icon[data-tone="warning"] { background: var(--color-tint-warning); color: var(--color-state-warning); }
.table .cell-icon[data-tone="violet"]  { background: var(--color-tint-violet);  color: var(--color-state-violet); }
.table .cell-icon[data-tone="rose"]    { background: var(--color-tint-rose);    color: var(--color-state-rose); }
.table .cell-icon[data-tone="teal"]    { background: var(--color-tint-teal);    color: var(--color-state-teal); }
.table .cell-icon[data-tone="danger"]  { background: var(--color-tint-danger);  color: var(--color-state-danger); }
.table .cell-icon[data-tone="neutral"] { background: var(--color-tint-neutral); color: var(--color-text-normal); }
.table .cell-icon { margin-inline-end: var(--space-3); vertical-align: middle; }

/* KPI แบบซ้อน — ไอคอนอยู่บนป้าย เส้นแนวโน้มมุมล่างขวา ห้าใบต่อแถว (ภาพต้นแบบแดชบอร์ดสนาม) */
.kpi-row[data-layout="stack"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.kpi-row[data-layout="stack"] .kpi-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "icon icon" "text spark";
  align-items: end;
  row-gap: var(--space-4);
}

.kpi-row[data-layout="stack"] .kpi-icon  { grid-area: icon; inline-size: 44px; block-size: 44px; }
.kpi-row[data-layout="stack"] .kpi-icon .icon { inline-size: 22px; block-size: 22px; }
.kpi-row[data-layout="stack"] .kpi-text  { grid-area: text; }
.kpi-row[data-layout="stack"] .kpi-spark { grid-area: spark; inline-size: 76px; block-size: 36px; }
.kpi-row[data-layout="stack"] .kpi-foot  { margin-block-start: calc(var(--space-1) * -1); }

/* วันนี้ในตารางสัปดาห์ใช้หมอกเขียวของระบบ ไม่ใช่ฟ้าอ่อน (brand.wash) ที่ไม่มีที่อื่นใช้แล้ว */
:is(.week-grid-day, .week-grid-ticks, .week-grid-cells)[data-today="true"] { background: color-mix(in srgb, var(--color-surface-mist) 55%, var(--color-surface-card)); }

/* ตัวเลขกับหน่วยอยู่บรรทัดเดียวกันเสมอ — หน่วยที่ตกบรรทัดอ่านเป็นค่าอีกตัว */
.kpi-value { white-space: nowrap; }

/* ------------------------------------------------------------ แบ่งหน้า (ภาพต้นแบบ: กล่องมีขอบ · หน้าปัจจุบันพื้นเขียวจางขอบเขียว) */
.pagination .btn {
  min-inline-size: 42px;
  min-block-size: 42px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-normal);
  background: var(--color-surface-card);
  font-variant-numeric: tabular-nums;
}

.pagination [aria-current="page"] {
  background: var(--color-tint-success);
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
  font-weight: var(--weight-bold);
}

/* แถบปิดท้ายเมื่อใบจองจบครบแล้ว (ภาพต้นแบบรายละเอียดการจอง) */
.done-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-tint-success);
}

.done-banner-icon {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-full);
  background: var(--color-brand-accent);
  color: var(--color-brand-on-accent);
  flex: none;
}

.done-banner > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.done-banner strong { color: var(--color-brand-accent); font-weight: var(--weight-heavy); }
.done-banner small { color: var(--color-text-normal); font-size: var(--text-sm); }

/* ‼️ ภาพประกอบต้องยอมหดก่อนชื่อหน้า — ชื่อหน้ายาว (เลขที่จอง) เคยถูกบีบจนตัดเป็นสามบรรทัด */
.page-head-text { flex: 1 1 24rem; }
.page-art { flex: 0 1 auto; }
.page-art-photo { flex: 0 1 auto; min-inline-size: 180px; }

.cell-stack { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.35; }
.cell-stack > :first-child { color: var(--color-text-strong); font-weight: var(--weight-medium); }
.cell-stack > small { color: var(--color-text-muted); font-size: var(--text-xs); }
/* ไอคอนประจำแถว + ชื่อสองบรรทัด อยู่บรรทัดเดียวกัน (เดิม cell-stack เป็น block ตกลงใต้ไอคอน) */
.cell-icon + .cell-stack, .cell-thumb + .cell-stack { display: inline-flex; vertical-align: middle; }
.cell-person .avatar { flex: none; }

/* ‼️ ตารางที่วางตรงบนพื้นหน้า (ไม่อยู่ในการ์ด) ได้หน้าตาการ์ดจากที่นี่ที่เดียว (ภาพต้นแบบ: ทุกตารางอยู่ในการ์ดขาว)
      หน้ารายการหลายสิบหน้าใช้โครง filters → table → pagination ตรงๆ แก้ทีละหน้าคือการ copy markup ซ้ำ */
/* ‼️ รวมตารางที่ห่อด้วย [data-drawer-list] (ผู้ใช้ระบบ — แก้ในลิ้นชักข้างขวา) ไม่มีกรอบ ผู้ใช้ทัก 2026-10-14 */
.page > .table-wrap,
.page > [data-drawer-list] > .table-wrap {
  padding: var(--space-3) var(--space-5) var(--space-4);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
  .page > .table-wrap, .page > [data-drawer-list] > .table-wrap { padding: var(--space-3); }
}

/* การ์ดงานค้างพร้อมปุ่มพาไปทำ (ภาพต้นแบบการรับเงิน: รอตรวจสอบสลิป) */
.action-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-brand-accent) 20%, var(--color-border-normal));
  border-radius: var(--radius-xl);
  background: var(--color-tint-success);
}

.action-banner-icon {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-full);
  background: var(--color-surface-card);
  color: var(--color-brand-accent);
  flex: none;
}

.action-banner-icon .icon { inline-size: 26px; block-size: 26px; }
.action-banner-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 18rem; }
.action-banner-text strong { color: var(--color-brand-accent); font-weight: var(--weight-heavy); font-size: var(--text-lg); }
.action-banner-text strong b { font-size: var(--text-2xl); margin-inline-start: var(--space-2); }
.action-banner-text small { color: var(--color-text-normal); font-size: var(--text-sm); }

/* ------------------------------------------------------------ ฟอร์มหลายขั้น (partials/form-steps.php) */

.stepper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(100%, var(--stepper-min-width)), 1fr);
  align-items: stretch;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--space-3);
  list-style: none;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
}

.stepper > li { min-inline-size: 0; display: flex; }

.stepper-item {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  min-block-size: var(--form-control-height);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
}
.stepper-label { overflow-wrap: anywhere; line-height: var(--leading-tight); }
.stepper-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
a.stepper-item:hover { background: var(--color-surface-head); color: var(--color-text-strong); }

.stepper-dot {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--stepper-dot);
  block-size: var(--stepper-dot);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-normal);
  background: var(--color-surface-card);
  font-weight: var(--weight-bold);
}

.stepper-dot .icon { display: none; inline-size: 18px; block-size: 18px; }
.stepper-item[data-state="current"] { color: var(--color-text-strong); font-weight: var(--weight-bold); background: var(--color-tint-success); }
.stepper-item[data-state="current"] .stepper-dot { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); }
.stepper-item[data-state="done"] { color: var(--color-brand-accent); }
.stepper-item[data-state="done"] .stepper-dot { border-color: var(--color-brand-accent); color: var(--color-brand-accent); }
.stepper-item[data-state="done"] .stepper-dot > span { display: none; }
.stepper-item[data-state="done"] .stepper-dot .icon { display: block; }

/* ‼️ ปุ่มก่อนหน้า/ถัดไป โผล่เฉพาะเมื่อ app.js ทำงานแล้ว — ไม่มี JS ทุกขั้นแสดงอยู่แล้ว ปุ่มนี้ไม่มีหน้าที่ */
.step-nav {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--panel-inset);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--panel-radius);
  background: var(--color-surface-card);
}
form[data-steps-ready] .step-nav { display: flex; }
form[data-steps-ready] .step-nav [data-step-next] { margin-inline-start: auto; }
[data-step] { display: flex; flex-direction: column; gap: var(--form-section-gap); }
.step-review:empty { display: none; }
.step-review { margin-block-end: var(--space-2); }

@media (max-width: 640px) {
  .stepper { padding: var(--space-2); }
  .stepper-label { font-size: var(--text-sm); text-align: start; }

  /* ‼️ มือถือ: ขั้นอื่นเหลือแค่วงเลข · ชื่อเฉพาะขั้นปัจจุบัน — ทุกขั้นพอดีจอ ไม่มีแถบเลื่อน/ขั้นสุดท้ายหลุดขอบ (ผู้ใช้สั่ง 2026-10-27 เน้นมือถือ)
     ชื่อขั้นอื่นยังอ่านได้ด้วย screen reader (ซ่อนแบบ visually-hidden ไม่ใช่ display:none) */
  .stepper { display: flex; overflow-x: visible; }
  .stepper > li { flex: none; }
  .stepper > li:has(> .stepper-item[data-state="current"]) { flex: 1 1 auto; }
  .stepper-item:not([data-state="current"]) { gap: 0; }
  .stepper-item:not([data-state="current"]) .stepper-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ลิงก์โทร/อีเมลบนจอสัมผัส — ขยายพื้นที่กดขึ้นลงด้วย padding + margin ติดลบ (เดิมสูง 21–24px กดพลาดง่าย) · ปุ่ม (.btn) สูงพอแล้ว ห้ามโดน — margin ติดลบดึงปุ่ม "โทรหาสนาม" ทับปุ่มข้างเคียง (ผู้ใช้ทัก 2026-10-27)
   ‼️ ไม่ใช้ min-height — ทำให้แถวข้อมูลสนามสูงขึ้นและเส้นคั่นยืดตาม */
@media (pointer: coarse) {
  main a:is([href^="tel:"], [href^="mailto:"]):not(.btn) { padding-block: var(--space-3); margin-block: calc(var(--space-3) * -1); }
}
.record-layout[data-single="true"] { grid-template-columns: minmax(0, 1fr); }
/* แท็บเดียว (เช่น การรับเงินของใบจอง): กล่องในแถบขวาขึ้นก่อน — กล่องลูกค้า/นโยบายย้ายไปคอลัมน์ซ้ายแล้ว (2026-10-26) */
.record-layout[data-single="true"] > .record-side { order: -1; }

.detail-row[data-icon="true"] dt { display: flex; align-items: center; gap: var(--space-3); }
.detail-row[data-icon="true"] dt .icon { inline-size: 18px; block-size: 18px; color: var(--color-text-muted); flex: none; }

/* ------------------------------------------------ รายการลิงก์ในคอลัมน์ข้าง (การจองล่าสุด · งานค้าง)
   แต่ละแถวกดได้ทั้งแถว มีไอคอน ข้อความสองบรรทัด ป้าย และลูกศร (ภาพต้นแบบรายละเอียดลูกค้า) */
.link-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.link-list > li + li { border-block-start: 1px solid var(--color-border-normal); }

.link-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-1);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
}

.link-list a:hover { background: var(--color-surface-head); }
.link-list .link-list-icon { color: var(--color-text-muted); display: grid; }
.link-list .link-list-text { display: flex; flex-direction: column; min-inline-size: 0; }
.link-list .link-list-text strong { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.link-list .link-list-text small { color: var(--color-text-muted); font-size: var(--text-xs); }
.link-list .link-list-go { color: var(--color-text-muted); display: grid; }
.card-head-text { flex: 1 1 0; min-inline-size: 6rem; }

/* ------------------------------------------------------------ การ์ดตัวอย่างข้างฟอร์ม (data-preview-form)
   ภาพต้นแบบ: ตัวอย่างแพ็กเกจ/ระดับสมาชิก/โปรไฟล์โค้ช/คอร์ส ด้านขวาของฟอร์ม — สะท้อนค่าที่กำลังกรอก */
.preview-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.preview-card-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-strong);
  font-weight: var(--weight-heavy);
}

.preview-card-kicker .icon { color: var(--color-brand-accent); }

.preview-tier {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-tint-violet), var(--color-surface-card) 80%);
}

.preview-tier-icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  color: var(--color-state-violet);
}

.preview-tier-icon .icon { inline-size: 28px; block-size: 28px; }
.preview-tier h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }

.preview-tier-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1); margin: 0; color: var(--color-state-violet); }
.preview-tier-price strong { font-size: var(--text-2xl); font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; }

.preview-checks,
.preview-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }

.preview-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.preview-checks .icon { color: var(--color-brand-accent); inline-size: 18px; block-size: 18px; }
.preview-checks b { color: var(--color-text-strong); }

.preview-list li { position: relative; padding-inline-start: var(--space-6); }

.preview-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: .45em;
  inline-size: 10px;
  block-size: 6px;
  border-inline-start: 2px solid var(--color-brand-accent);
  border-block-end: 2px solid var(--color-brand-accent);
  transform: rotate(-45deg);
}

.preview-meta { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-normal); font-size: var(--text-sm); }
.preview-meta .icon { inline-size: 18px; block-size: 18px; color: var(--color-state-violet); }
.preview-state { margin: 0; }

/* แถบไฮไลต์ท้ายการ์ด (ภาพต้นแบบ: แพ็กเกจขายดีที่สุด) — ตัวเลขจากข้อมูลจริงเท่านั้น */
.highlight-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-tint-success);
}

.highlight-strip-icon {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-full);
  background: var(--color-surface-card);
  color: var(--color-brand-accent);
  flex: none;
}

.highlight-strip-icon[data-plain="true"] { background: transparent; inline-size: 32px; }
.highlight-strip-icon .icon { inline-size: 26px; block-size: 26px; }
.highlight-strip-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.highlight-strip-text small { color: var(--color-text-muted); font-size: var(--text-xs); }
.highlight-strip-text strong { color: var(--color-text-strong); font-weight: var(--weight-heavy); font-size: var(--text-lg); }
.highlight-strip-sep { inline-size: 1px; align-self: stretch; background: color-mix(in srgb, var(--color-brand-accent) 20%, transparent); }
.highlight-strip > .btn { margin-inline-start: auto; }

/* สวิตช์เปิด/ปิด (ภาพต้นแบบ) — ยังเป็น <input type="checkbox"> จริง คีย์บอร์ดและโปรแกรมอ่านหน้าจอใช้ได้เหมือนเดิม */
input[type="checkbox"].switch,
.field-grid .check-card input[type="checkbox"].switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  inline-size: 44px;
  block-size: 24px;
  min-block-size: 0;
  flex: none;
  margin: 0;
  border-radius: var(--radius-full);
  background: var(--color-border-normal);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

input[type="checkbox"].switch::before {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 18px;
  block-size: 18px;
  border-radius: var(--radius-full);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-standard);
}

input[type="checkbox"].switch:checked,
.field-grid .check-card input[type="checkbox"].switch:checked { background: var(--color-brand-accent); }
input[type="checkbox"].switch:checked::before { transform: translateX(20px); }
input[type="checkbox"].switch:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ตัวอย่างแพ็กเกจ / คอร์ส / โปรไฟล์ */
.preview-media { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface-court); }
.preview-media img { display: block; inline-size: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.preview-media > span { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); }
.preview-media .badge { background: var(--color-surface-card); box-shadow: var(--shadow-sm); }

.preview-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.preview-title h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-heavy); overflow-wrap: anywhere; }
.preview-desc { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.preview-facts { display: flex; flex-direction: column; margin: 0; border-block: 1px solid var(--color-border-normal); }
.preview-facts > div { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); }
.preview-facts > div + div { border-block-start: 1px solid var(--color-border-normal); }
.preview-facts dt { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-normal); font-size: var(--text-sm); }
.preview-facts dt .icon { inline-size: 18px; block-size: 18px; color: var(--color-text-muted); }
.preview-facts dd { margin: 0; color: var(--color-text-strong); font-weight: var(--weight-bold); text-align: end; }
.preview-facts dd.is-accent { color: var(--color-brand-accent); }

.preview-flags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.preview-flags li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-tint-success);
  color: var(--color-brand-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.preview-flags li .icon { inline-size: 16px; block-size: 16px; }

/* ‼️ หัวเพจบนจอกว้างอยู่แถวเดียวเสมอ — ภาพประกอบหดก่อน ชื่อหน้าและปุ่มไม่ตกบรรทัด
      เจอที่หน้าแพ็กเกจ: ปุ่มสองปุ่ม + ภาพ + คำคม ยาวเกิน แล้วปุ่มหล่นไปอยู่ใต้ชื่อหน้า */
@media (min-width: 1100px) {
  .page-head-main[data-art="true"] { flex-wrap: nowrap; }
  .page-head-main[data-art="true"] .page-head-text { flex: 1 1 auto; min-inline-size: 18rem; }
  .page-head-main[data-art="true"] .page-actions { flex: none; flex-wrap: nowrap; }
  .page-head-main[data-art="true"] .page-art { flex: 0 1 auto; min-inline-size: 0; }
  .page-head-main[data-art="true"] .page-art-photo { min-inline-size: 150px; flex: 0 1 auto; }
  .page-head-main[data-art="true"] .page-art-quote { flex: 0 1 auto; min-inline-size: 0; }
}

/* ชิปเล็กของค่าหลายค่าในเซลล์ (ความเชี่ยวชาญ · ระดับ) — ภาพต้นแบบรายชื่อโค้ช */
.cell-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); max-inline-size: 16rem; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-full);
  background: var(--color-surface-head);
  color: var(--color-text-normal);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* ‼️ หน้ารายการที่มีคอลัมน์ข้าง ให้ตารางกว้างกว่าคอลัมน์ข้างชัดเจน — ตารางแปดคอลัมน์ถูกบีบจนชื่อสนามตัดสี่บรรทัด */
@media (min-width: 1200px) {
  .record-layout:not([data-single="true"]):has(> .record-main .table) { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); }

  /* หน้าใบจอง: คอลัมน์ขวา (การรับเงิน) กว้างกว่าค่ากลาง — ยอด/ฟอร์มรับเงินอ่านง่าย (ผู้ใช้สั่ง 2026-10-26)
     ‼️ ต้องชนะกฎตารางด้านบน — :has(> .record-side) เพิ่มน้ำหนักให้เท่ากัน แล้วอยู่หลังจึงชนะ */
  .record-layout[data-side="wide"]:not([data-single="true"]):has(> .record-side) { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); }
}
.table td { overflow-wrap: normal; }
.table td.num, .table td:has(> .badge) { white-space: nowrap; }
.table td:has(.cell-tags), .table td:has(.cell-stack) { white-space: normal; }

.table td[data-primary] { min-inline-size: 10rem; }
.table td[data-primary] .cell-stack > :first-child { white-space: nowrap; }
.cell-tags { flex-wrap: wrap; max-inline-size: 11rem; }

/* หัวการ์ดแคบ (คอลัมน์ข้าง): ลิงก์ "ดูทั้งหมด" อยู่แถวเดียวกับชื่อ ไม่ตกลงไปอีกแถว */
.record-side .card-head { flex-wrap: nowrap; }
.record-side .card-head .card-actions { flex: none; }
.record-side .card-head .card-actions .btn { min-block-size: 32px; padding-inline: var(--space-2); color: var(--color-brand-accent); }

.preview-person { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--color-surface-mist), var(--color-surface-card) 80%); }
.preview-person .preview-title { justify-content: center; }

/* หน้าฟอร์มแบบเดิม (form-shell) ให้คอลัมน์ข้างตรึงตามเลื่อนเหมือน form-layout — ตัวอย่างต้องเห็นตลอดตอนกรอก */
@media (min-width: 1024px) {
  .form-shell-side { position: sticky; inset-block-start: var(--space-6); align-self: start; display: flex; flex-direction: column; gap: var(--form-section-gap); }
}

/* ‼️ ลิงก์ใน footer ต้องกดโดนได้ (WCAG 2.5.8 ≥ 24px) — ปุ่ม "แจ้งปัญหา" ไม่มี padding จึงสูงแค่บรรทัดตัวอักษร */
.site-footer-link { display: inline-flex; align-items: center; min-block-size: 32px; }

/* หน้ารายการที่มีคอลัมน์ข้าง: ต่ำกว่า 1280px ให้คอลัมน์ข้างลงไปอยู่ใต้ตาราง — ตารางหลายคอลัมน์ต้องการความกว้างเต็ม */
@media (max-width: 1279px) {
  .record-layout:has(> .record-main .table) { grid-template-columns: minmax(0, 1fr); }
}

/* ‼️ จอ 1024–1400 ตารางแปดคอลัมน์ต้องกระชับลง ไม่งั้นล้นกรอบ (วัดด้วย bin/qa/visual.js)
      ลดระยะในเซลล์และขอบการ์ด ไม่ใช่ซ่อนคอลัมน์ — ข้อมูลยังครบทุกคอลัมน์ */
@media (max-width: 1400px) {
  .table th, .table td { padding-inline: 10px; }
  .table thead th { padding-inline: 10px; }
  .page > .table-wrap, .page > [data-drawer-list] > .table-wrap, .card[data-flush="true"] > .card-body { padding-inline: var(--space-3); }
  .table td[data-primary] { min-inline-size: 8rem; }
  .cell-tags { max-inline-size: 8rem; }
  .table .actions .btn-icon { min-inline-size: 34px; min-block-size: 34px; }
  .table .actions { gap: 2px; }
}

/* ------------------------------------------------ หลายสาขา (หน้าจองรวม) + ส่งเวลาว่างให้ลูกค้า */

/* แถบ "ส่งเวลาว่างให้ลูกค้า" บนรายการสนามและตารางคอร์ท */
.share-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
}

.share-bar-icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--form-choice-icon);
  block-size: var(--form-choice-icon);
  border-radius: var(--radius-md);
  background: var(--color-tint-success);
  color: var(--color-brand-accent);
}

.share-bar-text { flex: 1 1 18rem; display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.share-bar-text strong { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.share-bar-text small { color: var(--color-text-muted); font-size: var(--text-sm); }
.share-bar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ‼️ "คัดลอกแล้ว" ต่างด้วยพื้น + ขอบ + ข้อความ ไม่ใช่สีอย่างเดียว */
[data-copy][data-copied="true"] {
  border-color: var(--color-brand-accent);
  background: var(--color-tint-success);
  color: var(--color-brand-accent);
}

/* ลิงก์ "ดูสาขาอื่น" บนหน้าของสาขา */
.branch-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-tint-success);
  color: var(--color-text-normal);
  font-size: var(--text-sm);
}

.branch-hint > span { flex: 1 1 14rem; }

/* หน้าเลือกสาขา (ธุรกิจที่ตั้งแบบแยก) */
.branch-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-4);
}

.branch-pick-card > .card-body { display: flex; flex-direction: column; gap: var(--space-3); block-size: 100%; }
.branch-pick-card h2 { margin: 0; font-size: var(--text-lg); color: var(--color-text-strong); }
.branch-pick-card .row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: auto; }

/* ตั้งค่าหน้าจอง — สาขาในหน้ารวม: สวิตช์แสดง + ลำดับ */
.portal-modes { margin-block-end: var(--space-4); }
.portal-modes .choice-card { align-items: flex-start; }
.portal-modes .choice-card input[type="radio"] { inline-size: var(--icon-base); block-size: var(--icon-base); flex: none; margin-block-start: var(--space-1); }
.portal-modes .choice-card-label { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-strong); font-weight: var(--weight-bold); }

.portal-venues { display: flex; flex-direction: column; gap: var(--space-2); margin-block-start: var(--space-5); }

.portal-venue {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
}

.portal-venue .check-card { flex: 1 1 16rem; padding-block-start: 0; }
.portal-order { flex: 0 0 7rem; margin: 0; }
.portal-order input { inline-size: 100%; }

/* ================================================================ ขั้นตอนจองของลูกค้า (หน้าจอง 4 ขั้น)
   ภาพต้นแบบ: พื้นขาว/ออฟไวต์ · เขียว OMC · ตัวอักษรกรมท่า · สถานะเขียวอ่อน · มุม 12–16px · เงาเบา
   ‼️ ค่าทั้งหมดเป็น token — โหมดมืดสลับตาม token เอง ไม่มีค่าสีดิบ */
/* ‼️ กว้างเท่าเนื้อหาของแถบหัวเว็บ (1440 − ขอบซ้ายขวา) ขอบตรงโลโก้/ปุ่มการจองของฉัน — --layout-max-width เป็น 100% แล้ว หน้าจองจึงยืดเต็มจอ (ผู้ใช้สั่ง เฉพาะหน้านี้) */
.page[data-width="booking"] { max-inline-size: calc(var(--layout-public-width) - 2 * var(--space-5)); }

.bk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.bk-main { display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0; }

.bk-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
  min-inline-size: 0;
}

.bk-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }

.bk-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-text-strong);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.bk-num {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--radius-full);
  background: var(--color-brand-accent);
  color: var(--color-brand-on-accent);
  font-size: var(--text-sm);
}

.bk-lead { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.bk-block { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; }
.bk-block + .bk-block { padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border-normal); }
.bk-block-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }

.bk-label { margin: 0; color: var(--color-text-strong); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.bk-month { color: var(--color-text-muted); font-size: var(--text-sm); }
.bk-date-nav { display: inline-flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }

.bk-hint, .bk-picked {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
}

.bk-hint { color: var(--color-text-muted); }
.bk-hint .icon, .bk-picked .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); }

.bk-picked {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-tint-success);
  color: var(--color-brand-accent);
  font-weight: var(--weight-bold);
}

.bk-picked[hidden] { display: none; }

/* ---------------------------------------------------------- ขั้นที่ 1: การ์ดสาขา */

.branch-cards {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block-end: var(--space-1);
}

.branch-card {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: min(300px, 78vw);
  padding: var(--space-2);
  padding-inline-end: var(--space-8);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  color: var(--color-text-normal);
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

a.branch-card:hover { border-color: var(--color-border-strong); }
a.branch-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.branch-card[aria-current="true"] {
  border-color: var(--color-brand-accent);
  background: var(--color-tint-success);
  box-shadow: inset 0 0 0 1px var(--color-brand-accent);
}

.branch-card-photo {
  flex: none;
  inline-size: 76px;
  block-size: 60px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-surface-court);
}

.branch-card-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.branch-card-text strong { color: var(--color-text-strong); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.branch-card-text small { display: flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
.branch-card-text small .icon { inline-size: 14px; block-size: 14px; flex: none; }

.branch-card-check {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: var(--radius-full);
  background: var(--color-brand-accent);
  color: var(--color-brand-on-accent);
}

.branch-card-check .icon { inline-size: 14px; block-size: 14px; }
.branch-cards[data-single="true"] { flex-wrap: wrap; align-items: center; overflow: visible; }
.branch-card-other { flex: none; }

/* ---------------------------------------------------------- ขั้นที่ 2: วัน · ความยาว · ช่วงของวัน */

.bk-dates {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block-end: var(--space-1);
}

.bk-date {
  flex: 0 0 calc((100% - 4 * var(--space-2)) / 5);
  max-inline-size: 76px;
  min-inline-size: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  color: var(--color-text-normal);
  text-decoration: none;
  scroll-snap-align: start;
}

.bk-date:hover { border-color: var(--color-border-strong); }
.bk-date-week, .bk-date-month { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.bk-date-day { font-size: var(--text-lg); color: var(--color-text-strong); line-height: var(--leading-tight); }

.bk-date[aria-current="date"] { border-color: var(--color-brand-accent); background: var(--color-brand-accent); }
.bk-date[aria-current="date"] :is(.bk-date-week, .bk-date-day, .bk-date-month) { color: var(--color-brand-on-accent); }

.bk-cal {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  color: var(--color-text-normal);
  cursor: pointer;
}

/* ช่องวันที่จริงคลุมปุ่มไว้แบบใส — กดตรงไหนก็เปิดปฏิทินได้แม้ไม่มี JS */
.bk-cal input[type="date"] {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.bk-cal:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.bk-chips, .bk-periods { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.bk-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-full);
  background: var(--color-surface-card);
  color: var(--color-text-normal);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: pointer;
}

.bk-chip:hover { border-color: var(--color-border-strong); }

.bk-chip:is([aria-current="true"], [aria-pressed="true"]) {
  border-color: var(--color-brand-accent);
  background: var(--color-tint-success);
  color: var(--color-brand-accent);
  font-weight: var(--weight-bold);
  box-shadow: inset 0 0 0 1px var(--color-brand-accent);
}

.bk-chip-count {
  min-inline-size: 20px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-tint-neutral);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.bk-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0 0 0 auto; padding: 0; list-style: none; }
.bk-legend li { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }

.bk-legend li::before {
  content: "";
  inline-size: 14px;
  block-size: 14px;
  border-radius: 4px;
  border: 1px solid var(--color-slot-free-border);
  background: var(--color-tint-success);
}

.bk-legend li[data-state="booked"]::before { border-color: var(--color-slot-taken); background: var(--color-slot-taken); }
.bk-legend li[data-state="selected"]::before { border-color: var(--color-slot-selected); background: var(--color-slot-selected); }
.bk-legend li[data-state="closed"]::before { border-color: var(--color-border-normal); background: var(--color-slot-past); }

/* ---------------------------------------------------------- ตาราง คอร์ท × เวลา (จอกว้าง) */

.bk-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
}

.bk-grid { border-collapse: separate; border-spacing: 0 var(--space-1); inline-size: 100%; font-size: var(--text-sm); }
.bk-grid th, .bk-grid td { padding: 0 2px; text-align: center; vertical-align: middle; }

.bk-grid thead th {
  padding-block: var(--space-2);
  background: var(--color-surface-head);
  color: var(--color-text-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.bk-grid thead th[data-half="true"] { color: var(--color-text-muted); font-weight: var(--weight-normal); }

/* เวลาเริ่มที่เส้นแบ่งช่อง (ขอบซ้ายของช่องที่เริ่มเวลานั้น) พร้อมขีดบอกเส้น — ปลายของช่วงที่เลือกชนเส้นของเวลาจบพอดี */
.bk-grid thead th:not(.bk-grid-court) { padding-inline: 0; text-align: start; }
.bk-grid-tick { position: relative; display: inline-block; padding-block-start: var(--space-2); padding-inline-start: var(--space-1); }
.bk-grid-tick::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 100%;
  border-inline-start: 1px solid var(--color-border-normal);
}

.bk-grid .bk-grid-court {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  min-inline-size: 140px;
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-card);
  text-align: start;
  box-shadow: 1px 0 0 var(--color-border-normal);
}

.bk-grid thead .bk-grid-court { z-index: 3; background: var(--color-surface-head); }
.bk-grid tbody .bk-grid-court strong { display: block; color: var(--color-text-strong); font-weight: var(--weight-bold); white-space: nowrap; }
.bk-grid tbody .bk-grid-court small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
.bk-grid td { min-inline-size: 52px; }

.bk-slot {
  position: relative;
  display: block;
  min-inline-size: 48px;
  block-size: 44px;
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-sm);
  background: var(--color-slot-past);
}

.bk-slot input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }

.bk-grid td[data-state="start"] .bk-slot { border-color: var(--color-slot-free-border); background: var(--color-tint-success); cursor: pointer; }
.bk-grid td[data-state="start"] .bk-slot:hover { border-color: var(--color-slot-selected); }
.bk-grid td[data-state="short"] .bk-slot { border-style: dashed; border-color: var(--color-slot-free-border); background: var(--color-surface-card); }
.bk-grid td[data-state="booked"] .bk-slot { border-color: var(--color-slot-taken); background: var(--color-slot-taken); }
.bk-grid .bk-slot:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 1px; }

/* ‼️ ช่วงที่เลือกเป็นแถบเดียว — ช่องกลางไม่มีช่องไฟและไม่มีมุมมน · ไม่มี JS ยังเห็นช่องเริ่มที่ติ๊กไว้ */
.bk-grid .bk-slot:has(input:checked),
.bk-grid td[data-in-range] .bk-slot {
  border-color: var(--color-slot-selected);
  background: var(--color-slot-selected);
}

.bk-grid td[data-in-range] { padding-inline: 0; }
.bk-grid td[data-in-range] .bk-slot { border-radius: 0; }
.bk-grid td[data-in-range="start"] { padding-inline-start: 2px; }
.bk-grid td[data-in-range="end"] { padding-inline-end: 2px; }
.bk-grid td[data-in-range="start"] .bk-slot { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }
.bk-grid td[data-in-range="end"] .bk-slot { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }

/* มี JS: เวลาเริ่ม–จบบนแถบแทนจุด — วางเหนือช่องถัดไปของแถบ (ช่องต่อกันไม่มีช่องไฟ) */
.bk-grid td[data-in-range="start"] .bk-slot[data-range-label] { z-index: 2; }
.bk-grid td[data-in-range="start"] .bk-slot[data-range-label]::after {
  content: attr(data-range-label);
  /* กลางแถบ — กว้างเท่าจำนวนช่องของช่วง (--range-span จาก app.js) · ผู้ใช้สั่ง 2026-10-12 */
  inset-inline-start: 0;
  inline-size: calc(100% * var(--range-span, 1));
  text-align: center;
  block-size: auto;
  border-radius: 0;
  background: none;
  color: var(--color-slot-on-selected);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateY(-50%);
}

.bk-grid td[data-in-range="start"] .bk-slot::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-full);
  background: var(--color-slot-on-selected);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ช่วงของวัน — แสดงเฉพาะคอลัมน์ของช่วงที่เลือก (JS ตั้ง data-period · ไม่มี JS = ทั้งวัน) */
.bk-grid-wrap[data-period="morning"] :is(th, td)[data-period]:not([data-period="morning"]),
.bk-grid-wrap[data-period="afternoon"] :is(th, td)[data-period]:not([data-period="afternoon"]),
.bk-grid-wrap[data-period="evening"] :is(th, td)[data-period]:not([data-period="evening"]) { display: none; }

/* ---------------------------------------------------------- มือถือ: เลือกคอร์ท + ชิปเวลา */

.bk-mobile { display: flex; flex-direction: column; gap: var(--space-3); }
.bk-mobile .field[hidden] { display: none; }
.bk-times { display: flex; flex-direction: column; gap: var(--space-3); }
.bk-times + .bk-times { padding-block-start: var(--space-3); border-block-start: 1px dashed var(--color-border-normal); }
.bk-times-court { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin: 0; color: var(--color-text-strong); font-size: var(--text-base); }
.bk-times-court small { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-normal); }
.bk-times-empty { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.bk-times-label { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.bk-times-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }

/* มี JS: เห็นเฉพาะคอร์ทที่เลือกในช่องเลือกคอร์ท */
.bk-layout[data-js="true"] .bk-times:not([data-current]) { display: none; }
.bk-layout[data-js="true"] .bk-times-court { display: none; }
.bk-layout[data-js="true"] .bk-times + .bk-times { padding-block-start: 0; border: 0; }

.bk-time {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 44px;
  border: 1px solid var(--color-slot-free-border);
  border-radius: var(--radius-md);
  background: var(--color-tint-success);
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.bk-time input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bk-time:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.bk-time:has(input:checked) { border-color: var(--color-brand-accent); background: var(--color-brand-accent); color: var(--color-brand-on-accent); font-weight: var(--weight-bold); }
.bk-time[data-state="short"] { border-style: dashed; background: var(--color-surface-card); color: var(--color-text-muted); }
.bk-time[data-state="booked"] { border-color: var(--color-border-normal); background: var(--color-slot-blocked); color: var(--color-text-muted); text-decoration: line-through; }

/* ---------------------------------------------------------- ขั้นที่ 3: ข้อมูลผู้จอง */

.bk-form { display: flex; flex-direction: column; gap: var(--space-4); }
.bk-form .field-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3) var(--space-4); }
.bk-form :is(input:not([type="checkbox"]), textarea) { min-block-size: 44px; }

.bk-checks { display: flex; flex-direction: column; gap: var(--space-2); }

.bk-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
}

.bk-check input[type="checkbox"] { inline-size: 22px; block-size: 22px; min-block-size: 0; margin: 1px 0 0; accent-color: var(--color-brand-accent); }
.bk-check label { color: var(--color-text-normal); font-size: var(--text-sm); font-weight: var(--weight-normal); cursor: pointer; }
.bk-check .error { grid-column: 2; }
.bk-check[data-invalid="true"] { border-color: var(--color-state-danger); background: var(--color-tint-danger); }

/* ---------------------------------------------------------- ขั้นที่ 4: ตรวจสอบก่อนยืนยัน */

.bk-review { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }

.bk-review-group {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  background: var(--color-surface-head);
}

.bk-review-group h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); color: var(--color-text-strong); font-size: var(--text-sm); }
.bk-review-group h3 .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-brand-accent); }
.bk-review-group dl { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; }
.bk-review-group dl > div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.bk-review-group dt { color: var(--color-text-muted); }
.bk-review-group dd { margin: 0; color: var(--color-text-strong); text-align: end; overflow-wrap: anywhere; }
.bk-review-group [data-tone="discount"] dd { color: var(--color-state-success); }

.bk-review-total { padding-block-start: var(--space-2); border-block-start: 1px solid var(--color-border-normal); }
.bk-review-total :is(dt, dd) { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.bk-review-group .bk-review-total dd { color: var(--color-brand-accent); font-size: var(--text-lg); }

.bk-actions { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; gap: var(--space-3); }
.bk-actions form { display: contents; }
.bk-actions .btn { min-block-size: 48px; }

/* ---------------------------------------------------------- กล่องสรุปการจอง + แถบล่างมือถือ */

.bk-summary {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-md);
}

.bk-summary-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-strong); font-size: var(--text-lg); }
.bk-summary-title .icon { color: var(--color-brand-accent); }
.bk-summary-rows, .bk-summary-lines { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.bk-summary-row, .bk-summary-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); }
.bk-summary-row dt { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); white-space: nowrap; }
.bk-summary-row dt .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.bk-summary-row dd, .bk-summary-line dd { margin: 0; color: var(--color-text-strong); font-weight: var(--weight-medium); text-align: end; }
.bk-summary-lines { padding-block-start: var(--space-3); border-block-start: 1px dashed var(--color-border-normal); }
.bk-summary-line dt { color: var(--color-text-normal); }
.bk-summary-line[data-tone="discount"] dd { color: var(--color-state-success); }

.bk-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border-normal);
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
}

.bk-summary-total strong { color: var(--color-brand-accent); font-size: var(--text-2xl); }
.bk-summary-cta { inline-size: 100%; min-block-size: 48px; justify-content: center; }
.bk-summary-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.bk-summary-note .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-brand-accent); }

.bk-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--color-border-normal);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-lg);
}

.bk-bar-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-inline-size: 0; }
.bk-bar-text span { overflow: hidden; color: var(--color-text-normal); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.bk-bar-text strong { color: var(--color-brand-accent); font-size: var(--text-lg); line-height: var(--leading-tight); }
.bk-bar .btn { flex: none; min-block-size: 48px; }

/* แถบล่างลอยทับเนื้อหาท้ายหน้า — เผื่อที่ให้ปุ่มสุดท้ายและ footer ไม่ถูกบัง */
.page[data-width="booking"] { padding-block-end: calc(var(--space-20) + env(safe-area-inset-bottom, 0px)); }

/* ---------------------------------------------------------- หลังยืนยัน */

.bk-done {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-inline-size: 720px;
  inline-size: 100%;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
}

.bk-done-head { display: flex; align-items: flex-start; gap: var(--space-4); }

.bk-done-icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--radius-full);
  background: var(--color-tint-success);
  color: var(--color-state-success);
}

.bk-done-icon .icon { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
.bk-done[data-tone="warning"] .bk-done-icon { background: var(--color-tint-warning); color: var(--color-state-warning); }
.bk-done[data-tone="info"] .bk-done-icon { background: var(--color-tint-info); color: var(--color-state-info); }

/* Focused payment handoff: no navigation, no artificial delay before checkout. */
body[data-variant="handoff"] .content {
  display: flex;
  align-items: center;
  padding-block: var(--space-8);
}

.pay-handoff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-8);
  text-align: center;
}

.pay-handoff-status { min-inline-size: 0; max-inline-size: 100%; }
.pay-handoff .page-head { margin: 0; padding: 0; justify-content: center; }
.pay-handoff .page-head-main { justify-content: center; }
.pay-handoff .page-title-row { justify-content: center; }
.pay-handoff .page-head h1 { font-size: var(--text-2xl); }
.pay-handoff-lead { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.pay-handoff > .btn { background: var(--color-brand-accent); color: var(--color-brand-on-accent); }
.pay-handoff > .btn:hover { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }

/* QR PromptPay บนหน้าของเรา (partials/payment-qr.php) — กรอบขาวทั้งสองโหมดให้แอปธนาคารอ่านออก */
.pay-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  inline-size: 100%;
  max-inline-size: 480px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.pay-qr-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.pay-qr-label { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.pay-qr-amount { margin: 0; color: var(--color-text-strong); font-size: var(--text-3xl); font-weight: var(--weight-heavy); }
.pay-qr-ref { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.pay-qr-code { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin: 0; }
.pay-qr-code img { display: block; inline-size: min(100%, 240px); block-size: auto; padding: var(--space-3); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-qr); }
.pay-qr-code figcaption { display: flex; flex-direction: column; gap: var(--space-1); color: var(--color-text-normal); font-size: var(--text-sm); }
.pay-qr-timer { color: var(--color-text-muted); }
.pay-qr-timer strong { color: var(--color-text-strong); }
.pay-qr-expired { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.pay-qr-expired[hidden], .pay-qr-code[hidden] { display: none; }
.pay-qr-expired p { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-state-warning); font-weight: var(--weight-bold); }
.pay-qr-hint { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.pay-qr-hint[hidden] { display: none; }
.pay-qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* โมดูลของสนาม (ตั้งค่า › โมดูล · 135) — การ์ดสวิตช์ 2 คอลัมน์บนจอกว้าง · เปิดอยู่ = กรอบสีแบรนด์ */
.module-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-3); }
.module-switches .check-line { align-items: flex-start; padding: var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast); }
.module-switches .check-line:has(:checked) { border-color: var(--color-brand-accent); background: var(--color-surface-mist); }
.module-switches .check-line:has(:focus-visible) { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; }
.module-switches-note { display: flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-3); }
/* ระบบ › LINE · แจ้งเตือนลูกค้าทาง LINE (ผู้ใช้สั่ง 2026-10-29) — แถบตัวเลข (โควตาใหญ่ซ้าย) · การ์ดสวิตช์ทีละเรื่อง · ข้อควรรู้ */
.line-notify-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-block-end: var(--space-4); }
.line-notify-quota { grid-column: 1 / -1; }
.line-notify-quota, .line-notify-stat { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); }
.line-notify-stat-label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.line-notify-stat-label .icon { inline-size: 1rem; block-size: 1rem; flex: none; }
.line-notify-stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-notify-stat strong, .line-notify-quota-value { color: var(--color-text-strong); font-size: var(--text-lg); line-height: var(--leading-tight); }
.line-notify-quota-value.muted { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); }
.line-notify-stat[data-tone="warning"] strong { color: var(--color-state-warning); }
.line-notify-quota small { color: var(--color-text-muted); font-size: var(--text-xs); line-height: var(--leading-normal); }
.line-notify-meter { --meter: var(--color-state-success); display: block; inline-size: 100%; block-size: 6px; border: 0; border-radius: 999px; background: var(--color-surface-mist); overflow: hidden; appearance: none; color: var(--meter); }
.line-notify-meter::-webkit-progress-bar { background: var(--color-surface-mist); border-radius: 999px; }
.line-notify-meter::-webkit-progress-value { background: var(--meter); border-radius: 999px; }
.line-notify-meter::-moz-progress-bar { background: var(--meter); border-radius: 999px; }
.line-notify-quota[data-level="warning"] .line-notify-meter { --meter: var(--color-state-warning); }
.line-notify-quota[data-level="danger"] .line-notify-meter { --meter: var(--color-state-danger); }
.line-notify-subtitle { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; }
.line-notify-types { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.line-notify-off { display: none; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--text-sm); }
/* ระบบ › LINE: กุญแจ 2 ชุดคู่กัน — ซ้าย LINE Login · ขวา Messaging API (ผู้ใช้สั่ง 2026-10-29) · จอแคบเรียงลง */
.line-keys-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.line-keys-pair > form { display: flex; min-inline-size: 0; }
.line-keys-pair > form > fieldset { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.line-keys-pair .card { flex: 1; display: flex; flex-direction: column; margin: 0; }
.line-keys-pair .card-body { flex: 1; display: flex; flex-direction: column; }
.line-keys-pair .card-body > .form-actions { margin-block-start: auto; } /* ปุ่มบันทึกสองการ์ดระดับเดียวกัน (ผู้ใช้สั่ง 2026-10-29 "แก้ให้เท่ากัน") */
.line-keys-pair .field-grid[data-cols="2"] { grid-template-columns: 1fr; }
.line-keys-pair .checkbox-inline[data-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* Callback / Webhook หน้าตาเดียวกัน: แถวบน ไอคอน + ป้าย · แถวล่าง ลิงก์ + ปุ่มคัดลอกท้ายแถว */
.line-keys-pair .info-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.line-keys-pair .info-bar > span { grid-column: 2 / -1; }
.line-keys-pair .info-bar > strong, .line-keys-pair .info-bar > span.muted { grid-column: 1 / 3; overflow-wrap: anywhere; }
.line-keys-pair .info-bar > .btn { grid-column: 3; margin: 0; }
.line-reply-howto { display: flex; gap: var(--space-2); align-items: flex-start; }
@media (max-width: 1100px) { .line-keys-pair { grid-template-columns: 1fr; } }
/* ตอบอัตโนมัติ | ลิงก์ rich menu คู่กันแถวเดียว สูงเท่ากัน (ผู้ใช้สั่ง 2026-10-29) · จอแคบเรียงลง */
.line-test-form { display: grid; gap: var(--space-2); }
.line-sample-form .field { margin: 0; }
.line-test-bot { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); color: var(--color-text-muted); }
.form-aside .line-test-title { margin-block-start: var(--space-4); }
/* แจ้งเตือน | Rich Menu แถวเดียว การ์ดสูงเท่ากัน (2026-10-29) — ในคู่นี้ Rich Menu เรียงข้อความ/ลิงก์ซ้อนกัน */
.line-notify-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.line-notify-pair > form { display: flex; min-inline-size: 0; margin: 0; }
.line-notify-pair > form > fieldset { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.line-notify-pair .card { flex: 1; display: flex; flex-direction: column; margin: 0; }
.line-notify-pair .card-body { flex: 1; display: flex; flex-direction: column; }
.line-notify-pair .card-body > .form-actions { margin-block-start: auto; }
.line-notify-pair .richmenu-cols { grid-template-columns: minmax(0, 1fr); }
.line-notify-pair .line-notify-types { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
@media (max-width: 1280px) { .line-notify-pair { grid-template-columns: minmax(0, 1fr); } .line-notify-pair .richmenu-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .line-notify-pair .richmenu-cols { grid-template-columns: minmax(0, 1fr); } }
/* การ์ด LINE Rich Menu: ซ้าย ปุ่มข้อความ (แก้ได้) | ขวา ปุ่มลิงก์ (ตายตัว) (ผู้ใช้สั่ง 2026-10-29) */
.richmenu-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
@media (max-width: 1100px) { .richmenu-cols { grid-template-columns: minmax(0, 1fr); } }
.richmenu-col { display: grid; gap: var(--space-3); min-inline-size: 0; }
.richmenu-col-head { display: grid; gap: var(--space-1); }
.richmenu-col-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
/* ‼️ คอลัมน์ติ๊กถูกแคบที่สุด — ตารางลูกค้ามี 11 คอลัมน์ ห้ามดันจนเลื่อนข้าง (padding ชนะ $tableFit ด้วย :is) */
:is(table, .table) :is(td, th).cell-check-col.cell-check-col { padding-inline: 2px; text-align: center; }
.cell-check { display: inline-grid; place-items: center; inline-size: 1.35rem; block-size: 1.35rem; border-radius: 50%; }
.cell-check .icon { inline-size: 0.85rem; block-size: 0.85rem; }
.cell-check[data-tone="on"] { background: var(--color-tint-success); color: var(--color-state-success); }
.cell-check[data-tone="warn"] { background: var(--color-tint-warning); color: var(--color-state-warning); }
.cell-check[data-tone="off"] { background: var(--color-surface-head); color: var(--color-text-muted); }
.line-notify-friends { color: var(--color-text-muted); font-size: var(--text-xs); }
.account-prompts { display: grid; gap: var(--space-4); }
.account-prompt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.account-prompt[hidden] { display: none; }
.account-prompt + .account-prompt { border-block-start: 1px solid var(--color-border-normal); padding-block-start: var(--space-4); }
.account-prompt > div { display: grid; gap: var(--space-2); justify-items: start; }
.account-prompt p { margin: 0; }
.account-prompt-icon { display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-lg); background: var(--color-tint-success); color: var(--color-brand-accent); }
.account-prompt-icon[data-tone="line"] { background: var(--color-social-line); color: var(--color-social-on-line); }
#account-prompts .dialog-foot { gap: var(--space-2); }
.richmenu-col-head p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.richmenu-kind { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-bold); background: var(--color-tint-info); color: var(--color-state-info); }
.richmenu-kind[data-kind="link"] { background: var(--color-tint-success); color: var(--color-state-success); }
.richmenu-kind .icon { inline-size: 0.95rem; block-size: 0.95rem; }
.richmenu-text-row { align-items: flex-start; }
.richmenu-text-row .rich-link-text { gap: var(--space-1); }
.richmenu-text-row input { inline-size: 100%; min-block-size: 40px; }
.richmenu-text-row .hint { color: var(--color-text-muted); font-size: var(--text-xs); }
.richmenu-text-row > .btn { margin-block-start: 1.6rem; }
.line-chat-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.line-chat-pair > * { min-inline-size: 0; margin: 0; }
.line-chat-pair > form { display: flex; }
.line-chat-pair > form > fieldset { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.line-chat-pair .card { flex: 1; display: flex; flex-direction: column; margin: 0; }
.line-chat-pair .card-body { flex: 1; display: flex; flex-direction: column; }
.line-chat-pair .card-body > .form-actions { margin-block-start: auto; }
.line-chat-pair .field-grid[data-cols="2"] { grid-template-columns: 1fr; }
.line-chat-pair .rich-link-grid { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .line-chat-pair { grid-template-columns: 1fr; } }
.line-notify-off .icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
/* ปิดแจ้งเตือนทั้งหมด = ซ่อนการ์ดเรื่องที่แจ้ง แสดงกล่องบอกให้เปิดก่อน (ตามสวิตช์สดๆ · ผู้ใช้แจ้ง 2026-10-29) */
.line-notify:has(#notify_enabled:not(:checked)) .line-notify-types-wrap { display: none; }
.line-notify:has(#notify_enabled:not(:checked)) .line-notify-off { display: flex; }
.line-notify-notes { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); list-style: none; border-radius: var(--radius-md); background: var(--color-surface-mist); }
.line-notify-notes li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-normal); line-height: var(--leading-normal); }
.line-notify-notes .icon { inline-size: 1rem; block-size: 1rem; flex: none; margin-block-start: 3px; color: var(--color-text-muted); }
@media (max-width: 560px) { .line-notify-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .line-notify-stat:last-child { grid-column: 1 / -1; } }


/* ราคารวม VAT (partials/vat-row.php · 133) — บรรทัดรองใต้ยอดรวม */
.vat-row :is(dt, dd) { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-normal); }

/* Coordinates and stroke widths below belong to the 420 x 240 SVG illustration. */
.tennis-loader { display: block; width: min(100%, var(--tennis-loader-width)); height: auto; overflow: visible; }
.tennis-loader-court { fill: var(--color-surface-court); }
.tennis-loader-lines { stroke: var(--color-brand-accent); stroke-width: 1.5; opacity: .22; }
.tennis-loader-net { stroke-width: 3; stroke-dasharray: 3 5; }
.tennis-loader-frame { fill: var(--color-surface-card); stroke: var(--color-brand-accent); stroke-width: 4; }
.tennis-loader-strings { stroke: var(--color-brand-accent); stroke-width: 1; opacity: .4; }
.tennis-loader-throat { stroke: var(--color-brand-accent); stroke-width: 3; stroke-linejoin: round; }
.tennis-loader-grip { stroke: var(--color-text-strong); stroke-width: 7; stroke-linecap: round; }
.tennis-loader-ball-fill { fill: var(--color-brand-highlight); stroke: var(--color-brand-on-highlight); stroke-width: 1.5; }
.tennis-loader-ball-seam { stroke: var(--color-brand-on-highlight); stroke-width: 1.2; stroke-linecap: round; }
.tennis-loader-ball { animation: tennis-rally var(--tennis-loader-cycle) linear infinite; }
.tennis-loader-racket { transform-origin: var(--tennis-loader-racket-pivot); }
.tennis-loader-racket-left { animation: tennis-swing-left var(--tennis-loader-cycle) ease-in-out infinite; }
.tennis-loader-racket-right { animation: tennis-swing-right var(--tennis-loader-cycle) ease-in-out infinite; }

@keyframes tennis-rally {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(114px, -34px); }
  50% { transform: translate(228px, 0); }
  75% { transform: translate(114px, 25px); }
}
@keyframes tennis-swing-left {
  0%, 100% { transform: rotate(0deg); }
  10%, 38% { transform: rotate(-18deg); }
  65%, 85% { transform: rotate(12deg); }
}
@keyframes tennis-swing-right {
  0%, 35% { transform: rotate(-12deg); }
  50% { transform: rotate(0deg); }
  60%, 88% { transform: rotate(18deg); }
  100% { transform: rotate(-12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tennis-loader-ball, .tennis-loader-racket { animation: none; }
  .tennis-loader-ball { transform: var(--tennis-loader-resting-ball); }
}

.bk-done[data-tone="danger"] .bk-done-icon { background: var(--color-tint-danger); color: var(--color-state-danger); }

.bk-done-status { margin: 0; color: var(--color-state-success); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.bk-done[data-tone="warning"] .bk-done-status { color: var(--color-state-warning); }
.bk-done[data-tone="info"] .bk-done-status { color: var(--color-state-info); }
.bk-done[data-tone="danger"] .bk-done-status { color: var(--color-state-danger); }
.bk-done-title { margin: 0; color: var(--color-text-strong); font-size: var(--text-xl); }
.bk-done-lead { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.bk-done-code {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-brand-accent);
  border-radius: var(--radius-md);
  background: var(--color-tint-success);
}

.bk-done-code span { color: var(--color-text-muted); font-size: var(--text-sm); }
.bk-done-code strong { color: var(--color-text-strong); font-size: var(--text-2xl); letter-spacing: .04em; }

.bk-done-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.bk-done-list > div { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-1); border-block-end: 1px solid var(--color-border-normal); font-size: var(--text-sm); }
.bk-done-list dt { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); white-space: nowrap; }
.bk-done-list dt .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.bk-done-list dd { margin: 0; color: var(--color-text-strong); text-align: end; }
.bk-done-list .bk-done-total dd { color: var(--color-brand-accent); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.bk-done-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bk-done-actions .btn { min-block-size: 44px; }
/* ซ้าย = การจองของฉัน · จองเพิ่ม · ขวา = โทร · LINE · เปิดแผนที่ — จอแคบเรียงต่อกันลงมา */
.bk-done-actions { justify-content: space-between; align-items: center; }
.bk-done-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bk-done-group[data-end="true"] { justify-content: flex-end; margin-inline-start: auto; }
@media (max-width: 640px) {
  .bk-done-group, .bk-done-group[data-end="true"] { flex: 1 1 100%; justify-content: stretch; margin-inline-start: 0; }
  .bk-done-group .btn { flex: 1 1 auto; }
}
/* จอกว้าง: ปุ่มทั้งหมดอยู่บรรทัดเดียว (ผู้ใช้สั่ง 2026-10-12) — การ์ดกว้างขึ้นพอให้ 6 ปุ่มไม่ตัดบรรทัด */
@media (min-width: 960px) {
  .bk-done:has(.bk-done-group) { max-inline-size: 960px; }
  .bk-done-actions:not(:has(.bk-pay-again)), .bk-done-actions:not(:has(.bk-pay-again)) .bk-done-group { flex-wrap: nowrap; }
  .bk-done-group .btn { white-space: nowrap; padding-inline: var(--space-3); }
}

/* footer แถวเดียวของขั้นตอนจอง — ยังเป็น footer จาก layout กลาง มีแบรนด์และปุ่มสลับธีม/ภาษา */
.public-footer[data-compact="true"] { padding-block: var(--space-4); }
.public-footer[data-compact="true"] .public-footer-legal { margin: 0; padding: 0; border: 0; }

/* ---------------------------------------------------------- ขนาดจอ */

/* ‼️ มือถือใช้ชิปเวลา ไม่ใช่ตารางย่อส่วน · ตารางเริ่มที่ 768px */
.bk-grid-wrap, .bk-periods { display: none; }

@media (min-width: 430px) {
  .bk-times-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .bk-form .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-form .field-grid > .field[data-width="full"] { grid-column: 1 / -1; }
  .bk-review { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-date { flex-basis: 64px; }
}

@media (min-width: 768px) {
  .bk-grid-wrap { display: block; }
  .bk-periods:not([hidden]) { display: flex; }
  .bk-mobile { display: none; }
}

@media (min-width: 1024px) {
  .bk-layout { grid-template-columns: minmax(0, 1fr) var(--layout-aside-width); }
  .bk-summary { display: flex; position: sticky; inset-block-start: var(--space-4); }
  .bk-bar, .bk-picked[data-bk-picked] { display: none; }
  .page[data-width="booking"] { padding-block-end: var(--space-8); }
}

@media (max-width: 640px) {
  .bk-card { padding: var(--space-4); }
  .bk-legend { margin-inline-start: 0; }

}

/* ขั้นตอนจอง: ช่องกรอกกว้างเต็มคอลัมน์ของกริดสองคอลัมน์ — ความยาวที่คาดหวังบอกด้วยคอลัมน์แทน */
.bk-form .field :is(input, select, textarea) { max-inline-size: 100%; }
.bk-times-period { display: flex; flex-direction: column; min-inline-size: 0; }

/* มือถือ: ชิปที่อยู่ในช่วงที่เลือก (ต่อจากเวลาเริ่ม) เป็นแถบเขียวอ่อน — เห็นว่าจองยาวถึงไหนโดยไม่ต้องอ่านข้อความ */
.bk-time[data-in-range]:not([data-in-range="start"]) { border-color: var(--color-brand-accent); background: var(--color-tint-success); color: var(--color-brand-accent); text-decoration: none; }

/* เลขที่จองกับปุ่มคัดลอกอยู่แถวเดียวกันทุกขนาดจอ — ป้ายอยู่แถวบน */
.bk-done-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.bk-done-code > span { grid-column: 1 / -1; }
.bk-done-code strong { overflow-wrap: anywhere; }

/* ---------------------------------------------------------- ช่องทางชำระในขั้นยืนยัน */

.bk-pay { display: flex; flex-direction: column; gap: var(--space-3); }
.bk-pay .bk-label { display: flex; align-items: center; gap: var(--space-2); }
.bk-pay .bk-label .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-brand-accent); }
.bk-pay-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }

.bk-pay-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 56px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  cursor: pointer;
}

.bk-pay-option input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bk-pay-option:hover { border-color: var(--color-border-strong); }
.bk-pay-option:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ‼️ ที่เลือกต่างด้วยขอบ + พื้น + เครื่องหมาย ไม่ใช่สีอย่างเดียว */
.bk-pay-option:has(input:checked) {
  border-color: var(--color-brand-accent);
  background: var(--color-tint-success);
  box-shadow: inset 0 0 0 1px var(--color-brand-accent);
}

.bk-pay-option:has(input:checked)::after {
  content: "✓";
  margin-inline-start: auto;
  color: var(--color-brand-accent);
  font-weight: var(--weight-heavy);
}

.bk-pay-option[data-disabled="true"] { cursor: not-allowed; opacity: .6; }
.bk-pay-icon { display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: var(--radius-md); background: var(--color-tint-neutral); color: var(--color-text-normal); }
.bk-pay-option:has(input:checked) .bk-pay-icon { background: var(--color-surface-card); color: var(--color-brand-accent); }
.bk-pay-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.bk-pay-text strong { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.bk-pay-text small { color: var(--color-text-muted); font-size: var(--text-xs); }

@media (min-width: 640px) {
  /* ‼️ การ์ดวิธีชำระกว้างไม่เกิน 340px — เหลือวิธีเดียว (เช่น Sports Credit) ไม่ยืดเต็มแถว (ผู้ใช้ทัก 2026-10-14) */
  .bk-pay-options { grid-template-columns: repeat(auto-fill, minmax(220px, 340px)); }
}

.bk-done-actions form { display: contents; }

/* ---------------------------------------------------------- วิธีชำระออนไลน์ (QR / บัตร) — partials/pay-method-picker.php
   ‼️ ภาษาเดียวกับการ์ดช่องทางด้านบน แต่เป็นชั้นย่อย: กรอบพื้นอ่อน · สองคอลัมน์บนจอกว้าง · คอลัมน์เดียวบนมือถือ
   ‼️ หน้าทบทวนการจอง: แสดงเฉพาะเมื่อเลือก "ชำระออนไลน์" หรือ "จ่ายผสม" — ช่องทางอื่นไม่เกี่ยวกับ QR/บัตร */
.pay-methods { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-mist); min-inline-size: 0; }
.pay-methods-title { float: inline-start; inline-size: 100%; padding: 0; margin-block-end: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.pay-methods-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.pay-method { position: relative; display: flex; align-items: center; gap: var(--space-3); min-block-size: 56px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); cursor: pointer; }
/* Sports Credit ไม่พอ (หน้าผลการจอง) — เห็นยอดคงเหลือแต่เลือกไม่ได้ */
.pay-method[data-disabled="true"] { opacity: .55; cursor: not-allowed; }
.pay-method input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pay-method:hover { border-color: var(--color-border-strong); }
.pay-method:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pay-method:has(input:checked) { border-color: var(--color-brand-accent); box-shadow: inset 0 0 0 1px var(--color-brand-accent); }
.pay-method:has(input:checked)::after { content: "✓"; margin-inline-start: auto; color: var(--color-brand-accent); font-weight: var(--weight-heavy); }
.pay-method-icon { display: grid; place-items: center; flex: none; inline-size: 36px; block-size: 36px; border-radius: var(--radius-md); background: var(--color-tint-neutral); color: var(--color-text-normal); }
.pay-method:has(input:checked) .pay-method-icon { background: var(--color-tint-success); color: var(--color-brand-accent); }
.pay-method-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.pay-method-text strong { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.pay-method-text small, .pay-methods-single small { color: var(--color-text-muted); font-size: var(--text-xs); }
.pay-methods-single { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-mist); color: var(--color-text-strong); font-size: var(--text-sm); }
.pay-methods-single > span:last-of-type { display: flex; flex-direction: column; gap: 2px; }

@media (min-width: 640px) {
  .pay-methods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bk-pay:not(:has(input[name="payment_channel"][value="online"]:checked, input[name="payment_channel"][value="split"]:checked)) [data-pay-methods] { display: none; }

/* ‼️ หน้าทบทวน: QR/บัตร อยู่ต่อจากการ์ด "ชำระออนไลน์" ในรายการเดียวกัน — เต็มแถว เยื้องเข้าเป็นชั้นย่อย (ผู้ใช้สั่ง 2026-11-03)
      เลือกชำระออนไลน์แล้วยังไม่เลือกวิธี = กรอบสีเตือน บอกว่ายังต้องเลือกตรงนี้ */
.bk-pay-options > [data-pay-methods] { grid-column: 1 / -1; margin-inline-start: var(--space-4); }
.bk-pay:has(input[name="payment_channel"][value="online"]:checked, input[name="payment_channel"][value="split"]:checked):not(:has(input[name="online_method"]:checked)) .pay-methods {
  border-color: var(--color-state-warning); background: var(--color-tint-warning);
}

/* ปุ่มชำระซ้ำในหน้าผลการจอง — ตัวเลือกอยู่เหนือปุ่ม เต็มแถว */
.bk-done-actions form.bk-pay-again { display: grid; gap: var(--space-3); flex: 1 1 100%; }

/* ---------------------------------------------------------- กระเป๋าเงิน: ยอด · ฟอร์มปรับเครดิต · สมุดบัญชี */

.wallet-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-block-end: var(--space-5); }

.wallet-balance {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-tint-success);
}

.wallet-balance span { color: var(--color-text-normal); font-size: var(--text-sm); }
.wallet-balance strong { color: var(--color-brand-accent); font-size: var(--text-2xl); font-weight: var(--weight-heavy); }
.wallet-balance small { color: var(--color-text-muted); font-size: var(--text-sm); }

.wallet-adjust, .wallet-topup {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
}

.wallet-adjust-direction { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.wallet-topup-legend {
  margin: 0 0 calc(var(--space-2) - var(--space-4));
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-strong);
}
.wallet-adjust .bk-chip input, .wallet-topup .bk-chip input { position: absolute; opacity: 0; pointer-events: none; }
.wallet-adjust .bk-chip, .wallet-topup .bk-chip { position: relative; }
.wallet-adjust .bk-chip:has(input:checked), .wallet-topup .bk-chip:has(input:checked) {
  border-color: var(--color-brand-accent);
  background: var(--color-tint-success);
  color: var(--color-brand-accent);
  font-weight: var(--weight-bold);
  box-shadow: inset 0 0 0 1px var(--color-brand-accent);
}
.wallet-adjust .bk-chip:has(input:focus-visible), .wallet-topup .bk-chip:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.wallet-adjust .bk-chip .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

.wallet-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.wallet-preview > div { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-head); }
.wallet-preview dt { color: var(--color-text-muted); font-size: var(--text-xs); }
.wallet-preview dd { margin: 0; color: var(--color-text-strong); font-weight: var(--weight-bold); }

.ledger { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); }

.ledger-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
}

.ledger-row + .ledger-row { border-block-start: 1px solid var(--color-border-normal); }

.ledger-icon {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--radius-full);
  background: var(--color-tint-success);
  color: var(--color-state-success);
}

.ledger-row[data-direction="debit"] .ledger-icon { background: var(--color-tint-warning); color: var(--color-state-warning); }
.ledger-icon .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.ledger-main { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.ledger-main p { margin: 0; }
.ledger-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-strong); }
.ledger-reason, .ledger-note { color: var(--color-text-normal); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ledger-meta { color: var(--color-text-muted); font-size: var(--text-xs); }
.ledger-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; }
.ledger-amount strong { color: var(--color-state-success); font-size: var(--text-base); }
.ledger-row[data-direction="debit"] .ledger-amount strong { color: var(--color-text-strong); }
.ledger-amount small { color: var(--color-text-muted); font-size: var(--text-xs); }
.ledger-reverse { grid-column: 2 / -1; }
.ledger-reverse summary { color: var(--color-brand-link); font-size: var(--text-sm); cursor: pointer; }
.ledger-reverse form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); }
.ledger-reverse label { font-size: var(--text-xs); color: var(--color-text-muted); }
.ledger-reverse input { flex: 1 1 14rem; min-block-size: 40px; }

@media (min-width: 1024px) {
  .wallet-panel { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); align-items: start; }
}

@media (max-width: 480px) {
  .wallet-preview { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ ตั้งค่าการชำระเงิน (ผู้ดูแลแพลตฟอร์ม · เจ้าของสนาม)
   ‼️ ช่องทางที่ไม่อนุญาตแสดงด้วยไอคอนกุญแจ + ข้อความ ไม่ใช่แค่จางลง */

/* ‼️ คอลัมน์เดียวที่หดได้ — เดิมคอลัมน์โตตามข้อความยาว (สถานะ merchant) กว้างเกินการ์ดบนมือถือ ขวาถูกตัด (ตรวจทั้งระบบ 2026-10-27) */
.method-matrix { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-block-end: var(--space-4); }

.method-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
}

.method-row .check-card { flex: 1 1 18rem; min-inline-size: 0; padding-block-start: 0; }
.method-row[data-state="locked"] { background: var(--color-surface-head); }
.check-card.is-locked { cursor: default; color: var(--color-text-muted); }
.check-card.is-locked > .icon { flex: none; margin-block-start: 2px; }
.method-flags { display: flex; flex-wrap: wrap; gap: var(--space-2); min-inline-size: 0; }
/* ป้ายสถานะ merchant เป็นประโยคยาว — ให้ตัดบรรทัดได้ (badge กลาง nowrap) ไม่งั้นดันกล่องเกินจอมือถือ */
.method-flags .badge { white-space: normal; max-inline-size: 100%; text-align: start; }
.method-setting { flex: 1 1 100%; }
.method-setting .field { margin: 0; max-inline-size: 22rem; }

.payment-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-block-end: var(--space-4); }

.merchant-list { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; }

.merchant-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
}

.merchant-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 18rem; min-inline-size: 0; }
.merchant-main strong { color: var(--color-text-strong); }
.merchant-main small { color: var(--color-text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }

.merchant-form { border: 1px dashed var(--color-border-normal); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.merchant-form summary { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-brand-link); font-weight: var(--weight-bold); cursor: pointer; }
.merchant-form[open] summary { margin-block-end: var(--space-4); }
.merchant-form textarea { font-family: var(--font-mono); font-size: var(--text-xs); }

/* บัญชี Merchant แยก Sandbox / Production — การ์ดละโหมด · มือถือเรียงลงเป็นคอลัมน์เดียว */
.merchant-env-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-block-end: var(--space-4); }
.merchant-env-switch .check-card { flex: 1 1 20rem; }
.merchant-env-switch .form-actions { margin: 0; padding: 0; border: 0; }
.merchant-env-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-4); }
.merchant-env-card { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; padding: var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); }
.merchant-env-card[data-active="true"] { border-color: var(--color-brand-link); box-shadow: inset 0 3px 0 var(--color-brand-link); }
.merchant-env-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.merchant-env-head strong { color: var(--color-text-strong); margin-inline-end: auto; }
.merchant-env-meta { display: flex; flex-direction: column; gap: 2px; margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.merchant-env-card .merchant-form { border: 0; padding: 0; }
.merchant-env-card .form-actions { margin-block-start: var(--space-3); }

/* ข้อความหลายบรรทัดใน callout (รายการที่ต้องแก้ · ลิงก์ไปแก้) */
.callout > div { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
.callout > div p { margin: 0; }
.callout-list { margin: 0; padding-inline-start: var(--space-5); font-size: var(--text-sm); }

/* ‼️ merchant สองแบบวางคู่กันให้เห็นว่าใช้รับเงินคนละเรื่อง — ใช้แทนกันไม่ได้ */
.merchant-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); margin-block-end: var(--space-5); }
.merchant-kind { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); }
.merchant-kind strong { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-strong); }
.merchant-kind p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ปลายทาง API ของผู้ให้บริการ — แสดงอย่างเดียว */
.endpoint-list { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-head); }
.endpoint-list div { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.endpoint-list dt { color: var(--color-text-normal); font-size: var(--text-sm); font-weight: var(--weight-bold); min-inline-size: 8rem; }
.endpoint-list dd { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }

/* ═══════════════════════════════════ Customer Portal · เข้าสู่ระบบด้วยเบอร์มือถือ + OTP ═══════════════════════════════════ */

/* กล่องกรอกเบอร์ (หน้าแรกสนาม · หน้าเข้าสู่ระบบ) */
.phone-login { display: grid; gap: var(--space-3); margin-block: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); box-shadow: var(--shadow-sm); max-inline-size: 28rem; }
.phone-login .field { margin: 0; }
.phone-login-hello { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: var(--weight-bold); color: var(--color-text-strong); }
.phone-login-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.phone-login-note { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.btn-block { inline-size: 100%; justify-content: center; }
.btn-link { background: none; border: 0; padding: var(--space-1) 0; color: var(--color-brand-link); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 3px; }
.btn-link:disabled { color: var(--color-text-muted); text-decoration: none; cursor: not-allowed; }

.signin-card { max-inline-size: 30rem; margin-inline: auto; }
.signin-card .phone-login { border: 0; box-shadow: none; padding: 0; max-inline-size: none; }

/* ═══════════════════════════════════ หน้าแรกของเว็บสนาม · สนาม + สรุปเวลาว่าง 7 วัน (ภาพต้นแบบ 2026-09-24 รอบ 2)

   ‼️ จอกว้าง: ซ้าย = ข้อมูลสนาม/ปุ่ม · ขวา = การ์ด 7 วัน · ล่าง = แถบข้อมูล (เวลาเปิด-ปิด · สิ่งอำนวยความสะดวก · ที่ตั้ง)
   ‼️ ต่ำกว่า 1024px เรียงลง — การ์ด 7 วันขึ้นมาต่อจากกล่องปุ่มทันที (ผู้ใช้สั่ง "ยังต้องเห็นง่าย")
   ‼️ ภาพสนามเป็นของตกแต่ง (alt ว่าง) จางลงทุกขอบ — ข้อความอยู่บนพื้นหน้าเสมอ อ่านออกทั้งสองโหมด */
.venue-home {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-6);
}

.venue-home > * { min-inline-size: 0; }

@media (min-width: 1024px) { .venue-home { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }

.venue-home-backdrop {
  position: absolute;
  z-index: -1;
  inset-block-start: calc(var(--space-8) * -1);
  inset-inline-start: 22%;
  inline-size: 50%;
  block-size: min(100%, 560px);
  object-fit: cover;
  object-position: center 70%;
  opacity: .9;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, var(--color-text-strong) 40%, var(--color-text-strong) 75%, transparent 100%),
    linear-gradient(180deg, var(--color-text-strong) 55%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, var(--color-text-strong) 40%, var(--color-text-strong) 75%, transparent 100%),
    linear-gradient(180deg, var(--color-text-strong) 55%, transparent 100%);
          mask-composite: intersect;
}

:root[data-theme="dark"] .venue-home-backdrop { opacity: .25; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .venue-home-backdrop { opacity: .25; }
}

@media (max-width: 1023px) {
  .venue-home-backdrop { inset-inline: auto calc(50% - 50vw); inline-size: 100vw; block-size: 380px; opacity: .3; }
}

.venue-home-info { display: grid; gap: var(--space-4); align-content: start; }
.venue-home-info .hero-eyebrow { letter-spacing: normal; text-transform: none; background: var(--color-tint-success); }
.venue-home-info .hero-title { margin: 0; font-size: clamp(var(--text-3xl), 3.4vw, var(--text-4xl)); }
.venue-home-info .hero-lead { margin: 0; color: var(--color-text-normal); font-size: var(--text-lg); }

/* บรรทัดข้อมูลสั้น: เวลาเปิด · จำนวนคอร์ท · เบอร์ · OMC Certified — คั่นด้วยเส้นตั้ง */
.venue-home-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) 0; margin: 0; padding: 0; list-style: none; color: var(--color-text-normal); font-size: var(--text-sm); }
.venue-home-meta li { display: inline-flex; align-items: center; gap: var(--space-2); padding-inline: var(--space-3); border-inline-start: 1px solid var(--color-border-strong); }
.venue-home-meta li:first-child { padding-inline-start: 0; border-inline-start: 0; }
.venue-home-meta .icon { color: var(--color-brand-primary); }
.venue-home-meta a { color: inherit; text-decoration: none; }

.venue-home-info .phone-login {
  margin: 0;
  max-inline-size: 36rem;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.venue-home-info .phone-login-hello { font-size: var(--text-lg); }
.venue-home-info .phone-login-hello .icon { color: var(--color-brand-primary); }
.venue-home-info .phone-login-actions { gap: var(--space-3); }
.venue-home-info .phone-login-actions .btn { min-block-size: 52px; padding-inline: var(--space-8); font-size: var(--text-base); }

.venue-home-tabs { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.venue-home-tabs .btn-secondary { background: var(--color-tint-success); border-color: transparent; color: var(--color-brand-primary); }

.venue-home-about { margin-block-start: var(--space-4); }
.venue-home-about h2 { margin: 0 0 var(--space-2); font-size: var(--text-xl); color: var(--color-text-strong); }
.venue-home-about p { margin: 0; max-inline-size: 62ch; color: var(--color-text-normal); line-height: var(--leading-loose); }

/* การ์ดเวลาว่าง 7 วันข้างหน้า (partials/availability-outlook.php) */
.outlook {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-xl);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-lg);
}

.outlook-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-inline: var(--space-2); }
.outlook-head h2 { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--text-xl); color: var(--color-text-strong); }
.outlook-head h2 .icon { color: var(--color-brand-primary); }
.outlook-updated { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); }

.outlook-list { display: grid; margin: 0; padding: 0; list-style: none; }
.outlook-list li + li { border-block-start: 1px solid var(--color-border-normal); }

.outlook-day {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 7.5rem auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.outlook-day[data-today="true"] { background: var(--color-surface-mist); }
.outlook-day:hover { background: var(--color-surface-head); }
.outlook-day:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.outlook-date { display: grid; }
.outlook-date strong { color: var(--color-text-strong); font-size: var(--text-lg); line-height: var(--leading-tight); }
.outlook-date span { color: var(--color-text-muted); font-size: var(--text-sm); }

.outlook-hint {
  display: grid;
  align-content: center;
  min-block-size: 3.25rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-head);
  color: var(--color-text-muted);
}

.outlook-day[data-today="true"] .outlook-hint { background: var(--color-surface-card); }
.outlook-hint small { font-size: var(--text-xs); }
.outlook-hint strong { color: var(--color-text-strong); font-size: var(--text-base); font-variant-numeric: tabular-nums; }

/* สถานะ = จุดสี + คำ (ห้ามสีอย่างเดียว) · ว่าง เขียว · เหลือน้อย ส้ม · เต็ม แดง · ปิด เทา */
.outlook-status { position: relative; display: grid; padding-inline-start: var(--space-5); }
.outlook-status::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .45em;
  inline-size: .625rem;
  block-size: .625rem;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
}
.outlook-status strong { font-size: var(--text-sm); color: var(--color-text-strong); }
.outlook-status small { color: var(--color-text-muted); font-size: var(--text-xs); }
.outlook-day[data-status="open"] .outlook-status::before { background: var(--color-state-success); }
.outlook-day[data-status="open"] .outlook-status strong { color: var(--color-state-success); }
.outlook-day[data-status="few"] .outlook-status::before { background: var(--color-state-warning); }
.outlook-day[data-status="few"] .outlook-status strong { color: var(--color-state-warning); }
.outlook-day[data-status="full"] .outlook-status::before { background: var(--color-state-danger); }
.outlook-day[data-status="full"] .outlook-status strong { color: var(--color-state-danger); }
.outlook-day[data-status="closed"] .outlook-date strong { color: var(--color-text-muted); }

.outlook-go {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-full);
  background: var(--color-surface-card);
  color: var(--color-text-normal);
}

.outlook-day:hover .outlook-go { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }

.outlook-note { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding-inline: var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); }

/* แถบล่าง: เวลาเปิด-ปิด · สิ่งอำนวยความสะดวก + ที่ตั้ง */
.venue-home-band {
  display: grid;
  gap: var(--space-6);
  margin-block-end: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-xl);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 1024px) {
  .venue-home-band { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-8); }
  .venue-home-band > .venue-home-group + .venue-home-group { padding-inline-start: var(--space-8); border-inline-start: 1px solid var(--color-border-normal); }
}

.venue-home-group { display: grid; gap: var(--space-3); align-content: start; }
.venue-home-group h2 { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-lg); color: var(--color-text-strong); }
.venue-home-group h2 .icon { color: var(--color-brand-primary); }
.venue-home-group h2:not(:first-child) { margin-block-start: var(--space-2); }

.venue-home-hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 var(--space-8); margin: 0; }
@media (min-width: 600px) { .venue-home-hours { grid-template-rows: repeat(4, auto); grid-auto-flow: column; } }
.venue-home-hours div { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); border-block-end: 1px solid var(--color-border-normal); font-size: var(--text-sm); }
.venue-home-hours dt { color: var(--color-text-normal); }
.venue-home-hours dd { margin: 0; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.venue-home-hours div[data-today="true"] :is(dt, dd) { color: var(--color-brand-primary); font-weight: var(--weight-bold); }

.venue-home-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.venue-home-chips li { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border-normal); border-radius: var(--radius-full); background: var(--color-surface-head); color: var(--color-text-normal); font-size: var(--text-sm); }
.venue-home-chips .icon { color: var(--color-brand-primary); }

.venue-home-address { display: grid; gap: var(--space-1); padding-inline-start: calc(var(--space-6) + var(--space-1)); font-style: normal; color: var(--color-text-normal); font-size: var(--text-sm); }
.venue-home-address a { display: inline-flex; align-items: center; gap: var(--space-1); inline-size: fit-content; color: var(--color-brand-link); font-weight: var(--weight-bold); }

@media (max-width: 1023px) {
  .venue-home { gap: var(--space-5); }
  .venue-home-info { display: contents; }
  .venue-home > .outlook { order: 1; }
  .venue-home-tabs, .venue-home-about { order: 2; }
}

@media (max-width: 599px) {
  .outlook { padding: var(--space-4) var(--space-3); }
  /* 390px: วัน | (ช่วงแนะนำ / สถานะ ซ้อนสองบรรทัด) | ลูกศร — สถานะหลักกับบรรทัดรองอยู่แถวเดียวกัน ไม่ให้แถวสูงเป็น 3 ชั้น */
  .outlook-day { grid-template-columns: 5.25rem minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-2); }
  .outlook-date { grid-row: span 2; }
  .outlook-date strong { font-size: var(--text-base); }
  .outlook-date span { font-size: var(--text-xs); }
  .outlook-hint { grid-column: 2; min-block-size: 0; padding: 0; background: none; }
  .outlook-day[data-today="true"] .outlook-hint { background: none; }
  .outlook-hint small { display: none; }
  .outlook-hint strong { font-size: var(--text-sm); }
  .outlook-status { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); padding-inline-start: var(--space-4); }
  .outlook-status::before { inset-block-start: .4em; inline-size: .5rem; block-size: .5rem; }
  .outlook-note { padding-inline: var(--space-2); }
  .outlook-go { grid-column: 3; grid-row: 1 / span 2; }
  .venue-home-info .phone-login-actions .btn { flex: 1 1 10rem; padding-inline: var(--space-4); }
  .venue-home-band { padding: var(--space-5) var(--space-4); }
  .venue-home-address { padding-inline-start: 0; }
}
/* ═══════════════════════════════════ จบ หน้าแรกของเว็บสนาม */

/* ═══════════════════════════════════ หน้าข้อมูลส่วนตัวของลูกค้า · ข้อมูลส่วนตัว | เปลี่ยน PIN (ภาพต้นแบบ 2026-09-24)

   ‼️ จอกว้าง 2 การ์ดคู่กัน สูงเท่ากัน ปุ่มบันทึกชิดล่างทั้งสองใบ — การ์ด PIN ห้ามหล่นลงไปอยู่ใต้ฟอร์ม · ต่ำกว่า 1024px เรียงลง */
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: stretch; margin-block: var(--space-2) var(--space-8); }
.profile-grid > * { min-inline-size: 0; }

@media (min-width: 1024px) {
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-grid.profile-grid-single { grid-template-columns: minmax(0, 40rem); }
}

.profile-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); }
.profile-card > .field { margin: 0; }
.profile-card-submit { margin-block-start: auto; min-block-size: 52px; }

.profile-card-head { display: flex; align-items: center; gap: var(--space-4); padding-block-end: var(--space-4); border-block-end: 1px solid var(--color-border-normal); }
.profile-card-head > div { display: grid; gap: var(--space-1); min-inline-size: 0; }
.profile-card-head h2 { margin: 0; font-size: var(--text-2xl); color: var(--color-text-strong); overflow-wrap: anywhere; }
.profile-card-head p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.profile-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }

.profile-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: var(--radius-full);
  background: var(--color-tint-success);
  color: var(--color-brand-primary);
}

.profile-avatar .icon { inline-size: var(--icon-lg); block-size: var(--icon-lg); }

.profile-card-title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-lg); color: var(--color-text-strong); }
.profile-card-title .icon { color: var(--color-brand-primary); }

/* เบอร์มือถือ: ช่องอ่านอย่างเดียว + ป้ายสถานะการยืนยันอยู่ในกรอบเดียวกัน */
.profile-phone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline-end: var(--space-2);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  background: var(--color-surface-head);
}

/* ‼️ ต้องชนะ .field input:not(...) (ความเจาะจง 0,3,1) — ช่องนี้ใช้กรอบของ .profile-phone แทน */
.field .profile-phone input[readonly] { flex: 1; min-inline-size: 0; border: 0; background: transparent; box-shadow: none; color: var(--color-text-strong); }
.field .profile-phone input[readonly]:focus { outline: none; box-shadow: none; }
.profile-phone:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.profile-phone .badge { flex: none; }

.profile-card .bk-check label small { display: block; margin-block-start: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }

/* เปลี่ยน PIN: ชื่อช่องซ้าย · 6 ช่องขวา · ปุ่มแสดง/ซ่อนท้ายชุด */
.pin-rows { display: grid; gap: var(--space-4); }
.pin-row { display: grid; gap: var(--space-2); }
.pin-row-label { margin: 0; color: var(--color-text-strong); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.pin-row .otp-digits { justify-content: flex-start; align-items: center; }

@media (min-width: 600px) {
  .pin-row { grid-template-columns: 10rem minmax(0, 1fr); align-items: center; gap: var(--space-4); }
}

.otp-reveal {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-inline-start: var(--space-1);
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.otp-reveal:hover { color: var(--color-brand-primary); background: var(--color-surface-raised); }
.otp-reveal:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.otp-reveal .reveal-on { display: none; }
.otp-reveal[data-shown="true"] .reveal-off { display: none; }
.otp-reveal[data-shown="true"] .reveal-on { display: inline-flex; }

.profile-card .callout { margin: 0; }
.profile-card .callout-list { list-style: disc; }

@media (max-width: 599px) {
  .profile-card { padding: var(--space-5) var(--space-4); }
  .profile-avatar { inline-size: 3.5rem; block-size: 3.5rem; }
  .profile-card-head h2 { font-size: var(--text-xl); }
  .pin-row .otp-digits { gap: var(--space-1); }
  .pin-row .otp-digit { inline-size: 2.5rem; block-size: 3rem; }
  .otp-reveal { inline-size: 2.25rem; block-size: 2.25rem; margin-inline-start: 0; }
}
/* ═══════════════════════════════════ จบ หน้าข้อมูลส่วนตัวของลูกค้า */

/* ═══════════════════════════════════ หน้าประวัติของลูกค้า · การจองของฉัน · การชำระเงิน · Sports Credit (ภาพต้นแบบ 2026-09-24)

   ‼️ ชุดเดียวใช้ทั้งสามหน้า: แถบตัวกรอง (ชิป + ช่วงเวลา) · แถวแนวนอนบนจอกว้าง · การ์ดแนวตั้งบนมือถือ (ไม่มีตารางเลื่อนแนวนอน)
   ‼️ สถานะ = ป้ายสี + ไอคอน + คำ (ห้ามสีอย่างเดียว) · เงินเข้า เขียว · เงินออก แดง · รอ ส้ม */
.history-card { margin-block: var(--space-2) var(--space-8); }
.history-card > .card > .card-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
/* ‼️ แถบชิปเลื่อนแนวนอนได้ — ลูกของ grid ต้องยอมแคบกว่าเนื้อหา ไม่งั้นชิปดันการ์ดให้กว้างเกินจอมือถือ */
.history-card > .card > .card-body > * { min-inline-size: 0; }

.history-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
/* ‼️ max-inline-size: เดิมแถบชิปกว้างเท่าชิปทั้งหมด (432px บนจอ 390) ถูกการ์ดตัด เลื่อนดูชิปท้ายไม่ได้ — ต้องเลื่อนในตัวเอง */
.history-chips { display: flex; gap: var(--space-2); min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
.history-chips::-webkit-scrollbar { display: none; }

.history-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 40px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  color: var(--color-text-normal);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.history-chip:hover { border-color: var(--color-brand-accent); color: var(--color-brand-accent); }
.history-chip[aria-current="page"] { border-color: var(--color-brand-accent); background: var(--color-brand-accent); color: var(--color-brand-on-accent); }
.history-chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.history-range { display: inline-flex; align-items: center; gap: var(--space-2); padding-inline-start: var(--space-3); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); color: var(--color-text-muted); }
.history-range select { min-block-size: 40px; border: 0; background: transparent; color: var(--color-text-strong); font-size: var(--text-sm); }

.history-status-select { display: none; }
.history-pager:empty { display: none; }
.history-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.history-list > * { min-inline-size: 0; }

.history-row {
  display: grid;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
}

.history-row p { margin: 0; }
.history-media { display: block; inline-size: 100%; block-size: 4.25rem; object-fit: cover; border-radius: var(--radius-md); background: var(--color-surface-court); }

.history-date { display: grid; justify-items: center; line-height: var(--leading-tight); padding-inline-end: var(--space-3); border-inline-end: 1px solid var(--color-border-normal); }
.history-date strong { font-size: var(--text-2xl); color: var(--color-text-strong); }
.history-date small { color: var(--color-text-muted); font-size: var(--text-xs); }

.history-time { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-strong); }
.history-time > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.history-time .icon { color: var(--color-text-muted); }

.history-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-inline-size: 0; }
.history-title { color: var(--color-text-strong); font-size: var(--text-base); font-weight: var(--weight-bold); text-decoration: none; overflow-wrap: anywhere; }
a.history-title:hover { color: var(--color-brand-link); }
.history-sub { display: inline-flex; align-items: center; gap: var(--space-1); flex-basis: 100%; color: var(--color-text-muted); font-size: var(--text-sm); }
.history-warn { color: var(--color-state-warning); }

.history-when { display: grid; line-height: var(--leading-tight); }
.history-when strong { color: var(--color-text-strong); font-size: var(--text-sm); }
.history-when small { color: var(--color-text-muted); font-size: var(--text-xs); }

.history-field { display: grid; gap: 2px; min-inline-size: 0; font-size: var(--text-sm); color: var(--color-text-strong); }
.history-field small { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
.history-amount strong { font-size: var(--text-lg); }

.history-status { display: grid; gap: var(--space-1); justify-items: start; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-tint-neutral);
  color: var(--color-text-normal);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.status-pill[data-tone="success"] { background: var(--color-tint-success); color: var(--color-state-success); }
.status-pill[data-tone="warning"] { background: var(--color-tint-warning); color: var(--color-state-warning); }
.status-pill[data-tone="danger"]  { background: var(--color-tint-danger);  color: var(--color-state-danger); }
.status-pill[data-tone="info"]    { background: var(--color-tint-info);    color: var(--color-state-info); }

/* แถบรายละเอียดการคืน (ใต้แถว เต็มความกว้าง): ชำระเดิม · คืนเป็น Sports Credit · วันที่คืน */
.history-refund { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-tint-danger); font-size: var(--text-sm); color: var(--color-text-muted); }
.history-refund div { display: flex; gap: var(--space-2); }
.history-refund dd { margin: 0; color: var(--color-text-strong); font-weight: var(--weight-bold); }

.history-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.history-actions .btn { white-space: nowrap; }
.history-actions .btn[data-tone="success"] { border-color: var(--color-state-success); color: var(--color-state-success); background: var(--color-tint-success); }
.history-actions .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
/* ปุ่มยกเลิก = ปุ่มรองขอบแดง ไม่แย่งน้ำหนักกับ "ดูรายละเอียด" */
.history-actions .confirm-form .btn { border-color: var(--color-state-danger); color: var(--color-state-danger); background: var(--color-surface-card); }

/* จอกว้าง: แถวเดียวแนวนอน */
@media (min-width: 1280px) {
  /* สถานะขวาบน · ปุ่มขวาล่าง ทุกแถวตำแหน่งเดียวกัน (ผู้ใช้แจ้ง 2026-10-30 "ยังไม่สวย" — เดิมสถานะ/ปุ่มเลื่อนไปมาตามความยาว) */
  .booking-row { grid-template-columns: 9rem 5.5rem 10rem minmax(0, 1fr) auto; }
  .booking-row :is(.history-media, .history-date, .history-time, .history-main) { grid-row: 1 / span 2; }
  .booking-row .history-status { grid-column: 5; grid-row: 1; justify-items: end; align-self: end; }
  .booking-row .history-actions { grid-column: 5; grid-row: 2; align-self: start; }
}
.history-refund-line { color: var(--color-text-normal); }

@media (min-width: 1024px) {
  .credit-row  { grid-template-columns: 2.75rem 8rem minmax(0, 1fr) auto 9rem; }
}

/* การชำระเงินมีข้อมูลมากที่สุด — แถวเดียวเมื่อจอกว้างพอ (≥1280) · ปุ่มใบเสร็จ/ดูรายละเอียดซ้อนกันในคอลัมน์เดียว */
@media (min-width: 1280px) {
  .payment-row { grid-template-columns: 5.5rem 6.5rem 7.5rem minmax(9rem, 1fr) 7rem 6.5rem 12.5rem 9.5rem; gap: var(--space-3); }
  .payment-row .history-actions { display: grid; }
  .payment-row .history-actions .btn { justify-content: center; }
}

/* แท็บเล็ต/โน้ตบุ๊กจอเล็ก: สองชั้น (การจอง · การชำระเงินแถวเดียวเฉพาะ ≥1280) */
@media (min-width: 640px) and (max-width: 1279px) {
  /* ‼️ 3 คอลัมน์ (รูป · วันที่ · รายละเอียด) — สถานะ/ปุ่มไม่มีคอลัมน์ auto ของตัวเองแล้ว
        เดิมป้ายสถานะยาว ("ยกเลิก · คืนเป็น Sports Credit แล้ว") + ปุ่มกินคอลัมน์ auto จนชื่อเหลือ 0px ตัวอักษรเรียงทีละตัว (ผู้ใช้แจ้ง 2026-10-29) */
  .booking-row { grid-template-columns: 7.5rem 5rem minmax(0, 1fr); }
  .booking-row .history-status { grid-column: 3; grid-row: 1; justify-items: start; }
  .booking-row .history-main { grid-column: 3; grid-row: 2; }
  .booking-row .history-time { grid-column: 3; grid-row: 3; }
  .booking-row .history-media, .booking-row .history-date { grid-row: 1 / span 3; }
  .booking-row .history-actions { grid-column: 1 / -1; grid-row: 4; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
  .booking-row .status-pill { white-space: normal; }
  .credit-row { grid-template-columns: 2.75rem minmax(0, 1fr) auto; }
  .credit-row .history-when { grid-column: 2; grid-row: 2; }
  .credit-row .history-main { grid-column: 2; grid-row: 1; }
  .credit-row .history-status { grid-column: 3; grid-row: 2; justify-items: end; }
  .credit-row .credit-icon { grid-row: span 2; }
}

@media (min-width: 640px) and (max-width: 1279px) {
  .payment-row { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .payment-row .history-media { grid-row: span 2; }
  .payment-row .history-status { grid-column: 5; grid-row: 1; justify-items: end; }
  .payment-row .history-actions { grid-column: 2 / -1; }
}

/* มือถือ: การ์ดแนวตั้ง — วันที่/เวลาเด่น · สถานะขวาบน · ปุ่มหลักเต็มความกว้าง */
@media (max-width: 639px) {
  /* ‼️ มือถือ: ชิปสถานะ → ช่องเลือก dropdown คู่กับช่วงเวลาแถวเดียว (ผู้ใช้สั่ง 2026-10-29 "ดูรก เปลี่ยนเป็นปุ่มเหมือนฟิลด์ dropdown")
        · แบ่งหน้าด้านบนเหลือแค่ "แสดง x-y จาก z" ชิดซ้าย ปุ่มเลขหน้าอยู่ล่างรายการ */
  .history-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-2); }
  .history-chips { display: none; }
  .history-status-select { display: inline-flex; }
  .history-range select { flex: 1 1 auto; min-inline-size: 0; padding-inline-end: var(--space-2); }
  .history-pager:has(+ .history-list) .pagination-bar { justify-content: flex-start; padding-block-start: 0; }
  .history-pager:has(+ .history-list) .pagination { display: none; }

  .booking-row { grid-template-columns: 4.5rem minmax(0, 1fr) auto; grid-template-areas: "media date status" "media time time" "main main main" "actions actions actions"; }
  .booking-row .history-media { grid-area: media; block-size: 4.5rem; }
  .booking-row .history-date { grid-area: date; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-1); min-inline-size: 0; padding: 0; border: 0; }
  .booking-row .history-date small { white-space: nowrap; }
  .booking-row .history-date strong { font-size: var(--text-lg); }
  .booking-row .history-time { grid-area: time; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
  .booking-row .history-main { grid-area: main; }
  .booking-row .history-status { grid-area: status; justify-items: end; }
  /* ป้ายยาว (เช่น "ยกเลิก · คืนเป็น Sports Credit แล้ว") ขึ้นบรรทัดใหม่ในป้าย ไม่ดันการ์ดให้กว้างเกินจอ */
  .booking-row .status-pill { max-inline-size: 11rem; white-space: normal; text-align: end; }
  .booking-row .history-actions { grid-area: actions; display: grid; grid-template-columns: 1fr; }
  .booking-row .history-actions .confirm-form, .booking-row .history-actions .confirm-form .btn { inline-size: 100%; }
  .booking-row .history-actions .btn { justify-content: center; min-block-size: 44px; }

  .payment-row { grid-template-columns: minmax(0, 1fr) auto; }
  .payment-row .history-media { display: none; }
  .payment-row .history-when { grid-column: 1; grid-row: 1; }
  .payment-row .history-status { grid-column: 2; grid-row: 1; justify-items: end; }
  .payment-row .history-main, .payment-row .history-field, .payment-row .history-actions { grid-column: 1 / -1; }
  .payment-row .history-amount strong { font-size: var(--text-2xl); color: var(--color-text-strong); }
  .payment-row .history-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .payment-row .history-actions .btn { justify-content: center; min-block-size: 44px; }

  .credit-row { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
  .credit-row .credit-icon { grid-row: span 2; }
  .credit-row .history-main { grid-column: 2; grid-row: 1; }
  .credit-row .history-when { grid-column: 2; grid-row: 2; }
  .credit-row .credit-amount { grid-column: 3; grid-row: 1; }
  .credit-row .history-status { grid-column: 3; grid-row: 2; justify-items: end; }
}

/* รายการเครดิต: ไอคอนประเภท · จำนวน + เขียว / − แดง / รอ ส้ม */
.credit-icon { display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-md); background: var(--color-tint-neutral); color: var(--color-text-normal); }
.credit-icon[data-tone="success"] { background: var(--color-tint-success); color: var(--color-state-success); }
.credit-icon[data-tone="danger"]  { background: var(--color-tint-danger);  color: var(--color-state-danger); }
.credit-icon[data-tone="info"]    { background: var(--color-tint-info);    color: var(--color-state-info); }
.credit-icon[data-tone="warning"] { background: var(--color-tint-warning); color: var(--color-state-warning); }
.credit-amount { justify-self: end; font-weight: var(--weight-bold); white-space: nowrap; }
.credit-amount[data-tone="in"]      { color: var(--color-state-success); }
.credit-amount[data-tone="out"]     { color: var(--color-state-danger); }
.credit-amount[data-tone="pending"] { color: var(--color-state-warning); }

/* ─────────────────────────── หน้า Sports Credit — ยอด · ปุ่มลัด · เติมเครดิต · สรุปยอด · ประวัติ */
.credit-page { display: grid; gap: var(--space-5); margin-block: var(--space-2) var(--space-8); }
.credit-page > * { min-inline-size: 0; }

@media (min-width: 1024px) {
  .credit-page { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: start; }
  .credit-page > .credit-history { grid-column: 1 / -1; }
  .credit-page > .credit-terms { align-self: stretch; }
}

@media (max-width: 1023px) {
  .credit-page > .credit-hero   { order: 1; }
  .credit-page > .credit-topup  { order: 2; }
  .credit-page > .credit-side   { order: 3; }
  .credit-page > .credit-history { order: 4; }
  .credit-page > .credit-terms  { order: 5; }
}

.credit-hero {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-brand-accent), color-mix(in srgb, var(--color-brand-accent) 72%, var(--color-text-strong)));
  color: var(--color-brand-on-accent);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .credit-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .credit-hero-stats { grid-column: 1; }
  /* ปุ่มลัดเรียงแถวเดียวทางขวาของยอด (ภาพต้นแบบ) — ไม่ซ้อนลงมาจนการ์ดสูงเกิน */
  .credit-actions { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 5.5rem; }
}

.credit-hero-balance { display: flex; align-items: center; gap: var(--space-4); }
.credit-hero-icon { display: inline-grid; place-items: center; flex: none; inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-brand-on-accent) 18%, transparent); }
.credit-hero-icon .icon { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
.credit-hero-label { margin: 0; font-size: var(--text-sm); opacity: .9; }
.credit-hero-amount { margin: 0; font-size: var(--text-4xl); font-weight: var(--weight-heavy); line-height: var(--leading-tight); }
.credit-hero-amount small { font-size: var(--text-lg); font-weight: var(--weight-medium); }

.credit-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.credit-hero-stats div { display: grid; gap: 2px; padding-inline-start: var(--space-3); border-inline-start: 1px solid color-mix(in srgb, var(--color-brand-on-accent) 30%, transparent); }
.credit-hero-stats div:first-child { padding-inline-start: 0; border-inline-start: 0; }
.credit-hero-stats dt { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); opacity: .9; }
.credit-hero-stats dd { margin: 0; font-weight: var(--weight-bold); }

.credit-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: var(--space-3); }
.credit-action {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-2);
  min-inline-size: 5.5rem;
  min-block-size: 5.5rem;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-brand-on-accent) 14%, transparent);
  color: var(--color-brand-on-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-align: center;
  text-decoration: none;
}

.credit-action:first-child { background: var(--color-surface-card); color: var(--color-brand-accent); }
.credit-action .icon { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
.credit-action:hover { filter: brightness(1.08); }
.credit-action:focus-visible { outline: 2px solid var(--color-brand-on-accent); outline-offset: 2px; }

.credit-terms { border-radius: var(--radius-xl); background: var(--color-surface-mist); }
.credit-terms .card-body { display: grid; gap: var(--space-2); }
.credit-terms strong { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-strong); }
.credit-terms strong .icon { color: var(--color-brand-accent); }
.credit-terms p { margin: 0; color: var(--color-text-normal); font-size: var(--text-sm); line-height: var(--leading-loose); }

.credit-topup { border-radius: var(--radius-xl); }
.topup-form { display: grid; gap: var(--space-5); }
.topup-step { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.topup-step legend { display: inline-flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-3); padding: 0; color: var(--color-text-strong); font-weight: var(--weight-bold); }
.topup-step-no { display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--radius-full); background: var(--color-brand-accent); color: var(--color-brand-on-accent); font-size: var(--text-sm); }

.topup-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--space-3); align-items: end; }
.topup-preset { position: relative; display: grid; justify-items: center; gap: 0; min-block-size: 3.5rem; padding: var(--space-2); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); cursor: pointer; }
.topup-preset input { position: absolute; opacity: 0; pointer-events: none; }
.topup-preset strong { color: var(--color-text-strong); font-size: var(--text-lg); }
.topup-preset small { color: var(--color-text-muted); font-size: var(--text-xs); }
.topup-preset:has(input:checked) { border-color: var(--color-brand-accent); background: var(--color-tint-success); box-shadow: 0 0 0 1px var(--color-brand-accent); }
.topup-preset:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.topup-custom { grid-column: span 2; display: grid; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
.topup-custom-input { display: flex; align-items: center; gap: var(--space-2); padding-inline-start: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-card); color: var(--color-text-muted); }
.topup-custom-input input { flex: 1; min-inline-size: 0; min-block-size: 3.25rem; border: 0; background: transparent; color: var(--color-text-strong); font-size: var(--text-lg); }
.topup-custom-input:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.topup-channel { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-brand-accent); border-radius: var(--radius-md); background: var(--color-tint-success); cursor: pointer; }
.topup-channel input { accent-color: var(--color-brand-accent); }
.topup-channel > span:last-child { display: grid; gap: 2px; min-inline-size: 0; }
.topup-channel strong { color: var(--color-text-strong); }
.topup-channel small { color: var(--color-text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.topup-channel-icon { display: inline-grid; place-items: center; flex: none; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-md); background: var(--color-surface-card); color: var(--color-brand-accent); }

.topup-submit { min-block-size: 52px; justify-content: center; font-size: var(--text-base); }
.topup-secure { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); margin: 0; }

.credit-side { display: grid; gap: var(--space-4); align-content: start; }
.credit-summary { border-radius: var(--radius-xl); }
.credit-summary h2 { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-lg); color: var(--color-text-strong); }
.credit-summary h2 .icon { color: var(--color-brand-accent); }
.credit-summary dl { display: grid; gap: var(--space-3); margin: 0; }
.credit-summary dl > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.credit-summary dt { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-normal); font-size: var(--text-sm); }
.credit-summary dd { margin: 0; font-weight: var(--weight-bold); color: var(--color-text-strong); }
.credit-summary dd[data-tone="in"] { color: var(--color-state-success); }
.credit-summary dd[data-tone="pending"] { color: var(--color-state-warning); }
.credit-summary dd[data-tone="bonus"] { color: var(--color-state-info); }
.credit-summary-total { padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border-normal); }
.credit-summary-total dt { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.credit-summary-total dd { font-size: var(--text-2xl); color: var(--color-brand-accent); }

.credit-counter { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; padding: var(--space-4); border-radius: var(--radius-xl); background: var(--color-surface-mist); color: var(--color-brand-accent); }
.credit-counter > span { display: grid; gap: var(--space-1); }
.credit-counter strong { color: var(--color-text-strong); }
.credit-counter small { color: var(--color-text-normal); font-size: var(--text-sm); }

@media (max-width: 639px) {
  .credit-hero { padding: var(--space-5) var(--space-4); }
  .credit-hero-amount { font-size: var(--text-3xl); }
  .credit-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .credit-action { min-inline-size: 0; }
  .topup-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ‼️ มือถือจริง (≤519): ยอดย่อย 3 ช่องแคบจน "บาท" ตกบรรทัด (ผู้ใช้แจ้ง 2026-10-29 · 76,305.00 บาท) — เปลี่ยนเป็นรายการ ชื่อซ้าย ยอดขวา บรรทัดเดียว */
@media (max-width: 519px) {
  .credit-hero-stats { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .credit-hero-stats div,
  .credit-hero-stats div:first-child { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-inline-start: 0; border-block-start: 1px solid color-mix(in srgb, var(--color-brand-on-accent) 25%, transparent); }
  .credit-hero-stats dt { font-size: var(--text-sm); }
  .credit-hero-stats dd { white-space: nowrap; }
}
/* ═══════════════════════════════════ จบ หน้าประวัติของลูกค้า */

/* popup OTP */
.otp-body { display: grid; gap: var(--space-3); text-align: center; }
.otp-sent { margin: 0; color: var(--color-text-normal); }
.otp-phone { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-heavy); color: var(--color-text-strong); letter-spacing: 0.04em; }
.otp-body .callout { text-align: start; }
.otp-test-code { font-size: var(--text-lg); letter-spacing: 0.2em; }
.otp-form { display: grid; gap: var(--space-3); }
.otp-digits { display: flex; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.otp-digit { inline-size: 2.75rem; block-size: 3.25rem; text-align: center; font-size: var(--text-xl); font-weight: var(--weight-bold); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-card); color: var(--color-text-strong); }
.otp-digit:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-brand-primary); }
.otp-digits[data-invalid="true"] .otp-digit { border-color: var(--color-state-danger); }
.otp-timer, .otp-expired { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0; }
.otp-expired { color: var(--color-state-danger); }
.otp-links { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.otp-links form { margin: 0; }
@media (max-width: 380px) { .otp-digit { inline-size: 2.4rem; block-size: 3rem; } }

/* หัว portal + แท็บ */
.portal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); }

/* บัญชีลูกค้า: แถบเมนูล่างบนมือถือ เห็นครบ 5 หน้า แทนแถบ "จองเลย" (ผู้ใช้สั่ง 2026-10-29) — จอกว้างใช้แท็บเดิม */
.portal-bottom-nav { display: none; }
@media (max-width: 767px) {
  .portal-tabs { display: none; }
  .portal-bottom-nav {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-float);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom));
    background: var(--color-surface-card); border-block-start: 1px solid var(--color-border-normal); box-shadow: var(--shadow-lg);
  }
  .portal-bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-block-size: 56px; padding: var(--space-1) 2px; border-radius: var(--radius-md); color: var(--color-text-muted); text-decoration: none; text-align: center; }
  .portal-bottom-nav a[aria-current="page"] { color: var(--color-brand-accent); background: var(--color-surface-mist); font-weight: 600; }
  .portal-bottom-icon { position: relative; display: inline-grid; place-items: center; }
  .portal-bottom-icon .icon { inline-size: 1.375rem; block-size: 1.375rem; }
  .portal-bottom-badge { position: absolute; inset-block-start: -6px; inset-inline-end: -10px; min-inline-size: 18px; block-size: 18px; padding: 0 4px; border-radius: 999px; background: var(--color-state-danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
  .portal-bottom-label { max-inline-size: 100%; font-size: 11px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* หน้าบัญชี: แถบล่างแทนแถบ "จองเลย" · เว้นที่ท้ายหน้าไม่ให้เนื้อหาโดนแถบทับ */
  body:has(.portal-bottom-nav) .sticky-cta { display: none !important; }
  body:has(.portal-bottom-nav) .content { padding-block-end: calc(72px + env(safe-area-inset-bottom)); }
}
.portal-who { min-inline-size: 0; }
.portal-who span { min-inline-size: 0; overflow-wrap: anywhere; }
.portal-signout { margin: 0; }
/* ออกจากระบบ — outline แดงอ่อน ไม่ใช่แดงทึบ (การกระทำที่ย้อนได้ ไม่ใช่การลบ) */
.btn-signout { border-color: color-mix(in srgb, var(--color-state-danger) 45%, var(--color-border-normal)); color: var(--color-state-danger); background: var(--color-surface-card); font-weight: var(--weight-bold); }
.btn-signout:hover { background: var(--color-tint-danger); border-color: var(--color-state-danger); color: var(--color-state-danger); }
@media (max-width: 599px) {
  .portal-head { padding: var(--space-4); }
  .portal-signout { inline-size: 100%; }
  .portal-signout .btn-signout { inline-size: 100%; justify-content: center; }
}
.portal-who { display: flex; align-items: center; gap: var(--space-3); }
.portal-who > span:not(.portal-avatar) { display: flex; flex-direction: column; }
/* ‼️ วงไอคอนโปรไฟล์ต้องจัดกลาง — rule ของชื่อ/เบอร์ด้านบนเคยโดนวงนี้ด้วย ไอคอนเลยลอยขึ้นบน (ผู้ใช้ทัก 2026-10-14) */
.portal-who .portal-avatar { display: grid; place-items: center; flex: none; }
.portal-avatar .icon { inline-size: var(--icon-base); block-size: var(--icon-base); }
.portal-who strong { color: var(--color-text-strong); }
.portal-who small { color: var(--color-text-muted); }
.portal-avatar { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-full); background: var(--color-tint-success); color: var(--color-brand-accent); }
.portal-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .portal-grid { grid-template-columns: minmax(0, 1fr) 20rem; } }
.portal-main { display: grid; gap: var(--space-4); align-content: start; min-inline-size: 0; }

/* แท็บย่อยแบบชิป (ที่กำลังจะมาถึง · ประวัติ · ยกเลิก) */
.chip-tabs { display: flex; gap: var(--space-2); overflow-x: auto; margin-block-end: var(--space-4); }
.chip-tab { flex: none; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-full); color: var(--color-text-normal); text-decoration: none; font-weight: var(--weight-medium); background: var(--color-surface-card); }
.chip-tab[aria-current="page"] { background: var(--color-tint-success); border-color: var(--color-brand-accent); color: var(--color-brand-accent); font-weight: var(--weight-bold); }

/* การ์ดการจอง */
.booking-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); }
.booking-card-art { display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; border-radius: var(--radius-md); background: var(--color-surface-court); color: var(--color-text-on-dark); }
.booking-card-art .icon { inline-size: var(--icon-xl); block-size: var(--icon-xl); }
.booking-card-main { display: grid; gap: 2px; min-inline-size: 0; }
.booking-card-main p { margin: 0; }
.booking-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.booking-card-title { font-weight: var(--weight-bold); color: var(--color-text-strong); text-decoration: none; overflow-wrap: anywhere; }
.booking-card-meta { display: inline-flex; align-items: center; gap: var(--space-1); }
.booking-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.booking-card[data-status="cancelled"], .booking-card[data-status="refunded"] { opacity: 0.8; }
@media (max-width: 480px) {
  .booking-card { grid-template-columns: auto minmax(0, 1fr); }
  .booking-card-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .booking-card-art { inline-size: 3rem; block-size: 3rem; }
}

/* ยอดกระเป๋าเงิน */
.wallet-card { display: block; color: inherit; text-decoration: none; }
.wallet-card .card-body { display: grid; gap: var(--space-1); }
.wallet-card-amount { font-size: var(--text-3xl); font-weight: var(--weight-heavy); color: var(--color-brand-accent); }
.detail-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
.receipt-card { max-inline-size: 40rem; }
/* ‼️ ปุ่มเข้าสู่ระบบแยกทางลูกค้าเดิมออกจากปุ่มหลัก (ลูกค้าใหม่) — กรอบเขียว พื้นขาว ไม่แย่งน้ำหนักปุ่มทดลองใช้
      อยู่นอก layer เพราะ .btn ที่ตั้ง padding ก็อยู่นอก layer · ใน layer จะแพ้ .btn ทุกค่า
      .public-bar-actions เป็น align-items: stretch สองปุ่มจึงสูงเท่ากันเสมอ */
.public-account {
  background: var(--color-surface-card);
  border: 1px solid var(--color-brand-accent);
  color: var(--color-text-strong);
  white-space: nowrap;
}

.public-account .icon { color: var(--color-brand-accent); }

.public-account:hover,
.public-account:focus-visible {
  background: var(--color-surface-mist);
  border-color: var(--color-brand-accent);
  color: var(--color-text-strong);
}

/* ‼️ มือถือ: แถวปุ่มแยกลงมาใต้แบรนด์อยู่แล้ว — ให้สองปุ่มแบ่งความกว้างกัน และคงข้อความ "เข้าสู่ระบบ" ไว้
      เดิมเหลือไอคอนเปล่า ลูกค้าเดิมหาทางเข้าไม่เจอ ทางแยกลูกค้าเดิม/ใหม่จึงไม่ชัดตั้งแต่แรก */
@media (max-width: 600px) {
  .public-bar-actions { inline-size: 100%; }
  .public-bar-actions .btn { flex: 1 1 auto; padding-inline: var(--space-3); }
  .public-bar-actions[data-scope="venue"] { display: none; }
}

@media (max-width: 380px) { .public-account .icon { display: none; } }

/* ═══════════════════════════════════════════════ หน้าเข้าสู่ระบบของเว็บสนาม — variant "signin" ของ layouts/public.php

   ‼️ ทุก rule ผูกกับ body[data-variant="signin"] หรือ [data-variant="signin"] — หน้าอื่นของเว็บสนามต้องไม่เปลี่ยนเลย
   ‼️ อยู่นอก layer เพราะต้องชนะ rule ของ footer/แถบบนที่อยู่ใน layer และ .btn ที่อยู่นอก layer
   ‼️ ฟอร์มเป็นจุดเด่นเพียงจุดเดียว: ไม่มีปุ่มเข้าสู่ระบบ/จองบนแถบบน · footer สั้น ไม่มีที่อยู่/เบอร์ */

/* แถบบน: ไม่มีปุ่มขวา · เมนูต่อจากโลโก้เหมือนหน้าอื่นของเว็บสนาม (เดิมอยู่กลาง — ผู้ใช้ทัก 2026-10-16 "ไม่เหมือนหน้าอื่น")
   มือถือเหลือโลโก้ + ปุ่มเมนู (ลิ้นชัก) */
.public-burger { display: none; margin-inline-start: auto; color: var(--color-text-strong); }
.public-burger .icon { inline-size: var(--space-6); block-size: var(--space-6); }

@media (max-width: 860px) {
  body[data-variant="signin"] .public-bar-inner { flex-wrap: nowrap; }
  body[data-variant="signin"] .public-nav { order: 0; inline-size: auto; }
}

@media (max-width: 767px) {
  body[data-variant="signin"] .public-bar-inner { padding: var(--space-3) var(--space-4); }
  body[data-variant="signin"] .public-nav { display: none; }
  body[data-variant="signin"] .public-burger { display: inline-grid; place-items: center; }
}

/* ลิ้นชักเมนูโทนสว่าง — โครงและ JS ตัวเดียวกับหลังบ้าน (data-appnav) ต่างแค่สีและฝั่งที่เปิด */
.appnav-drawer[data-tone="light"] .appnav-drawer-sheet {
  margin-inline-start: auto;
  background: var(--color-surface-card);
  color: var(--color-text-strong);
}

.appnav-drawer[data-tone="light"] .appnav-drawer-head { border-block-end-color: var(--color-border-normal); }
.appnav-drawer[data-tone="light"] .appnav-drawer-head .btn-icon { color: var(--color-text-strong); }
.appnav-drawer[data-tone="light"] .brand-logo { color: var(--color-text-strong); }
.appnav-drawer[data-tone="light"] .brand-logo-mark { color: var(--color-brand-logo); }

.public-drawer-nav { display: grid; }

.public-drawer-nav a {
  display: flex;
  align-items: center;
  min-block-size: var(--space-12);
  padding-inline: var(--space-5);
  color: var(--color-text-normal);
  text-decoration: none;
  border-block-end: 1px solid var(--color-border-normal);
}

.public-drawer-nav a:hover { background: var(--color-surface-head); color: var(--color-text-strong); }

/* เนื้อหาเต็มความกว้าง — hero ยืดให้ footer อยู่ท้ายจอเสมอ */
body[data-variant="signin"] .content { padding: 0; display: flex; flex-direction: column; }
body[data-variant="signin"] .content > .page { flex: 1; display: flex; flex-direction: column; }

.signin-hero { position: relative; isolation: isolate; overflow: hidden; flex: 1; display: flex; align-items: center; }

.signin-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 70%;
}

/* แบนเนอร์ที่สนามตั้งเอง (16:9): ตัดเท่ากันบน-ล่าง ไม่ใช่ตัดบนหนัก (70% ทำให้ขอบบนหายเหมือนโดน navbar บัง) · hero สูงเต็มจอที่เหลือ ภาพจึงโดนตัดน้อยที่สุด (ผู้ใช้ทัก 2026-10-22) */
/* แบนเนอร์ที่สนามตั้งเอง: ความสูง hero แบบเดิม · ภาพถูกตัดมาเป็น 12:5 ตามกรอบที่ผู้ใช้เลื่อนในหน้าตั้งค่าแล้ว จึงตัดเท่ากันบน-ล่าง (ผู้ใช้สั่ง 2026-10-22 "เอาแบบเดิม แต่ให้เลื่อนปรับให้ตรงได้") */
.signin-hero[data-photo="true"] .signin-hero-bg { object-position: center center; }

/* ‼️ ม่านสีพื้นหน้าเหนือภาพ — ข้อความซ้ายต้องอ่านออกทั้งภาพวาดและรูปจริง · สีมาจาก token จึงเข้มตามโหมดมืดเอง */
.signin-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-surface-page) 90%, transparent) 0%,
    color-mix(in srgb, var(--color-surface-page) 55%, transparent) 45%,
    color-mix(in srgb, var(--color-surface-page) 15%, transparent) 100%);
}

/* โหมดมืด: ภาพวาดเป็นโทนสว่างคงที่ (ไม่เปลี่ยนตามโหมด) ม่านจึงต้องหนาขึ้นทางขวา ไม่งั้นมุมขวาบนสว่างจ้ากลางหน้ามืด */
:root[data-theme="dark"] .signin-hero::before {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-surface-page) 92%, transparent) 0%,
    color-mix(in srgb, var(--color-surface-page) 72%, transparent) 45%,
    color-mix(in srgb, var(--color-surface-page) 55%, transparent) 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .signin-hero::before {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--color-surface-page) 92%, transparent) 0%,
      color-mix(in srgb, var(--color-surface-page) 72%, transparent) 45%,
      color-mix(in srgb, var(--color-surface-page) 55%, transparent) 100%);
  }
}

.signin-hero-inner {
  inline-size: 100%;
  max-inline-size: var(--layout-public-width);
  margin-inline: auto;
  padding: var(--space-16) var(--space-5);
  display: grid;
  grid-template-columns: 1fr minmax(0, 29rem) .3fr;
  gap: var(--space-8);
  align-items: center;
}

.signin-slogan {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-normal);
  letter-spacing: .2em;
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-strong) 72%, transparent);
}

.signin-slogan span { display: block; }
.signin-slogan span + span { margin-block-start: var(--space-2); }

.signin-slogan::after,
.signin-head::after {
  content: "";
  display: block;
  block-size: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-brand-accent);
}

.signin-slogan::after { inline-size: var(--space-16); margin-block-start: var(--space-6); }

.signin-card { inline-size: 100%; max-inline-size: none; margin: 0; box-shadow: var(--shadow-lg); }
.signin-card .card-body { padding: var(--space-8) var(--space-8) var(--space-6); }

.signin-head { text-align: center; margin-block-end: var(--space-6); }
.signin-head::after { inline-size: var(--space-12); margin: var(--space-4) auto 0; }

.signin-mark {
  display: inline-grid;
  place-items: center;
  inline-size: var(--space-12);
  block-size: var(--space-12);
  margin-block-end: var(--space-3);
  border-radius: 50%;
  background: var(--color-surface-mist);
  color: var(--color-brand-accent);
}

.signin-mark .icon { inline-size: var(--space-8); block-size: var(--space-8); }
.signin-head h1 { margin: 0; font-size: var(--text-2xl); color: var(--color-text-strong); }
.signin-sub { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
.signin-step { margin: 0 0 var(--space-3); text-align: center; font-size: var(--text-lg); color: var(--color-text-strong); }

.signin-card .phone-login { margin: 0; }
.signin-card .phone-login input { min-block-size: 52px; font-size: var(--text-lg); }
.signin-card .phone-login .btn-primary { min-block-size: 52px; font-size: var(--text-lg); }
.signin-card .phone-login-note { justify-content: center; text-align: center; }
.signin-card .phone-login-note .icon { flex: none; color: var(--color-brand-accent); }

/* ขั้นเลือกวิธีเข้า / ตั้ง PIN — ใช้ช่อง 6 หลักชุดเดียวกับ OTP (.otp-digits) */
.signin-options { gap: var(--space-4); }
.signin-options .otp-form { text-align: center; }
.signin-options .otp-form > p { display: inline-flex; align-items: flex-start; justify-content: center; gap: var(--space-2); margin: 0; }
.signin-options .otp-form > p .icon { flex: none; margin-block-start: 2px; }
.signin-options .btn-block { min-block-size: 52px; font-size: var(--text-lg); }
.signin-for { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--space-2); margin: 0; }
.signin-for strong { font-size: var(--text-lg); color: var(--color-text-strong); letter-spacing: 0.04em; }
.signin-lead { margin: calc(var(--space-2) * -1) 0 0; }
.signin-field-label { margin: var(--space-1) 0 0; color: var(--color-text-normal); font-weight: var(--weight-bold); }
.signin-or { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.signin-or::before, .signin-or::after { content: ""; flex: 1; border-block-start: 1px solid var(--color-border-normal); }
.signin-forgot { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-2); margin: 0; text-align: center; }
.signin-forgot .icon { flex: none; margin-block-start: 2px; }

/* บรรทัดหมายเหตุที่มีไอคอนนำ — ไอคอนอยู่บรรทัดเดียวกับข้อความ ข้อความยาวห่อใต้ข้อความ ไม่ห่อใต้ไอคอน */
.icon-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; }
.icon-note .icon { flex: none; margin-block-start: 2px; }

/* เปลี่ยน PIN ในหน้าโปรไฟล์ลูกค้า — ช่องชิดซ้ายตามป้ายของฟอร์ม */
.pin-change .otp-digits { justify-content: flex-start; }
.pin-change .stack > p { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; }

/* การ์ดชวนตั้ง PIN ใน portal · หน้ายืนยันเบอร์ */
.pin-prompt { margin-block: var(--space-4) 0; }
/* ‼️ การ์ดชวนของบัญชีลูกค้าใช้สีแบรนด์ ไม่ใช่สีฟ้า info — ตามธีมสีของสนามเอง (brand-soft · brand-accent เปลี่ยนตาม data-tenant-theme) */
.callout[data-tone="brand"] { background: var(--color-brand-soft); border-color: transparent; }
.callout[data-tone="brand"] > .icon { color: var(--color-brand-accent); }
.pin-prompt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); }
.pin-prompt-actions form { margin: 0; }
.verify-phone-card { max-inline-size: 30rem; margin-inline: auto; }

/* กล่อง "การเข้าสู่ระบบ" ในหน้าลูกค้าหลังบ้าน */
.sign-in-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-3); }
.sign-in-actions .confirm-form { margin: 0; }
.temp-pin { margin-block-end: var(--space-3); }
.temp-pin-code { margin: var(--space-1) 0; font-size: var(--text-2xl); font-weight: var(--weight-heavy); letter-spacing: 0.3em; color: var(--color-text-strong); }

@media (max-width: 767px) {
  .signin-hero { align-items: stretch; }

  .signin-hero::before {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--color-surface-page) 80%, transparent) 0%,
      color-mix(in srgb, var(--color-surface-page) 20%, transparent) 55%,
      color-mix(in srgb, var(--color-surface-page) 65%, transparent) 100%);
  }

  .signin-hero-bg { object-position: 62% center; }
  .signin-hero-inner { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-8) var(--space-4) var(--space-10); }
  .signin-slogan { font-size: var(--text-lg); letter-spacing: .22em; }
  .signin-slogan span + span { margin-block-start: 0; }
  .signin-slogan::after { inline-size: var(--space-10); margin-block-start: var(--space-3); }
  /* ‼️ มือถือ: คำขวัญ + กล่องเข้าสู่ระบบอยู่แนวกลางเดียวกัน และกลางจอแนวตั้ง (ผู้ใช้แจ้ง 2026-10-29 "login ไม่อยู่ตรงกลาง") */
  .signin-hero-inner { align-content: center; }
  .signin-slogan { text-align: center; }
  .signin-slogan::after { margin-inline: auto; }
  .signin-card .card-body { padding: var(--space-6) var(--space-5) var(--space-5); }
  .signin-mark { inline-size: var(--space-10); block-size: var(--space-10); }
  .signin-mark .icon { inline-size: var(--space-6); block-size: var(--space-6); }
  .signin-head h1 { font-size: var(--text-xl); }
}

/* footer สั้น: desktop แถวเดียว (แบรนด์+ลิขสิทธิ์ · เมนู · ธีม/ภาษา) · มือถือ แบรนด์ / เมนู 4 คอลัมน์ / ลิขสิทธิ์ซ้าย ธีม/ภาษาขวา */
.public-footer[data-variant="signin"] { margin-block-start: 0; }

.public-footer[data-variant="signin"] .public-footer-inner {
  padding: var(--space-3) var(--space-5);
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand menu prefs" "copy menu prefs";
  align-items: center;
  gap: var(--space-2) var(--space-8);
}

.public-footer[data-variant="signin"] .public-footer-brand { grid-area: brand; }
.public-footer[data-variant="signin"] .public-footer-legal { display: contents; }
.public-footer[data-variant="signin"] .public-footer-copyright { grid-area: copy; color: var(--color-text-muted); font-size: var(--text-sm); }
.public-footer[data-variant="signin"] .public-footer-prefs { grid-area: prefs; }

.public-footer[data-variant="signin"] .public-footer-menu {
  grid-area: menu;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 0;
}

.public-footer[data-variant="signin"] .public-footer-menu a {
  padding: var(--space-1) var(--space-3);
  color: var(--color-text-normal);
  text-decoration: none;
}

.public-footer[data-variant="signin"] .public-footer-menu a + a { border-inline-start: 1px solid var(--color-border-normal); }
.public-footer[data-variant="signin"] .public-footer-menu a:hover { color: var(--color-brand-accent); }

@media (max-width: 767px) {
  .public-footer[data-variant="signin"] .public-footer-inner {
    padding: var(--space-5) var(--space-4) var(--space-4);
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand brand" "menu menu" "copy prefs";
    gap: var(--space-2) var(--space-3);
  }

  .public-footer[data-variant="signin"] .public-footer-menu {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    column-gap: var(--space-1);
    margin-inline: calc(var(--space-2) * -1);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--color-border-normal);
  }

  .public-footer[data-variant="signin"] .public-footer-menu a {
    min-block-size: calc(var(--space-8) + var(--space-1));
    display: inline-flex;
    align-items: center;
    padding-inline: var(--space-2);
  }

  .public-footer[data-variant="signin"] .public-footer-menu a + a { border-inline-start: 0; }
  .public-footer[data-variant="signin"] .public-footer-copyright { font-size: var(--text-xs); }
}
@media print {
  .public-bar, .public-footer, .portal-head, .tabs, .form-actions { display: none !important; }
  .receipt-card { border: 0; box-shadow: none; max-inline-size: none; }
}

/* ═══════════════════════════════════════ ภาพรวม OMC — ช่องตัวเลขในการ์ด · สถานะระบบ · รายการที่ต้องจับตา

   ‼️ ทุกสีมาจาก token ที่ generate จาก DESIGN.md — ห้ามเขียนค่าสีดิบที่นี่
      พาสเทลทุกตัว (tint) มีค่าครบทั้งโหมดสว่างและมืดแล้ว จึงไม่ต้องเขียน media query ซ้ำ */

.tile-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* ‼️ ช่องตัวเลขในการ์ดมีพื้นหลังพาสเทลของตัวเอง ไม่ใช่กรอบเส้นบาง
   กรอบซ้อนกรอบ (การ์ด > ช่อง) ทำให้หน้าดูเป็นตารางเส้น ไม่ใช่แผงข้อมูล */
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-tint-neutral);
  color: var(--color-text-normal);
  text-decoration: none;
  min-inline-size: 0;
}

a.tile { transition: transform var(--duration-fast) var(--ease-standard); }
a.tile:hover { transform: translateY(-2px); }

.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  color: var(--color-text-muted);
}

.tile-icon .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

.tile-label { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ‼️ ตัวเลขใหญ่แต่ไม่ใหญ่เท่า KPI หัวหน้า — ช่องในการ์ดต้องไม่แย่งสายตากับแถวบนสุด */
.tile-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.tile-unit { font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--color-text-muted); }
.tile-hint { font-size: var(--text-xs); color: var(--color-text-muted); }

.tile[data-tone="success"] { background: var(--color-tint-success); }
.tile[data-tone="warning"] { background: var(--color-tint-warning); }
.tile[data-tone="danger"]  { background: var(--color-tint-danger); }
.tile[data-tone="info"]    { background: var(--color-tint-info); }
.tile[data-tone="violet"]  { background: var(--color-tint-violet); }
.tile[data-tone="teal"]    { background: var(--color-tint-teal); }
.tile[data-tone="rose"]    { background: var(--color-tint-rose); }

.tile[data-tone="success"] .tile-icon { color: var(--color-state-success); }
.tile[data-tone="warning"] .tile-icon { color: var(--color-state-warning); }
.tile[data-tone="danger"]  .tile-icon { color: var(--color-state-danger); }
.tile[data-tone="info"]    .tile-icon { color: var(--color-state-info); }
.tile[data-tone="violet"]  .tile-icon { color: var(--color-state-violet); }
.tile[data-tone="teal"]    .tile-icon { color: var(--color-state-teal); }
.tile[data-tone="rose"]    .tile-icon { color: var(--color-state-rose); }

/* ---- สถานะระบบ */
.health-list { display: flex; flex-direction: column; gap: var(--space-1); list-style: none; padding: 0; margin: 0; }

.health-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 44px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.health-item[data-state="problem"] { background: var(--color-tint-warning); }

.health-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: var(--color-tint-neutral);
  color: var(--color-text-muted);
}

.health-icon .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.health-icon[data-tone="success"] { background: var(--color-tint-success); color: var(--color-state-success); }
.health-icon[data-tone="warning"] { background: var(--color-tint-warning); color: var(--color-state-warning); }
.health-icon[data-tone="danger"]  { background: var(--color-tint-danger);  color: var(--color-state-danger); }

.health-text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.health-label { font-size: var(--text-sm); color: var(--color-text-strong); }
.health-detail { font-size: var(--text-xs); color: var(--color-text-muted); }

.health-go { display: inline-flex; color: var(--color-text-muted); flex: 0 0 auto; }
.health-go:hover { color: var(--color-brand-accent); }

/* ---- รายการที่ต้องจับตา + กิจกรรมล่าสุด

   ‼️ 65 / 35 ตามภาพต้นแบบ — รายการที่ต้องลงมือได้พื้นที่มากกว่าประวัติที่ดูอย่างเดียว
      ยุบเป็นคอลัมน์เดียวที่ต่ำกว่า 1024px เพราะสองคอลัมน์บนแท็บเล็ตทำให้ข้อความตัดคำทุกบรรทัด */
.watch-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1024px) {
  .watch-layout { grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); align-items: start; }
}

.watch-main, .watch-rail { min-inline-size: 0; }

.chip-count {
  margin-inline-start: var(--space-1);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.chip-tab[aria-current="page"] .chip-count { color: inherit; }

.watch-list { display: flex; flex-direction: column; gap: var(--space-1); list-style: none; padding: 0; margin: 0; }

.watch-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-block-size: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--color-border-normal);
  background: var(--color-surface-raised);
}

.watch-item[data-tone="danger"]  { border-inline-start-color: var(--color-state-danger); }
.watch-item[data-tone="warning"] { border-inline-start-color: var(--color-state-warning); }
.watch-item[data-tone="info"]    { border-inline-start-color: var(--color-state-info); }

.watch-type {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-inline-size: 5ch;
}

.watch-text { flex: 1 1 200px; min-inline-size: 0; display: flex; flex-direction: column; }
.watch-detail { font-size: var(--text-sm); color: var(--color-text-strong); }
.watch-subject { font-size: var(--text-xs); color: var(--color-text-muted); }
.watch-when { flex: 0 0 auto; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.watch-go { display: inline-flex; color: var(--color-text-muted); flex: 0 0 auto; }
.watch-go:hover { color: var(--color-brand-accent); }

.task-action { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.task-go { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-text-muted); flex: 0 0 auto; }

/* ‼️ กล่องที่ยังไม่มีข้อมูลต้องพูดว่าไม่มีข้อมูล ไม่ใช่เว้นว่าง
   กล่องว่างอ่านได้สองอย่างเสมอ — ยังไม่มีของ หรือโหลดไม่ขึ้น */
.empty-note { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ═══════════════════════════════════════ ตั้งค่าระบบของ OMC — การ์ดของแต่ละหมวด */

.setting-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-block-end: var(--space-5);
}

/* ‼️ ทั้งใบกดได้ เพราะการ์ดนี้ไม่มีข้อความที่คนอยากคัดลอก มีแต่ทางไปหน้าถัดไป */
.setting-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-normal);
  text-decoration: none;
}

.setting-card:hover { border-color: var(--color-brand-accent); }

.setting-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: var(--color-tint-neutral);
  color: var(--color-text-muted);
}

.setting-icon[data-tone="success"] { background: var(--color-tint-success); color: var(--color-state-success); }
.setting-icon[data-tone="warning"] { background: var(--color-tint-warning); color: var(--color-state-warning); }
.setting-icon[data-tone="danger"]  { background: var(--color-tint-danger);  color: var(--color-state-danger); }
.setting-icon[data-tone="info"]    { background: var(--color-tint-info);    color: var(--color-state-info); }
.setting-icon[data-tone="violet"]  { background: var(--color-tint-violet);  color: var(--color-state-violet); }
.setting-icon[data-tone="teal"]    { background: var(--color-tint-teal);    color: var(--color-state-teal); }

.setting-text { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-inline-size: 0; }
.setting-text strong { color: var(--color-text-strong); font-size: var(--text-base); }
.setting-text small { color: var(--color-text-muted); font-size: var(--text-xs); }
.setting-value { font-size: var(--text-sm); color: var(--color-text-strong); font-weight: var(--weight-medium); }
.setting-text .badge { align-self: flex-start; }
.setting-go { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-text-muted); flex: 0 0 auto; }

/* ─────────────────────────────────────────────── ตั้งค่าระบบ > SMS / OTP (OMCSMS Legacy API)
   ‼️ กริดสามการ์ดบนสุด · ฟอร์มสามคอลัมน์ · ส่งทดสอบกว้าง 2 ส่วนคู่ผลลัพธ์ 1 ส่วน — จอแคบเรียงลงทีละใบ */
@media (min-width: 1100px) {
  .report-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-grid[data-cols="split"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .field-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .field-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ปิดคอร์ทชั่วคราว (calendar/index.php) — ปุ่มอยู่ช่องที่สามของแถวเวลา ชิดล่างแนวเดียวกับช่องกรอก ไม่ลอยเหนือเส้นแบ่ง */
.block-form > .form-actions { margin: 0; padding: 0; border: 0; align-self: end; }

.report-grid[data-cols="3"] > .card,
.report-grid[data-cols="split"] > .card,
.report-grid[data-cols="split"] > form > .card { block-size: 100%; }

.field-grid[data-cols="3"] .field :is(input, select) { max-inline-size: 100%; inline-size: 100%; }
/* ในกริดที่กำหนดจำนวนคอลัมน์เอง ช่อง "เต็ม" (ค่าเริ่มต้นของ field.php) กินแค่ช่องเดียว — ไม่งั้นทุกช่องขึ้นบรรทัดใหม่ */
.field-grid[data-cols="3"] > .field[data-width="full"] { grid-column: auto; }

/* ตั้งค่าทั่วไปของแพลตฟอร์ม — การ์ดที่มีหลายช่องเรียงสูงสุด 3 คอลัมน์ (ไม่ใช้ data-cols="3" ของหน้า SMS ที่ยืดทุก input เต็มช่องรวมถึงสวิตช์) · ช่อง full ยังเต็มแถว */
@media (min-width: 1100px) {
  .field-grid.settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.auth-options { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.auth-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
}

.auth-option[data-active="true"] { border-color: var(--color-brand-accent); background: var(--color-tint-success); }
.auth-option-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.auth-option-head strong { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.auth-option small { color: var(--color-text-muted); font-size: var(--text-xs); }

.code-chip {
  align-self: flex-start;
  max-inline-size: 100%;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-tint-neutral);
  color: var(--color-text-normal);
  font-family: var(--font-mono), monospace;
  font-size: var(--text-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.secret-clear { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-block-start: var(--space-3); }

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
}

.checkbox-inline input[type="checkbox"] { inline-size: 18px; block-size: 18px; min-block-size: 0; }

/* ค่ายาวไม่มีช่องว่าง (endpoint · content-type) ต้องตัดบรรทัดได้ ไม่งั้นจอ 360px ล้นออกขวา */
.report-grid :is(.card) .detail-row { min-inline-size: 0; }
.report-grid :is(.card) .detail-row > :is(dt, dd) { min-inline-size: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------ หัวเพจมีภาพพื้นหลัง (pageBackdrop) · หน้าติดต่อของเว็บสนาม

   ‼️ ภาพต้นแบบหน้าติดต่อ 2026-09-24: ภาพบรรยากาศจางทางขวา ยื่นถึงขอบจอ ชื่อหน้า + เส้นทางกลับทางซ้าย
      ภาพเป็นของตกแต่ง — ขอบซ้ายและขอบล่างจางหายเข้าพื้น (mask) ข้อความจึงอ่านได้โดยไม่ต้องมีม่าน
   ‼️ ภาพยื่นลงใต้หัวเพจเล็กน้อย ให้การ์ดข้างล่างวางทับขอบภาพ — การ์ดมีพื้นทึบจึงบังส่วนที่ทับเอง */
.page-head[data-backdrop="true"] {
  min-block-size: calc(var(--space-20) - var(--space-1));
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: calc(var(--space-2) * -1);
  padding-block: 0 var(--space-1);
}

.page-head[data-backdrop="true"] > .breadcrumb { order: 1; }

.page-head-backdrop {
  position: absolute;
  z-index: -1;
  inset-block: calc(var(--space-6) * -1) calc(var(--space-12) * -1);
  inset-inline-end: calc(50% - 50vw);
  inline-size: min(64vw, 980px);
  block-size: calc(100% + var(--space-6) + var(--space-12));
  object-fit: cover;
  object-position: center 78%;
  opacity: .9;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, var(--color-text-strong) 42%),
    linear-gradient(180deg, var(--color-text-strong) 55%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, var(--color-text-strong) 42%),
    linear-gradient(180deg, var(--color-text-strong) 55%, transparent 100%);
          mask-composite: intersect;
}

/* โหมดมืด: ภาพวาดเป็นโทนสว่างคงที่ — ลดความสว่างลง ไม่งั้นมุมขวาบนจ้ากลางหน้ามืด */
:root[data-theme="dark"] .page-head-backdrop { opacity: .32; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-head-backdrop { opacity: .32; }
}

@media (max-width: 767px) {
  .page-head[data-backdrop="true"] { min-block-size: calc(var(--space-20) + var(--space-2)); padding-block: 0 var(--space-2); }
  .page-head-backdrop { inline-size: 88vw; opacity: .55; }
}

/* ------------------------------------------------ การ์ดคู่ของหน้าติดต่อ */

.contact-grid {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
}

.contact-grid > .card { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.contact-grid > .card > .card-body { flex: 1; gap: var(--space-3); padding-block: var(--space-2) var(--space-5); }
.contact-grid .card-head { position: relative; padding-block-start: var(--space-5); }
.contact-grid .card-head-text { position: relative; z-index: 1; }
.contact-grid .card-head h2 { font-size: var(--text-xl); }
.contact-grid .card-lead { font-size: var(--text-base); }

.contact-lead {
  position: relative;
  z-index: 1;
  max-inline-size: 26rem;
  color: var(--color-text-normal);
  font-size: var(--text-sm);
}

/* ภาพประกอบเล็กมุมขวาบนของหัวการ์ด (sectionArt) — ไม่เพิ่มความสูงของการ์ด เพราะลอยอยู่นอกลำดับเนื้อหา */
.card-head[data-art="true"] .page-art {
  position: absolute;
  z-index: 0;
  inset-block-start: 0;
  inset-inline-end: 0;
  margin: 0;
  max-inline-size: none;
}

.card-head[data-art="true"] .page-art::before { inset: 0; }
.card-head[data-art="true"] .page-art-photo { inline-size: clamp(180px, 20vw, 260px); }

@media (min-width: 1024px) {
  .card-head[data-art="true"] .page-art { display: flex; }
}

/* แถวข้อมูลที่ไอคอนอยู่ในกล่องสีจาง (detailIconBox) — ป้ายกับค่าอยู่บรรทัดเดียวกันเมื่อการ์ดกว้างพอ */
.detail-list[data-icon-box="true"] .detail-row {
  grid-template-columns: minmax(0, 11rem) 1fr;
  align-items: center;
  gap: var(--space-3);
  padding-block: calc(var(--space-2) + 2px);
}

.detail-list[data-icon-box="true"] .detail-row dt { color: var(--color-text-muted); font-size: var(--text-sm); }

.detail-list[data-icon-box="true"] .detail-icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-md);
  background: var(--color-tint-success);
}

.detail-list[data-icon-box="true"] .detail-row[data-icon="true"] dt .icon { inline-size: 20px; block-size: 20px; color: var(--color-brand-accent); }

.detail-list[data-icon-box="true"] .detail-row dd {
  overflow-wrap: anywhere;
  font-weight: var(--weight-medium);
}

.detail-list .detail-row dd a { color: inherit; text-decoration: none; }
.detail-list .detail-row dd a:hover { color: var(--color-brand-accent); text-decoration: underline; }

@container (max-width: 26rem) {
  /* จอแคบ: ป้ายอยู่บนแนวบนของกล่องไอคอน ค่าดึงขึ้นมาอยู่ใต้ป้าย ข้างกล่องไอคอน — ไม่ซ้อนลงเป็นสามชั้น */
  .detail-list[data-icon-box="true"] .detail-row { grid-template-columns: 1fr; gap: 0; }
  .detail-list[data-icon-box="true"] .detail-row[data-icon="true"] dt { align-items: flex-start; }
  .detail-list[data-icon-box="true"] .detail-row dd {
    padding-inline-start: calc(40px + var(--space-3));
    margin-block-start: calc(var(--space-5) * -1);
  }
}

/* เวลาเปิด-ปิด: ค่าชิดขวา ตัวเลขเรียงหลักตรงกัน */
.contact-grid .detail-list[data-compact="true"] .detail-row { padding-block: var(--space-2); }
.contact-grid .detail-list[data-compact="true"] .detail-row dt { color: var(--color-text-normal); font-size: var(--text-base); }
.contact-grid .detail-list[data-compact="true"] .detail-row dd { font-weight: var(--weight-medium); }

.contact-book { margin-block-start: auto; min-block-size: 52px; font-size: var(--text-lg); }
.contact-directions { align-self: flex-start; }

/* ค่าหลายบรรทัดของรายการหัวข้อ↔ค่า — บรรทัดเดียวก็เป็น block เหมือนกัน จึงหน้าตาไม่เปลี่ยน */
.detail-line { display: block; }

/* ------------------------------------------------ จองสนามพร้อมโค้ช (Court + Coach) · 2026-09-24

   ‼️ ตารางคอร์ท × เวลา ชุดเดิม — เพิ่มสถานะ coach = คอร์ทว่างแต่โค้ชไม่ว่าง (กดไม่ได้ · สีชมพูจาง ต่างจากคอร์ทไม่ว่าง) */
.bk-modes { display: grid; gap: var(--space-3); }

@media (min-width: 640px) {
  .bk-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bk-mode {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  color: var(--color-text-normal);
  text-decoration: none;
}

.bk-mode:hover { border-color: var(--color-border-strong); }

.bk-mode[aria-current="true"] {
  border-color: var(--color-brand-accent);
  background: var(--color-tint-success);
  box-shadow: inset 0 0 0 1px var(--color-brand-accent);
}

.bk-mode-icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-md);
  background: var(--color-tint-success);
  color: var(--color-brand-accent);
}

.bk-mode[aria-current="true"] .bk-mode-icon { background: var(--color-surface-card); }
.bk-mode-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.bk-mode-text strong { color: var(--color-text-strong); }
.bk-mode-text small { color: var(--color-text-muted); font-size: var(--text-xs); }

.bk-coach-list { display: grid; gap: var(--space-2); }

@media (min-width: 900px) {
  .bk-coach-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bk-coach {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  color: var(--color-text-normal);
  text-decoration: none;
}

a.bk-coach:hover { border-color: var(--color-brand-accent); }
.bk-coach[data-selected="true"] { border-color: var(--color-slot-free-border); background: var(--color-tint-success); flex-wrap: wrap; }
.bk-coach[data-state="busy"] { opacity: .6; }
.bk-coach > .icon { margin-inline-start: auto; color: var(--color-text-muted); flex: none; }
.bk-coach-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 12rem; min-inline-size: 0; }
.bk-coach-text strong { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-text-strong); }
.bk-coach-text small { color: var(--color-text-muted); font-size: var(--text-xs); }
.bk-coach-text small[data-tone="success"] { color: var(--color-brand-accent); font-weight: var(--weight-medium); }
.bk-coach .bk-chips { margin-block-start: var(--space-2); }
.bk-hint[data-tone="warning"] { color: var(--color-state-warning); }

.bk-legend li[data-state="coach"]::before { border-color: var(--color-tint-danger); background: var(--color-tint-danger); }
.bk-grid td[data-state="coach"] .bk-slot { border-color: var(--color-tint-danger); background: var(--color-tint-danger); }
.bk-time[data-state="coach"] { border-color: var(--color-tint-danger); background: var(--color-tint-danger); color: var(--color-state-danger); }

/* ------------------------------------------------ หน้าโค้ชของเว็บสนาม (ภาพต้นแบบ 2026-09-24)
   ซ้าย: รูปเดียว + ข้อมูล · ขวา: เวลาว่าง 7 วันข้างหน้า (จองได้จริง) + ตารางเวลาปกติ · มือถือเรียงลง */
.coach-layout { display: grid; gap: var(--space-5); align-items: start; }

@media (min-width: 1024px) {
  .coach-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); }
}

.coach-main, .coach-side { display: flex; flex-direction: column; gap: var(--space-5); min-inline-size: 0; }

.coach-hero { display: grid; gap: var(--space-5); }

@media (min-width: 640px) {
  .coach-hero { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
}

.coach-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  inline-size: 100%;
  max-inline-size: 16rem; /* ‼️ รูปไม่ใหญ่เกิน (ผู้ใช้สั่ง 2026-10-29) — มือถือเดิมเต็มจอ 390px */
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-tint-success);
}

.coach-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.coach-photo .avatar[data-size] { inline-size: 45%; block-size: auto; aspect-ratio: 1; font-size: clamp(2rem, 6vw, 3.5rem); }
.coach-photo .avatar[data-size] .avatar-text { font-size: clamp(2rem, 6vw, 3.5rem); }
@media (max-width: 639px) { .coach-photo { max-inline-size: 12rem; margin-inline: auto; } }

/* รายชื่อโค้ช (เว็บสนาม) — รูปวงกลมขนาดคงที่ + ชื่อ/ตำแหน่ง/ประวัติย่อ + ราคาต่อชั่วโมง (ผู้ใช้สั่ง 2026-10-29 "ปรับให้สวย รูปไม่ใหญ่เกิน") */
.coach-cards { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.coach-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-5) var(--space-5); text-align: center;
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-xl); background: var(--color-surface-card); color: inherit; text-decoration: none;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.coach-card:hover { border-color: var(--color-brand-accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.coach-card-photo { display: grid; place-items: center; inline-size: 7.5rem; block-size: 7.5rem; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--color-tint-success); box-shadow: 0 0 0 4px var(--color-surface-card), 0 0 0 6px color-mix(in srgb, var(--color-brand-accent) 35%, transparent); }
.coach-card-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.coach-card-photo .avatar[data-size] { inline-size: 100%; block-size: 100%; border-radius: 50%; }
.coach-card-photo .avatar[data-size] .avatar-text { font-size: var(--text-3xl); }
.coach-card-body { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-inline-size: 0; }
.coach-card-name { color: var(--color-text-strong); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.coach-card-bio { color: var(--color-text-muted); font-size: var(--text-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.coach-card-foot { margin-block-start: auto; inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border-normal); font-size: var(--text-sm); color: var(--color-text-muted); }
.coach-card-price { color: var(--color-brand-accent); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.coach-card-price small { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-normal); }
.coach-card-exp { display: inline-flex; align-items: center; gap: var(--space-1); }
.coach-card-exp .icon { inline-size: 1rem; block-size: 1rem; color: var(--color-brand-accent); }
.coach-card:only-child { max-inline-size: 22rem; }

.coach-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-inline-size: 0; }
.coach-name { font-size: clamp(var(--text-2xl), 1.4rem + 1.6vw, 2.75rem); font-weight: var(--weight-heavy); line-height: var(--leading-tight); color: var(--color-text-strong); }
.coach-bio { color: var(--color-text-normal); }
.coach-facts { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.coach-facts li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-normal); }
.coach-facts .icon { color: var(--color-brand-accent); flex: none; }

.coach-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

@media (min-width: 768px) {
  .coach-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.coach-stats li { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-inline-size: 0; }
.coach-stats small { color: var(--color-text-muted); font-size: var(--text-sm); }
.coach-stats strong { color: var(--color-text-strong); overflow-wrap: anywhere; }

.coach-stat-icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  margin-block-end: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-tint-success);
  color: var(--color-brand-accent);
}

.coach-venues { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.coach-venues li { display: flex; gap: var(--space-2); align-items: flex-start; }
.coach-venues .icon { color: var(--color-brand-accent); flex: none; margin-block-start: 2px; }
.coach-venues span { display: flex; flex-direction: column; }
.coach-venues small { color: var(--color-text-muted); }

.coach-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }

.coach-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) 0;
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  color: var(--color-text-normal);
  font-size: var(--text-xs);
  text-decoration: none;
}

.coach-day strong { font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.coach-day[data-empty="true"] { color: var(--color-text-muted); background: var(--color-surface-head); }
.coach-day[aria-current="date"] { border-color: var(--color-brand-accent); background: var(--color-brand-accent); color: var(--color-brand-on-accent); }

.coach-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }

@media (max-width: 420px) {
  .coach-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.coach-slot {
  display: grid;
  place-items: center;
  min-block-size: 44px;
  border: 1px solid var(--color-slot-free-border);
  border-radius: var(--radius-md);
  background: var(--color-tint-success);
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.coach-slot:hover { border-color: var(--color-brand-accent); }
.coach-none, .coach-slot-note, .coach-weekly-note { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--color-text-muted); font-size: var(--text-sm); }
.coach-weekly-note { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-tint-success); }
.coach-book { min-block-size: 52px; font-size: var(--text-lg); }

/* ตารางสอนประจำสัปดาห์ของโค้ช — วันละ 2 ช่วง · มือถือเลื่อนแนวนอนในกล่อง ไม่ล้นจอ */
.schedule-table { inline-size: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.schedule-table :is(th, td) { padding: var(--space-2) var(--space-3) var(--space-2) 0; text-align: start; border-block-end: 1px solid var(--color-border-normal); white-space: nowrap; }
.schedule-table thead th { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.schedule-table tbody th { color: var(--color-text-strong); font-weight: var(--weight-medium); }
.schedule-range { display: inline-flex; align-items: center; gap: var(--space-2); }
.schedule-range :is(input, select) { inline-size: 7.5rem; min-block-size: var(--form-control-height); }

/* ═══════════════════════════════════════════════ เว็บสนามบนมือถือ — แถบบน + ลิ้นชักเมนู (partials/public-drawer.php)

   ≤767px: แถบบนเหลือ โลโก้ · จองเลย · ปุ่มเมนู — เมนูแนวนอนและปุ่ม "การจองของฉัน" ย้ายเข้าลิ้นชัก
   จอกว้างกว่านั้นใช้แถบบนเดิมทั้งหมด */
@media (max-width: 767px) {
  body:not([data-variant="signin"]) .public-bar-inner:has(.public-burger) { flex-wrap: nowrap; padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  body:not([data-variant="signin"]) .public-bar-inner:has(.public-burger) .public-nav { display: none; }
  body:not([data-variant="signin"]) .public-bar-inner:has(.public-burger) .brand { min-inline-size: 0; }
  body:not([data-variant="signin"]) .public-bar-inner:has(.public-burger) .public-burger { display: inline-grid; place-items: center; margin-inline-start: 0; flex: none; min-inline-size: 44px; min-block-size: 44px; }
  .public-bar-actions[data-scope="venue"] { display: flex; inline-size: auto; margin-inline-start: auto; flex: none; }
  .public-bar-actions[data-scope="venue"] .public-account { display: none; }
  .public-bar-actions[data-scope="venue"] .btn-primary { flex: none; min-block-size: 44px; padding-inline: var(--space-4); }
  .public-bar-actions[data-scope="venue"] .btn-primary .icon { display: none; }
  /* ‼️ หน้าที่มีแถบลอย "จองเลย" ท้ายจอแล้ว (บัญชีลูกค้า · หน้าแรกสนาม) ไม่ซ้ำปุ่มบนแถบบน (ผู้ใช้สั่ง 2026-09-24 · audit 2026-10-22) */
  body[data-sticky-cta="true"] .public-bar-actions[data-scope="venue"] { display: none; }
  /* ปุ่มเมนูชิดขวาเสมอ — โลโก้ดันทุกอย่างไปขวา (ผู้ใช้สั่ง 2026-10-29) */
  body:not([data-variant="signin"]) .public-bar-inner:has(.public-burger) > :first-child { margin-inline-end: auto; }
  /* บัญชีลูกค้า: ซ่อนเฉพาะการ์ดชื่อ/ออกจากระบบ (อยู่ในลิ้นชักแล้ว) · ‼️ แท็บรองยังแสดง (ผู้ใช้สั่ง 2026-10-29 "เอาออกแค่ชื่อ ปุ่ม logout") */
  body:has(#public-drawer) .portal-head { display: none; }
  /* เว็บสนามบนมือถือไม่มี footer — ลิงก์นโยบาย/ธีม/ภาษาอยู่ในลิ้นชักแล้ว (ผู้ใช้สั่ง 2026-10-29) */
  body:has(#public-drawer) .public-footer { display: none; }
}

html[data-drawer-open] { overflow: hidden; }

.appnav-drawer[data-tone="light"] { animation: public-drawer-fade var(--duration-normal) var(--ease-standard); }
.appnav-drawer[data-tone="light"] .appnav-drawer-sheet {
  inline-size: min(360px, 86vw);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-lg);
  animation: public-drawer-in var(--duration-normal) var(--ease-enter);
}

@keyframes public-drawer-in { from { transform: translateX(100%); } }
@keyframes public-drawer-fade { from { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .appnav-drawer[data-tone="light"], .appnav-drawer[data-tone="light"] .appnav-drawer-sheet { animation: none; }
}

.public-drawer-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }

.public-drawer-customer {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); margin-block-end: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--color-brand-accent) 18%, var(--color-border-normal));
  border-radius: var(--radius-lg);
  background: var(--color-tint-success);
  color: var(--color-text-strong); text-decoration: none;
}
.public-drawer-avatar { display: grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-full); background: var(--color-surface-card); color: var(--color-brand-accent); }
.public-drawer-who { display: flex; flex-direction: column; min-inline-size: 0; flex: 1; }
.public-drawer-who strong { overflow-wrap: anywhere; }
.public-drawer-who small { color: var(--color-text-muted); }

.public-drawer-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.appnav-drawer .public-drawer-link {
  display: flex; align-items: center; gap: var(--space-3);
  min-block-size: 48px; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-strong); text-decoration: none; font-weight: var(--weight-medium);
}
.public-drawer-link > span { flex: 1; }
.public-drawer-link > .icon:first-child { color: var(--color-text-muted); }
.public-drawer-chevron { color: var(--color-text-muted); flex: none; }
.appnav-drawer .public-drawer-link:hover { background: var(--color-surface-head); }
.appnav-drawer .public-drawer-link[aria-current="page"] { background: var(--color-tint-success); color: var(--color-brand-accent); }
.appnav-drawer .public-drawer-link[aria-current="page"] .icon { color: var(--color-brand-accent); }

.public-drawer-sep { border: 0; border-block-start: 1px solid var(--color-border-normal); margin: var(--space-2) 0; }

.public-drawer-prefs { display: flex; flex-direction: column; gap: var(--space-1); }
.prefs-row { margin: 0; }
.prefs-row-button {
  display: flex; align-items: center; gap: var(--space-3); inline-size: 100%;
  min-block-size: 48px; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--color-text-strong); font: inherit; font-weight: var(--weight-medium); text-align: start; cursor: pointer;
}
.prefs-row-button > span:not(.prefs-switch) { flex: 1; }
.prefs-row-button > .icon { color: var(--color-text-muted); }
.prefs-row-button:hover { background: var(--color-surface-head); }
.prefs-row-button select { inline-size: auto; min-block-size: 36px; border: 0; background-color: transparent; color: var(--color-text-muted); font-weight: var(--weight-medium); }
.prefs-switch { position: relative; flex: none; inline-size: 44px; block-size: 24px; border-radius: var(--radius-full); background: var(--color-border-normal); transition: background var(--duration-fast) var(--ease-standard); }
.prefs-switch::before { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 18px; block-size: 18px; border-radius: var(--radius-full); background: var(--color-surface-card); box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) var(--ease-standard); }
[aria-checked="true"] > .prefs-switch { background: var(--color-brand-accent); }
[aria-checked="true"] > .prefs-switch::before { transform: translateX(20px); }

.public-drawer-signout { margin-block-start: var(--space-2); }
.public-drawer-signout .btn-signout { inline-size: 100%; justify-content: center; min-block-size: 48px; }

/* ‼️ จอกว้าง (≥768px) เว็บสนาม: ปุ่มเมนู (hamburger) มุมขวาสุด ต่อจาก "จองเลย" — เปิดลิ้นชักเดียวกับมือถือ
      ลูกค้าหาปุ่มออกจากระบบไม่เจอ (ผู้ใช้สั่ง 2026-11-10) · ลิ้นชักบนจอกว้างซ่อนเมนูหลัก (แถบบนมีแล้ว) เหลือ ชื่อลูกค้า · เมนูบัญชี · ธีม/ภาษา · ออกจากระบบ */
@media (min-width: 768px) {
  body:not([data-variant="signin"]) .public-bar-actions[data-scope="venue"] ~ .public-burger {
    display: inline-grid; place-items: center; flex: none;
    margin-inline-start: calc(-1 * var(--space-3)); /* ห่างจาก "จองเลย" 12px เท่าช่องระหว่างสองปุ่ม (gap แถบบน 24px) */
    inline-size: 44px; min-block-size: 44px; padding: 0;
    border: 0; border-radius: var(--radius-md); background: transparent; /* ไอคอนเปล่า ไม่มีกรอบกลม (ผู้ใช้สั่ง 2026-11-10) */
  }
  body:not([data-variant="signin"]) .public-bar-actions[data-scope="venue"] ~ .public-burger:hover { background: var(--color-surface-head); }
  .appnav-drawer [data-part="site"] { display: none; }
}

/* ═══════════════════════════════════════════════ OTP / PIN บนมือถือ — คีย์บอร์ดเปิด (app.js ตั้ง html[data-kb="open"]) · จอเตี้ย

   ‼️ ใช้เฉพาะจอแคบ/เตี้ย — desktop และหน้าปกติไม่เปลี่ยน
   ‼️ ช่อง 6 หลัก · เวลา · ส่งใหม่ · ปุ่มยืนยัน ต้องอยู่ในจอหรือเลื่อนถึงได้ทันที — ย่อหัว ซ่อนภาพประกอบ/สโลแกน/footer
   ‼️ ปุ่มยืนยันไม่ fixed — อยู่ต่อจากช่องในการ์ด ไม่ไปจมใต้คีย์บอร์ด */
@supports (min-height: 100dvh) {
  body { min-height: 100dvh; }
}

.otp-status { margin: 0; text-align: center; color: var(--color-text-muted); font-weight: var(--weight-medium); }
.otp-status[data-tone="danger"] { color: var(--color-state-danger); }
form[aria-busy] .otp-digit { opacity: .7; }

@media (max-width: 767px) {
  html[data-kb="open"] body[data-variant="signin"] .signin-slogan,
  html[data-kb="open"] body[data-variant="signin"] .signin-mark,
  html[data-kb="open"] body[data-variant="signin"] .signin-sub,
  html[data-kb="open"] body[data-variant="signin"] .signin-head::after,
  html[data-kb="open"] body[data-variant="signin"] .public-footer,
  html[data-kb="open"] body[data-variant="signin"] .signin-hero-bg,
  html[data-kb="open"] body[data-variant="signin"] .icon-note,
  html[data-kb="open"] body[data-variant="signin"] .callout { display: none; }

  html[data-kb="open"] body[data-variant="signin"] .public-bar-inner { padding-block: var(--space-2); }
  html[data-kb="open"] body[data-variant="signin"] .signin-hero-inner { padding: var(--space-2) var(--space-3) var(--space-4); gap: 0; }
  html[data-kb="open"] body[data-variant="signin"] .signin-card .card-body { padding: var(--space-4) var(--space-4); }
  html[data-kb="open"] body[data-variant="signin"] .signin-head { margin-block-end: var(--space-2); }
  html[data-kb="open"] body[data-variant="signin"] .signin-head h1 { font-size: var(--text-lg); }
  html[data-kb="open"] body[data-variant="signin"] .signin-step { margin-block-end: var(--space-2); font-size: var(--text-base); }
  html[data-kb="open"] body[data-variant="signin"] .signin-options { gap: var(--space-2); }
  html[data-kb="open"] body[data-variant="signin"] .otp-body { gap: var(--space-2); }
  html[data-kb="open"] body[data-variant="signin"] .otp-sent { display: none; }
  html[data-kb="open"] .otp-form { gap: var(--space-2); }
}

/* จอเตี้ยมาก (เช่น 360×640 เปิดคีย์บอร์ด หรือแนวนอน) — ย่อแม้ยังไม่โฟกัส */
@media (max-width: 767px) and (max-height: 560px) {
  body[data-variant="signin"] .signin-slogan,
  body[data-variant="signin"] .signin-mark,
  body[data-variant="signin"] .signin-sub,
  body[data-variant="signin"] .signin-head::after { display: none; }
  body[data-variant="signin"] .signin-hero-inner { padding: var(--space-3) var(--space-3) var(--space-5); }
  body[data-variant="signin"] .signin-card .card-body { padding: var(--space-4); }
}

/* ขั้นทั้งหมดในการ์ดเข้าสู่ระบบ (เบอร์ · OTP · PIN · ข้อมูลของคุณ) — ปุ่มหลักและช่องกรอกสูงเท่ากันทุกขั้น */
.signin-card .otp-form .btn-block,
.signin-card .signin-profile .btn-block { min-block-size: 52px; font-size: var(--text-lg); }
.signin-card .signin-profile .field :is(input, select) { min-block-size: 52px; }
.signin-card .signin-profile .field { text-align: start; }

/* Passkey — ขั้นเข้าสู่ระบบ (การ์ดเดียวกับ PIN/OTP) · รายการในหน้าโปรไฟล์ */
.signin-passkey { display: grid; gap: var(--space-3); text-align: center; }
.signin-passkey .btn-block { min-block-size: 52px; font-size: var(--text-lg); }
.signin-passkey-hint { margin: calc(var(--space-2) * -1) 0 0; }
.passkey-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.passkey-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); }
.passkey-icon { display: grid; place-items: center; flex: none; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-full); background: var(--color-tint-success); color: var(--color-brand-accent); }
.passkey-text { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.passkey-remove { margin: 0; }
.passkey-add { display: grid; gap: var(--space-2); justify-items: start; }
[data-passkey-unsupported] { display: flex; align-items: flex-start; gap: var(--space-2); }
[data-passkey-unsupported][hidden] { display: none; }
@media (max-width: 599px) {
  .passkey-item { flex-wrap: wrap; }
  .passkey-remove { inline-size: 100%; }
  .passkey-remove .btn { inline-size: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════ จองหน้าเคาน์เตอร์ (bookings/form.php) — บน→ล่างเต็มความกว้าง
   ‼️ ไม่มีแถบข้างแล้ว: 1 เลือกสนามและเวลา → 2 ข้อมูลผู้จอง → 3 สรุปและยืนยัน · desktop ช่วงเวลา 4 คอลัมน์ · มือถือ 2 */
.counter-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.counter-step > .card-head { align-items: center; }
.counter-step-head { display: flex; gap: var(--space-3); }
.counter-step-no { display: grid; place-items: center; flex: none; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-full); background: var(--color-brand-accent); color: var(--color-brand-on-accent); font-weight: var(--weight-heavy); }
/* ‼️ minmax(0, 1fr): คอลัมน์ auto ของ grid กว้างตาม option ที่ยาวที่สุดใน <select> (สนาม/โค้ช)
      จอ 375px ช่องล้นไปถึง 516px ตัดขอบขวา — เจอบน prod 2026-10-22 */
.counter-step .card-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.counter-fields { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.counter-fields .field :is(input, select) { inline-size: 100%; max-inline-size: 100%; min-block-size: 46px; }

.counter-days { display: flex; align-items: center; gap: var(--space-2); }
.counter-day-list { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); min-inline-size: 0; }
.counter-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-2) var(--space-1);
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card);
  color: var(--color-text-normal); font: inherit; cursor: pointer; min-block-size: 56px;
}
.counter-day span { font-size: var(--text-sm); color: var(--color-text-muted); }
.counter-day strong { font-size: var(--text-lg); color: var(--color-text-strong); }
.counter-day:hover { border-color: var(--color-brand-accent); }
.counter-day[aria-current="date"] { background: var(--color-brand-accent); border-color: var(--color-brand-accent); }
.counter-day[aria-current="date"] :is(span, strong) { color: var(--color-brand-on-accent); }

.counter-slots-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.counter-slots-head h3 { margin: 0; font-size: var(--text-base); color: var(--color-text-strong); }
.counter-slots-head .grid-legend { margin: 0; }
.grid-legend-swatch[data-state="coach"] { background: var(--color-tint-danger); border-color: var(--color-state-danger); }
.counter-both-free { display: flex; align-items: center; gap: var(--space-2); margin: calc(var(--space-2) * -1) 0 0; color: var(--color-brand-accent); font-weight: var(--weight-medium); }

.counter-slot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.counter-slot {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card);
  cursor: pointer; min-block-size: 56px;
}
.counter-slot input { position: absolute; opacity: 0; pointer-events: none; }
.counter-slot strong { color: var(--color-text-strong); }
.counter-slot small { color: var(--color-brand-accent); font-weight: var(--weight-medium); }
.counter-slot:hover { border-color: var(--color-brand-accent); }
.counter-slot:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.counter-slot:has(input:checked) { background: var(--color-brand-accent); border-color: var(--color-brand-accent); }
.counter-slot:has(input:checked) :is(strong, small) { color: var(--color-brand-on-accent); }
.counter-slot:has(input:disabled) { cursor: not-allowed; background: var(--color-surface-head); }
.counter-slot:has(input:disabled) strong { color: var(--color-text-muted); }
.counter-slot[data-state="booked"] small { color: var(--color-text-muted); }
.counter-slot[data-state="blocked"] small { color: var(--color-state-warning); }
.counter-slot[data-state="coach"] small { color: var(--color-state-danger); }
.counter-slot[data-state="past"] small, .counter-slot[data-state="closed"] small { color: var(--color-text-muted); }
.counter-slot-grid.is-invalid { outline: 1px solid var(--color-state-danger); outline-offset: var(--space-2); border-radius: var(--radius-md); }

.counter-duration { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.counter-duration-label { display: inline-flex; align-items: center; gap: var(--space-2); margin-inline-end: var(--space-2); color: var(--color-text-strong); font-weight: var(--weight-medium); }
.counter-chip { position: relative; }
.counter-chip input { position: absolute; opacity: 0; pointer-events: none; }
.counter-chip span { display: inline-flex; align-items: center; min-block-size: 40px; padding: 0 var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-full); background: var(--color-surface-card); cursor: pointer; font-weight: var(--weight-medium); }
.counter-chip input:checked + span { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); }
.counter-chip input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ขั้นข้อมูลผู้จอง: ลูกค้า | ชื่อผู้จอง สองคอลัมน์เต็มความกว้าง · หมายเหตุและช่องทางเต็มแถว (ผู้ใช้สั่ง 2026-10-27 — เดิมคอลัมน์ 16rem ช่องแคบ เหลือที่ว่างครึ่งจอ) */
.counter-guest-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-5); }
@media (min-width: 768px) {
  .counter-guest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.counter-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0; padding: var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-page); }
.counter-summary > div { min-inline-size: 0; }
.counter-summary dt { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.counter-summary dd { margin: 2px 0 0; color: var(--color-text-strong); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.counter-review-hint { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; }
.counter-stale { margin: 0; }
.counter-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3); }
.counter-actions .btn { min-block-size: 52px; justify-content: center; font-size: var(--text-lg); }

@media (max-width: 1023px) {
  .counter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counter-slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .counter-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .counter-fields { grid-template-columns: minmax(0, 1fr); }
  .counter-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .counter-day-list { grid-template-columns: repeat(7, minmax(3.25rem, 1fr)); overflow-x: auto; }
  .counter-summary { grid-template-columns: minmax(0, 1fr); }
  .counter-actions { grid-template-columns: minmax(0, 1fr); }
  .counter-actions .btn-primary { order: -1; }
}

/* บัญชี & การเงิน — สอง flow แยกกัน: ออกใบแจ้ง (ฟ้า/เขียว · ไม่ตัดเงิน) · ตัดเครดิต (เขียว) */
.billing-panel-period { margin-block-end: var(--space-4); }
.billing-panel-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-start: var(--space-4); }
.billing-panel-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; max-inline-size: 48rem; }
.billing-panel-actions .btn-primary { min-block-size: 48px; }
.billing-confirm { display: grid; gap: var(--space-3); }
.billing-confirm p { margin: 0; }
.billing-confirm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.billing-confirm-list li { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-head); }
.billing-confirm-list li[data-tone="info"] { background: var(--color-tint-info); }
.billing-confirm-list li[data-tone="success"] { background: var(--color-tint-success); }
.billing-confirm-list li[data-tone="warning"] { background: var(--color-tint-warning); }
.billing-confirm-list li[data-tone="danger"] { background: var(--color-tint-danger); }
.billing-flow-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* กล่องแก้ Limit (partials/limit-form-body.php) — ตัวเลขปัจจุบัน 4 ช่อง · ตัวอย่างค่าบริการ */
.limit-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.limit-facts > div { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-head); }
.limit-facts dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.limit-facts dd { margin: 0; font-weight: var(--weight-bold); color: var(--color-text-strong); }
.limit-preview { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-tint-info); }
.limit-preview p { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0; }
@media (max-width: 639px) {
  .limit-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing-panel-actions .btn-primary, .billing-flow-links .btn { inline-size: 100%; justify-content: center; }
}

/* ระดับลูกค้า ทั่วไป / VIP — ตัวเลือกในกล่องเปลี่ยนระดับ */
.tier-choice { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; border: 0; }
.tier-choice legend { margin-block-end: var(--space-2); font-weight: 600; }

/* ═══════════════════════════════════════════════ Login Policy ของลูกค้า (Platform Admin) — ฟอร์มซ้าย · ตัวอย่างหน้า login ขวา */

.auth-policy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }

@media (min-width: 1200px) {
    .auth-policy { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
    .auth-policy-side { position: sticky; inset-block-start: var(--space-4); }
}

.auth-policy-main, .auth-policy-side { display: grid; gap: var(--space-4); min-inline-size: 0; }
.auth-policy-group { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-3); }
.auth-policy-group legend { padding: 0; margin-block-end: var(--space-3); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.auth-policy-group legend small { font-weight: normal; margin-inline-start: var(--space-2); }
.auth-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-3); }
.auth-toggle { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); }

/* ตัวอย่างหน้า login — กรอบมือถือ */
.auth-preview { display: grid; place-items: center; padding-block: var(--space-2); }
.auth-preview-screen {
    display: grid;
    gap: var(--space-3);
    inline-size: min(100%, 300px);
    padding: var(--space-5) var(--space-4);
    border: 8px solid var(--color-text-strong);
    border-radius: var(--radius-xl);
    background: var(--color-surface-page);
    box-shadow: var(--shadow-md);
    text-align: center;
}
.auth-preview-title { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.auth-preview-sub { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.auth-preview-list { display: flex; flex-direction: column; gap: var(--space-2); }
.auth-preview-btn {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-block-size: 44px; 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-normal); font-weight: var(--weight-medium);
}
.auth-preview-btn[data-primary] { order: -1; border-color: var(--color-state-success); background: var(--color-tint-success); color: var(--color-text-strong); font-weight: var(--weight-bold); }
.auth-preview-link { font-size: var(--text-sm); color: var(--color-state-success); text-decoration: underline; }
.auth-preview-note { display: flex; align-items: center; justify-content: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.auth-preview-down { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-tint-warning); font-size: var(--text-sm); text-align: start; }
.auth-preview [hidden] { display: none; }

/* ปุ่ม "เข้าสู่ระบบด้วย LINE" ของหน้า login ลูกค้า */
/* ปุ่มเข้าสู่ระบบด้วย LINE — สีและโลโก้ตามแบรนด์ LINE (ค่าเดียวกันทั้งสองโหมด · partials/line-logo.php) */
.btn-line { background: var(--color-social-line); border-color: var(--color-social-line); color: var(--color-social-on-line); font-weight: var(--weight-heavy); gap: var(--space-3); }
.btn-line:hover, .btn-line:focus-visible { background: var(--color-social-line-hover); border-color: var(--color-social-line-hover); color: var(--color-social-on-line); }
.btn-line:active { background: var(--color-social-line-press); border-color: var(--color-social-line-press); }
.line-logo { inline-size: 1.75em; block-size: 1.75em; flex: none; }
.line-logo-bubble { fill: var(--color-social-on-line); }
.line-logo-text { fill: var(--color-social-line); font-family: var(--font-body); font-weight: var(--weight-heavy); }

/* ═══════════════════════════════════════════════ ตารางสอนของโค้ช — สรุปโค้ช · ตารางประจำสัปดาห์ · ข้อยกเว้น (การ์ดขวา sticky) */

.coach-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); margin-block-end: var(--space-4); }
.coach-summary-text { flex: 1 1 16rem; display: grid; gap: var(--space-1); min-inline-size: 0; }
.coach-summary-text p { margin: 0; }
.coach-summary-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-lg); color: var(--color-text-strong); }
.coach-summary-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--color-text-muted); }
.coach-summary-meta span { display: inline-flex; align-items: center; gap: var(--space-1); }

.schedule-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-block-start: var(--space-4); }
.schedule-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-inline-size: 0; }

@media (min-width: 1200px) {
    .schedule-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
    .schedule-side { position: sticky; inset-block-start: var(--space-4); }
}


.schedule-grid { inline-size: 100%; border-collapse: collapse; }
.schedule-grid :is(th, td) { padding: var(--space-2) var(--space-3); text-align: start; border-block-end: 1px solid var(--color-border-normal); white-space: nowrap; }
.schedule-grid thead th { background: var(--color-surface-head); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.schedule-grid tbody th { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.schedule-grid .num { text-align: end; }
.schedule-grid tr[data-off] .schedule-range :is(input, select) { background: var(--color-surface-head); color: var(--color-text-muted); }
.schedule-switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-sm); }
.schedule-grid tr:not([data-off]) .schedule-switch span { color: var(--color-state-success); font-weight: var(--weight-medium); }
.schedule-range[data-empty] :is(input, select) { color: var(--color-text-muted); }
.schedule-total { font-weight: var(--weight-bold); color: var(--color-state-success); }
.schedule-grid tr[data-off] .schedule-total { color: var(--color-text-muted); }
/* จอแคบ: หนึ่งวัน = หนึ่งบล็อก (วัน + สวิตช์ · ช่องเวลาเต็มแถว) แทนตารางที่ต้องเลื่อนข้าง (ผู้ใช้สั่ง 2026-10-30 หน้าเวลาเปิด-ปิด) */
@media (max-width: 560px) {
  .schedule-grid thead { display: none; }
  .schedule-grid tbody tr { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); align-items: center; padding-block: var(--space-3); border-block-end: 1px solid var(--color-border-normal); }
  .schedule-grid :is(th, td) { padding: 0; border: 0; }
  .schedule-grid td:has(.schedule-range), .schedule-grid .schedule-total { grid-column: 1 / -1; }
  .schedule-range { display: flex; }
  .schedule-range :is(input, select) { flex: 1 1 0; inline-size: auto; min-inline-size: 0; }
}

.schedule-exception-filters { justify-content: flex-end; margin-block: 0 var(--space-3); }
.schedule-filter select, .schedule-filter input { min-block-size: 40px; }

.schedule-actions {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--z-raised);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-md);
}

@media (max-width: 639px) {
    .schedule-actions { flex-direction: column-reverse; }
    .schedule-actions .btn { inline-size: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════ กริดช่องกรอก 4 คอลัมน์ (ฟอร์มเพิ่ม/แก้บุคลากร · ภาพต้นแบบ 2026-09-25)
   ‼️ ทุกการ์ดของฟอร์มใช้กริดตัวเดียวกัน — ช่องปกติ 1 คอลัมน์ · data-width="wide" 2 · "full" ทั้งแถว
      ความกว้างมาจากจำนวนคอลัมน์ ไม่ใช่ max-inline-size 32ch/12ch ของ data-width (ช่องหดกลางคอลัมน์ = ใหญ่บ้างเล็กบ้าง)
   ‼️ ใช้ container query ที่ card-body ไม่ใช่ media query — ความกว้างการ์ดขึ้นกับว่ามีคอลัมน์ตัวอย่างข้างๆ หรือไม่
      การ์ดกว้าง ≥ 760px = 4 คอลัมน์ · ≥ 420px = 2 คอลัมน์ (แท็บเล็ต) · แคบกว่านั้น = คอลัมน์เดียว (มือถือ) */
/* ‼️ ลูกหลาน ไม่ใช่ลูกตรง — กริดในฟอร์ม (card-body > form > fieldset > grid) ต้องได้ container เดียวกัน */
.card-body:has(.field-grid[data-cols="4"]) { container-type: inline-size; }

.field-grid[data-cols="4"] { grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: start; }
.field-grid[data-cols="4"] > [data-width] { grid-column: auto; min-inline-size: 0; }
.field-grid[data-cols="4"] > [data-width="full"] { grid-column: 1 / -1; }

/* ‼️ สองคอลัมน์ (แท็บเล็ต): wide กินช่องเดียวเท่าช่องอื่น — ถ้ากินสองช่อง ช่องสั้นข้างๆ จะตกไปอยู่ครึ่งแถวโดดๆ */
@container (min-width: 420px) {
    .field-grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field-grid[data-cols="4"] > .coach-grid-note { grid-column: 1 / -1; }
}

@container (min-width: 760px) {
    .field-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .field-grid[data-cols="4"] > [data-width="wide"] { grid-column: span 2; }
}

/* Shared control height across grid columns; textareas retain their row height. */
.field-grid[data-cols="4"] .field input:not([type="checkbox"]):not([type="radio"]),
.field-grid[data-cols="4"] .field select { block-size: var(--form-control-height); min-block-size: var(--form-control-height); }
.field-grid[data-cols="4"] .field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { inline-size: 100%; max-inline-size: 100%; }
.field-grid[data-cols="4"] .field textarea { min-block-size: 0; }
.field-grid[data-cols="4"] .field .hint { margin: 0; }

/* ═══════════════════════════════════════════════ ฟอร์มโค้ช — 7 การ์ด · ตัวอย่างโปรไฟล์ติดขวา */

.coach-form .card-head-icon { flex: none; }

/* รูปโปรไฟล์ — กล่องเส้นประของตัวเอง ไม่ปนกับช่องอื่น */
.coach-photo-box { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px dashed var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-mist); }
.coach-photo-text { display: grid; gap: var(--space-1); min-inline-size: 0; }
.coach-photo-box > .avatar[hidden] { display: none; }
.coach-photo-box { flex-wrap: wrap; }
.coach-photo-text strong { color: var(--color-text-strong); }
.coach-photo-text .hint { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ช่องติ๊ก — ป้ายหน้าตาเดียวกับป้ายของช่องกรอก ตัวเลือกเรียงแนวนอน ไม่มีกรอบซ้อนในการ์ด */
.coach-checks > .stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-4) var(--space-5); }
.coach-form .coach-checks fieldset.group { padding: 0; border: 0; border-radius: 0; gap: var(--space-2); min-inline-size: 0; }
.coach-form .coach-checks fieldset.group > legend { padding: 0; margin-block-end: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.coach-form .coach-checks .badge-row { gap: var(--space-2) var(--space-5); }
.coach-form .coach-checks .check-line { align-items: center; gap: var(--space-2); min-block-size: 32px; }
.coach-form .coach-checks .hint { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.field-grid + .coach-checks,
.coach-checks + .field-grid { margin-block-start: var(--space-5); padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border-normal); }

/* หมายเหตุท้ายกริด — วางในคอลัมน์ของกริดเหมือนช่องกรอก จึงไม่ทิ้งที่ว่างข้างช่องสั้น */
.coach-grid-note { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.coach-grid-note .icon { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 2px; }
@container (min-width: 760px) { .coach-grid-note[data-width="wide"] { align-self: end; min-block-size: 44px; align-items: center; } }

/* หัวข้อย่อยในการ์ด (ค่าตอบแทน · SEO) */
.coach-subhead { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-5) 0 var(--space-4); padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border-normal); font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.coach-subhead .icon { inline-size: 18px; block-size: 18px; color: var(--color-brand-accent); }

/* สวิตช์สิทธิ์ — กล่องเท่ากันสองใบ */
.coach-form .coach-switch { margin: 0; padding: var(--space-3) var(--space-4); min-block-size: 72px; block-size: 100%; border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.coach-form .field:has(> .coach-switch) { block-size: 100%; }

/* ปุ่มท้ายฟอร์ม — ต่อจากการ์ดสุดท้ายทันที ไม่มีที่ว่างสูงก่อนปุ่ม */
.coach-form-actions { margin: 0; padding: 0; border: 0; }

/* ตัวอย่างโปรไฟล์ */
.coach-preview .preview-title { display: grid; gap: var(--space-1); justify-items: center; }
.coach-preview-facts { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-normal); }
.coach-preview-facts li { display: flex; align-items: flex-start; gap: var(--space-2); }
.coach-preview-stats { margin-block-start: var(--space-4); }
.coach-preview-stats dd { margin: 0; text-align: end; font-size: var(--text-sm); color: var(--color-text-strong); }

/* คำแนะนำ · ข้อมูลที่จำเป็น */
.coach-tips { align-items: flex-start; }
.coach-tips > div { display: grid; gap: var(--space-2); min-inline-size: 0; }
.coach-tips strong { color: var(--color-text-strong); }
.coach-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.coach-check-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.coach-check-list .icon { inline-size: 18px; block-size: 18px; color: var(--color-brand-accent); margin-block-start: 1px; }
.coach-dot-list { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-1); }
/* ชุดตัวเลือกยาว (กีฬา ≥ 7 ตัว) กินทั้งแถวแล้วเรียงแนวนอน — วางในคอลัมน์แคบแล้วยืดลงยาวกว่าชุดอื่นหลายเท่า */
.coach-checks fieldset.group:has(.check-line:nth-child(7)) { grid-column: 1 / -1; }
.coach-dot-list { list-style: disc; }

/* ═══════════════════════════════════════════════ กล่องกว้าง (dialog-lg) + คู่มือย่อระดับสิทธิ์ (partials/role-guide-body.php)
   ‼️ ขยายเฉพาะจอกว้าง — จอ ≤ 768px กล่องปกติเต็มจออยู่แล้ว rule นี้อยู่นอก layer ถ้าไม่ครอบ media จะทับค่าเต็มจอของมือถือ */
@media (min-width: 769px) {
    dialog.dialog-lg { max-width: min(960px, calc(100vw - var(--space-8))); }
    dialog.dialog-lg > .dialog-head { padding: var(--space-5) var(--space-6) var(--space-4); border-block-end: 0; align-items: flex-start; }
    dialog.dialog-lg > .dialog-head .dialog-title h2 { font-size: var(--text-xl); }
    dialog.dialog-lg > .dialog-body { padding: 0 var(--space-6) var(--space-5); }
    dialog.dialog-lg > .dialog-foot { padding: var(--space-4) var(--space-6); }
}

.role-guide-tip,
.role-guide-note { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-size: var(--text-sm); }
.role-guide-tip { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-tint-success); color: var(--color-text-strong); }
.role-guide-tip .icon { flex: none; color: var(--color-brand-accent); }
.role-guide-note { color: var(--color-text-muted); font-size: var(--text-xs); }
.role-guide-note .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); margin-block-start: 1px; }

.role-guide-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.role-guide-table thead th { padding: var(--space-3) var(--space-4); background: var(--color-surface-head); color: var(--color-text-strong); font-weight: var(--weight-bold); text-align: start; }
.role-guide-table thead th:first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); inline-size: 26%; }
.role-guide-table thead th:nth-child(2) { inline-size: 42%; }
.role-guide-table thead th:last-child { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.role-guide-table tbody :is(th, td) { padding: var(--space-4); vertical-align: middle; text-align: start; font-weight: var(--weight-normal); border-block-end: 1px solid var(--color-border-normal); }
.role-guide-table tbody tr:last-child :is(th, td) { border-block-end: 0; }

.role-guide-role { display: flex; align-items: center; gap: var(--space-3); }
.role-guide-role .card-head-icon { flex: none; }
.role-guide-name { display: grid; gap: var(--space-1); justify-items: start; }
.role-guide-name strong { color: var(--color-text-strong); font-size: var(--text-base); font-weight: var(--weight-bold); }
.role-guide .badge[data-tone="violet"] { background: var(--color-tint-violet); color: var(--color-state-violet); }

.role-guide-list { margin: 0; padding-inline-start: var(--space-4); display: grid; gap: var(--space-1); color: var(--color-text-normal); }
.role-guide-list li::marker { color: var(--color-brand-accent); }

.role-guide-for { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-mist); }
.role-guide-for > .icon { flex: none; inline-size: var(--icon-base); block-size: var(--icon-base); color: var(--color-brand-accent); margin-block-start: 2px; }
.role-guide-for > span { display: grid; gap: 2px; min-inline-size: 0; }
.role-guide-for strong { color: var(--color-text-strong); }
.role-guide-for small { color: var(--color-text-muted); font-size: var(--text-xs); }

/* จอแคบ: ตารางสามคอลัมน์อ่านไม่ได้ — เรียงเป็นการ์ดทีละระดับ (ระดับ → ใช้อะไรได้ → เหมาะกับใคร) */
@media (max-width: 720px) {
    .role-guide-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .role-guide-table, .role-guide-table tbody, .role-guide-table tr, .role-guide-table tbody :is(th, td) { display: block; }
    .role-guide-table tbody { display: grid; gap: var(--space-3); }
    .role-guide-table tr { border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); padding: var(--space-3); }
    .role-guide-table tbody :is(th, td) { padding: var(--space-2) 0; border: 0; }
}
/* หัวและท้ายกล่องตรึงไว้ เลื่อนเฉพาะตาราง — ตารางห้าระดับสูงกว่าจอ 768–900px แล้วปุ่ม "ปิด" หลุดจอ */
dialog.dialog-lg[open] { display: flex; flex-direction: column; }
dialog.dialog-lg > .dialog-body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; }
.role-guide-list { list-style: disc; }
.role-guide-table tbody :is(th, td) { padding-block: var(--space-3); }

/* ═══════════════════════════════════════════════ การรับเงินของสนาม (Hybrid Merchant) · Settlement / Payout */

/* การ์ดเรียงลงคอลัมน์เดียว ระยะเท่าการ์ดของฟอร์มอื่น */
.merchant-grid { display: flex; flex-direction: column; gap: var(--form-section-gap); margin-block-start: var(--space-4); }
.merchant-modes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.merchant-modes .choice-card { align-items: flex-start; }

/* หัวข้อย่อยในการ์ด — ภาษาเดียวกับหัวข้อย่อยของฟอร์มโค้ช */
.form-subhead { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border-normal); font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.form-subhead .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-brand-accent); }
.card-body .hint:has(> .icon) { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.card-body .hint > .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); margin-block-start: 2px; }

.merchant-switch, .gate-toggle { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.gate-toggle:has(input:checked) { border-color: var(--color-state-danger); background: var(--color-tint-danger); }

/* ช่องทาง QR / บัตร — แถวละช่องทาง: ไอคอน · ชื่อ · ป้ายสถานะ · ตัวเลือก */
.channel-list { display: grid; gap: var(--space-3); }
.channel-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.channel-name { display: grid; gap: 2px; flex: 1 1 12rem; min-inline-size: 0; }
.channel-name strong { color: var(--color-text-strong); }
.channel-name small { color: var(--color-text-muted); font-size: var(--text-sm); }
.channel-flags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.channel-controls { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-inline-start: auto; }

/* หน้าตั้งค่าช่องทาง — การ์ดละช่องทาง: เปิด/ปิด · รหัส LianLian · ค่าบริการ OMC % · มือถือเรียงคอลัมน์เดียว */
.channel-config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: var(--space-4); }
.channel-config { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; padding: var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); }
.channel-config[data-state="awaiting"] { background: var(--color-surface-head); }
.channel-config-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-3); }
.channel-config-head .channel-name { flex: 1 1 9rem; }
.channel-config .field-grid { margin: 0; }
.channel-config .hint { margin: 0; }

/* ═══════════════════════════════════════════════ หน้า Merchant (แท็บรับเงินของสนาม · 2026-09-28)
   ‼️ คำตอบ 3 ข้อบนสุด · เส้นทางเงิน · ช่องทางแยกชั้น · checklist เดียว — ค่า token ทั้งหมด ใช้ได้ทั้งสว่าง/มืด */

/* คำตอบ 3 ข้อ (answer-tiles.php) — จอกว้าง 3 คอลัมน์ · จอแคบเรียงลง */
.answer-tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-block: var(--space-4); }
.answer-tile { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); min-inline-size: 0; }
.answer-tile[data-tone="success"] { border-inline-start: 4px solid var(--color-state-success); }
.answer-tile[data-tone="warning"] { border-inline-start: 4px solid var(--color-state-warning); }
.answer-tile[data-tone="danger"]  { border-inline-start: 4px solid var(--color-state-danger); }
.answer-tile-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.answer-tile-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--space-10); block-size: var(--space-10); border-radius: var(--radius-full); background: var(--color-tint-neutral); color: var(--color-text-muted); }
.answer-tile[data-tone="success"] .answer-tile-icon { background: var(--color-tint-success); color: var(--color-state-success); }
.answer-tile[data-tone="warning"] .answer-tile-icon { background: var(--color-tint-warning); color: var(--color-state-warning); }
.answer-tile[data-tone="danger"] .answer-tile-icon  { background: var(--color-tint-danger); color: var(--color-state-danger); }
.answer-tile-title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-inline-size: 0; }
.answer-tile-title strong { font-size: var(--text-lg); color: var(--color-text-strong); }
.answer-tile-lines { display: grid; gap: var(--space-1); margin: 0; font-size: var(--text-sm); }
.answer-tile-lines > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.answer-tile-lines dt { color: var(--color-text-muted); }
.answer-tile-lines dd { margin: 0; color: var(--color-text-strong); text-align: end; overflow-wrap: anywhere; }
.answer-tile-note { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-tint-warning); color: var(--color-text-normal); font-size: var(--text-sm); }
.answer-tile-note .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-state-warning); margin-block-start: 2px; }
.answer-tile-action { align-self: flex-start; margin-block-start: auto; }

/* เส้นทางเงิน (money-flow.php) — ขั้นเรียงแนวนอน · ลูกศรระหว่างขั้น · จอแคบเรียงลง */
.money-flow { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.money-flow-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); flex: 1 1 7rem; min-inline-size: 0; padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); background: var(--color-tint-neutral); text-align: center; }
.money-flow-step strong { font-size: var(--text-sm); color: var(--color-text-strong); }
.money-flow-step small { font-size: var(--text-xs); color: var(--color-text-muted); }
.money-flow-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--space-8); block-size: var(--space-8); border-radius: var(--radius-full); background: var(--color-surface-card); color: var(--color-brand-accent); }
.money-flow-step + .money-flow-step::before { content: "→"; position: absolute; inset-inline-start: calc(-1 * var(--space-2)); inset-block-start: 50%; transform: translate(-50%, -50%); color: var(--color-text-muted); font-weight: var(--weight-bold); }

/* Merchant Mode — การ์ดละโหมด · โหมดปัจจุบันขอบสีหลัก */
.mode-options { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.mode-option { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); min-inline-size: 0; }
.mode-option[data-current="1"] { border: 2px solid var(--color-brand-accent); background: var(--color-surface-mist); }
.mode-option-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.mode-option-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-inline-size: 0; }
.mode-option-text strong { color: var(--color-text-strong); }
.mode-option-text small { color: var(--color-text-muted); font-size: var(--text-sm); }
.mode-option form { margin: 0; }
.card-body .hint[data-tone="warning"] { color: var(--color-state-warning); }

/* ช่องทางแยกชั้น — แพลตฟอร์ม · merchant · สนาม (แต่ละชั้นเป็นคอลัมน์ของตัวเอง) */
.channel-layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); flex: 3 1 28rem; margin: 0; }
.channel-layers > div { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
.channel-layers dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.channel-layers dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.channel-layers select { max-inline-size: 100%; }
.channel-layers form { margin: 0; }

/* checklist ความพร้อม — data-state (ok · blocked · warning · info) · ไอคอนต่างรูปร่างตามสถานะ */
.check-item[data-state] { align-items: flex-start; }
.check-item[data-state] > span { flex: none; }
.check-item[data-state] > .check-item-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.check-item-text strong { color: var(--color-text-strong); font-size: var(--text-sm); }
.check-item-text small { color: var(--color-text-muted); font-size: var(--text-xs); }
.check-item-icon { display: inline-flex; margin-block-start: 2px; color: var(--color-text-muted); }
.check-item[data-state="ok"] { background: var(--color-tint-success); }
.check-item[data-state="ok"] .check-item-icon { color: var(--color-state-success); }
.check-item[data-state="blocked"] { background: var(--color-tint-danger); }
.check-item[data-state="blocked"] .check-item-icon { color: var(--color-state-danger); }
.check-item[data-state="warning"] { background: var(--color-tint-warning); }
.check-item[data-state="warning"] .check-item-icon { color: var(--color-state-warning); }

@media (max-width: 640px) {
  .channel-layers { grid-template-columns: 1fr; flex-basis: 100%; }
  .channel-layers > div { flex-direction: row; justify-content: space-between; align-items: center; }
  .money-flow { flex-direction: column; }
  .money-flow-step { flex-basis: auto; }
  .money-flow-step + .money-flow-step::before { content: "↓"; inset-inline-start: 50%; inset-block-start: calc(-1 * var(--space-1)); }
}
.channel-select { display: grid; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.channel-select select { min-block-size: 40px; min-inline-size: 11rem; }
.channel-toggle { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.channel-toggle[aria-disabled="true"] { background: var(--color-surface-head); cursor: not-allowed; }
.channel-settings { display: grid; gap: var(--space-3); }
.channel-settings-head { display: grid; gap: 2px; margin: 0; }
.channel-settings-head small { color: var(--color-text-muted); font-size: var(--text-sm); }

.merchant-hold { align-items: flex-end; margin-block: var(--space-4); }
.merchant-hold .field { flex: 1 1 20rem; margin: 0; }

.settlement-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.settlement-actions .hint { flex: 1 1 100%; }

/* breakdown ของใบสรุป — ใบเสร็จแนวตั้ง ตัวเลขชิดขวา บรรทัดสุดท้ายหนาและมีเส้นคั่น */
.settlement-breakdown { display: grid; gap: 0; margin: 0 0 var(--space-3); }
.settlement-breakdown > div { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); border-block-end: 1px dashed var(--color-border-normal); }
.settlement-breakdown dt { color: var(--color-text-normal); }
.settlement-breakdown dd { margin: 0; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.settlement-breakdown > .settlement-breakdown-total { border-block-end: 0; border-block-start: 2px solid var(--color-text-strong); margin-block-start: var(--space-1); }
.settlement-breakdown-total :is(dt, dd) { font-weight: var(--weight-heavy); font-size: var(--text-lg); color: var(--color-text-strong); }

/* ความพร้อมรับชำระออนไลน์ (แท็บรับเงินของสนาม) — แถวช่องทางใต้รายละเอียด · ปุ่มอนุมัติชิดขวา */
.readiness-channels { margin-block-start: var(--space-3); }
.readiness-channels .confirm-form { display: inline-flex; }

/* ═══════════════════════════════════════════════ กระเป๋าเงินสนาม · Funds Release · Payout (2026-09-27 แทน Settlement รอบโอน) */

/* แถวปุ่มหลักใต้ยอด 4 กระเป๋า — ถอนเงิน · โอนไป Sports Credit · วงเงิน · คำอธิบายขั้นตอนเงินเต็มแถว */
.wallet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block: var(--space-4); }
.wallet-actions .hint { flex: 1 1 100%; display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.wallet-actions .hint > .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); margin-block-start: 2px; }

/* วงเงินถอน — ป้าย · ยอดที่ใช้/เพดาน · แถบเต็มความกว้าง */
.limit-list { display: grid; gap: var(--space-3); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.limit-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); align-items: baseline; }
.limit-row > :last-child:not(.limit-value) { grid-column: 1 / -1; }
.limit-label { color: var(--color-text-normal); font-size: var(--text-sm); }
.limit-value { color: var(--color-text-strong); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

/* โปรไฟล์วงเงิน — หนึ่งฟอร์มต่อโปรไฟล์ เรียงลง คั่นด้วยเส้น */
.limit-profiles { display: grid; gap: var(--space-5); }
.limit-profile + .limit-profile { padding-block-start: var(--space-2); }
.limit-profile .form-subhead small { margin-inline-start: auto; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-normal); }

/* เอกสารแนบของคำขอเพิ่มวงเงิน */
.doc-list { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.doc-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.doc-list .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-brand-accent); }
.doc-list small { flex: 1 1 100%; color: var(--color-text-muted); font-size: var(--text-xs); }

/* สวิตช์การเงิน 3 ตัว — ชื่อ/คำอธิบาย · สถานะ · ฟอร์มปิด (เหตุผล) หรือเปิด */
.switch-list { display: grid; gap: var(--space-3); }
.switch-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.switch-row-text { display: grid; gap: 2px; flex: 1 1 14rem; min-inline-size: 0; }
.switch-row-text strong { color: var(--color-text-strong); }
.switch-row-text small { color: var(--color-text-muted); font-size: var(--text-sm); }
.switch-row-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); flex: 1 1 100%; }
.switch-row-reason { flex: 1 1 14rem; margin: 0; }

/* ═══════════════════════════════════════════════ ระบบ › ตั้งค่า — Settings Overview (ภาพต้นแบบ 2026-09-26) */

/* กริดช่องกรอก 3 คอลัมน์ที่วัดจากความกว้างการ์ด (data-fit="card")
   ‼️ แยกจาก data-cols="3" เดิมของหน้า SMS ที่วัดจากจอ — ไม่เปลี่ยนพฤติกรรมหน้าที่ใช้อยู่แล้ว
   การ์ดกว้าง ≥ 880px = 3 คอลัมน์ · ≥ 420px = 2 · แคบกว่านั้น = คอลัมน์เดียว */
.card-body:has(.field-grid[data-fit="card"]) { container-type: inline-size; }

.field-grid[data-cols="3"][data-fit="card"] { grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-5); }
.field-grid[data-fit="card"] > .field[data-width] { grid-column: auto; min-inline-size: 0; }

@container (min-width: 420px) {
    .field-grid[data-cols="3"][data-fit="card"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 880px) {
    .field-grid[data-cols="3"][data-fit="card"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.field-grid[data-fit="card"] .field input:not([type="checkbox"]):not([type="radio"]),
.field-grid[data-fit="card"] .field select { block-size: 44px; min-block-size: 44px; }
.field-grid[data-fit="card"] .field :is(input:not([type="checkbox"]):not([type="radio"]), select) { inline-size: 100%; max-inline-size: 100%; }

/* ก้อนเนื้อหาในการ์ดที่เรียงลงเป็นชั้น (ช่องสรุป → แถบสถานะ → หมายเหตุ) ระยะห่างเท่ากัน */
.settings-stack { display: grid; gap: var(--space-4); }
.settings-stack > .callout { margin: 0; align-items: center; }
.settings-stack > .callout[data-tone="info"] { border-color: transparent; }
.settings-stack > .callout[data-tone="info"] > .icon { color: var(--color-state-info); }

/* รายการหัวข้อ↔ค่าแบบช่อง (detailTiles) — แต่ละคู่เป็นกรอบของตัวเอง ไอคอนในกล่องสีจางซ้าย ป้ายเล็กบน ค่าหนาล่าง
   ‼️ จำนวนคอลัมน์วัดจากการ์ด ไม่ใช่จอ: ≥ 880px = 4 · ≥ 520px = 2 · แคบกว่านั้น = 1 */
.card-body:has(> .settings-stack > .detail-list[data-layout="tiles"]),
.card-body:has(> .detail-list[data-layout="tiles"]) { container-type: inline-size; }

.detail-list[data-layout="tiles"] { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }

@container (min-width: 520px) {
    .detail-list[data-layout="tiles"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 880px) {
    .detail-list[data-layout="tiles"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.detail-list[data-layout="tiles"] .detail-row,
.detail-list[data-layout="tiles"] .detail-row:last-child {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  min-block-size: 84px;
  padding: var(--space-3) var(--space-4);
  padding-inline-start: calc(var(--space-4) + 44px + var(--space-3));
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
}

.detail-list[data-layout="tiles"] .detail-row dt { display: block; color: var(--color-text-muted); font-size: var(--text-sm); }

.detail-list[data-layout="tiles"] .detail-icon {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-md);
  background: var(--color-tint-success);
}

.detail-list[data-layout="tiles"] .detail-row[data-icon="true"] dt .icon { inline-size: 22px; block-size: 22px; color: var(--color-brand-accent); }
.detail-list[data-layout="tiles"] .detail-row dd { font-weight: var(--weight-bold); color: var(--color-text-strong); overflow-wrap: anywhere; }
.detail-list[data-layout="tiles"] .detail-row dd .badge { vertical-align: middle; }

/* แถบสถานะความพร้อม (partials/status-strip.php) — ไอคอนวงกลมทึบ · ข้อความสองบรรทัด · ป้ายชิดขวา */
.status-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-tint-success);
}

.status-strip-icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-full);
  background: var(--color-state-success);
  color: var(--color-surface-card);
}

.status-strip-icon .icon { inline-size: 20px; block-size: 20px; }
.status-strip-text { display: grid; gap: 2px; flex: 1 1 16rem; min-inline-size: 0; }
.status-strip-text strong { color: var(--color-text-strong); }
.status-strip-text small { color: var(--color-text-muted); font-size: var(--text-sm); }
.status-strip > .badge { margin-inline-start: auto; background: var(--color-surface-card); }

.status-strip[data-tone="warning"] { background: var(--color-tint-warning); }
.status-strip[data-tone="warning"] .status-strip-icon { background: var(--color-state-warning); }
.status-strip[data-tone="danger"] { background: var(--color-tint-danger); }
.status-strip[data-tone="danger"] .status-strip-icon { background: var(--color-state-danger); }
.status-strip[data-tone="info"] { background: var(--color-tint-info); }
.status-strip[data-tone="info"] .status-strip-icon { background: var(--color-state-info); }

/* ป้ายต่อท้ายข้อความในเซลล์ตาราง (flagKey) */
td[data-primary] > .badge { margin-inline-start: var(--space-2); }

/* ═══════════════════════════════════════════════ ระบบ › สิทธิ์การใช้งาน — การ์ดตามหมวด (ภาพต้นแบบ 2026-09-26)
   ‼️ ตัวกรองทั้งหมดซ่อนด้วย [hidden] / [data-off] — ช่องติ๊กยังอยู่ในฟอร์มเสมอ (ดู app.js "หน้าสิทธิ์การใช้งาน") */

/* กล่องคำแนะนำหน้าปุ่มหัวเพจ ($pageNote) */
.page-note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-inline-size: 24rem;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  color: var(--color-text-normal);
  font-size: var(--text-xs);
  line-height: var(--leading-normal, 1.5);
}

.page-note > .icon {
  flex: none;
  inline-size: var(--space-8);
  block-size: var(--space-8);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-tint-warning);
  color: var(--color-state-warning);
}

.perm-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-inline-size: 0; }

/* แถบควบคุมบน: บทบาท (ซ้าย) · ค้นหา/หมวด/ย่อขยาย (ขวา) */
.perm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-4) var(--space-5);
}

.perm-roles { display: grid; gap: var(--space-2); min-inline-size: 0; flex: 1 1 28rem; }
.perm-roles-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-strong); }
.perm-role-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.perm-role-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--space-8);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-full);
  background: var(--color-surface-head);
  color: var(--color-text-normal);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.perm-role-chip:hover { border-color: var(--color-brand-accent); }
.perm-role-chip[aria-pressed="true"] { background: var(--color-tint-success); border-color: var(--color-brand-accent); color: var(--color-brand-accent); font-weight: var(--weight-bold); }
.perm-role-chip .numeric { color: var(--color-text-muted); font-weight: var(--weight-normal); }

.perm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); flex: 0 1 auto; }

.perm-search { position: relative; display: block; flex: 1 1 14rem; }
.perm-search > .icon { position: absolute; inset-inline-start: var(--space-3); inset-block-start: 50%; transform: translateY(-50%); inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-text-muted); pointer-events: none; }
.perm-search input { inline-size: 100%; min-block-size: var(--space-10); padding-inline-start: var(--space-10); }
.perm-module-select select { min-block-size: var(--space-10); min-inline-size: 10rem; }
.perm-controls .btn { min-block-size: var(--space-10); padding-inline: var(--space-3); font-size: var(--text-sm); }
.perm-controls [data-perm-collapse] .icon { transform: rotate(180deg); }

/* การ์ดหมวด */
.perm-modules { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-inline-size: 0; }
.perm-module { min-inline-size: 0; }
.perm-module-head { flex-wrap: wrap; }
.perm-module-actions { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }

.perm-check-all { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-normal); cursor: pointer; }
.perm-check-all input { inline-size: var(--space-5); block-size: var(--space-5); accent-color: var(--color-brand-accent); cursor: pointer; }
.perm-count { background: var(--color-tint-success); color: var(--color-brand-accent); font-weight: var(--weight-bold); }

.perm-toggle .icon { transition: transform var(--duration-fast, 150ms) ease; transform: rotate(180deg); }
.perm-module[data-collapsed="true"] .perm-toggle .icon { transform: rotate(0deg); }
.perm-module[data-collapsed="true"] .perm-module-body { display: none; }
.perm-module[data-collapsed="true"] .perm-module-head { padding-block-end: var(--space-5); }

.perm-module-body { padding-block-start: var(--space-2); }
.perm-module-body .table-wrap { border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }

/* ตารางในการ์ด — หัวตารางพื้นเทา · แถวสลับสีจาง · ชื่อเมนูอ่านเป็นภาษาคน (ไม่ใช่ฟอนต์โค้ด) */
.perm-module .matrix-table { inline-size: 100%; border-collapse: collapse; }
.perm-module .matrix-table thead th { background: var(--color-surface-head); color: var(--color-text-strong); font-size: var(--text-sm); font-weight: var(--weight-bold); text-align: center; white-space: nowrap; padding: var(--space-3); }
.perm-module .matrix-table thead th:first-child { text-align: start; position: sticky; left: 0; z-index: 1; }
.perm-module .matrix-table th[scope="row"] { font-family: inherit; font-size: var(--text-sm); color: var(--color-text-normal); padding: var(--space-2) var(--space-3); min-inline-size: 15rem; }
.perm-module .matrix-table td { padding: var(--space-2) var(--space-3); border-inline-start: 1px solid var(--color-border-normal); }
.perm-module .matrix-table tbody tr:nth-child(even) :is(td, th) { background: var(--color-surface-head); }
.perm-module .matrix-table tbody tr:hover :is(td, th) { background: var(--color-tint-success); }
.perm-module .matrix-table input[type="checkbox"] { inline-size: var(--space-6); block-size: var(--space-6); accent-color: var(--color-brand-accent); vertical-align: middle; }
.perm-module .matrix-table [data-off] { display: none; }

.perm-feature { display: inline-flex; align-items: center; gap: var(--space-3); }
.perm-feature > .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-text-muted); }

.perm-empty { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-8); margin: 0; }

/* ปุ่มบันทึกท้ายฟอร์มติดขอบล่างจอตลอดการเลื่อน — หน้านี้ยาว คนแก้การ์ดท้ายๆ ต้องไม่ต้องเลื่อนกลับขึ้นไปหาปุ่ม */
.perm-modules > .form-actions {
  position: sticky;
  inset-block-end: 0;
  z-index: 2;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-md, var(--shadow-sm));
}

@media (max-width: 640px) {
  .perm-toolbar { padding: var(--space-4); }
  .perm-controls { inline-size: 100%; }
  .perm-module-actions { inline-size: 100%; justify-content: space-between; margin-inline-start: 0; }
  .perm-module .matrix-table th[scope="row"] { min-inline-size: 11rem; white-space: normal; }
  .page-note { max-inline-size: none; }
}

/* ═══════════════════════════════════════════════ รายงาน — หน้ารวมแบบ dashboard (ภาพต้นแบบ 2026-09-26) */

/* การ์ดตัวกรองของทุกหน้ารายงาน (partials/report-head.php) — ช่วงเวลาด่วน | เส้นคั่น | วันที่ · สนาม · ปุ่ม */
.report-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5) var(--space-6);
}

.report-range-block { display: grid; gap: var(--space-3); padding-inline-end: var(--space-6); border-inline-end: 1px solid var(--color-border-normal); }
.report-range-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-strong); }
.report-range-title > .icon { color: var(--color-brand-accent); }

.report-filter .report-chip {
  min-block-size: var(--space-10);
  padding: 0 var(--space-4);
  background: var(--color-surface-card);
  font-weight: var(--weight-medium);
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.report-filter .report-chip:hover { border-color: var(--color-brand-accent); color: var(--color-brand-accent); }
.report-filter .report-chip:focus-visible { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; }

.report-filter .report-chip[aria-current="true"] {
  background: var(--color-brand-accent);
  border-color: var(--color-brand-accent);
  color: var(--color-brand-on-primary);
  font-weight: var(--weight-bold);
}

.report-filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); flex: 1 1 32rem; }
.report-filter-form .field { flex: 1 1 10rem; margin: 0; }
.report-filter-form .field :is(input, select) { inline-size: 100%; max-inline-size: 100%; block-size: 44px; min-block-size: 44px; }
.report-filter-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: auto; }
.report-filter-actions .btn { min-block-size: 44px; }

.report-period { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-normal); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.report-period > .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-text-muted); }

@media (max-width: 900px) {
  .report-range-block { padding-inline-end: 0; border-inline-end: 0; flex: 1 1 100%; }
  .report-filter-actions { margin-inline-start: 0; inline-size: 100%; }
  .report-filter-actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 640px) {
  .report-filter { padding: var(--space-4); }
}

@media print {
  .report-filter { display: none !important; }
}

/* การ์ดหมวดรายงาน — 3 คอลัมน์ · แถวสุดท้ายที่มี 2 ใบแบ่งครึ่งกันเต็มแถว (ไม่ทิ้งช่องว่าง) */
.report-cats { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }

@media (min-width: 720px) {
  .report-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-cats > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  .report-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .report-cats > .card { grid-column: span 2; }
  .report-cats > .card:last-child:nth-child(odd) { grid-column: span 2; }
  .report-cats > .card:nth-last-child(2):nth-child(3n + 1),
  .report-cats > .card:last-child:nth-child(3n + 2) { grid-column: span 3; }
  .report-cats > .card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

.report-links { display: grid; margin: 0; padding: 0; list-style: none; }
.report-links > li + li { border-block-start: 1px solid var(--color-border-normal); }

.report-links a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius-md);
  color: var(--color-text-normal);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}

.report-links a:hover { background: var(--color-tint-success); }
.report-links a:focus-visible { outline: 2px solid var(--color-brand-accent); outline-offset: 0; }
.report-link-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); flex: 1 1 auto; min-inline-size: 0; }
.report-link-text strong { color: var(--color-brand-link, var(--color-brand-accent)); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 3px; }
.report-link-text span { color: var(--color-text-muted); font-size: var(--text-sm); }
.report-links a > .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-text-muted); transition: transform var(--duration-fast) var(--ease-standard); }
.report-links a:hover > .icon { color: var(--color-brand-accent); transform: translateX(2px); }

/* ═══════════════════════════════════════════════ ช่องทาง / แหล่งที่มาของการจอง (2026-09-26) */

/* รายงานรายรับ/การจอง: วงแหวนช่องทาง · แหล่งที่มา (รายรับ) · แหล่งที่มา (จำนวน) */
.report-attribution { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }

@media (min-width: 900px) {
  .report-attribution { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .report-attribution[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.report-attribution > .card { min-inline-size: 0; }
.chart-donut-share { color: var(--color-text-muted); font-size: var(--text-sm); min-inline-size: 3.5rem; text-align: end; }

.report-total-row :is(th, td) {
  border-block-start: 2px solid var(--color-border-strong);
  background: var(--color-surface-head);
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
  text-align: start;
}


/* เลือกช่องทางของใบจองที่พนักงานสร้าง (partials/booking-channel-picker.php) */
.channel-picker { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; min-inline-size: 0; grid-column: 1 / -1; }
.channel-picker > legend { padding: 0; margin-block-end: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.channel-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); }

.channel-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.channel-option:hover { border-color: var(--color-brand-accent); }
/* partials/radio-cards.php — ข้อที่ปิด (เช่น ตัดด้วย Sports Credit แต่เครดิตไม่พอ): เห็นแต่เลือกไม่ได้ + เหตุผล */
.channel-option[data-disabled="true"] { cursor: not-allowed; background: var(--color-surface-head); border-color: var(--color-border-normal); }
.channel-option[data-disabled="true"] .channel-option-icon { background: var(--color-surface-raised); color: var(--color-text-muted); }
.channel-option-reason { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-state-warning); }
.channel-option:has(input:checked) { border-color: var(--color-brand-accent); background: var(--color-tint-success); }
.channel-option:has(input:focus-visible) { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; }
.channel-option input { margin-block-start: var(--space-1); accent-color: var(--color-brand-accent); flex: none; }
.channel-option-icon { display: grid; place-items: center; inline-size: var(--space-10); block-size: var(--space-10); border-radius: var(--radius-md); background: var(--color-tint-success); color: var(--color-brand-accent); flex: none; }
.channel-option-text { display: grid; gap: 2px; min-inline-size: 0; }
.channel-option-text strong { color: var(--color-text-strong); }
.channel-option-text small { color: var(--color-text-muted); font-size: var(--text-sm); }

/* "รับเรื่องจาก" แสดงเฉพาะเมื่อเลือกพนักงานรับเรื่อง — ‼️ ไม่ใช้ [hidden] เพื่อให้ทำงานโดยไม่มี JS */
.channel-assisted-source { display: none; max-inline-size: 24rem; margin: 0; }
.channel-picker:has(input[value="assisted"]:checked) .channel-assisted-source,
.channel-assisted-source[data-invalid="true"] { display: grid; }
.channel-assisted-source select { inline-size: 100%; }

/* ═══════════════════════════════════════════════ รายงาน MVP — กริดกราฟ/ตารางคู่ (reports/show.php · 2026-09-26)
   ‼️ ไม่เกิน 3 กราฟต่อหน้า — 3 ใบ = 3 คอลัมน์บนจอกว้าง · data-wide = เต็มแถว (กราฟรายวัน) · จอแคบเรียงลงทีละใบ */
.report-mvp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.report-mvp-cell { min-inline-size: 0; display: grid; }
.report-mvp-cell > .card, .report-mvp-grid > .card { min-inline-size: 0; }

@media (min-width: 900px) {
  .report-mvp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-mvp-cell[data-wide="true"] { grid-column: 1 / -1; }
}

/* สองคอลัมน์: ใบที่เหลือเดี่ยวท้ายแถวกินเต็มแถว (ไม่ทิ้งช่องว่างครึ่งแถว) */
@media (min-width: 900px) and (max-width: 1279px) {
  .report-mvp-grid[data-count="3"]:not(:has([data-wide])) > .report-mvp-cell:last-child { grid-column: 1 / -1; }
}

@media (min-width: 1280px) {
  .report-mvp-grid[data-count="3"]:not(:has([data-wide])) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════ ระบบ › การใช้งาน SMS — การ์ดสรุปเตี้ย + ตารางค้นหา/แบ่งหน้า (2026-09-26)
   ‼️ ของกลางทั้งหมด: section[data-layout=aside] · detail-list[data-layout=columns] · ตัวกรองในหัวการ์ด · ตัวเลือกแถวต่อหน้า */

/* การ์ดหัวซ้าย เนื้อหาขวา — จอแคบซ้อนตามปกติ */
.card[data-layout="aside"] > .card-head { padding-block-end: var(--space-3); }
.card[data-layout="aside"] > .card-body { padding-block: 0 var(--space-4); gap: var(--space-3); }

@media (min-width: 1024px) {
  .card[data-layout="aside"] {
    display: grid;
    grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
    align-items: start;
  }

  .card[data-layout="aside"] > .card-head { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); }
  .card[data-layout="aside"] > .card-body { padding: var(--space-3) var(--space-5) var(--space-3) 0; }
}

/* รายการสองคอลัมน์ — อ่านลงคอลัมน์ซ้ายก่อน (columns) · แถวเตี้ย · ป้ายสถานะเล็กลง */
/* ‼️ วัดความกว้างจาก card-body ไม่ใช่ตัวรายการเอง — container query วัดตัวเองไม่ได้ */
.card-body:has(> .detail-list[data-layout="columns"]) { container-type: inline-size; }
.detail-list[data-layout="columns"] { display: block; }
.detail-list[data-layout="columns"] .detail-row { grid-template-columns: minmax(0, 9rem) 1fr; padding-block: var(--space-2); break-inside: avoid; align-items: center; }
.detail-list[data-layout="columns"] .detail-row dd .badge { padding: 1px var(--space-2); font-size: var(--text-xs); }

@container (min-width: 44rem) {
  .detail-list[data-layout="columns"] {
    columns: 2;
    column-gap: var(--space-8);
    column-rule: 1px solid var(--color-border-normal);
  }

  .detail-list[data-layout="columns"] .detail-row { grid-template-columns: minmax(0, 11rem) 1fr; }
}

/* ตัวกรองในหัวการ์ด (section.php $sectionFilters) — ไม่มีกรอบของตัวเอง ชิดขวาหัวการ์ด */
/* ชื่อการ์ดไม่ถูกบีบจนตัดคำ — พื้นที่ไม่พอ ตัวกรองลงไปบรรทัดใหม่แทน */
.card-head:has(> .card-tools) > .card-head-text { flex: 1 0 14rem; }
.card-tools { flex: 1 1 32rem; display: flex; justify-content: flex-end; min-inline-size: 0; }
/* ช่องค้นหาในหัวการ์ดต้องตรงแนวกับปุ่มข้างๆ — margin ล่างของ .toolbar ดันให้ช่องลอยสูงกว่าปุ่ม 8px (ผู้ใช้ทักจากหน้าชิ้นอุปกรณ์ 2026-10-19) */
.card-tools > .toolbar { margin-block-end: 0; }

.toolbar[data-inline="true"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.toolbar[data-inline="true"] .filter-field[data-type="search"] { flex: 1 1 18rem; max-inline-size: 26rem; }
.toolbar[data-inline="true"] .filter-field :is(input, select) { min-block-size: var(--form-filter-height); }
.toolbar[data-inline="true"] .filter-field:is([data-type="select"]) :is(select) { min-inline-size: 9.5rem; padding-block: 16px 2px; }
.toolbar[data-inline="true"] .filter-field:is([data-type="date"], [data-type="number"]) :is(input) { padding-block: 16px 2px; }
.toolbar[data-inline="true"] .filter-field:is([data-type="select"], [data-type="date"], [data-type="number"]) > label { inset-block-start: 4px; }
.toolbar[data-inline="true"] .toolbar-reset { align-self: center; }

@media (max-width: 640px) {
  .card-tools { flex-basis: 100%; }
  .toolbar[data-inline="true"] .filter-field[data-type="search"] { max-inline-size: none; }
  .toolbar[data-inline="true"] .filter-field:is([data-type="select"], [data-type="date"], [data-type="number"]) { flex: 1 1 40%; }
}

/* ตารางแถวเตี้ย (partials/table.php $tableDense) — เฉพาะจอที่ยังเป็นตาราง มือถือยังเป็นการ์ด */
@media (min-width: 769px) {
  .table[data-density="compact"] td { height: 44px; padding-block: var(--space-1); }
  .table[data-density="compact"] thead th { padding-block: var(--space-3); }
  .table[data-density="compact"] td .badge { padding-block: 1px; }
}

/* แถบแบ่งหน้า + ตัวเลือกจำนวนแถว (partials/pagination.php $paginationPerOptions) */
.pagination-bar { flex-wrap: wrap; gap: var(--space-3); padding-block-start: var(--space-3); }
.pagination-per { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.pagination-per label { font-weight: var(--weight-normal); color: var(--color-text-muted); }
.pagination-per select {
  min-block-size: 42px;
  min-inline-size: 5rem;
  padding-inline: 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);
  font: inherit;
}
.pagination-gap { display: grid; place-items: center; min-inline-size: 28px; color: var(--color-text-muted); }

@media (max-width: 640px) {
  .pagination-bar { justify-content: center; }
  .pagination-bar > .spacer { margin-inline-start: 0; }
}

/* ═══════════════════════════════════════════════ ระบบ › ประวัติการแก้ไข (ภาพต้นแบบ 2026-09-26) — admin/audit-logs.php */

/* การ์ดตัวกรอง: 4 ช่องเรียงแถวเดียว + ปุ่ม · ชิปช่วงด่วนแถวล่าง · จอแคบเรียงลง */
.audit-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: var(--space-3) var(--space-4);
  align-items: end;
}

.audit-filter .field { margin: 0; min-inline-size: 0; }
.audit-filter .field :is(input, select) { inline-size: 100%; }
.audit-filter-actions { display: flex; gap: var(--space-2); align-items: center; }
.audit-range { grid-column: 1 / -1; }

.audit-range .report-chip {
  min-block-size: 36px;
  padding: 0 var(--space-4);
  background: var(--color-surface-card);
  font-weight: var(--weight-medium);
}

.audit-range .report-chip:hover { border-color: var(--color-brand-accent); color: var(--color-brand-accent); }

.audit-range .report-chip[aria-current="true"] {
  background: var(--color-tint-success);
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
  font-weight: var(--weight-bold);
}

@media (max-width: 1023px) {
  .audit-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audit-filter-actions { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .audit-filter { grid-template-columns: minmax(0, 1fr); }
  .audit-filter-actions > .btn { flex: 1 1 0; justify-content: center; }
}

/* ข้อความสองบรรทัดที่ตัดให้พอดี (partials/table.php clamp) — ชี้ดูข้อความเต็มจาก title */
.cell-stack[data-clamp="true"] { max-inline-size: 26rem; }
.cell-stack[data-clamp="true"] > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-stack[data-clamp="true"] > small { font-size: var(--text-xs); }

@media (max-width: 768px) {
  .cell-stack[data-clamp="true"] { max-inline-size: 100%; }
  /* ‼️ ต้องชนะ .table td[data-primary] .cell-stack > :first-child { nowrap } — ไม่งั้นหัวข้อยาวดันการ์ดบนมือถือเกินจอ */
  .cell-stack[data-clamp="true"] > *,
  .table td[data-primary] .cell-stack[data-clamp="true"] > * { white-space: normal; overflow-wrap: anywhere; }
}

/* แท็บเล็ต: คอลัมน์รายละเอียดแคบลง ให้ครบทุกคอลัมน์ในจอโดยไม่ต้องเลื่อนข้าง (ข้อความเต็มยังชี้ดูได้) */
@media (min-width: 769px) and (max-width: 1100px) {
  .cell-stack[data-clamp="true"] { max-inline-size: 11rem; }
}

/* ═══════════════════════════════════════════════ ขั้นตอนจอง: หน้าตรวจสอบและชำระเงิน (2026-09-26 — รวมหน้า "ข้อมูลผู้จอง" เดิม)
   ‼️ ชื่อ/เบอร์/อีเมลมาจากบัญชี — ลิงก์แก้ไขอยู่หัวกลุ่ม "ผู้จอง" · โค้ดส่วนลดเป็นฟอร์ม GET แยก · นโยบายการยกเลิกย่อ + ดูรายละเอียด */
.bk-review-edit {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-brand-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.bk-review-edit:hover { text-decoration: underline; }
.bk-review-group h3 .bk-review-edit .icon { inline-size: 14px; block-size: 14px; }
.bk-verified { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: var(--space-2); color: var(--color-state-success); font-size: var(--text-xs); }
.bk-verified .icon { inline-size: 14px; block-size: 14px; }

.bk-promo { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.bk-promo .field { flex: 1 1 14rem; margin: 0; }
.bk-promo .btn { min-block-size: 44px; }
.bk-promo .field:has(.error, .hint) + .btn { margin-block-end: var(--space-5); }

.bk-policy {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  scroll-margin-block-start: var(--space-10);
}

.bk-policy .bk-label { display: flex; align-items: center; gap: var(--space-2); }
.bk-policy .bk-label .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-brand-accent); }
.bk-policy p { margin: 0; color: var(--color-text-normal); }
.bk-policy-more summary { cursor: pointer; color: var(--color-brand-accent); font-weight: var(--weight-medium); }
.bk-policy-more ul { margin: var(--space-2) 0 0; padding-inline-start: var(--space-5); color: var(--color-text-normal); display: grid; gap: var(--space-1); }
/* partials/policy-summary.php — บรรทัดนโยบายแสดงเต็ม (ไม่ซ่อน) · ลิงก์ฉบับเต็ม · หลักฐานการยอมรับ */
.bk-policy-lines { margin: 0; padding-inline-start: var(--space-5); color: var(--color-text-normal); display: grid; gap: var(--space-1); }
.bk-policy-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; }
.bk-policy-links a { color: var(--color-brand-accent); font-weight: var(--weight-medium); }
/* ‼️ มือถือ: แถบล่างของ footer เป็นแถวเดียว (nowrap) — ลิงก์นโยบายต้องขึ้นแถวของตัวเอง ไม่งั้นหน้ากว้างเกินจอ (QA 2026-10-17 · 397px บนจอ 375) */
@media (max-width: 767px) {
  .public-footer-legal:has(> .bk-policy-links) { flex-wrap: wrap; }
  .public-footer-legal > .bk-policy-links { flex: 1 1 100%; }
}
.bk-policy-meta { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.bk-policy-pre { white-space: pre-line; }

/* partials/refund-destination.php — ไม่มีตัวเลือกใดถูกเลือกไว้ · ช่องคืนเงินจริงแสดงเมื่อเลือก (server ตรวจเสมอ) */
.refund-dest, .refund-method { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.refund-dest .choice-card input[type="radio"] { inline-size: var(--icon-base); block-size: var(--icon-base); flex: none; }
.refund-cash, .refund-bank { display: none; }
.refund-dest:has(input[name="destination"][value="cash"]:checked) .refund-cash { display: grid; }
.refund-dest:has(input[name="settlement_method"][value="bank_transfer"]:checked) .refund-bank { display: grid; }

.bk-consent-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.bk-consent-note .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); margin-block-start: 2px; color: var(--color-brand-accent); }
.bk-consent-note a { margin-inline-start: var(--space-1); color: var(--color-brand-accent); }

.profile-back { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-brand-accent); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; }
.profile-back:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════ ลูกค้า › Sports Credit (ภาพต้นแบบ 2026-09-26) — pages/customers/wallet-tab.php
   ซ้าย: ข้อมูลเครดิต · ขวา: ปรับปรุงเครดิต · ล่าง: ประวัติเต็มความกว้าง · จอแคบเรียงลงทีละใบ */
.credit-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-block-end: var(--space-5); }
.credit-layout > .card { min-inline-size: 0; }

@media (min-width: 1024px) {
  .credit-layout { grid-template-columns: minmax(18rem, 5fr) minmax(0, 9fr); align-items: start; }
}

.credit-balance {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-tint-success);
}

.credit-balance-icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  color: var(--color-brand-accent);
}

.credit-balance-icon .icon { inline-size: 26px; block-size: 26px; }
.credit-balance > div { display: grid; gap: var(--space-1); min-inline-size: 0; }
.credit-balance span { color: var(--color-text-normal); font-size: var(--text-sm); }
.credit-balance strong { color: var(--color-text-strong); font-size: var(--text-2xl); font-weight: var(--weight-heavy); line-height: 1.15; }
.credit-balance strong small { font-size: var(--text-base); font-weight: var(--weight-bold); }

/* ค่าที่ต้องเตือน (detail-list tone) — ส้ม = ใกล้หมดอายุ · แดง = หมดอายุ/ผิดปกติ */
.detail-row dd[data-tone="warning"] { color: var(--color-state-warning); font-weight: var(--weight-bold); }
.detail-row dd[data-tone="danger"] { color: var(--color-state-danger); font-weight: var(--weight-bold); }

/* ฟอร์มปรับเครดิตในการ์ด — ไม่มีกรอบซ้อนกรอบ */
.credit-layout .wallet-adjust { padding: 0; border: 0; background: none; }

.wallet-adjust-direction.segmented {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-surface-head);
}

.wallet-adjust-direction.segmented .bk-chip {
  justify-content: center;
  min-block-size: 44px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.wallet-adjust-direction.segmented .bk-chip:has(input:checked) {
  border-color: var(--color-brand-accent);
  background: var(--color-brand-accent);
  color: var(--color-brand-on-primary);
  box-shadow: var(--shadow-sm);
}

.wallet-adjust-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3) var(--space-4); }
.wallet-adjust-grid > *, .wallet-adjust-note > * { margin: 0; min-inline-size: 0; }
.wallet-adjust-grid :is(input, select) { inline-size: 100%; }

@media (min-width: 640px) {
  .wallet-adjust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* วันหมดอายุมีความหมายเฉพาะ "ให้เครดิตฟรี" (โบนัส) — ไม่มี JS ก็ซ่อน/แสดงตามตัวเลือกได้ */
.wallet-adjust:has(select[name="direction"] option[value="debit"]:checked) [data-bonus-only] { display: none; }
.wallet-adjust-note textarea { inline-size: 100%; }

.wallet-estimate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-tint-success);
}

.wallet-estimate-text { display: grid; gap: 2px; min-inline-size: 0; }
.wallet-estimate-text > span { color: var(--color-brand-accent); font-weight: var(--weight-bold); }
.wallet-estimate-text small { color: var(--color-text-muted); font-size: var(--text-xs); }
.wallet-estimate > strong { color: var(--color-text-strong); font-size: var(--text-xl); font-weight: var(--weight-heavy); }
.wallet-adjust-actions { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }

@media (max-width: 480px) {
  .wallet-adjust-actions > .btn { flex: 1 1 0; justify-content: center; }
}

/* หน้ารายละเอียดรายการเครดิต — กลับรายการ */
.entry-reverse {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-head);
}

.entry-reverse .field { flex: 1 1 18rem; margin: 0; }
@media (max-width: 480px) {
  .wallet-adjust-direction.segmented .bk-chip { padding-inline: var(--space-2); font-size: var(--text-sm); }
}

/* ช่องคอร์ทที่ลูกค้าเช็คอินแล้ว (หลังบ้าน) — ส้มอ่อน แยกจาก "จองแล้ว" สีเขียว */
.court-cell[data-state="checked_in"] {
  background: var(--color-tint-warning);
  border-color: var(--color-state-warning);
  color: var(--color-text-strong);
}

.court-legend-swatch[data-state="checked_in"] { background: var(--color-tint-warning); border-color: var(--color-state-warning); }

/* ผังความหนาแน่นในแดชบอร์ด — เต็มความกว้างการ์ด ไม่เกาะมุมขวาทิ้งที่ว่างครึ่งการ์ด */
.dash-main .heatmap { inline-size: 100%; min-inline-size: 0; table-layout: fixed; }
.dash-main .heatmap td { inline-size: auto; block-size: 26px; }

/* ═══════════════════════════════════════════════ ตารางความสามารถ × ระดับสิทธิ์ (role-guide-body · จากสิทธิ์จริง) + คำอธิบายระดับในฟอร์มทีมงาน */
.role-matrix-title { margin: var(--space-4) 0 0; font-size: var(--text-base); color: var(--color-text-strong); }
.role-matrix-wrap { overflow-x: auto; border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.role-matrix { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.role-matrix th, .role-matrix td { padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--color-border-normal); }
.role-matrix thead th { background: var(--color-surface-head); color: var(--color-text-strong); font-weight: var(--weight-bold); white-space: nowrap; text-align: center; }
.role-matrix thead th:first-child, .role-matrix tbody th { text-align: start; }
.role-matrix tbody th { color: var(--color-text-strong); font-weight: var(--weight-medium); min-inline-size: 12rem; }
.role-matrix tbody th small { display: block; font-weight: var(--weight-normal); }
.role-matrix td { text-align: center; color: var(--color-text-muted); }
.role-matrix td[data-allowed="true"] { color: var(--color-brand-accent); }
.role-matrix td .icon { inline-size: 18px; block-size: 18px; }
.role-matrix tbody tr:last-child :is(th, td) { border-block-end: 0; }

.role-desc { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.role-desc > div { display: grid; grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr); gap: var(--space-3); }
.role-desc dt { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.role-desc dd { margin: 0; color: var(--color-text-muted); }
.role-desc-more { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.role-desc-more a { display: inline-flex; align-items: center; gap: var(--space-1); }

@media (max-width: 480px) {
  .role-desc > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* แดชบอร์ดไม่มีแถบเมนูย่อยแล้ว (2026-09-27) — หัวข้อ "แดชบอร์ด" ต่อจากแถบบนเลย ไม่เว้นช่องว่างของแถบที่หายไป */
/* ‼️ ตัวกรองวันที่/สาขาของแดชบอร์ดอยู่ในหัวเพจ ชิดขวาแถวเดียวกับชื่อหน้า — ไม่กินแถวของตัวเอง
      (ผู้ใช้สั่ง 2026-09-27) · จอแคบ ตัดลงใต้ชื่อหน้าเอง เพราะ page-head-main เป็น flex-wrap */
.content:has(.dash-filter) { padding-block-start: var(--space-3); }
.content:has(.dash-filter) .page { gap: var(--space-5); }

.page-tools { flex: none; display: flex; align-items: center; }

.dash-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.dash-filter-field { display: flex; }

.dash-filter-field input,
.dash-filter-field select { min-inline-size: 150px; }

@media (max-width: 640px) {
  .page-tools { flex: 1 1 100%; }
  .dash-filter { inline-size: 100%; }
  .dash-filter-field { flex: 1 1 140px; }
  .dash-filter-field input,
  .dash-filter-field select { inline-size: 100%; min-inline-size: 0; }
}

/* ═══════════════════════════════════════════════ คู่มือ — Permission-aware Help Center (#42 · pages/manuals + partials/help-card) */
.help-layout,
.help-article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }

@media (min-width: 1100px) {
  .help-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); }
  .help-article-layout { grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); }
}

.help-main, .help-rail { display: flex; flex-direction: column; gap: var(--space-5); min-inline-size: 0; }
.help-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.help-search .field-search { flex: 1 1 22rem; margin: 0; position: relative; }
.help-search .field-search input { inline-size: 100%; min-block-size: 50px; padding-inline-start: 44px; }
.help-viewer { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.help-viewer .badge .icon { inline-size: 14px; block-size: 14px; }
.help-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.help-chips .report-chip {
  min-block-size: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-full);
  background: var(--color-surface-card);
  font-weight: var(--weight-medium);
}

.help-chips .report-chip[aria-current="true"] { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-primary); }
.help-section { display: grid; gap: var(--space-3); }
.help-section h2 { margin: 0; font-size: var(--text-xl); }
.help-section > p { margin: 0; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--space-4); }

.help-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  min-block-size: 150px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-strong);
  text-decoration: none;
  overflow: hidden;
}

.help-card:hover { border-color: var(--color-brand-accent); }
.help-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.help-card-body { display: grid; align-content: start; gap: var(--space-2); min-inline-size: 0; }
.help-card-body strong { font-size: var(--text-base); font-weight: var(--weight-bold); }
.help-card-body small { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.45; }
.help-card-icon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--radius-md); background: var(--color-tint-success); color: var(--color-brand-accent); }
.help-card-icon .icon { inline-size: 22px; block-size: 22px; }
.help-card-meta { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
.help-card-meta .icon { inline-size: 14px; block-size: 14px; }
.help-card-thumb { inline-size: 120px; block-size: 90px; object-fit: cover; object-position: top left; border-radius: var(--radius-md); border: 1px solid var(--color-border-normal); }
.help-card-go { position: absolute; inset-block-end: var(--space-3); inset-inline-end: var(--space-3); color: var(--color-text-muted); }
.help-card-go .icon { inline-size: 16px; block-size: 16px; }

@media (max-width: 480px) {
  .help-card-thumb { display: none; }
}

.help-list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.help-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-md); color: var(--color-text-strong); text-decoration: none; font-size: var(--text-sm); }
.help-list a:hover { background: var(--color-surface-head); }
.help-list small { display: inline-flex; align-items: center; gap: 2px; color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
.help-list small .icon { inline-size: 12px; block-size: 12px; }
.help-list .help-card-icon { inline-size: 34px; block-size: 34px; }

/* ภาพประกอบในบทความ — ภาพของ role ผู้อ่าน (partials/manual-shot.php) */
.manual-shot { margin: var(--space-4) 0; }
/* บทความคู่มือ: การ์ดกว้างเต็มคอลัมน์ให้ภาพหน้าจออ่านออก · ตัวหนังสือยังกว้างไม่เกินบรรทัดที่อ่านสบาย (prose) */
.help-article-layout > .prose { max-width: none; }
.help-article-layout > .prose > :not(.manual-shot):not(hr):not(form):not(h2) { max-inline-size: var(--prose-max-width); }

/* ‼️ .card ไม่มี padding (หัวการ์ด/เนื้อหาใช้ .card-body) — บทความใส่เนื้อหาตรงในการ์ด จึงต้องให้ระยะขอบเอง
      เดิมตัวหนังสือชิดขอบการ์ด หัวข้อบางเท่าเนื้อความ ระยะห่างไม่สม่ำเสมอ (ผู้ใช้ทัก 2026-10-05) */
.help-article-layout > .prose { padding: clamp(var(--space-5), 3vw, var(--space-8)); gap: var(--space-3); line-height: 1.75; }
.help-article-layout > .prose > h2 {
  margin-block-start: var(--space-8); padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border-normal);
  font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-strong);
}
.help-article-layout > .prose > h2:first-of-type { margin-block-start: var(--space-4); }
.help-article-layout > .prose > .manual-shot:first-child + h2,
.help-article-layout > .prose > p:first-child + h2 { margin-block-start: var(--space-6); }
.help-article-layout > .prose > h3 { margin-block-start: var(--space-4); font-size: var(--text-base); font-weight: var(--weight-bold); }
.help-article-layout > .prose > ol,
.help-article-layout > .prose > ul { gap: var(--space-3); padding-inline-start: var(--space-6); }
.help-article-layout > .prose li::marker { color: var(--color-text-muted); }
.help-article-layout > .prose > .manual-shot { margin: var(--space-3) 0 var(--space-2); }
.help-article-layout > .prose > .manual-shot + .manual-shot { margin-block-start: var(--space-5); }
.help-article-layout > .prose > hr { margin-block: var(--space-8) var(--space-2); border: 0; border-block-start: 1px solid var(--color-border-normal); }
.manual-shot a { display: inline-block; max-inline-size: 100%; }
.manual-shot video { display: block; inline-size: 100%; block-size: auto; background: var(--color-surface-raised); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.manual-shot img { display: block; inline-size: auto; max-inline-size: 100%; block-size: auto; border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.manual-shot figcaption { margin-block-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }

/* ภาพจำลองหน้าจอเว็บอื่น (LINE OA Manager / LINE Developers) ในคู่มือ — partials/manual-mock.php (ผู้ใช้สั่ง 2026-10-29) */
.help-article-layout > .prose > .manual-mock, .help-article-layout > .prose > .manual-map { max-inline-size: 44rem; }
.manual-mock { margin: var(--space-3) 0 var(--space-2); }
.mock-window { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-raised); box-shadow: var(--shadow-sm); font-size: var(--text-sm); line-height: 1.5; }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--color-surface-head); border-block-end: 1px solid var(--color-border-normal); }
.mock-bar > i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--color-border-strong); }
.mock-url { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 8px; padding: 2px 12px; border-radius: var(--radius-full, 999px); background: var(--color-surface-raised); color: var(--color-text-muted); font-size: var(--text-xs); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-url .icon { inline-size: 11px; block-size: 11px; flex: none; }
.mock-screen { display: grid; }
.mock-screen[data-side="true"] { grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); }
.mock-side { display: grid; align-content: start; gap: 2px; padding: 12px 8px; border-inline-end: 1px solid var(--color-border-normal); background: var(--color-surface-head); color: var(--color-text-muted); font-size: var(--text-xs); }
.mock-side span { padding: 6px 10px; border-radius: var(--radius-sm); }
.mock-side span[data-active="true"] { background: var(--color-surface-raised); color: var(--color-text-strong); font-weight: 700; box-shadow: inset 3px 0 0 var(--color-social-line); }
.mock-main { display: grid; gap: 12px; padding: 16px 18px 18px; min-width: 0; }
.mock-title { margin: 0; font-weight: 700; font-size: var(--text-base); color: var(--color-text-strong); }
.mock-text { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.mock-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding-block-start: 10px; border-block-end: 1px solid var(--color-border-normal); }
.mock-tabs span { position: relative; padding: 6px 12px; color: var(--color-text-muted); white-space: nowrap; }
.mock-tabs span[data-active="true"] { color: var(--color-text-strong); font-weight: 700; box-shadow: inset 0 -2px 0 var(--color-social-line); }
.mock-field, .mock-toggle, .mock-card { position: relative; display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.mock-field small { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; }
.mock-value { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mock-value code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--color-surface-head); font-size: var(--text-xs); }
.mock-actions { display: flex; }
.mock-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 5px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface-raised); color: var(--color-text-strong); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.mock-btn[data-tone="line"] { background: var(--color-social-line); border-color: var(--color-social-line); color: var(--color-social-on-line); padding: 8px 18px; font-size: var(--text-sm); }
.mock-btn[data-tone="primary"] { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-brand-on-primary); padding: 8px 18px; font-size: var(--text-sm); }
.mock-toggle { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.mock-toggle i { inline-size: 34px; block-size: 20px; border-radius: 999px; background: var(--color-border-strong); position: relative; }
.mock-toggle i::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--color-surface-raised); }
.mock-toggle i[data-on="true"] { background: var(--color-social-line); }
.mock-toggle i[data-on="true"]::after { inset-inline-start: 17px; }
.mock-card { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.mock-card > span:nth-child(2) { display: grid; }
.mock-card small { color: var(--color-text-muted); font-size: var(--text-xs); }
.mock-card-icon { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: var(--radius-md); background: var(--color-social-line); color: var(--color-social-on-line); }
.mock-card-icon .icon { inline-size: 16px; block-size: 16px; }
/* กรอบเน้น + หมุดตัวเลข = ตรงที่ต้องกด */
.manual-mock [data-hl="true"] { outline: 2px solid var(--color-state-danger); outline-offset: 2px; }
.mock-pin { position: absolute; inset-block-start: -10px; inset-inline-end: -10px; display: inline-grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--color-state-danger); color: var(--color-surface-raised); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 2px var(--color-surface-raised); z-index: 1; }
.manual-mock figcaption { margin-block-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 34rem) { .mock-screen[data-side="true"] { grid-template-columns: 1fr; } .mock-side { grid-auto-flow: column; overflow: hidden; border-inline-end: 0; border-block-end: 1px solid var(--color-border-normal); } }

/* แผนภาพภาพรวม LINE (บทความ line-login) */
.manual-map { display: grid; gap: var(--space-3); margin: var(--space-3) 0; padding: var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-raised); font-size: var(--text-sm); }
.manual-map-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-3); }
.manual-map-box { display: grid; gap: 4px; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border-normal); background: var(--color-surface-head); line-height: 1.5; }
.manual-map-box strong { display: flex; align-items: center; gap: 6px; color: var(--color-text-strong); }
.manual-map-box strong .icon { inline-size: 16px; block-size: 16px; }
.manual-map-box small { color: var(--color-text-muted); }
.manual-map-box[data-tone="line"] { border-color: var(--color-social-line); }
.manual-map-box[data-tone="line"] strong { color: var(--color-social-line); }
.manual-map-provider { display: grid; gap: var(--space-3); padding: var(--space-3); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
.manual-map-provider > p { margin: 0; font-weight: 700; color: var(--color-text-strong); }
.manual-map-arrow { justify-self: center; color: var(--color-text-muted); }
.manual-map-arrow .icon { inline-size: 18px; block-size: 18px; transform: rotate(90deg); }

/* ═══════════════════════════════════════════════ ศูนย์ Monitor การทำงานประจำวัน (แดชบอร์ดสนาม + OMC · ภาพต้นแบบ 2026-09-27)
   คีย์ลัด · ตัวกรองหัวเพจ · กราฟแท่ง+เส้น · ตารางเวลาใช้สนาม · ตารางงาน · รายการการ์ดล่าง */

/* ---- คีย์ลัด: แถวเดียว เลื่อนแนวนอนเมื่อที่ไม่พอ (ไม่ตัดบรรทัดจนการ์ดสูงไม่เท่ากัน) */
.shortcut-row {
  display: grid;
  grid-auto-flow: column;
  /* ใบละ 1/7 ของแถว (เจ็ดใบพอดีจอกว้าง) · แคบกว่า 10.5rem = เลื่อนแนวนอน · ใบน้อยไม่ยืดเต็มแถว */
  grid-auto-columns: minmax(10.5rem, calc((100% - 6 * var(--space-3)) / 7));
  gap: var(--space-3);
  overflow-x: auto;
  padding-block-end: var(--space-1);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.shortcut-card {
  --sc-bg: var(--color-tint-success);
  --sc-fg: var(--color-brand-accent);
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-block-size: 132px;
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--sc-fg) 16%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--sc-bg) 70%, var(--color-surface-card));
  color: var(--color-text-strong);
  text-decoration: none;
  scroll-snap-align: start;
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.shortcut-card:hover { border-color: var(--sc-fg); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.shortcut-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.shortcut-card strong { font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1.3; }
.shortcut-card small { color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.45; padding-inline-end: var(--space-5); }
.shortcut-icon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--radius-md); background: var(--color-surface-card); color: var(--sc-fg); box-shadow: var(--shadow-sm); }
.shortcut-icon .icon { inline-size: 22px; block-size: 22px; }
.shortcut-go { position: absolute; inset-block-end: var(--space-3); inset-inline-end: var(--space-3); color: var(--sc-fg); }
.shortcut-go .icon { inline-size: 16px; block-size: 16px; }

.shortcut-card[data-tone="info"]    { --sc-bg: var(--color-tint-info);    --sc-fg: var(--color-state-info); }
.shortcut-card[data-tone="warning"] { --sc-bg: var(--color-tint-warning); --sc-fg: var(--color-state-warning); }
.shortcut-card[data-tone="rose"]    { --sc-bg: var(--color-tint-rose);    --sc-fg: var(--color-state-rose); }
.shortcut-card[data-tone="violet"]  { --sc-bg: var(--color-tint-violet);  --sc-fg: var(--color-state-violet); }
.shortcut-card[data-tone="teal"]    { --sc-bg: var(--color-tint-teal);    --sc-fg: var(--color-state-teal); }
.shortcut-card[data-tone="danger"]  { --sc-bg: var(--color-tint-danger);  --sc-fg: var(--color-state-danger); }

/* ใบหลัก: พื้นเขียวเข้ม เด่นสุด */
.shortcut-card[data-tone="primary"] { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); box-shadow: var(--shadow-sm); }
.shortcut-card[data-tone="primary"] small { color: color-mix(in srgb, var(--color-brand-on-accent) 85%, transparent); }
.shortcut-card[data-tone="primary"] .shortcut-icon { background: color-mix(in srgb, var(--color-brand-on-accent) 18%, transparent); color: var(--color-brand-on-accent); box-shadow: none; }
.shortcut-card[data-tone="primary"] .shortcut-go { color: var(--color-brand-on-accent); }

@media (max-width: 640px) {
  .shortcut-row { grid-auto-columns: 11rem; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); scroll-padding-inline: var(--space-4); }
  .shortcut-card { min-block-size: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .shortcut-card:hover { transform: none; }
}

/* ---- ตัวกรองหัวเพจ: วันที่ (ก่อน/ถัดไป) · สาขา · วันนี้/สัปดาห์/เดือน */
.dash-date { display: inline-flex; align-items: center; gap: var(--space-1); }
.dash-period { display: inline-flex; padding: 3px; border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); }

.dash-period-btn {
  min-block-size: 36px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: calc(var(--radius-md) - 3px);
  background: transparent;
  color: var(--color-text-normal);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.dash-period-btn:hover { background: var(--color-surface-head); }
.dash-period-btn[aria-pressed="true"] { background: var(--color-brand-accent); color: var(--color-brand-on-accent); font-weight: var(--weight-bold); }
.dash-period-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

@media (max-width: 640px) {
  .dash-date { flex: 1 1 100%; }
  .dash-date .dash-filter-field { flex: 1 1 auto; }
  .dash-period { flex: 1 1 100%; }
  .dash-period-btn { flex: 1 1 0; }
}

/* ---- เลย์เอาต์: หลัก (กราฟ · งาน · ลูกค้า) + รางขวา (สนาม · ตารางเวลา · รายได้ · ลูกค้าใหม่) · การ์ดล่าง */
@media (min-width: 1200px) {
  .dash-layout[data-variant="monitor"] { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .dash-layout[data-variant="triple"] { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .9fr); align-items: start; }
  .dash-layout[data-variant="split"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}

.dash-bottom { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }

@media (min-width: 900px) {
  .dash-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .dash-bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-bottom[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- ชิปกรอง / แท็บในการ์ด (data-chip-filter · app.js) */
.dash-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-3); }
.dash-chips .bk-chip { min-block-size: 34px; padding: 0 var(--space-3); }
.dash-chips .bk-chip[aria-pressed="true"] { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); box-shadow: none; }
.dash-chips .bk-chip[aria-pressed="true"] .bk-chip-count { background: color-mix(in srgb, var(--color-brand-on-accent) 22%, transparent); color: var(--color-brand-on-accent); }

.dash-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-block-end: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-head); }

.dash-seg-btn {
  min-block-size: 32px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: calc(var(--radius-md) - 3px);
  background: transparent;
  color: var(--color-text-normal);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.dash-seg-btn:hover { background: var(--color-surface-head); }
.dash-seg-btn[aria-pressed="true"] { background: var(--color-brand-accent); color: var(--color-brand-on-accent); font-weight: var(--weight-bold); }
.dash-seg-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

/* ---- กราฟแท่ง + เส้น (partials/chart-combo.php) */
.chart-combo { margin: 0; display: grid; gap: var(--space-2); }
.combo-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); color: var(--color-text-muted); font-size: var(--text-xs); }
.combo-key { display: inline-flex; align-items: center; gap: var(--space-2); }
.combo-key::before { content: ""; inline-size: 12px; block-size: 12px; border-radius: 3px; background: var(--color-heat-level2); }
.combo-key[data-kind="line"]::before { block-size: 3px; border-radius: 2px; background: var(--color-chart-series1); }

.combo-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: 220px auto;
  column-gap: var(--space-2);
}

.combo-body[data-line="false"] { grid-template-columns: auto minmax(0, 1fr); }
.combo-axis { display: flex; flex-direction: column; justify-content: space-between; color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; line-height: 1; }
.combo-axis[data-side="start"] { text-align: end; }
.combo-plot { grid-column: 2; inline-size: 100%; block-size: 100%; overflow: visible; }
.combo-plot .chart-grid { stroke: var(--color-chart-grid); stroke-width: 1; }
.combo-bar { fill: var(--color-heat-level2); }
.combo-bar:hover { fill: var(--color-heat-level3); }
.combo-line { fill: none; stroke: var(--color-chart-series1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.combo-x { grid-column: 2; display: flex; padding-block-start: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
.combo-x span { flex: 1 1 0; min-inline-size: 0; text-align: center; white-space: nowrap; }
.combo-x span[data-skip="true"] { visibility: hidden; }

@media (max-width: 640px) {
  .combo-body { grid-template-rows: 180px auto; }
  .combo-x span:not([data-skip="true"]):nth-child(4n+3) { visibility: hidden; }
}

/* ---- ตารางเวลาใช้สนาม (partials/court-timeline.php) — ช่องละ 15 นาที 64 ช่อง */
.court-timeline { display: grid; gap: 6px; }
.tl-head, .tl-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.tl-label { color: var(--color-text-strong); font-size: var(--text-xs); font-weight: var(--weight-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-label small { display: block; color: var(--color-text-muted); font-weight: var(--weight-normal); overflow: hidden; text-overflow: ellipsis; }
.tl-hours { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.tl-cells { display: grid; grid-template-columns: repeat(64, minmax(0, 1fr)); block-size: 22px; border-radius: var(--radius-sm); background: var(--color-surface-head); }
.tl-cell { position: relative; display: block; block-size: 100%; }
.tl-cell[data-state="booked"]      { background: var(--color-heat-level2); }
.tl-cell[data-state="in_use"]      { background: color-mix(in srgb, var(--color-state-info) 45%, var(--color-surface-card)); }
.tl-cell[data-state="maintenance"] { background: color-mix(in srgb, var(--color-state-warning) 45%, var(--color-surface-card)); }
.tl-cell[data-state="unavailable"] { background: color-mix(in srgb, var(--color-border-strong) 45%, var(--color-surface-card)); }
.tl-cell[data-edge="start"], .tl-cell[data-edge="startend"] { border-start-start-radius: 4px; border-end-start-radius: 4px; margin-inline-start: 1px; }
.tl-cell[data-edge="end"], .tl-cell[data-edge="startend"] { border-start-end-radius: 4px; border-end-end-radius: 4px; margin-inline-end: 1px; }
a.tl-cell:hover { filter: brightness(.9); }
a.tl-cell:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; z-index: 1; }

/* เส้นเวลาปัจจุบัน — ขอบซ้ายของช่อง 15 นาทีที่เวลานี้อยู่ */
.tl-cell[data-now="true"]::before { content: ""; position: absolute; inset-block: -4px; inset-inline-start: 0; inline-size: 2px; background: var(--color-state-danger); z-index: 2; }
.tl-now-label { display: inline-flex; align-items: center; gap: var(--space-1); justify-self: end; margin: 0; color: var(--color-state-danger); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.tl-now-label .icon { inline-size: 14px; block-size: 14px; }

.tl-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; padding: 0; list-style: none; color: var(--color-text-muted); font-size: var(--text-xs); }
.tl-legend li { display: inline-flex; align-items: center; gap: var(--space-1); }
.tl-legend li::before { content: ""; inline-size: 12px; block-size: 12px; border-radius: 3px; background: var(--color-surface-head); border: 1px solid var(--color-border-normal); }
.tl-legend li[data-state="booked"]::before      { background: var(--color-heat-level2); border-color: transparent; }
.tl-legend li[data-state="in_use"]::before      { background: color-mix(in srgb, var(--color-state-info) 45%, var(--color-surface-card)); border-color: transparent; }
.tl-legend li[data-state="maintenance"]::before { background: color-mix(in srgb, var(--color-state-warning) 45%, var(--color-surface-card)); border-color: transparent; }
.tl-legend li[data-state="unavailable"]::before { background: color-mix(in srgb, var(--color-border-strong) 45%, var(--color-surface-card)); border-color: transparent; }

@media (max-width: 480px) {
  .tl-head, .tl-row { grid-template-columns: 3rem minmax(0, 1fr); }
}

/* ---- วงแหวนในรางขวา: วงซ้าย รายการขวา (จอกว้างพอ) */
.dash-rail .chart-donut, .dash-side .chart-donut { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.dash-rail .chart-donut-legend, .dash-side .chart-donut-legend { flex: 1 1 12rem; }

/* ---- ตารางงาน (partials/task-table.php) */
.task-scroll { max-block-size: 26rem; overflow: auto; }
.task-table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.task-table th { position: sticky; inset-block-start: 0; z-index: 1; padding: var(--space-2) var(--space-3); background: var(--color-surface-head); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); text-align: start; white-space: nowrap; }
.task-table td { padding: var(--space-3); border-block-end: 1px solid var(--color-border-normal); vertical-align: middle; }
.task-table tbody tr:hover td { background: color-mix(in srgb, var(--color-surface-head) 60%, transparent); }
.task-table tr[hidden] { display: none; }
.task-time { color: var(--color-text-strong); font-weight: var(--weight-bold); white-space: nowrap; }
.task-type { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; color: var(--color-text-normal); }
.task-type-icon { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: var(--radius-full); background: var(--color-tint-success); color: var(--color-brand-accent); }
.task-type-icon .icon { inline-size: 16px; block-size: 16px; }
.task-type[data-tone="info"] .task-type-icon    { background: var(--color-tint-info);    color: var(--color-state-info); }
.task-type[data-tone="warning"] .task-type-icon { background: var(--color-tint-warning); color: var(--color-state-warning); }
.task-type[data-tone="rose"] .task-type-icon    { background: var(--color-tint-rose);    color: var(--color-state-rose); }
.task-type[data-tone="violet"] .task-type-icon  { background: var(--color-tint-violet);  color: var(--color-state-violet); }
.task-type[data-tone="danger"] .task-type-icon  { background: var(--color-tint-danger);  color: var(--color-state-danger); }
.task-type[data-tone="teal"] .task-type-icon    { background: var(--color-tint-teal);    color: var(--color-state-teal); }
.task-type[data-tone="neutral"] .task-type-icon { background: var(--color-tint-neutral); color: var(--color-text-normal); }
.task-detail { min-inline-size: 12rem; }
.task-detail strong, .task-detail small { display: block; }
.task-detail a { color: var(--color-text-strong); text-decoration: none; }
.task-detail a:hover strong { color: var(--color-brand-link); text-decoration: underline; }
.task-detail small { color: var(--color-text-muted); font-size: var(--text-xs); }
.task-scope { color: var(--color-text-normal); white-space: nowrap; }
.task-owner { white-space: nowrap; }
.task-owner > span:last-child { margin-inline-start: var(--space-2); vertical-align: middle; }
.task-go { inline-size: 1%; text-align: end; }
.task-none { margin: var(--space-4) 0; text-align: center; }

@media (max-width: 720px) {
  .task-table thead { display: none; }
  .task-table, .task-table tbody, .task-table td { display: block; }
  .task-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-block-end: 1px solid var(--color-border-normal); }
  .task-table td { padding: 0; border: 0; }
  .task-table tbody tr:hover td { background: none; }
  .task-table .task-time { grid-row: 1; grid-column: 1; }
  .task-table td:nth-child(2) { grid-row: 2; grid-column: 1; }
  .task-table td:nth-child(2) .task-type { gap: 0; font-size: 0; }
  .task-table .task-detail { grid-row: 1; grid-column: 2; min-inline-size: 0; }
  .task-table .task-scope, .task-table .task-owner, .task-table td:has(> .badge) { grid-column: 2; }
  .task-table .task-go { grid-row: 1 / span 3; grid-column: 3; align-self: center; }
  .task-table .task-owner > span:last-child { font-size: var(--text-xs); }
}

/* ---- รายการการ์ดล่าง (partials/feed-list.php) */
.feed-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.feed-list li[hidden] { display: none; }

.feed-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-strong);
  text-decoration: none;
}

a.feed-item:hover { background: var(--color-surface-head); }
a.feed-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.feed-icon { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: var(--radius-md); background: var(--color-tint-success); color: var(--color-brand-accent); }
.feed-icon .icon { inline-size: 18px; block-size: 18px; }
.feed-icon[data-tone="info"]    { background: var(--color-tint-info);    color: var(--color-state-info); }
.feed-icon[data-tone="warning"] { background: var(--color-tint-warning); color: var(--color-state-warning); }
.feed-icon[data-tone="danger"]  { background: var(--color-tint-danger);  color: var(--color-state-danger); }
.feed-icon[data-tone="violet"]  { background: var(--color-tint-violet);  color: var(--color-state-violet); }
.feed-icon[data-tone="rose"]    { background: var(--color-tint-rose);    color: var(--color-state-rose); }
.feed-icon[data-tone="teal"]    { background: var(--color-tint-teal);    color: var(--color-state-teal); }
.feed-icon[data-tone="neutral"] { background: var(--color-tint-neutral); color: var(--color-text-normal); }
.feed-text { display: grid; gap: 2px; min-inline-size: 0; }
.feed-text strong { font-size: var(--text-sm); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-text small { color: var(--color-text-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-meta { color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
.feed .badge { white-space: nowrap; }

@media (max-width: 420px) {
  .feed-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .feed-meta { display: none; }
}

/* ---- % ความสำเร็จในรายการสถานะระบบ (partials/health-list.php · ศูนย์ Monitor ของ OMC) */
.health-value { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- ตัวเลขสรุปกล่องสี (การเงิน · ตั๋ว Support) */
.mini-stats { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }

.mini-stat {
  --ms-bg: var(--color-tint-success);
  --ms-fg: var(--color-brand-accent);
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--ms-bg) 75%, var(--color-surface-card));
  color: var(--color-text-strong);
  text-decoration: none;
}

a.mini-stat:hover { box-shadow: var(--shadow-sm); }
a.mini-stat:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mini-stat-label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ms-fg); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.mini-stat-label .icon { inline-size: 16px; block-size: 16px; }
.mini-stat-value { font-size: var(--text-xl); font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.mini-stat-sub { color: var(--color-text-muted); font-size: var(--text-xs); }
.mini-stat[data-tone="info"]    { --ms-bg: var(--color-tint-info);    --ms-fg: var(--color-state-info); }
.mini-stat[data-tone="warning"] { --ms-bg: var(--color-tint-warning); --ms-fg: var(--color-state-warning); }
.mini-stat[data-tone="danger"]  { --ms-bg: var(--color-tint-danger);  --ms-fg: var(--color-state-danger); }
.mini-stat[data-tone="violet"]  { --ms-bg: var(--color-tint-violet);  --ms-fg: var(--color-state-violet); }
.mini-stat[data-tone="rose"]    { --ms-bg: var(--color-tint-rose);    --ms-fg: var(--color-state-rose); }
.mini-stat[data-tone="teal"]    { --ms-bg: var(--color-tint-teal);    --ms-fg: var(--color-state-teal); }
.mini-stat[data-tone="neutral"] { --ms-bg: var(--color-tint-neutral); --ms-fg: var(--color-text-normal); }

/* ---- ตัวเลขเทียบช่วงก่อนที่ "เพิ่ม = ไม่ดี" (ยอดค้าง · ปัญหา) */
.kpi-delta[data-invert="true"][data-dir="up"]   { background: var(--color-tint-danger);  color: var(--color-state-danger); }
.kpi-delta[data-invert="true"][data-dir="down"] { background: var(--color-tint-success); color: var(--color-brand-accent); }

/* KPI แบบซ้อนบนแดชบอร์ด: เตี้ยลง (ไอคอนเล็ก ระยะแคบ) · มือถือสองใบต่อแถว ซ่อนเส้นแนวโน้ม — ไม่ให้ห้าใบกินสามจอ */
.kpi-row[data-layout="stack"] .kpi-top { row-gap: var(--space-2); }
.kpi-row[data-layout="stack"] .kpi-icon { inline-size: 38px; block-size: 38px; }

@media (max-width: 640px) {
  .kpi-row[data-layout="stack"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .kpi-row[data-layout="stack"] .kpi { padding: var(--space-3); }
  .kpi-row[data-layout="stack"] .kpi-spark { display: none; }
  .kpi-row[data-layout="stack"] .kpi-value { font-size: var(--text-2xl); }
  .kpi-row[data-layout="stack"] .kpi-foot { flex-wrap: wrap; }
  /* ‼️ แบบซ้อน + compact (ภาพรวม OMC): กฎ compact วางไอคอน·ข้อความ·เส้นแนวโน้มแถวเดียว
        ในใบครึ่งจอเหลือที่ให้ป้ายแค่ ~56px ("งาน/ปัญหาที่ต้องติดตาม" แตกสี่บรรทัด) — มือถือคืนเป็นไอคอนบนข้อความ */
  .kpi-row[data-layout="stack"][data-density="compact"] .kpi-top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "icon" "text";
    align-items: start;
  }

  /* ‼️ KPI แบบแถว (ค่าเริ่มต้นของเกือบทุกหน้า) บนมือถือ = สองใบต่อแถว ไอคอนอยู่บนป้าย เหมือนแบบซ้อน
        เดิมใบละเต็มจอ — หน้าภาพรวม/รายชื่อสนาม/แพ็กเกจต้องเลื่อนผ่าน 4–6 ใบกว่าจะถึงตาราง */
  .kpi-row[data-layout="row"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .kpi-row[data-layout="row"] .kpi { padding: var(--space-3); }
  .kpi-row[data-layout="row"] .kpi-top { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .kpi-row[data-layout="row"] .kpi-icon { inline-size: 38px; block-size: 38px; }
  .kpi-row[data-layout="row"] .kpi-icon .icon { inline-size: 20px; block-size: 20px; }
  .kpi-row[data-layout="row"] .kpi-spark { display: none; }
  /* ยอดเงินยาว (1,135.00 บาท) ในใบครึ่งจอ: ให้หน่วยตกบรรทัดได้ ไม่ล้นขอบใบ */
  .kpi-row[data-layout="row"] .kpi-value { font-size: var(--text-2xl); white-space: normal; overflow-wrap: anywhere; }
  .kpi-row[data-layout="row"] .kpi-foot { flex-wrap: wrap; }
}

/* ลูกค้าที่มาใช้บริการ (มือถือ) — แถวละสองบรรทัดแทนการ์ดห้าแถว: เวลา · ชื่อ · ยอด / สนาม-โค้ช · ประเภท */
@media (max-width: 768px) {
  #dash-visits .table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px var(--space-3); margin-block-end: var(--space-2); padding: var(--space-2) var(--space-3); }
  #dash-visits .table td { padding: 0; }
  #dash-visits .table td::before { content: none; }
  #dash-visits .table td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: var(--weight-bold); }
  #dash-visits .table td:nth-child(2) { grid-column: 2; grid-row: 1; justify-content: start; min-inline-size: 0; }
  #dash-visits .table td:nth-child(3) { grid-column: 3; grid-row: 2; }
  #dash-visits .table td:nth-child(4) { grid-column: 2; grid-row: 2; justify-content: start; color: var(--color-text-muted); font-size: var(--text-xs); }
  #dash-visits .table td:nth-child(5) { grid-column: 3; grid-row: 1; font-weight: var(--weight-bold); }
}

/* กล่องครอบแท็บกราฟ / ตารางงาน — ตัวผูก data-chip-filter */
.dash-tabs, .task-board { display: grid; min-inline-size: 0; }
.dash-tab-panel[hidden] { display: none; }

/* หัวข้อย่อยในการ์ด (เช่น "ตั๋วล่าสุด") */
.dash-subhead { margin: var(--space-4) 0 var(--space-2); color: var(--color-text-strong); font-size: var(--text-sm); font-weight: var(--weight-bold); }

/* การเงิน 5 กล่องต้องอยู่แถวเดียวในการ์ดครึ่งจอ */
.dash-layout .mini-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr)); }
.dash-layout .mini-stat-value { font-size: var(--text-lg); }

/* มือถือ: ไม่แสดงผู้รับผิดชอบที่ว่าง (—) และ % ความสำเร็จ — ประหยัดบรรทัด ข้อมูลหลักยังอยู่ครบ */
@media (max-width: 720px) {
  .task-table .task-owner:has(> .muted) { display: none; }
}

@media (max-width: 480px) {
  .health-value { display: none; }
}

/* ตั้งค่าระบบ › ข้อมูลตัวอย่าง — ปุ่มสร้าง/ลบ · บันทึกผลของ seeder */
.demo-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.demo-actions .confirm-form { margin: 0; }
.demo-log { display: grid; gap: 2px; margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8); max-block-size: 22rem; overflow: auto; border-radius: var(--radius-md); background: var(--color-surface-head); color: var(--color-text-normal); font-family: var(--font-mono); font-size: var(--text-xs); }
.info-bar[data-tone="warning"] { background: var(--color-tint-warning); }
.info-bar[data-tone="warning"] > .icon { color: var(--color-state-warning); }
.info-bar[data-tone="danger"] { background: var(--color-tint-danger); }
.info-bar[data-tone="danger"] > .icon { color: var(--color-state-danger); }

/* ถอนเงิน › อนุมัติการถอน (partials/payout-approval.php) — สรุปยอด · รหัสผ่าน · อนุมัติ / ยกเลิก */
.payout-approval { max-inline-size: 34rem; padding: var(--space-5); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-raised); }
.payout-approval-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-strong); font-size: var(--text-lg); }
.payout-approval-sum { display: grid; gap: var(--space-2); margin: 0; }
.payout-approval-sum > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.payout-approval-sum dt { color: var(--color-text-muted); }
.payout-approval-sum dd { margin: 0; color: var(--color-text-strong); }
.payout-approval-total { padding-block-start: var(--space-2); border-block-start: 1px solid var(--color-border-normal); font-weight: var(--weight-bold); }

/* ประวัติคำขอ/คำตอบของผู้ให้บริการ (partials/payout-events.php · หน้า OMC) — sanitize แล้ว */
.payout-events { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.payout-event { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-inline-start: 4px solid var(--color-state-info); border-radius: var(--radius-md); }
.payout-event[data-tone="danger"] { border-inline-start-color: var(--color-state-danger); }
.payout-event[data-tone="success"] { border-inline-start-color: var(--color-state-success); }
.payout-event-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.payout-event-code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.payout-event-raw { margin-block-start: var(--space-2); }
.payout-event-raw > summary { cursor: pointer; color: var(--color-brand-link); font-size: var(--text-sm); }
.payout-event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-3); margin-block-start: var(--space-2); }
.payout-event-grid h4 { margin: 0 0 var(--space-1); }
.code-block { margin: 0; padding: var(--space-3); max-block-size: 20rem; overflow: auto; border-radius: var(--radius-md); background: var(--color-surface-head); color: var(--color-text-normal); font-family: var(--font-mono); font-size: var(--text-xs); white-space: pre-wrap; word-break: break-all; }

/* ยืนยันตัวตนและธุรกิจ (KYC · หน้าเจ้าของสนาม + หน้า OMC) — progress ด้านข้าง · เนื้อหาหลัก · เอกสารรายแถว · การ์ดสถานะ */
.kyc-layout { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.kyc-side { position: sticky; inset-block-start: var(--space-4); display: grid; gap: var(--space-4); }
.kyc-main { min-inline-size: 0; }
@media (max-width: 960px) {
  .kyc-layout { grid-template-columns: minmax(0, 1fr); }
  .kyc-side { position: static; }
}
.kyc-progress { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); }
.kyc-progress-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.kyc-progress-head h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-strong); font-size: var(--text-base); }
.kyc-progress-count { margin: var(--space-1) 0 0; color: var(--color-text-strong); font-size: var(--text-xl); font-weight: var(--weight-bold); }
.kyc-checklist { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.kyc-checklist li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.kyc-check-mark { display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--radius-full); background: var(--color-tint-warning); color: var(--color-state-warning); }
.kyc-checklist li[data-ok="true"] .kyc-check-mark { background: var(--color-tint-success); color: var(--color-state-success); }
.kyc-checklist a { color: var(--color-brand-link); }
.kyc-flags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block-start: var(--space-2); border-block-start: 1px solid var(--color-border-normal); }
.kyc-submit { display: grid; gap: var(--space-2); }
.kyc-submit .btn { justify-content: center; }

.kyc-docs { display: grid; gap: 0; margin: 0 0 var(--space-4); padding: 0; list-style: none; border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.kyc-doc { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.kyc-doc + .kyc-doc { border-block-start: 1px solid var(--color-border-normal); }
.kyc-doc-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.kyc-doc-icon { display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius-md); background: var(--color-surface-head); color: var(--color-text-muted); }
.kyc-doc[data-status="verified"] .kyc-doc-icon { background: var(--color-tint-success); color: var(--color-state-success); }
.kyc-doc[data-status="rejected"] .kyc-doc-icon, .kyc-doc[data-status="expired"] .kyc-doc-icon { background: var(--color-tint-danger); color: var(--color-state-danger); }
.kyc-doc-text { display: grid; gap: 2px; min-inline-size: 0; }
.kyc-doc-text .small { overflow-wrap: anywhere; }
.kyc-doc-note { display: flex; align-items: center; gap: var(--space-1); color: var(--color-state-danger); }
.kyc-doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-inline-start: calc(2.25rem + var(--space-3)); }
.kyc-upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.kyc-upload-pick { cursor: pointer; }
.kyc-upload-pick:focus-within { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
.kyc-upload[aria-busy="true"] .kyc-upload-pick { opacity: .6; pointer-events: none; }
[data-kyc-upload-message][data-tone="danger"] { color: var(--color-state-danger); }
[data-kyc-upload-message][data-tone="success"] { color: var(--color-state-success); }
[data-kyc-set-message][data-tone="danger"] { color: var(--color-state-danger); }
[data-kyc-set-message][data-tone="success"] { color: var(--color-state-success); }
[data-kyc-set-message]:empty { display: none; }
.kyc-doc-actions .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
/* ชุดเอกสาร (partials/kyc-set.php) — ใน drawer หรือหน้าเต็ม */
.kyc-set { display: grid; gap: var(--space-3); }
.kyc-set-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.kyc-set-message { margin: 0; }
.kyc-files { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.kyc-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.kyc-file + .kyc-file { border-block-start: 1px solid var(--color-border-normal); }
.kyc-file-thumb { display: inline-grid; place-items: center; overflow: hidden; inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--radius-sm); background: var(--color-surface-head); color: var(--color-text-muted); }
.kyc-file-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.kyc-file-text { display: grid; gap: 2px; min-inline-size: 0; }
.kyc-file-text strong { overflow-wrap: anywhere; font-size: var(--text-sm); }
.kyc-file-via { font-weight: var(--weight-bold); color: var(--color-text-muted); }
.kyc-file-via[data-via="platform"] { color: var(--color-state-info); }
.kyc-file-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.kyc-file-actions form { margin: 0; }
.kyc-set-review { padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border-normal); }
.kyc-set-review[aria-busy="true"], .kyc-file-actions form[aria-busy="true"] { opacity: .6; pointer-events: none; }
.kyc-preview-body { display: grid; place-items: center; min-block-size: 50vh; }
.kyc-preview-media { display: block; max-inline-size: 100%; max-block-size: 75vh; border: 0; border-radius: var(--radius-sm); }
iframe.kyc-preview-media { inline-size: 100%; block-size: 75vh; background: var(--color-surface-head); }
@media (max-width: 640px) {
  .kyc-doc-main { grid-template-columns: auto minmax(0, 1fr); }
  .kyc-doc-main > [data-kyc-status] { grid-column: 2; }
  .kyc-doc-actions { padding-inline-start: 0; }
  .kyc-file { grid-template-columns: auto minmax(0, 1fr); }
  .kyc-file-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

.kyc-decide { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); }
.kyc-decide h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-strong); font-size: var(--text-base); }
.kyc-decide form + form { padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border-normal); }
.kyc-decide-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.kyc-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-block-end: var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal); border-inline-start: 4px solid var(--color-state-info); border-radius: var(--radius-lg); background: var(--color-surface-card); }
.kyc-card[data-tone="success"] { border-inline-start-color: var(--color-state-success); }
.kyc-card[data-tone="warning"] { border-inline-start-color: var(--color-state-warning); }
.kyc-card[data-tone="danger"] { border-inline-start-color: var(--color-state-danger); }
.kyc-card-icon { display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-full); background: var(--color-tint-info); color: var(--color-state-info); }
.kyc-card[data-tone="success"] .kyc-card-icon { background: var(--color-tint-success); color: var(--color-state-success); }
.kyc-card[data-tone="warning"] .kyc-card-icon { background: var(--color-tint-warning); color: var(--color-state-warning); }
.kyc-card[data-tone="danger"] .kyc-card-icon { background: var(--color-tint-danger); color: var(--color-state-danger); }
.kyc-card-body { display: grid; gap: 2px; flex: 1 1 16rem; min-inline-size: 0; }
.kyc-card-label { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .04em; text-transform: uppercase; }
.kyc-card-state { color: var(--color-text-strong); font-size: var(--text-lg); letter-spacing: .02em; }

/* Billing v2 — ตารางกติกาจำนวน/โหมดโมดูลในฟอร์มแพ็กเกจ (partials/plan-quantity-rules.php · plan-feature-modes.php) */
.rules-table td { vertical-align: middle; }
.rules-table th[scope="row"] { font-weight: var(--weight-bold); color: var(--color-text-strong); white-space: nowrap; }
.rules-table .field { margin: 0; min-inline-size: 7rem; max-inline-size: 11rem; }
.rules-table .field select { min-inline-size: 10rem; }

/* เมนูผู้ใช้ › การแสดงผล (โหมดมืด · ภาษา) — ย้ายจากแถบบน (2026-09-28) · ใช้ partials/prefs.php แบบ rows */
.appbar-pop-group { margin-block-start: var(--space-1); padding-block-start: var(--space-1); border-block-start: 1px solid var(--color-border-normal); }
.appbar-pop-label { display: block; padding: var(--space-1) var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.appbar-pop-group .prefs-row-button { min-block-size: 40px; font-weight: var(--weight-normal); color: var(--color-text-normal); }
.appbar-pop-group .prefs-row-button:hover { background: var(--color-surface-raised); }

/* Cron Monitor (076) — แถบตรวจล่าสุด/Refresh · รายการ "ต้องดำเนินการ" */
.cron-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-block-end: var(--space-3); }
.cron-toolbar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cron-actions { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.cron-actions li { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-tint-warning); color: var(--color-text-normal); }
.cron-actions li[data-tone="danger"] { background: var(--color-tint-danger); }
.cron-actions li > span { min-inline-size: 0; overflow-wrap: anywhere; }

/* ═══════════════════════════════════════════════ hero หน้าแรก — ชั้นเคลื่อนไหว

   ‼️ ทุกกติกาในบล็อกนี้อยู่ใต้ .lp-hero[data-hero-scene] (มีแค่หน้า /) — .lp-hero เปล่าๆ ใช้ร่วมกับหน้าราคา ติดต่อ ไดเรกทอรี
      ไม่แตะปุ่ม การ์ด หรือภาพจำลองที่อื่นของระบบ
   ‼️ ท่าทางเข้าของ hero เป็นข้อยกเว้นของ design.md ข้อ 11 ที่ผู้ใช้สั่งเอง (บันทึกที่ project/NOTES.md)
      ใช้เฉพาะ hero ของ / เท่านั้น — หน้าอื่นและหลังบ้านยังยึด "เร็วและแน่นอน" ตามเดิม
   ‼️ ท่าทางเข้าเป็น CSS ล้วน ไม่รอ JS — หน้าแสดงครบตั้งแต่ paint แรก ไม่มีจังหวะที่เนื้อหาหายไปก่อน
      ใช้ fill-mode backwards ตามกฎ (design.md ข้อ 11) — transform ไม่ค้างหลังจบ
   ‼️ parallax ใช้ property translate / transform ของ "กล่องห่อ" (.lp-hero-depth) ไม่ใช่ของภาพจำลองเอง
      ท่าทางเข้าของภาพจำลองจึงไม่ชนกับ parallax ที่ JS เขียนลง --hero-px / --hero-py */

.lp-hero[data-hero-scene] {
  --hero-px: 0;
  --hero-py: 0;
  --hero-rise: var(--space-3);
  --hero-slide: var(--space-6);
  /* ‼️ focus บนพื้นดำใช้เขียวสว่างของเวที — เขียวเข้มของระบบแทบมองไม่เห็นบนดำ */
  --color-focus: var(--color-stage-accent);

  /* ‼️ เวทีดำเต็มความสูงจอ (หักแถบบน) — สนามเทนนิส 3D เป็นพื้นหลังทั้ง hero ไม่ใช่แค่ครึ่งขวา
     ใช้ grid ไม่ใช่ flex — .lp-inner มี margin-inline: auto ซึ่งใน flex จะหดตามเนื้อหา */
  display: grid;
  align-content: center;
  /* ‼️ สูงเท่าจอที่เหลือใต้แถบบนพอดี — --hero-offset วัดจริงจาก hero.js (ความสูงแถบบนเปลี่ยนตามจอ/ภาษา)
     ใช้ค่าตายตัวแล้วเหลือแถบของ section ถัดไปโผล่ขอบล่างบนจอใหญ่ */
  min-block-size: calc(100svh - var(--hero-offset, var(--space-20)));
  /* ‼️ พื้นที่ว่างใต้เนื้อหาคือ "พื้นสนาม" ที่ผู้เล่นตีโต้กัน — เนื้อหาไม่บังคน (กล้องมองให้คอร์ทอยู่ช่วงล่างของ hero)
     ‼️ ระยะบน/ล่างผูกกับความสูงจอ (svh) — จอเตี้ยกว้าง (โน้ตบุ๊ก 1920×~800) hero ต้องจบในจอเดียว ไม่ล้นลงไปจนมองไม่เห็นคน */
  padding-block:
    clamp(var(--space-6), 5svh, var(--space-12))
    clamp(var(--space-12), 18svh, calc(var(--space-24) * 2));
  background: var(--color-stage-surface);
  color: var(--color-stage-text);
  overflow: clip;
  isolation: isolate;
}

/* ‼️ จอเตี้ย: พาดหัวและระยะห่างย่อตามความสูงจอด้วย ไม่ใช่แค่ความกว้าง — ไม่งั้นพาดหัว 4 บรรทัดดัน hero ล้นจอ */
@media (min-width: 1000px) {
  .lp-hero[data-hero-scene] .lp-title {
    font-size: clamp(1.75rem, min(4.4vw, 5.6svh), 3.25rem);
    margin-block: clamp(var(--space-3), 2svh, var(--space-5)) clamp(var(--space-2), 1.6svh, var(--space-4));
  }
  .lp-hero[data-hero-scene] .lp-actions,
  .lp-hero[data-hero-scene] .lp-trust { margin-block-start: clamp(var(--space-4), 3svh, var(--space-8)); }
}

/* ---------------------------------------------------------------- ข้อความบนเวทีดำ */

.lp-hero[data-hero-scene] .lp-title { color: var(--color-stage-text); }
.lp-hero[data-hero-scene] .lp-title em { color: var(--color-stage-accent); }
.lp-hero[data-hero-scene] .lp-lead,
.lp-hero[data-hero-scene] .lp-trust { color: var(--color-stage-muted); }
.lp-hero[data-hero-scene] .lp-trust .icon { background: var(--color-stage-accent); color: var(--color-stage-surface); }
.lp-hero[data-hero-scene] .lp-hero-script { color: var(--color-stage-accent); }

.lp-hero[data-hero-scene] .lp-badge {
  background: color-mix(in srgb, var(--color-stage-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-stage-accent) 30%, transparent);
  color: var(--color-stage-text);
}

.lp-hero[data-hero-scene] .lp-badge .icon { color: var(--color-brand-highlight); }

.lp-hero[data-hero-scene] .lp-actions .btn-primary {
  background: var(--color-stage-accent);
  border-color: var(--color-stage-accent);
  color: var(--color-stage-surface);
}

.lp-hero[data-hero-scene] .lp-actions .btn-primary:hover { filter: brightness(1.08); background: var(--color-stage-accent); }

.lp-hero[data-hero-scene] .lp-actions .btn-secondary {
  /* ‼️ พื้นทึบ — ปุ่มโปร่งแล้วผู้เล่นของคอร์ทข้างๆ ลอดผ่านหลังตัวอักษรบนปุ่ม */
  background: color-mix(in srgb, var(--color-stage-text) 4%, var(--color-stage-surface));
  border-color: var(--color-stage-line);
  color: var(--color-stage-text);
}

.lp-hero[data-hero-scene] .lp-actions .btn-secondary:hover {
  background: color-mix(in srgb, var(--color-stage-text) 10%, var(--color-stage-surface));
  border-color: var(--color-stage-muted);
}

@keyframes lp-hero-fade { from { opacity: 0; } }
@keyframes lp-hero-rise { from { opacity: 0; transform: translateY(var(--hero-rise)); } }
@keyframes lp-hero-slide { from { opacity: 0; transform: translateX(var(--hero-slide)); } }

/* ลำดับ: สนาม (canvas จางเข้า) → ป้าย → พาดหัว → คำโปรย → ปุ่ม → จุดเด่น → ภาพจำลอง · รวมราว 1 วินาที */
.lp-hero[data-hero-scene] .lp-title > .lp-badge { animation: none; } /* ป้ายใน h1 ขยับไปพร้อมพาดหัวแล้ว ไม่ต้องขยับซ้อน */
.lp-hero[data-hero-scene] .lp-badge   { animation: lp-hero-rise 520ms var(--ease-enter) 80ms backwards; }
.lp-hero[data-hero-scene] .lp-title   { animation: lp-hero-rise 600ms var(--ease-enter) 150ms backwards; }
.lp-hero[data-hero-scene] .lp-lead    { animation: lp-hero-fade 560ms var(--ease-standard) 260ms backwards; }
.lp-hero[data-hero-scene] .lp-actions { animation: lp-hero-rise 520ms var(--ease-enter) 340ms backwards; }
.lp-hero[data-hero-scene] .lp-trust   { animation: lp-hero-fade 520ms var(--ease-standard) 420ms backwards; }
.lp-hero[data-hero-scene] .lp-hero-depth .mockup-frame { animation: lp-hero-slide 720ms var(--ease-enter) 280ms backwards; }
.lp-hero[data-hero-scene] .lp-hero-script { animation: lp-hero-fade 600ms var(--ease-standard) 560ms backwards; }

/* ---------------------------------------------------------------- ชั้นฉาก 3D */

/* ‼️ อยู่ใต้เนื้อหาเพราะ .lp-inner มี z-index: 1 — canvas ไม่ต้องตั้ง z-index เอง
   ‼️ สนามเต็มทั้ง hero แต่ฝั่งพาดหัวหรี่ลงเหลือราวหนึ่งในสาม — เส้นคอร์ทต้องไม่แย่งตัวอักษร */
.lp-hero-canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1400ms var(--ease-standard);
  mask-image:
    /* ‼️ ฝั่งพาดหัวหรี่ลงอีก (ผู้ใช้ทัก 2026-10-01: ฉากสว่างทับตัวหนังสือ) — เหลือราว 1/4 ใต้ข้อความ สว่างเต็มหลังการ์ด */
    linear-gradient(to right, color-mix(in srgb, currentColor 22%, transparent) 15%, color-mix(in srgb, currentColor 45%, transparent) 42%, currentColor 62%),
    linear-gradient(to bottom, currentColor 80%, transparent 100%);
  mask-composite: intersect;
}

.lp-hero-canvas[data-ready="true"] { opacity: 1; }
/* ตัดฉากตอนจบเรื่องเล่า (story.js) — เฟดดำเร็วกว่าตอนเปิดหน้า แล้วค่อยสว่างกลับที่ฉากเริ่ม */
.lp-hero[data-scene-fade] .lp-hero-canvas[data-ready="true"] { opacity: 0; transition-duration: 600ms; }

/* จอแคบ hero เรียงแนวตั้ง ข้อความอยู่บน ภาพจำลองอยู่ล่าง — หรี่ช่วงข้อความ สว่างเต็มที่หลังภาพจำลอง */
@media (max-width: 999px) {
  .lp-hero-canvas {
    mask-image: linear-gradient(to bottom, color-mix(in srgb, currentColor 30%, transparent) 20%, currentColor 60%, currentColor 88%, transparent 100%);
  }
}

/* ---------------------------------------------------------------- ความลึกของภาพจำลอง */

/* ‼️ ภาพจำลองขยับตามเมาส์ · ภาพคอร์ทขยับสวนทาง · ข้อความอยู่นิ่ง — ได้ชั้นความลึกสามระดับ
   ระยะขยับสูงสุดไม่กี่พิกเซล — เมาส์ไปสุดขอบจอ ภาพจำลองเลื่อนแค่ราว 6px */
.lp-hero-depth {
  position: relative;
  inline-size: 100%;
  transform:
    perspective(calc(var(--space-16) * 20))
    rotateY(calc(var(--hero-px) * 1.1deg))
    rotateX(calc(var(--hero-py) * .8deg));
  translate:
    calc(var(--hero-px) * var(--space-2) * .75)
    calc(var(--hero-py) * var(--space-1) * -1);
}

/* เงาใต้ภาพจำลองเลื่อนสวนทางกับเมาส์ — เหมือนแสงอยู่ด้านหน้าจอ */
.lp-hero-depth::before {
  content: "";
  position: absolute;
  inset: 12% 8% -6%;
  z-index: -1;
  border-radius: var(--radius-xl);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-stage-accent) 22%, transparent), transparent);
  translate:
    calc(var(--hero-px) * var(--space-3) * -1)
    calc(var(--hero-py) * var(--space-2) + var(--space-4));
  opacity: .7;
  transition: opacity var(--duration-slow) var(--ease-standard);
  pointer-events: none;
}

.lp-hero-depth:hover::before { opacity: 1; }

/* ---------------------------------------------------------------- micro-interaction ของ hero */

.lp-hero[data-hero-scene] .lp-actions .btn {
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard),
              translate var(--duration-normal) var(--ease-standard);
}

.lp-hero[data-hero-scene] .lp-actions .btn:hover {
  translate: 0 calc(var(--space-1) * -.5);
  box-shadow: var(--shadow-md);
}

.lp-hero[data-hero-scene] .lp-actions .btn:active { translate: 0 0; box-shadow: none; }

.lp-hero[data-hero-scene] .lp-actions .btn .icon { transition: translate var(--duration-normal) var(--ease-standard); }
.lp-hero[data-hero-scene] .lp-actions .btn:hover .icon { translate: var(--space-1) 0; }

.lp-hero[data-hero-scene] .lp-badge .icon { transition: rotate var(--duration-slow) var(--ease-standard); }
.lp-hero[data-hero-scene] .lp-badge:hover .icon { rotate: 40deg; }

/* ---------------------------------------------------------------- ภาพจำลองที่มีชีวิต

   ‼️ ช่องจองเปลี่ยนสถานะด้วย mockup-live.js (เขียน data-state / data-pulse) — CSS ทำแค่การเปลี่ยนให้นุ่ม
   ‼️ ลำดับเวลา: ภาพจำลองเลื่อนเข้า (280ms) → ช่องตารางไล่ติดเป็นแนวทแยง (~700ms) → การ์ดรายรับ → เส้น "ตอนนี้" เริ่มเดิน */

.lp-hero[data-hero-scene] .mockup-row:nth-child(2) { --r: 0; }
.lp-hero[data-hero-scene] .mockup-row:nth-child(3) { --r: 1; }
.lp-hero[data-hero-scene] .mockup-row:nth-child(4) { --r: 2; }
.lp-hero[data-hero-scene] .mockup-row:nth-child(5) { --r: 3; }
.lp-hero[data-hero-scene] .mockup-cell:nth-child(1) { --c: 0; }
.lp-hero[data-hero-scene] .mockup-cell:nth-child(2) { --c: 1; }
.lp-hero[data-hero-scene] .mockup-cell:nth-child(3) { --c: 2; }
.lp-hero[data-hero-scene] .mockup-cell:nth-child(4) { --c: 3; }
.lp-hero[data-hero-scene] .mockup-cell:nth-child(5) { --c: 4; }

@keyframes lp-hero-cell { from { opacity: 0; transform: scale(.7); } }
@keyframes lp-hero-bump { 40% { transform: scale(1.07); } }
@keyframes lp-hero-ping { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(1.4, 1.9); } }
@keyframes lp-hero-now {
  from { opacity: 0; transform: translateX(0); }
  4%   { opacity: 1; }
  94%  { opacity: 1; }
  to   { opacity: 0; transform: translateX(100%); }
}

.lp-hero[data-hero-scene] .mockup-cell {
  position: relative;
  transition: background-color 600ms var(--ease-standard), border-color 600ms var(--ease-standard);
}

/* ‼️ ท่าทางเข้าของช่องใช้ได้ก่อน data-live เท่านั้น — ไม่งั้นพอถอด data-pulse ออก animation กลับเป็นท่าทางเข้า
   แล้วช่องนั้นจางหายและเด้งเข้าใหม่ทุกครั้งที่มีการจอง (mockup-live.js ใส่ data-live หลังตารางเข้าครบ) */
.lp-hero[data-hero-scene]:not([data-live]) .mockup-cell {
  animation: lp-hero-cell 420ms var(--ease-enter) calc(700ms + (var(--r, 0) + var(--c, 0)) * 45ms) backwards;
}

/* ช่องที่เพิ่งจ่ายแล้ว — เด้งเบาๆ หนึ่งครั้ง และมีวงกระเพื่อมออกจากช่อง */
.lp-hero[data-hero-scene] .mockup-cell[data-pulse] { animation: lp-hero-bump 520ms var(--ease-standard); }

.lp-hero[data-hero-scene] .mockup-cell::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid var(--color-brand-accent);
  opacity: 0;
  pointer-events: none;
}

.lp-hero[data-hero-scene] .mockup-cell[data-pulse]::after { animation: lp-hero-ping 1100ms var(--ease-standard) backwards; }

.lp-hero[data-hero-scene] .mockup-chip { animation: lp-hero-rise 520ms var(--ease-enter) 1000ms backwards; }
.lp-hero[data-hero-scene] .mockup-chip[data-pulse] .icon { animation: lp-hero-bump 520ms var(--ease-standard); }
.lp-hero[data-hero-scene] .mockup-chip-value { display: inline-block; min-inline-size: 6ch; }

/* ‼️ เส้น "ตอนนี้" เดินข้ามช่วงเวลาช้าๆ แบบเดียวกับตารางคอร์ทจริง — บอกว่าตารางนี้เป็นของวันนี้ที่กำลังดำเนินไป
   กล่อง ::after กว้างเท่าช่วงช่องเวลา (หลังคอลัมน์ชื่อคอร์ท 3.5rem ตาม .mockup-row) เส้นวาดที่ขอบซ้ายของกล่อง
   เลื่อนกล่องทั้งกล่องด้วย transform 0 → 100% = เส้นเดินจาก 17:00 ถึงขอบขวา โดยไม่คำนวณ layout ใหม่ */
.lp-hero[data-hero-scene] .mockup-grid { position: relative; overflow: clip; overflow-clip-margin: var(--space-2); }

.lp-hero[data-hero-scene] .mockup-grid::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(3.5rem + var(--space-2));
  inset-inline-end: 0;
  background:
    radial-gradient(circle at 1px var(--space-1), var(--color-text-strong) 0 3px, transparent 3.5px),
    linear-gradient(to right, var(--color-text-strong) 0 2px, transparent 2px);
  opacity: 0;
  pointer-events: none;
  animation: lp-hero-now 48s linear 1600ms infinite backwards;
}
/* ‼️ reduced motion: กฎกลางย่อ animation/transition เหลือ .01ms อยู่แล้ว
   ที่นี่ปิดส่วนที่ไม่ใช่ animation — มุมเอียงและระยะ parallax (JS ก็หยุดเขียนค่าเช่นกัน) */
@media (prefers-reduced-motion: reduce) {
  .lp-hero-depth,
  .lp-hero-depth::before { transform: none; translate: none; }
  .lp-hero-canvas { transition: none; }
  .lp-hero[data-hero-scene] .mockup-grid::after { animation: none; }
}

/* ‼️ เวทีดำของ hero ชิดแถบบน — ไม่ปล่อยแถบพื้นหน้าสีอ่อนคั่นระหว่างแถบบนกับเวที
   ถอด padding บนของ .content เฉพาะหน้าที่เริ่มด้วย hero นี้ — หน้าอื่นไม่เปลี่ยน */
.content:has(> .page > .lp-hero[data-hero-scene]:first-child) { padding-block-start: 0; }

/* ‼️ ม่านมืดนุ่มๆ หลังข้อความของ hero — ผู้เล่นคอร์ทไกลลอยผ่านหลังพาดหัวได้ แต่ตัวอักษรต้องอ่านออกเสมอ
   วาดด้วย radial ของสีพื้นเวที ไม่มีขอบ จึงไม่เห็นเป็นกล่อง */
.lp-hero[data-hero-scene] .lp-hero-body { isolation: isolate; }

.lp-hero[data-hero-scene] .lp-hero-body::before {
  content: "";
  position: absolute;
  inset: calc(var(--space-12) * -1) calc(var(--space-16) * -1);
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-stage-surface) 78%, transparent), transparent);
  pointer-events: none;
}

/* ---------------------------------------------------------------- ป้ายข้อมูลเหนือคอร์ทในฉาก 3D

   ‼️ hero.js วางตำแหน่งด้วย --x / --y (px ใน canvas) ทุกเฟรมที่ป้ายแสดงอยู่ · ป้ายชี้ลงที่คอร์ท (หางแหลมด้านล่าง)
   ‼️ อยู่เหนือเนื้อหา (z-index 2) — ป้ายเล็กและโผล่ชั่วคราว ถ้าอยู่ใต้ภาพจำลองจะถูกตัดครึ่งจนอ่านไม่ออก
   ‼️ ของตกแต่งประกอบฉาก จึงซ่อนบนจอเล็ก (ป้ายเล็กเกินอ่าน และบังผู้เล่น) */
.lp-hero-tags {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.lp-hero-tag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-stage-accent) 45%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-stage-surface) 72%, transparent);
  backdrop-filter: blur(var(--space-2));
  color: var(--color-stage-text);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  white-space: nowrap;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-stage-accent) 12%, transparent), 0 var(--space-2) var(--space-6) color-mix(in srgb, var(--color-stage-accent) 18%, transparent);
  translate: calc(var(--x, 0) * 1px - 50%) calc(var(--y, 0) * 1px - 100% - var(--space-2));
  opacity: 0;
  scale: .92;
  transition: opacity var(--duration-slow) var(--ease-standard), scale var(--duration-slow) var(--ease-enter);
}

.lp-hero-tag::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  inline-size: 1px;
  block-size: var(--space-3);
  background: linear-gradient(var(--color-stage-accent), transparent);
}

.lp-hero-tag[data-show="true"] { opacity: 1; scale: 1; }

.lp-hero-tag-name { color: var(--color-stage-muted); }
.lp-hero-tag-info { color: var(--color-stage-accent); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }

@media (max-width: 759px) { .lp-hero-tags { display: none; } }

/* ═══════════════════════════════════════════════ hero หน้าแรก — เรื่องเล่าเต็มพื้นหลัง (จอง → จ่าย → เดินทาง → ถึงสนาม)

   ‼️ story.js สลับฉากด้วย data-story-step บน .lp-story · ค่าเริ่มต้นในหน้า (ไม่มี JS / reduced motion) = route
      การ์ดยืนยันการจอง + คอร์ทไฟติดในฉาก จึงเล่าเรื่องครบในภาพนิ่งภาพเดียว
   ‼️ ไม่มีกรอบมือถือ (ผู้ใช้สั่ง) — เป็นการ์ดแก้วโปร่งลอยเอียงในฉาก ฉากเดินทางเกิดใน 3D (route.js) ไม่ใช่ในการ์ด
   ‼️ เนื้อในการ์ดใช้ token ของ UI ระบบจริง (surface-card · text-strong · brand-accent) — ดูเป็นหน้าจอจองของลูกค้าจริง */

.lp-story {
  position: relative;
  display: grid;
  justify-items: center;
  padding-block: var(--space-4);
  transition: opacity 600ms var(--ease-standard), translate 700ms var(--ease-enter), scale 700ms var(--ease-enter);
}

/* ช่วงเล่นในสนาม: มือถือถอยออกให้ฉาก 3D เป็นพระเอก */
.lp-story[data-away] { opacity: 0; translate: 0 var(--space-12); scale: .92; }

/* การ์ดแก้วลอยเอียงเล็กน้อยในฉาก — มุมเอียงให้รู้สึกว่าอยู่ในพื้นที่เดียวกับสนาม ไม่ใช่กล่องแปะบนจอ */
.lp-story { perspective: calc(var(--space-20) * 16); }

.lp-phone {
  position: relative;
  inline-size: min(100%, calc(var(--space-20) * 4.8));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--color-surface-card) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-stage-accent) 35%, transparent);
  backdrop-filter: blur(var(--space-3));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-stage-accent) 12%, transparent),
    0 var(--space-6) var(--space-16) color-mix(in srgb, var(--color-stage-accent) 22%, transparent);
  transform: rotateY(-9deg) rotateX(4deg);
  transform-origin: 70% 50%;
  animation: lp-hero-slide 720ms var(--ease-enter) 280ms backwards;
}

.lp-phone-screen {
  position: relative;
  min-block-size: calc(var(--space-20) * 4.6);
  overflow: hidden;
  border-radius: inherit;
  color: var(--color-text-normal);
  font-size: var(--text-sm);
}
.lp-phone-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border-block-end: 1px solid var(--color-border-normal);
}

.lp-phone-venue { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-bold); color: var(--color-text-strong); font-size: var(--text-xs); }
.lp-phone-venue .icon { color: var(--color-brand-accent); inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.lp-phone-demo { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ฉากในมือถือซ้อนกันที่เดียว — ฉากที่ใช้อยู่เลื่อนเข้ามา ฉากก่อนหน้าเลื่อนออกซ้าย */
.lp-story-screen {
  position: absolute;
  inset: calc(var(--space-10) + var(--space-2)) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  opacity: 0;
  translate: 12% 0;
  transition: opacity 420ms var(--ease-standard), translate 520ms var(--ease-enter);
  pointer-events: none;
}

.lp-story[data-story-step="venue"] [data-screen="venue"],
.lp-story[data-story-step="book"] [data-screen="book"],
.lp-story[data-story-step="pay"] [data-screen="pay"],
.lp-story[data-story-step="route"] [data-screen="route"],
.lp-story[data-story-step="map"] [data-screen="map"] { opacity: 1; translate: 0 0; }

.lp-story:not([data-story-step="venue"]) [data-screen="venue"],
.lp-story[data-story-step="pay"] [data-screen="book"],
.lp-story[data-story-step="route"] [data-screen="book"],
.lp-story[data-story-step="route"] [data-screen="pay"],
.lp-story[data-story-step="map"] [data-screen="book"],
.lp-story[data-story-step="map"] [data-screen="pay"],
.lp-story[data-story-step="map"] [data-screen="route"] { translate: -12% 0; }

.lp-story-title { font-weight: var(--weight-bold); color: var(--color-text-strong); font-size: var(--text-base); }

.lp-story-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.lp-story-day {
  display: grid;
  place-items: center;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-normal);
  background: var(--color-surface-card);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  line-height: var(--leading-tight);
}
.lp-story-day[data-active="true"] { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-brand-on-primary); }

.lp-story-court { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.lp-story-court .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-brand-accent); }

.lp-story-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.lp-story-slot {
  display: grid;
  place-items: center;
  block-size: var(--space-10);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-slot-free-border);
  background: var(--color-slot-free);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-text-strong);
  transition: background-color 360ms var(--ease-standard), border-color 360ms var(--ease-standard), color 360ms var(--ease-standard), scale 240ms var(--ease-standard);
}
.lp-story-slot[data-state="booked"] { background: var(--color-slot-blocked); border-color: var(--color-border-normal); color: var(--color-text-muted); text-decoration: line-through; }
/* ฉากเลือกสนาม: คอร์ทที่นิ้วกำลังชี้ = ขอบสีเน้น (ยังไม่เลือก) */
.lp-story-slot[data-pointed] { border-color: var(--color-brand-accent); color: var(--color-brand-accent); scale: 1.04; }
.lp-story-slot[data-picked] { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); scale: 1.06; }

.lp-story-cta {
  margin-block-start: auto;
  display: grid;
  place-items: center;
  min-block-size: 44px;
  border-radius: var(--radius-md);
  background: var(--color-brand-accent);
  color: var(--color-brand-on-accent);
  font-weight: var(--weight-bold);
  opacity: .45;
  transition: opacity 300ms var(--ease-standard), scale 160ms var(--ease-standard);
}
.lp-story[data-picked] .lp-story-cta { opacity: 1; }
.lp-story-cta[data-pressed] { scale: .96; }

.lp-story-amount { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-text-strong); font-variant-numeric: tabular-nums; }

.lp-story-qr {
  position: relative;
  align-self: center;
  inline-size: 70%;
  aspect-ratio: 1;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-normal);
  overflow: hidden;
}
.lp-story-qr svg { display: block; inline-size: 100%; block-size: 100%; fill: var(--color-text-strong); }
.lp-story-qr .lp-story-qr-finder { fill: none; stroke: var(--color-text-strong); stroke-width: 1; }
.lp-story-scan {
  position: absolute;
  inset-inline: var(--space-2);
  inset-block-start: 0;
  block-size: 2px;
  background: var(--color-brand-accent);
  box-shadow: 0 0 var(--space-3) var(--color-brand-accent);
  opacity: 0;
}
.lp-story[data-scanning] .lp-story-scan { opacity: 1; animation: lp-story-scan 900ms var(--ease-standard) infinite alternate backwards; }
@keyframes lp-story-scan { from { transform: translateY(var(--space-3)); } to { transform: translateY(calc(var(--space-20) * 1.6)); } }

.lp-story-status { display: flex; justify-content: center; font-size: var(--text-sm); color: var(--color-text-muted); }
.lp-story-status > span { display: inline-flex; align-items: center; gap: var(--space-1); }
.lp-story-status [data-when="paid"] { display: none; color: var(--color-state-success); font-weight: var(--weight-bold); }
.lp-story[data-paid] .lp-story-status [data-when="waiting"] { display: none; }
.lp-story[data-paid] .lp-story-status [data-when="paid"] { display: inline-flex; }

.lp-story-confirm {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-tint-success);
  color: var(--color-text-strong);
}
.lp-story-confirm strong { display: block; font-size: var(--text-sm); }
.lp-story-confirm small { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.lp-story-confirm-icon { display: grid; place-items: center; inline-size: var(--space-8); block-size: var(--space-8); border-radius: var(--radius-full); background: var(--color-state-success); color: var(--color-brand-on-accent); flex: none; }

.lp-story[data-story-step="route"] [data-screen="route"] { justify-content: center; }

/* ปุ่มเปิดแผนที่บนการ์ดยืนยัน — ไม่อยู่ท้ายการ์ดเหมือนปุ่มจอง อยู่ใต้การ์ดยืนยันเลย */
.lp-story-cta[data-story-map-open] { margin-block-start: 0; display: flex; justify-content: center; gap: var(--space-1); }
.lp-story-cta[data-story-map-open] .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* แผนที่นำทาง (ตกแต่ง) — ถนนสีพื้นการ์ดบนพื้นหมอก เส้นทางสีเน้นวาดตามรถ หมุดปลายทาง = สนาม */
.lp-story-map {
  flex: 1;
  min-block-size: calc(var(--space-20) * 2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-normal);
  background: var(--color-surface-mist);
  overflow: hidden;
}
.lp-story-map svg { display: block; inline-size: 100%; block-size: 100%; }
.lp-story-map-road { fill: none; stroke: var(--color-surface-card); stroke-linecap: round; }
.lp-story-map-route { fill: none; stroke: var(--color-brand-accent); stroke-linecap: round; stroke-linejoin: round; }
.lp-story-map-goal { fill: var(--color-brand-primary); stroke: var(--color-surface-card); }
.lp-story-map-car { fill: var(--color-brand-highlight); stroke: var(--color-brand-primary); }
.lp-story-map [data-map-route="1"], .lp-story-map [data-map-goal="1"],
.lp-story[data-venue="1"] .lp-story-map [data-map-route="0"], .lp-story[data-venue="1"] .lp-story-map [data-map-goal="0"] { display: none; }
.lp-story[data-venue="1"] .lp-story-map [data-map-route="1"], .lp-story[data-venue="1"] .lp-story-map [data-map-goal="1"] { display: inline; }

.lp-story-eta { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.lp-story-eta .icon { color: var(--color-brand-accent); inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* นิ้วแตะ — วงกลมนุ่มที่ story.js เลื่อนไปกดช่องเวลาและปุ่มจอง (translate ตั้งจาก JS) */
.lp-story-tap {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--space-8);
  block-size: var(--space-8);
  margin: calc(var(--space-4) * -1) 0 0 calc(var(--space-4) * -1);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-text-strong) 22%, transparent);
  border: 2px solid color-mix(in srgb, var(--color-surface-card) 80%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 999px) {
  .lp-phone { inline-size: min(100%, calc(var(--space-20) * 4.6)); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-story-screen, .lp-story, .lp-story-slot { transition: none; }
}

/* การจองหลายช่วง — ช่วงละบรรทัดในการ์ด "การจองของฉัน" (ผู้ใช้สั่ง 2026-10-12) */
.history-ranges { display: inline-flex; flex-direction: column; gap: var(--space-1); }

/* หน้ารายละเอียดก๊วน — วันที่ซ้าย ป้ายสถานะมุมขวา (ป้ายไม่ยืดเต็มแถว) */
.match-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.match-head h2 { margin: 0; }
.match-head .badge { flex: none; padding: var(--space-2) var(--space-4); }

/* การ์ดหาก๊วน — วันที่ซ้าย สถานะขวาบน · ราคาชิดขวาล่าง */
.match-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.match-tile-head > :last-child { flex: none; }
.match-tile-foot { justify-content: flex-end; }

/* หน้าหาก๊วน / รายละเอียดก๊วน — เว้นระยะระหว่างกล่องแจ้ง การ์ด และปุ่ม (ผู้ใช้ทัก 2026-10-12) */
.match-page { display: flex; flex-direction: column; gap: var(--space-5); }
.match-page > .lead { margin: 0; }
.match-page > .btn, .match-page > form, .match-page > .confirm-form { align-self: flex-start; }

/* ใบหลายช่วง — บรรทัดละช่วง ("07:00–08:00 · Court 2") ในกล่องสรุป · หน้าตรวจสอบ · หน้ายืนยัน · ตารางรายละเอียด */
.bk-summary-row dd, .bk-review dd, .bk-done-list dd, .bk-picked span, .detail-list dd { white-space: pre-line; }

/* การ์ดหาก๊วน — ป้ายสถานะสีทึบ เห็นชัด (ผู้ใช้สั่ง 2026-10-12): ของเรา/ร่วมแล้ว เขียว · ว่าง เหลือง · เต็ม แดง */
.match-tile-head .badge { font-weight: var(--weight-bold); }
.match-tile-head .badge[data-tone="success"] { background: var(--color-state-success); color: var(--color-brand-on-accent); }
.match-tile-head .badge[data-tone="highlight"] { background: var(--color-brand-highlight); color: var(--color-brand-on-highlight); }
.match-tile-head .badge[data-tone="danger"] { background: var(--color-state-danger); color: var(--color-brand-on-accent); }
.match-tile-head .badge::before { background: currentColor; }

/* หาก๊วน — ก๊วนที่เราเป็นเจ้าภาพ: ไฮไลต์ชื่อเจ้าภาพ · ก๊วนที่เราเข้าร่วม: แถวสีเขียว (ป้ายมุมขวายังบอกว่าง/เต็ม) */
.match-me:not([data-me="false"]) { padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--color-brand-highlight); color: var(--color-brand-on-highlight); font-weight: var(--weight-bold); }
.match-joined { color: var(--color-state-success); font-weight: var(--weight-bold); }

/* KPI — ส่วนที่แยกให้เห็นต่อท้ายหน่วย เช่น ค่าธรรมเนียมในยอดกำลังถอน */
.kpi-extra { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-muted); margin-inline-start: var(--space-1); }
/* การ์ดที่มีส่วนแยก (วงเล็บ) ให้ขึ้นบรรทัดใหม่ได้เมื่อการ์ดแคบ — ไม่ล้นออกนอกการ์ด */
.kpi-value:has(.kpi-extra) { white-space: normal; }
.kpi-extra { white-space: nowrap; display: inline-block; }

/* หน้าราคา — โมดูลที่ไม่รวมในแพ็กเกจ: สีจาง ไม่มีติ๊ก (ช่องไอคอนกันไว้ให้ตรงแนว) */
.lp-price-list li[data-included="false"] { color: var(--color-text-muted); opacity: .55; }
.lp-price-list .lp-price-off { display: inline-flex; visibility: hidden; }

/* หน้าเวลาว่าง (ปลายทาง LINE rich menu) · ลิงก์ rich menu ในตั้งค่า LINE */
.share-preview { margin: 0 0 var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-head); color: var(--color-text-normal); line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.free-times-card { max-inline-size: 40rem; margin-inline: auto; }
/* ตั้งค่า LINE — ลิงก์ rich menu: การ์ดเล็กคู่กัน (จอง | ข้อมูล) ต่อสาขา · ลิงก์ยาวตัดด้วย … (title + ปุ่มคัดลอกได้ลิงก์เต็ม) */
.rich-link-set { display: grid; gap: var(--space-2); }
.rich-link-name { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-normal); }
/* การ์ดเดียว (เปิดตอบในแชทแล้ว เหลือแค่ปุ่ม "จอง") ไม่ยืดเต็มแถว — กว้างสุดครึ่งแถว (ผู้ใช้สั่ง 2026-10-16) */
.rich-link-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), calc((100% - var(--space-3)) / 2))); }
@media screen and (max-width: 640px) { .rich-link-grid { grid-template-columns: 1fr; } }
.rich-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
}
.rich-link-icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--color-tint-success);
  color: var(--color-brand-primary);
}
.rich-link-text { display: grid; flex: 1; min-inline-size: 0; gap: 2px; }
.rich-link-text strong { font-size: var(--text-sm); }
.rich-link-text a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--color-text-muted); }
.rich-link-text a:hover { color: var(--color-brand-link); }

/* ตั้งค่า LINE — Channel ID | Secret คู่กัน: ช่องกรอกเต็มคอลัมน์ของตัวเอง (medium ปกติจำกัด 32ch) */
.line-settings .field-grid > .field[data-width="medium"] :is(input, select) { max-inline-size: 100%; }

/* ตั้งค่า LINE — ปุ่มทดสอบอยู่ในการ์ดสถานะ (ผู้ใช้สั่ง 2026-10-14): เส้นคั่นบาง · ข้อความสั้น · ปุ่มเต็มความกว้างคอลัมน์ */
.line-test-title { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); font-weight: 600; }
.line-test-form { display: grid; gap: var(--space-2); margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border-normal); }
.line-test-form p { margin: 0; }
.line-test-form .btn { justify-content: center; }
/* สวิตช์เปิด/ปิดของทั้งการ์ด มุมขวาหัวการ์ด (section.php $sectionControl) */
.card-control { align-self: center; }
.switch-inline { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; white-space: nowrap; font-size: var(--text-sm); }
.switch-inline:has(input:disabled) { cursor: not-allowed; opacity: .7; }
/* สวิตช์อยู่ขวาของข้อความ (หัวการ์ด ตั้งค่า LINE — ผู้ใช้สั่ง 2026-10-14) */
.switch-inline[data-switch-end="true"] { flex-direction: row-reverse; }
@media (max-width: 640px) {
  .card-head:has(> .card-control) { flex-wrap: wrap; }
  .card-head > .card-control { flex-basis: 100%; margin-inline-start: 0; }
}
.line-steps { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.line-steps-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.line-steps ol { display: grid; gap: var(--space-2); margin: 0; padding-inline-start: var(--space-5); font-size: var(--text-sm); }

/* ตั้งค่า LINE — คอลัมน์ขวา (สถานะ · วิธีผูก) แคบ: Callback URL ยาวต้องตัดบรรทัดได้ */
.line-settings .form-aside .info-bar strong { overflow-wrap: anywhere; min-inline-size: 0; flex: 1; }

/* ═══════════════════════════════════════ พิมพ์ตารางการจอง (calendar/print · layout print) — แบบรูปต้นแบบ
   ‼️ สีจาก token กลางเท่านั้น · ตอนพิมพ์ซ่อนแถบตัวกรอง · A4 แนวตั้ง ตัวอักษรเล็กให้ 7 วันลงหน้า */
.print-page { background: var(--color-surface-page); padding: var(--space-4); }
.print-toolbar {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3);
  margin-block-end: var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card);
}
.print-field { display: grid; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.print-field-search input { min-inline-size: 14rem; }
.print-courts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: 0; border: 0; font-size: var(--text-xs); }
.print-courts legend { color: var(--color-text-muted); padding: 0; margin-block-end: var(--space-1); }
.print-actions { display: flex; gap: var(--space-2); margin-inline-start: auto; }
.print-hint { flex-basis: 100%; margin: 0; }

.schedule-print { background: var(--color-surface-card); padding: var(--space-3); }
.schedule-print-head { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-block-end: var(--space-2); font-size: var(--text-sm); }
.schedule-print-table { inline-size: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.5rem; line-height: 1.2; }
.schedule-print-table th, .schedule-print-table td {
  border: 1px solid var(--color-border-strong); padding: 1px 2px; text-align: center; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.schedule-print-table td small { display: block; font-size: 0.85em; color: var(--color-text-muted); }
.schedule-print-hours th { background: var(--color-surface-head); font-weight: 600; }
.schedule-print-weekday { inline-size: 4.2rem; background: var(--color-surface-card) !important; font-size: var(--text-xs); white-space: normal !important; }
.schedule-print-weekday small { display: block; font-weight: 400; color: var(--color-text-muted); }
/* ช่องคอร์ท/เวลาแคบพอดีชื่อคอร์ท (ผู้ใช้สั่ง 2026-10-19 "ไม่ต้องยาวขนาดนั้น") */
.schedule-print-court { inline-size: 3rem; text-align: start !important; font-weight: 500; background: var(--color-surface-card); }
.schedule-print-hours th:nth-child(2) { inline-size: 3rem; }
.schedule-print-day + .schedule-print-day tr:first-child > * { border-block-start-width: 3px; }
/* สีแต่ละประเภท = ตัวแปร — ผู้ใช้เลือกเองได้ (app.js ตั้ง --print-<kind> ที่ .print-page) · ค่าเริ่มต้นตามธีม · class = ม่วงอ่อน */
.print-page {
  /* ‼️ สีเริ่มต้นเข้มขึ้น — พิมพ์ออกมาแล้วเห็นชัด (ผู้ใช้สั่ง 2026-10-30) · เดิมใช้ tint อ่อนเกือบขาว */
  /* ลดลงจากรอบก่อน (ผู้ใช้สั่ง 2026-10-30 "เข้มไปหน่อย") */
  --print-booked: var(--color-grid-booked);
  --print-coach: var(--color-grid-coach);
  --print-vip: var(--color-grid-vip);
  --print-class: var(--color-grid-class);
  --print-blocked: color-mix(in srgb, var(--color-state-warning) 30%, var(--color-surface-card));
  --print-closed: color-mix(in srgb, var(--color-text-muted) 20%, var(--color-surface-card));
}
.schedule-print-table td[data-kind="booked"], .schedule-print-legend [data-kind="booked"] { background: var(--print-booked); }
.schedule-print-table td[data-kind="coach"], .schedule-print-legend [data-kind="coach"] { background: var(--print-coach); }
.schedule-print-table td[data-kind="class"], .schedule-print-legend [data-kind="class"] { background: var(--print-class); }
.schedule-print-table td[data-kind="blocked"], .schedule-print-legend [data-kind="blocked"] { background: var(--print-blocked); }
.schedule-print-table td[data-kind="closed"], .schedule-print-legend [data-kind="closed"] { background: var(--print-closed); }
.print-colors { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; padding: 0; border: 0; flex-basis: 100%; }
.print-colors legend { float: left; margin-inline-end: var(--space-2); padding: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.print-color { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); cursor: pointer; }
.print-color input[type="color"] { inline-size: 28px; block-size: 28px; padding: 2px; border: 1px solid var(--color-border-normal); border-radius: var(--radius-sm, 6px); background: var(--color-surface-card); cursor: pointer; }
.schedule-print-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.schedule-print-legend li { display: inline-flex; align-items: center; gap: var(--space-1); }
.schedule-print-legend span { display: inline-block; inline-size: 0.8rem; block-size: 0.8rem; border: 1px solid var(--color-border-strong); }

.print-page-footer { margin-block-start: var(--space-2); font-size: var(--text-xs); }

@media print {
  /* ไม่ตั้ง size — ให้เลือกแนวตั้ง/นอนในหน้าต่างพิมพ์ของ browser (ผู้ใช้สั่ง 2026-10-16) */
  @page { margin: 8mm; }
  .print-page-head { display: none !important; }
  .print-page { background: none; padding: 0; }
  .print-toolbar { display: none !important; }
  .schedule-print { padding: 0; }
  .schedule-print-table th, .schedule-print-table td, .schedule-print-legend span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .schedule-print-day { break-inside: avoid; }
}
/* ชื่อย่อ (ชื่อต้น · วันย่อ) ใช้เฉพาะพิมพ์แนวตั้ง — จอและแนวนอนแสดงเต็มเหมือนเดิม */
.schedule-print .sp-short { display: none; }
@media print and (orientation: portrait) {
  /* แนวตั้ง (ผู้ใช้สั่ง 2026-10-19): บีบช่องวัน/คอร์ท · ชื่อต้นอย่างเดียว · Academy Class แสดงเต็ม (ตัดบรรทัดได้) */
  .schedule-print .sp-full { display: none; }
  .schedule-print .sp-short { display: inline; }
  .schedule-print small.sp-short { display: block; }
  .schedule-print-weekday { inline-size: 2.2rem; padding: 1px !important; font-size: 0.55rem; }
  .schedule-print-weekday small { font-size: 0.5rem; }
  .schedule-print-court, .schedule-print-hours th:nth-child(2) { inline-size: 2.6rem; }
  .schedule-print-table { font-size: 0.45rem; }
  .schedule-print-table td[data-kind="class"] { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.05; }
}

/* ═══════════════════════════════════════ ธีมสีหน้าลูกค้าต่อองค์กร (098 · TenantThemeService · ผู้ใช้สั่ง 2026-10-14)

   layout public + layout app (หลังบ้านของเจ้าของ · ไม่ใช่หน้าทีม OMC) ใส่ data-tenant-theme="<key>" ที่ <html> → ทับเฉพาะ token สีปุ่มหลัก/ลิงก์/พื้นอ่อนของแบรนด์
   ‼️ ค่าสีอยู่ใน DESIGN.md (color.tenant.*) → token --color-tenant-* (โหมดมืดสลับให้เอง) — ที่นี่อ้าง var() เท่านั้น
   ‼️ 'omc' = ไม่ใส่ attribute (สีเดิม)
   ‼️ selector ต้องแรงกว่า :root[data-theme="dark"] / :root:not([data-theme="light"]) ของบล็อก token โหมดมืด (0,2,0) — ไม่งั้นโหมดมืดกลับเป็นเขียว */
:root[data-tenant-theme="red"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-red); --color-brand-on-accent: var(--color-tenant-red-on); --color-brand-primary: var(--color-tenant-red); --color-brand-on-primary: var(--color-tenant-red-on); --color-brand-link: var(--color-tenant-red); --color-brand-soft: var(--color-tenant-red-soft); --color-brand-wash: var(--color-tenant-red-wash); --color-focus: var(--color-tenant-red); }
:root[data-tenant-theme="maroon"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-maroon); --color-brand-on-accent: var(--color-tenant-maroon-on); --color-brand-primary: var(--color-tenant-maroon); --color-brand-on-primary: var(--color-tenant-maroon-on); --color-brand-link: var(--color-tenant-maroon); --color-brand-soft: var(--color-tenant-maroon-soft); --color-brand-wash: var(--color-tenant-maroon-wash); --color-focus: var(--color-tenant-maroon); }
:root[data-tenant-theme="orange"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-orange); --color-brand-on-accent: var(--color-tenant-orange-on); --color-brand-primary: var(--color-tenant-orange); --color-brand-on-primary: var(--color-tenant-orange-on); --color-brand-link: var(--color-tenant-orange); --color-brand-soft: var(--color-tenant-orange-soft); --color-brand-wash: var(--color-tenant-orange-wash); --color-focus: var(--color-tenant-orange); }
:root[data-tenant-theme="gold"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-gold); --color-brand-on-accent: var(--color-tenant-gold-on); --color-brand-primary: var(--color-tenant-gold); --color-brand-on-primary: var(--color-tenant-gold-on); --color-brand-link: var(--color-tenant-gold); --color-brand-soft: var(--color-tenant-gold-soft); --color-brand-wash: var(--color-tenant-gold-wash); --color-focus: var(--color-tenant-gold); }
:root[data-tenant-theme="green"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-green); --color-brand-on-accent: var(--color-tenant-green-on); --color-brand-primary: var(--color-tenant-green); --color-brand-on-primary: var(--color-tenant-green-on); --color-brand-link: var(--color-tenant-green); --color-brand-soft: var(--color-tenant-green-soft); --color-brand-wash: var(--color-tenant-green-wash); --color-focus: var(--color-tenant-green); }
:root[data-tenant-theme="teal"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-teal); --color-brand-on-accent: var(--color-tenant-teal-on); --color-brand-primary: var(--color-tenant-teal); --color-brand-on-primary: var(--color-tenant-teal-on); --color-brand-link: var(--color-tenant-teal); --color-brand-soft: var(--color-tenant-teal-soft); --color-brand-wash: var(--color-tenant-teal-wash); --color-focus: var(--color-tenant-teal); }
:root[data-tenant-theme="blue"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-blue); --color-brand-on-accent: var(--color-tenant-blue-on); --color-brand-primary: var(--color-tenant-blue); --color-brand-on-primary: var(--color-tenant-blue-on); --color-brand-link: var(--color-tenant-blue); --color-brand-soft: var(--color-tenant-blue-soft); --color-brand-wash: var(--color-tenant-blue-wash); --color-focus: var(--color-tenant-blue); }
:root[data-tenant-theme="navy"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-navy); --color-brand-on-accent: var(--color-tenant-navy-on); --color-brand-primary: var(--color-tenant-navy); --color-brand-on-primary: var(--color-tenant-navy-on); --color-brand-link: var(--color-tenant-navy); --color-brand-soft: var(--color-tenant-navy-soft); --color-brand-wash: var(--color-tenant-navy-wash); --color-focus: var(--color-tenant-navy); }
:root[data-tenant-theme="violet"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-violet); --color-brand-on-accent: var(--color-tenant-violet-on); --color-brand-primary: var(--color-tenant-violet); --color-brand-on-primary: var(--color-tenant-violet-on); --color-brand-link: var(--color-tenant-violet); --color-brand-soft: var(--color-tenant-violet-soft); --color-brand-wash: var(--color-tenant-violet-wash); --color-focus: var(--color-tenant-violet); }
:root[data-tenant-theme="magenta"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-magenta); --color-brand-on-accent: var(--color-tenant-magenta-on); --color-brand-primary: var(--color-tenant-magenta); --color-brand-on-primary: var(--color-tenant-magenta-on); --color-brand-link: var(--color-tenant-magenta); --color-brand-soft: var(--color-tenant-magenta-soft); --color-brand-wash: var(--color-tenant-magenta-wash); --color-focus: var(--color-tenant-magenta); }
:root[data-tenant-theme="pink"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-pink); --color-brand-on-accent: var(--color-tenant-pink-on); --color-brand-primary: var(--color-tenant-pink); --color-brand-on-primary: var(--color-tenant-pink-on); --color-brand-link: var(--color-tenant-pink); --color-brand-soft: var(--color-tenant-pink-soft); --color-brand-wash: var(--color-tenant-pink-wash); --color-focus: var(--color-tenant-pink); }
:root[data-tenant-theme="brown"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-brown); --color-brand-on-accent: var(--color-tenant-brown-on); --color-brand-primary: var(--color-tenant-brown); --color-brand-on-primary: var(--color-tenant-brown-on); --color-brand-link: var(--color-tenant-brown); --color-brand-soft: var(--color-tenant-brown-soft); --color-brand-wash: var(--color-tenant-brown-wash); --color-focus: var(--color-tenant-brown); }
:root[data-tenant-theme="graphite"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-graphite); --color-brand-on-accent: var(--color-tenant-graphite-on); --color-brand-primary: var(--color-tenant-graphite); --color-brand-on-primary: var(--color-tenant-graphite-on); --color-brand-link: var(--color-tenant-graphite); --color-brand-soft: var(--color-tenant-graphite-soft); --color-brand-wash: var(--color-tenant-graphite-wash); --color-focus: var(--color-tenant-graphite); }
:root[data-tenant-theme="grape"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-grape); --color-brand-on-accent: var(--color-tenant-grape-on); --color-brand-primary: var(--color-tenant-grape); --color-brand-on-primary: var(--color-tenant-grape-on); --color-brand-link: var(--color-tenant-grape); --color-brand-soft: var(--color-tenant-grape-soft); --color-brand-wash: var(--color-tenant-grape-wash); --color-focus: var(--color-tenant-grape); }
:root[data-tenant-theme="custom"][data-tenant-theme] { --color-brand-accent: var(--color-tenant-custom); --color-brand-on-accent: var(--color-tenant-custom-on); --color-brand-primary: var(--color-tenant-custom-primary, var(--color-tenant-custom)); --color-brand-on-primary: var(--color-tenant-custom-on-primary, var(--color-tenant-custom-on)); --tenant-button: var(--color-tenant-custom-primary, var(--color-tenant-custom)); --tenant-button-on: var(--color-tenant-custom-on-primary, var(--color-tenant-custom-on)); --color-brand-link: var(--color-tenant-custom); --color-brand-soft: var(--color-tenant-custom-soft); --color-brand-wash: var(--color-tenant-custom-wash); --color-focus: var(--color-tenant-custom); }

/* ‼️ hover / ตัวที่เลือกอยู่ ที่เดิมใช้พื้นเขียวอ่อน (tint-success · surface-mist) — ในองค์กรที่ตั้งธีม ใช้พื้นอ่อนของธีมแทน
      (ผู้ใช้สั่ง 2026-10-14 "ระวังเรื่องสี hover") · สีเขียวที่หมายถึง "สำเร็จ/ชำระแล้ว" (badge · callout) ไม่ถูกเปลี่ยน
      ตัวหนังสือ brand-accent/link บน brand-soft ตรวจ contrast ≥ 4.5:1 แล้วทุกชุด · ปุ่มหลักตอน hover ≥ 6.6:1 */
:root[data-tenant-theme][data-tenant-theme] :is(
  .appbar-menu-item[aria-current],
  .venue-option[data-current="true"],
  .slot:hover:not(:disabled),
  .auth-help:hover,
  .choice-card:has(input:checked),
  .pagination [aria-current="page"],
  .branch-card[aria-current="true"],
  .bk-chip:is([aria-current="true"], [aria-pressed="true"]),
  .bk-time[data-in-range]:not([data-in-range="start"]),
  .bk-pay-option:has(input:checked),
  .pay-method:has(input:checked) .pay-method-icon,
  .wallet-adjust .bk-chip:has(input:checked), .wallet-topup .bk-chip:has(input:checked),
  .topup-preset:has(input:checked),
  .chip-tab[aria-current="page"],
  .public-account:hover, .public-account:focus-visible,
  .auth-option[data-active="true"],
  .bk-mode[aria-current="true"],
  .bk-coach[data-selected="true"],
  .appnav-drawer .public-drawer-link[aria-current="page"],
  .mode-option[data-current="1"],
  .perm-role-chip[aria-pressed="true"],
  .perm-module .matrix-table tbody tr:hover :is(td, th),
  .report-links a:hover,
  .channel-option:has(input:checked),
  .audit-range .report-chip[aria-current="true"],
  .stepper-item[data-state="current"]
) { background: var(--color-brand-soft); }
:root[data-tenant-theme][data-tenant-theme] { --color-surface-mist: var(--color-brand-soft); }

/* ‼️ กล่องไอคอน / แถบข้อมูล ที่ตัวไอคอนเป็นสีแบรนด์บนพื้นเขียวอ่อน — ในองค์กรที่ตั้งธีม พื้นต้องเป็นพื้นอ่อนของธีมด้วย
      ไม่งั้นได้ไอคอนสีธีมบนพื้นเขียว (ผู้ใช้ทัก 2026-10-14: ไอคอนโปรไฟล์ · หัวการ์ด · แถบ "เติมเครดิตได้ที่เคาน์เตอร์")
      รายการนี้มาจาก rule ที่ background = tint-success/surface-mist และ color = brand-* · badge/callout "สำเร็จ" ไม่อยู่ในนี้ */
:root[data-tenant-theme][data-tenant-theme] :is(
  .appbar-menu-item[aria-current],
  .lp-card-icon,
  .auth-benefit-icon,
  .lp-venue-tag,
  .lp-contact-icon,
  .lp-benefit-icon,
  .plan-card-icon,
  .summary-card-icon,
  .page-head-icon,
  .card-head-icon,
  .kpi[data-tone="success"] .kpi-icon,
  .kpi-delta[data-dir="up"],
  .table .cell-icon,
  .pagination [aria-current="page"],
  .preview-flags li,
  .share-bar-icon,
  [data-copy][data-copied="true"],
  .bk-chip:is([aria-current="true"], [aria-pressed="true"]),
  .bk-time[data-in-range]:not([data-in-range="start"]),
  .pay-method:has(input:checked) .pay-method-icon,
  .wallet-adjust .bk-chip:has(input:checked), .wallet-topup .bk-chip:has(input:checked),
  .venue-home-tabs .btn-secondary,
  .profile-avatar,
  .credit-counter,
  .portal-avatar,
  .chip-tab[aria-current="page"],
  .signin-mark,
  .bk-mode-icon,
  .coach-stat-icon,
  .appnav-drawer .public-drawer-link[aria-current="page"],
  .passkey-icon,
  .perm-role-chip[aria-pressed="true"],
  .perm-count,
  .channel-option-icon,
  .audit-range .report-chip[aria-current="true"],
  .help-card-icon,
  .task-type-icon,
  .feed-icon,
  .kpi-delta[data-invert="true"][data-dir="down"],
  .rich-link-icon,
  .info-bar:not([data-tone])
) { background: var(--color-brand-soft); }

/* ‼️ พื้นหลังที่เปลี่ยนได้ตามธีม (ผู้ใช้สั่ง 2026-10-14 "พื้นหลังที่สามารถเปลี่ยนสีได้ให้ตั้งตามธีม")
      พื้นหน้า · พื้นยก · หัวตาราง · พื้นคอร์ท = เทากลางผสมสีธีมจางๆ (DESIGN.md color.tenant.*Page/Raised/Head/Court)
      พื้นเขียวอ่อนที่ไม่ได้แปลว่า "สำเร็จ" = พื้นอ่อนของธีม · ไม่เปลี่ยน: รูปสนาม · badge/callout สถานะ · จุด "ว่าง" สีเขียว */
:root[data-tenant-theme="red"][data-tenant-theme] { --color-surface-page: var(--color-tenant-red-page); --color-surface-raised: var(--color-tenant-red-raised); --color-surface-head: var(--color-tenant-red-head); --color-surface-court: var(--color-tenant-red-court); --color-tint-neutral: var(--color-tenant-red-raised); }
:root[data-tenant-theme="maroon"][data-tenant-theme] { --color-surface-page: var(--color-tenant-maroon-page); --color-surface-raised: var(--color-tenant-maroon-raised); --color-surface-head: var(--color-tenant-maroon-head); --color-surface-court: var(--color-tenant-maroon-court); --color-tint-neutral: var(--color-tenant-maroon-raised); }
:root[data-tenant-theme="orange"][data-tenant-theme] { --color-surface-page: var(--color-tenant-orange-page); --color-surface-raised: var(--color-tenant-orange-raised); --color-surface-head: var(--color-tenant-orange-head); --color-surface-court: var(--color-tenant-orange-court); --color-tint-neutral: var(--color-tenant-orange-raised); }
:root[data-tenant-theme="gold"][data-tenant-theme] { --color-surface-page: var(--color-tenant-gold-page); --color-surface-raised: var(--color-tenant-gold-raised); --color-surface-head: var(--color-tenant-gold-head); --color-surface-court: var(--color-tenant-gold-court); --color-tint-neutral: var(--color-tenant-gold-raised); }
:root[data-tenant-theme="green"][data-tenant-theme] { --color-surface-page: var(--color-tenant-green-page); --color-surface-raised: var(--color-tenant-green-raised); --color-surface-head: var(--color-tenant-green-head); --color-surface-court: var(--color-tenant-green-court); --color-tint-neutral: var(--color-tenant-green-raised); }
:root[data-tenant-theme="teal"][data-tenant-theme] { --color-surface-page: var(--color-tenant-teal-page); --color-surface-raised: var(--color-tenant-teal-raised); --color-surface-head: var(--color-tenant-teal-head); --color-surface-court: var(--color-tenant-teal-court); --color-tint-neutral: var(--color-tenant-teal-raised); }
:root[data-tenant-theme="blue"][data-tenant-theme] { --color-surface-page: var(--color-tenant-blue-page); --color-surface-raised: var(--color-tenant-blue-raised); --color-surface-head: var(--color-tenant-blue-head); --color-surface-court: var(--color-tenant-blue-court); --color-tint-neutral: var(--color-tenant-blue-raised); }
:root[data-tenant-theme="navy"][data-tenant-theme] { --color-surface-page: var(--color-tenant-navy-page); --color-surface-raised: var(--color-tenant-navy-raised); --color-surface-head: var(--color-tenant-navy-head); --color-surface-court: var(--color-tenant-navy-court); --color-tint-neutral: var(--color-tenant-navy-raised); }
:root[data-tenant-theme="violet"][data-tenant-theme] { --color-surface-page: var(--color-tenant-violet-page); --color-surface-raised: var(--color-tenant-violet-raised); --color-surface-head: var(--color-tenant-violet-head); --color-surface-court: var(--color-tenant-violet-court); --color-tint-neutral: var(--color-tenant-violet-raised); }
:root[data-tenant-theme="magenta"][data-tenant-theme] { --color-surface-page: var(--color-tenant-magenta-page); --color-surface-raised: var(--color-tenant-magenta-raised); --color-surface-head: var(--color-tenant-magenta-head); --color-surface-court: var(--color-tenant-magenta-court); --color-tint-neutral: var(--color-tenant-magenta-raised); }
:root[data-tenant-theme="pink"][data-tenant-theme] { --color-surface-page: var(--color-tenant-pink-page); --color-surface-raised: var(--color-tenant-pink-raised); --color-surface-head: var(--color-tenant-pink-head); --color-surface-court: var(--color-tenant-pink-court); --color-tint-neutral: var(--color-tenant-pink-raised); }
:root[data-tenant-theme="brown"][data-tenant-theme] { --color-surface-page: var(--color-tenant-brown-page); --color-surface-raised: var(--color-tenant-brown-raised); --color-surface-head: var(--color-tenant-brown-head); --color-surface-court: var(--color-tenant-brown-court); --color-tint-neutral: var(--color-tenant-brown-raised); }
:root[data-tenant-theme="graphite"][data-tenant-theme] { --color-surface-page: var(--color-tenant-graphite-page); --color-surface-raised: var(--color-tenant-graphite-raised); --color-surface-head: var(--color-tenant-graphite-head); --color-surface-court: var(--color-tenant-graphite-court); --color-tint-neutral: var(--color-tenant-graphite-raised); }
:root[data-tenant-theme="grape"][data-tenant-theme] { --color-surface-page: var(--color-tenant-grape-page); --color-surface-raised: var(--color-tenant-grape-raised); --color-surface-head: var(--color-tenant-grape-head); --color-surface-court: var(--color-tenant-grape-court); --color-tint-neutral: var(--color-tenant-grape-raised); }
:root[data-tenant-theme="custom"][data-tenant-theme] { --color-surface-page: var(--color-tenant-custom-page); --color-surface-raised: var(--color-tenant-custom-raised); --color-surface-head: var(--color-tenant-custom-head); --color-surface-court: var(--color-tenant-custom-court); --color-tint-neutral: var(--color-tenant-custom-raised); }
:root[data-tenant-theme][data-tenant-theme] :is(
  .venue-option[data-current="true"],
  .slot:hover:not(:disabled),
  .lp-addon[data-tone="soft"],
  .lp-compare-col[data-tone="accent"],
  .mockup-cell[data-state="soft"],
  .mockup-bars span,
  .auth-help:hover,
  .lp-featured,
  .plan-module[data-included="true"],
  .summary-note,
  .choice-card:has(input:checked),
  .summary-card-tip,
  .highlight-strip,
  .branch-hint,
  .branch-card[aria-current="true"],
  .pay-methods,
  .pay-methods-single,
  .venue-home-info .hero-eyebrow,
  .credit-terms,
  .topup-preset:has(input:checked),
  .topup-channel,
  .public-account:hover, .public-account:focus-visible,
  .auth-option[data-active="true"],
  .detail-list[data-icon-box="true"] .detail-icon,
  .bk-mode[aria-current="true"],
  .bk-coach[data-selected="true"],
  .coach-photo,
  .coach-slot,
  .coach-weekly-note,
  .public-drawer-customer,
  .coach-photo-box,
  .role-guide-tip,
  .role-guide-for,
  .mode-option[data-current="1"],
  .detail-list[data-layout="tiles"] .detail-icon,
  .status-strip,
  .perm-module .matrix-table tbody tr:hover :is(td, th),
  .report-links a:hover,
  .channel-option:has(input:checked),
  .credit-balance,
  .lp-story-confirm,
  .lp-story-map
) { background: var(--color-brand-soft); }

/* ‼️ สีในตารางจอง/ตารางคอร์ท (ว่าง · จองแล้ว · ที่เลือก · hover) ตายตัว ไม่ตามธีมองค์กร — ผู้ใช้สั่ง 2026-10-15
      "สีในตารางต้องทำตายตัว ไม่ใช่เปลี่ยนตามธีม เข้าใจผิดหมดพอทั้งธีมสีแดง" · ใช้ --color-slot-* เท่านั้น ห้ามใช้ --color-brand-* ในตาราง */

/* ‼️ ตัวหนังสือธรรมดาไม่เปลี่ยนตามธีม — เฉพาะจุดที่ agent ตรวจเจอ (2026-10-14 · หน้าลูกค้า + /app 48 หน้า)
      ปุ่มทึบ · ไอคอน · ลิงก์ · เมนู/แท็บ/ชิปที่เลือกอยู่ · ภาพประกอบ ยังตามธีมเหมือนเดิม (ไม่ใช่กฎ "ดำทุกอย่าง" ที่เคยพังปุ่ม)
      badge "สำเร็จ" กับตัวเลขขึ้น = สีสถานะเขียวเสมอ — ธีมแดงห้ามทำให้ "จ่ายแล้ว" ดูเป็น error */
:root[data-tenant-theme][data-tenant-theme][data-tenant-theme] :is(.badge[data-tone="success"], .kpi-delta[data-dir="up"]) { color: var(--color-state-success); }
:root[data-tenant-theme][data-tenant-theme][data-tenant-theme] :is(
  .bk-summary-total strong, .bk-bar-text strong, .bk-done-total dd, .credit-summary-total dd,
  .bk-picked, .bk-picked span, .stepper-item[data-state="done"] .stepper-label,
  .venue-home-tabs .btn-secondary, .venue-home-hours div[data-today="true"] :is(dt, dd),
  .action-banner-text strong, .perm-count, .avatar[data-tone="5"]
) { color: var(--color-text-strong); }
:root[data-tenant-theme][data-tenant-theme][data-tenant-theme] :is(.mini-stat:not([data-tone]) .mini-stat-label, .counter-slot small) { color: var(--color-text-normal); }

/* ตัวอย่างหน้าลูกค้าในหน้าตั้งค่าธีม — เปลี่ยนตามตัวเลือกที่ติ๊กทันที (ไม่ใช้ JS) · ใช้ชุด token เดียวกับด้านบน */
.theme-settings:has(input[name="theme_color"][value="red"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-red); --color-brand-on-accent: var(--color-tenant-red-on); --color-brand-primary: var(--color-tenant-red); --color-brand-on-primary: var(--color-tenant-red-on); --color-brand-link: var(--color-tenant-red); --color-brand-soft: var(--color-tenant-red-soft); --color-brand-wash: var(--color-tenant-red-wash); --color-focus: var(--color-tenant-red); }
.theme-settings:has(input[name="theme_color"][value="maroon"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-maroon); --color-brand-on-accent: var(--color-tenant-maroon-on); --color-brand-primary: var(--color-tenant-maroon); --color-brand-on-primary: var(--color-tenant-maroon-on); --color-brand-link: var(--color-tenant-maroon); --color-brand-soft: var(--color-tenant-maroon-soft); --color-brand-wash: var(--color-tenant-maroon-wash); --color-focus: var(--color-tenant-maroon); }
.theme-settings:has(input[name="theme_color"][value="orange"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-orange); --color-brand-on-accent: var(--color-tenant-orange-on); --color-brand-primary: var(--color-tenant-orange); --color-brand-on-primary: var(--color-tenant-orange-on); --color-brand-link: var(--color-tenant-orange); --color-brand-soft: var(--color-tenant-orange-soft); --color-brand-wash: var(--color-tenant-orange-wash); --color-focus: var(--color-tenant-orange); }
.theme-settings:has(input[name="theme_color"][value="gold"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-gold); --color-brand-on-accent: var(--color-tenant-gold-on); --color-brand-primary: var(--color-tenant-gold); --color-brand-on-primary: var(--color-tenant-gold-on); --color-brand-link: var(--color-tenant-gold); --color-brand-soft: var(--color-tenant-gold-soft); --color-brand-wash: var(--color-tenant-gold-wash); --color-focus: var(--color-tenant-gold); }
.theme-settings:has(input[name="theme_color"][value="green"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-green); --color-brand-on-accent: var(--color-tenant-green-on); --color-brand-primary: var(--color-tenant-green); --color-brand-on-primary: var(--color-tenant-green-on); --color-brand-link: var(--color-tenant-green); --color-brand-soft: var(--color-tenant-green-soft); --color-brand-wash: var(--color-tenant-green-wash); --color-focus: var(--color-tenant-green); }
.theme-settings:has(input[name="theme_color"][value="teal"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-teal); --color-brand-on-accent: var(--color-tenant-teal-on); --color-brand-primary: var(--color-tenant-teal); --color-brand-on-primary: var(--color-tenant-teal-on); --color-brand-link: var(--color-tenant-teal); --color-brand-soft: var(--color-tenant-teal-soft); --color-brand-wash: var(--color-tenant-teal-wash); --color-focus: var(--color-tenant-teal); }
.theme-settings:has(input[name="theme_color"][value="blue"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-blue); --color-brand-on-accent: var(--color-tenant-blue-on); --color-brand-primary: var(--color-tenant-blue); --color-brand-on-primary: var(--color-tenant-blue-on); --color-brand-link: var(--color-tenant-blue); --color-brand-soft: var(--color-tenant-blue-soft); --color-brand-wash: var(--color-tenant-blue-wash); --color-focus: var(--color-tenant-blue); }
.theme-settings:has(input[name="theme_color"][value="navy"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-navy); --color-brand-on-accent: var(--color-tenant-navy-on); --color-brand-primary: var(--color-tenant-navy); --color-brand-on-primary: var(--color-tenant-navy-on); --color-brand-link: var(--color-tenant-navy); --color-brand-soft: var(--color-tenant-navy-soft); --color-brand-wash: var(--color-tenant-navy-wash); --color-focus: var(--color-tenant-navy); }
.theme-settings:has(input[name="theme_color"][value="violet"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-violet); --color-brand-on-accent: var(--color-tenant-violet-on); --color-brand-primary: var(--color-tenant-violet); --color-brand-on-primary: var(--color-tenant-violet-on); --color-brand-link: var(--color-tenant-violet); --color-brand-soft: var(--color-tenant-violet-soft); --color-brand-wash: var(--color-tenant-violet-wash); --color-focus: var(--color-tenant-violet); }
.theme-settings:has(input[name="theme_color"][value="magenta"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-magenta); --color-brand-on-accent: var(--color-tenant-magenta-on); --color-brand-primary: var(--color-tenant-magenta); --color-brand-on-primary: var(--color-tenant-magenta-on); --color-brand-link: var(--color-tenant-magenta); --color-brand-soft: var(--color-tenant-magenta-soft); --color-brand-wash: var(--color-tenant-magenta-wash); --color-focus: var(--color-tenant-magenta); }
.theme-settings:has(input[name="theme_color"][value="pink"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-pink); --color-brand-on-accent: var(--color-tenant-pink-on); --color-brand-primary: var(--color-tenant-pink); --color-brand-on-primary: var(--color-tenant-pink-on); --color-brand-link: var(--color-tenant-pink); --color-brand-soft: var(--color-tenant-pink-soft); --color-brand-wash: var(--color-tenant-pink-wash); --color-focus: var(--color-tenant-pink); }
.theme-settings:has(input[name="theme_color"][value="brown"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-brown); --color-brand-on-accent: var(--color-tenant-brown-on); --color-brand-primary: var(--color-tenant-brown); --color-brand-on-primary: var(--color-tenant-brown-on); --color-brand-link: var(--color-tenant-brown); --color-brand-soft: var(--color-tenant-brown-soft); --color-brand-wash: var(--color-tenant-brown-wash); --color-focus: var(--color-tenant-brown); }
.theme-settings:has(input[name="theme_color"][value="graphite"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-graphite); --color-brand-on-accent: var(--color-tenant-graphite-on); --color-brand-primary: var(--color-tenant-graphite); --color-brand-on-primary: var(--color-tenant-graphite-on); --color-brand-link: var(--color-tenant-graphite); --color-brand-soft: var(--color-tenant-graphite-soft); --color-brand-wash: var(--color-tenant-graphite-wash); --color-focus: var(--color-tenant-graphite); }
.theme-settings:has(input[name="theme_color"][value="grape"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-grape); --color-brand-on-accent: var(--color-tenant-grape-on); --color-brand-primary: var(--color-tenant-grape); --color-brand-on-primary: var(--color-tenant-grape-on); --color-brand-link: var(--color-tenant-grape); --color-brand-soft: var(--color-tenant-grape-soft); --color-brand-wash: var(--color-tenant-grape-wash); --color-focus: var(--color-tenant-grape); }
.theme-settings:has(input[name="theme_color"][value="custom"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-custom); --color-brand-on-accent: var(--color-tenant-custom-on); --color-brand-primary: var(--color-tenant-custom); --color-brand-on-primary: var(--color-tenant-custom-on); --color-brand-link: var(--color-tenant-custom); --color-brand-soft: var(--color-tenant-custom-soft); --color-brand-wash: var(--color-tenant-custom-wash); --color-focus: var(--color-tenant-custom); }
.theme-settings:has(input[name="theme_color"][value="omc"]:checked) .theme-preview { --color-brand-accent: var(--color-tenant-omc); --color-brand-on-accent: var(--color-tenant-omc-on); --color-brand-primary: var(--color-tenant-omc-primary); --color-brand-on-primary: var(--color-tenant-omc-on-primary); --color-brand-link: var(--color-tenant-omc); --color-brand-soft: var(--color-tenant-omc-soft); --color-brand-wash: var(--color-tenant-omc-wash); --color-focus: var(--color-tenant-omc-booked); }
/* ปุ่มเลือกชุดสีในหน้าตั้งค่า — วงกลมสีตัวอย่าง */
.theme-swatch[data-swatch="omc"] { --swatch: var(--color-tenant-omc); }
.theme-swatch[data-swatch="red"] { --swatch: var(--color-tenant-red); }
.theme-swatch[data-swatch="maroon"] { --swatch: var(--color-tenant-maroon); }
.theme-swatch[data-swatch="orange"] { --swatch: var(--color-tenant-orange); }
.theme-swatch[data-swatch="gold"] { --swatch: var(--color-tenant-gold); }
.theme-swatch[data-swatch="green"] { --swatch: var(--color-tenant-green); }
.theme-swatch[data-swatch="teal"] { --swatch: var(--color-tenant-teal); }
.theme-swatch[data-swatch="blue"] { --swatch: var(--color-tenant-blue); }
.theme-swatch[data-swatch="navy"] { --swatch: var(--color-tenant-navy); }
.theme-swatch[data-swatch="violet"] { --swatch: var(--color-tenant-violet); }
.theme-swatch[data-swatch="magenta"] { --swatch: var(--color-tenant-magenta); }
.theme-swatch[data-swatch="pink"] { --swatch: var(--color-tenant-pink); }
.theme-swatch[data-swatch="brown"] { --swatch: var(--color-tenant-brown); }
.theme-swatch[data-swatch="graphite"] { --swatch: var(--color-tenant-graphite); }
.theme-swatch[data-swatch="grape"] { --swatch: var(--color-tenant-grape); }
.theme-swatch[data-swatch="custom"] { --swatch: var(--color-tenant-custom-primary, var(--color-tenant-custom)); } /* สีตรงตามที่เลือก (174) */
.theme-preview { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-page); }
.theme-preview-head { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.theme-preview-head .icon { color: var(--color-brand-primary); }
.theme-preview-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); }
.theme-preview-slots span { padding: var(--space-2) 0; text-align: center; font-size: var(--text-sm); border: 1px solid var(--color-slot-free-border); border-radius: var(--radius-sm); background: var(--color-slot-free); color: var(--color-text-normal); }
/* ช่องที่เลือกในตัวอย่าง = สีธีม เหมือนช่องที่ลูกค้าเลือกในหน้าจองจริง (ผู้ใช้ทัก 2026-10-21 "ตัวอย่างยังเขียว ไม่เปลี่ยนตามธีม") — เดิม slot-booked เขียวตายตัว */
.theme-preview-slots span[data-picked] { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); font-weight: var(--weight-bold); }
.theme-preview-chip { justify-self: start; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-brand-wash); color: var(--color-brand-link); font-size: var(--text-sm); }
.theme-preview a { color: var(--color-brand-link); }
.theme-preview .btn { pointer-events: none; }
/* ปุ่มบันทึกอยู่ในการ์ดอยู่แล้ว — ไม่ต้องมีกรอบซ้อน (ผู้ใช้ทัก 2026-10-14) */
.theme-settings .card-body .form-actions { padding: 0; border: 0; box-shadow: none; background: none; }
.theme-hint { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; }
.theme-hint .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); margin-block-start: 2px; }
/* ตัวเลือกธีม 3 คอลัมน์ทุกขนาดจอ — 15 ชุด = 5 แถวเต็ม (ผู้ใช้สั่ง 2026-10-15 "จัดให้อยู่ layout นี้ตลอด") */
.theme-picker { display: grid; gap: var(--space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.theme-option {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); cursor: pointer; background: var(--color-surface-card);
}
.theme-option:hover { border-color: var(--color-border-strong); }
.theme-option:has(input:checked) { border-color: var(--color-text-strong); box-shadow: 0 0 0 1px var(--color-text-strong); }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--color-focus, var(--color-brand-link)); outline-offset: 2px; }
.theme-swatch { flex: none; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: var(--swatch); }

/* คำขอเพิ่มบริการ — ช่อง "สาขาที่จะใช้คอร์ท" แสดงเฉพาะเมื่อเลือกตัวเลือกคอร์ท/สนาม (ผู้ใช้สั่ง 2026-10-14) */
#service-request-form:not(:has(#service-request-option option[value="court"]:checked)) .sr-venue-field[data-for~="court"] { display: none; }

/* ---------------------------------------------------------- แดชบอร์ดแบบกระชับ (ผู้ใช้ทัก "ดูอ้วนไป" 2026-10-14)
   ทางลัด: ไอคอนซ้าย ข้อความขวา ใบเตี้ย ยืดเต็มแถว · KPI: ไอคอนข้างตัวเลข padding น้อยลง */
.shortcut-row[data-density="compact"] { grid-auto-columns: minmax(13rem, 1fr); margin-block-start: var(--space-4); padding-block-start: var(--space-1); } /* เว้นจากหัวหน้า + กันเงา/ตอนชี้ลอยขึ้นไม่โดนตัดขอบบน (overflow-x ของแถว) — ผู้ใช้ทัก 2026-10-14 */
.shortcut-row[data-density="compact"] .shortcut-card {
  /* ไอคอนบน · ชื่อ · คำอธิบาย — การ์ดแคบ (6 ใบใน 1360) ชื่อไม่ตกบรรทัด */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "icon" "title" "hint";
  align-content: start;
  row-gap: var(--space-1);
  min-block-size: 124px; /* Quick Action ต้องเด่น — สูงกว่าการ์ดข้อมูลทั่วไป (ผู้ใช้สั่ง 2026-10-14) */
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.shortcut-row[data-density="compact"] .shortcut-icon { grid-area: icon; inline-size: 44px; block-size: 44px; border-radius: var(--radius-lg); margin-block-end: var(--space-2); }
.shortcut-row[data-density="compact"] .shortcut-icon .icon { inline-size: 24px; block-size: 24px; }
.shortcut-row[data-density="compact"] .shortcut-card strong { grid-area: title; font-size: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shortcut-row[data-density="compact"] .shortcut-card small { grid-area: hint; align-self: start; padding-inline-end: var(--space-5); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.shortcut-row[data-density="compact"] .shortcut-go { inset-block-start: var(--space-4); inset-block-end: auto; inset-inline-end: var(--space-4); }

.kpi-row[data-density="compact"] .kpi { gap: var(--space-2); padding: var(--space-4) var(--space-5); }
.kpi-row[data-density="compact"] .kpi-top {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon text spark";
  align-items: center;
  column-gap: var(--space-3);
}
.kpi-row[data-density="compact"] .kpi-icon { inline-size: 36px; block-size: 36px; }
.kpi-row[data-density="compact"] .kpi-icon .icon { inline-size: 20px; block-size: 20px; }
.kpi-row[data-density="compact"] .kpi-value { font-size: var(--text-2xl); }
.kpi-row[data-density="compact"] .kpi-spark { inline-size: 64px; block-size: 30px; }
.kpi-row[data-density="compact"] .kpi-foot { margin-block-start: 0; }

/* ‼️ เมนูย่อยชิดซ้ายตามขอบเนื้อหา (1360px กลางจอ) ไม่ชิดขอบจอ — ผู้ใช้สั่ง 2026-10-14
      จอแคบกว่า 1360 + ระยะขอบ = เหมือนเดิม (padding ของแถว) */
.subnav-row { padding-inline: max(var(--subnav-pad, var(--space-5)), calc((100% - var(--layout-max-width)) / 2)); }

/* ‼️ ฐานเดียวของหลังบ้าน (ผู้ใช้สั่ง 2026-10-14 "กดไปมันไม่เท่ากันสักหน้า หา base สักอัน")
      1) ทุกหน้า (list · form · wide) กว้างสุดเท่ากัน = --layout-max-width (1360) — ฟอร์มด้านในคุมความกว้างของตัวเอง
      2) จองที่ของ scrollbar ไว้เสมอ — หน้าสั้น (ไม่มี scrollbar) กับหน้ายาว ขอบเนื้อหาไม่ขยับ 7px */
/* ‼️ ช่องที่จองไว้ให้ scrollbar ต้องไม่เป็นรูขาว (ผู้ใช้สั่ง 2026-10-16 "มีรูว่าง ทำให้สวย balance ซ้ายขวา")
      both-edges = เว้นซ้ายเท่าขวา เนื้อหาอยู่กลางจอพอดี · พื้น html = สีพื้นหน้า · scrollbar บาง สีตามธีม */
html {
  /* ‼️ ไม่จองช่อง scrollbar แล้ว (ผู้ใช้สั่ง 2026-10-16 "ยังมีขอบขาวซ้ายขวา ไม่มี scrollbar ก็ให้เต็ม") — หน้าไม่มี scrollbar สีเต็มขอบจอ */
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
  /* พื้นใต้ช่อง scrollbar: ส่วนบนสูงเท่าแถบหัว (sticky) = สีแถบหัว ส่วนล่าง = สีพื้นหน้า — ขอบซ้ายขวาต่อเนื่องไม่เป็นรู
     --chrome-h ตั้งจาก app.js ตามความสูงจริงของ header.appbar (มี/ไม่มีเมนูย่อย) */
  background: linear-gradient(to bottom, var(--color-surface-card) 0 var(--chrome-h, 0px), var(--color-surface-page) var(--chrome-h, 0px)) fixed;
}
/* หน้าลูกค้า/หน้าแรก มีส่วนสีเข้มเต็มจอ (hero) — ช่องซ้ายเป็นแถบขาว (ผู้ใช้สั่ง 2026-10-16 "ขอบขาวทางซ้าย เติมสีให้ครบ")
   ไม่เว้นช่องซ้าย: เนื้อหาเต็มขอบ ช่องขวาคือ scrollbar เอง */
html:has(body[data-surface="public"]) { scrollbar-gutter: stable; background: var(--color-surface-page); }


/* ‼️ หัวเพจฐานเดียวทุกหน้า — อิงหน้าแรกของเมนู (การรับเงิน: ไอคอน + ภาพประกอบ สูง 121px) ผู้ใช้สั่ง 2026-10-14
      1) สูงขั้นต่ำเท่าหน้าที่มีภาพประกอบ — ชื่อหน้าและเนื้อหาเริ่มที่ตำแหน่งเดียวกันทุกหน้า ไม่ว่าจะมีภาพ/ปุ่มหรือไม่
      2) ข้อความหัวเพจ flex-basis 0 — เดิม 24rem ทำให้ Chrome คิดความสูงแถวจากคำอธิบายที่ตัดบรรทัดที่ 24rem
         หัวเพจที่มีปุ่มหรือคำอธิบายยาวจึงสูงเกินจริง 14–30px (ตั้งค่า · ผู้ใช้ระบบ · ค่าบริการ · ช่องทางรับชำระ) */
.page-head-main { min-block-size: var(--page-head-min, 121px); align-content: center; }
.page-head-main .page-head-text { flex: 1 1 0%; min-inline-size: min(18rem, 100%); }
/* จอกว้าง: แถวเดียวเสมอ — flex-wrap ทำให้ Chrome คิดความสูงแถวจากคำอธิบายที่ตัดบรรทัดตามความกว้างขั้นต่ำ (หัวสูงเกิน 30px) */
/* ชื่อหน้าอยู่บรรทัดเดียวกันทุกหน้า แม้คำอธิบายยาว 2 บรรทัด — ยึดบน (ตำแหน่งเดียวกับหน้าที่คำอธิบายบรรทัดเดียว) ไม่จัดกลาง */
@media (min-width: 768px) { .page-head-main > .page-head-text { align-self: flex-start; margin-block-start: 21px; } .page-head-main > .page-head-icon { align-self: flex-start; margin-block-start: 30px; } .page-head-main > .page-back { align-self: flex-start; margin-block-start: 38px; } }
/* หน้าที่ไม่มีคำอธิบาย (ชื่อบรรทัดเดียว) — ไอคอน/ปุ่มกลับเลื่อนขึ้นให้กึ่งกลางตรงกับชื่อ (ผู้ใช้สั่ง 2026-10-16) · ชื่อยังอยู่ตำแหน่งเดิมเหมือนทุกหน้า */
@media (min-width: 768px) { .page-head-main:not(:has(.page-lead)) > .page-head-icon { margin-block-start: 13px; } .page-head-main:not(:has(.page-lead)) > .page-back { margin-block-start: 21px; } }
@media (min-width: 768px) { .page-head-main { flex-wrap: nowrap; } .page-head-main > :not(.page-head-text) { flex-shrink: 0; } .page-head-main .page-art { flex-shrink: 1; } }
@media (max-width: 767px) { .page-head-main { --page-head-min: 0px; } }

/* รายงานรายได้โค้ช — คาบที่ยังไม่ได้เงิน (ยกเลิก/รอชำระ) จาง ยังอ่านได้ (2026-10-14) */
.table tr[data-muted="true"] td { color: var(--color-text-muted); }

/* แดชบอร์ด OMC — การ์ดในแถวเดียวกันสูงเท่ากัน (ผู้ใช้ทัก "เละมาก" 2026-10-14) */
.dash-layout[data-even="true"], .dash-bottom[data-even="true"] { align-items: stretch; }
.dash-layout[data-even="true"] > *, .dash-bottom[data-even="true"] > * { block-size: 100%; }

/* แดชบอร์ดเจ้าของสนาม — สองคอลัมน์จบขอบล่างพร้อมกัน: การ์ดสุดท้ายของคอลัมน์ที่สั้นกว่ายืดลงไปเต็ม (ผู้ใช้ทัก "ช่องว่างแปลกๆ" 2026-10-14) */
.dash-layout[data-even="true"] > .dash-main,
.dash-layout[data-even="true"] > .dash-rail { block-size: auto; }
.dash-layout[data-even="true"] > .dash-main > :last-child,
.dash-layout[data-even="true"] > .dash-rail > :last-child { flex: 1 1 auto; }

/* รายงานรายได้โค้ช — พิมพ์ (ผู้ใช้สั่ง 2026-10-15 "ปริ้นรายคาบต้องเห็นรายการ")
   หน้าสรุป: ต่อท้ายด้วยรายคาบของทุกโค้ช (บนจอซ่อน) · ทั้งสองหน้า: ตารางรายคาบตัวเล็ก บรรทัดเดียว ไม่ซ้อนช่อง */
.coach-print-detail { display: none; }
@media print {
  /* ‼️ @page ใช้ทั้งเว็บ (app.css ไฟล์เดียว) — ห้ามตั้ง size ตรงนี้ เดิมบังคับแนวตั้งให้ทุกหน้าพิมพ์ ปุ่มแนวนอนในหน้าต่างพิมพ์จึงไม่มีผล (ผู้ใช้สั่ง 2026-10-16) */
  @page { margin: 10mm; }
  .no-print { display: none !important; }
  .coach-print-detail { display: block; break-before: page; }
  .coach-print-detail h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
  .coach-print-detail h3 { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-base); break-after: avoid; }
  .coach-print-table, .coach-sessions-table { inline-size: 100%; font-size: 8pt; table-layout: auto; border-collapse: collapse; }
  .coach-print-table th, .coach-print-table td,
  .coach-sessions-table th, .coach-sessions-table td { padding: 2px 4px; white-space: nowrap; border-block-end: 1px solid var(--color-border-normal); }
  .coach-print-table tr, .coach-sessions-table tr { break-inside: avoid; }
  .coach-print-table thead, .coach-sessions-table thead { display: table-header-group; }
  .coach-sessions-table .cell-stack { display: inline; }
  .coach-sessions-table .cell-stack small { display: inline; margin-inline-start: 4px; }
  .coach-print-table td:nth-child(3), .coach-sessions-table td:nth-child(2) { white-space: normal; }
  .coach-sessions-table .badge { padding: 0; border: 0; background: none; font-size: inherit; }
}
@media print {
  .coach-sessions-table td:nth-child(3) small { display: none; }   /* ชื่อสาขาซ้ำทุกแถว — กระดาษไม่พอ */
  .coach-sessions-table td:not(:nth-child(2)) { white-space: nowrap !important; }
}
@media print {
  .coach-sessions-table thead th, .coach-print-table thead th { white-space: normal !important; }   /* หัวคอลัมน์ยาว ตัดบรรทัดได้ — ไม่ดันตารางเกินกระดาษ */
  .table-wrap:has(.coach-sessions-table) { overflow: visible; }
}

/* ตั้งค่า — ข้อมูลธุรกิจ (ซ้าย) + ธีมสีหน้าลูกค้า (ขวา) แถวเดียวกัน สูงเท่ากัน (ผู้ใช้สั่ง 2026-10-15 "ยุบธีมสีมาอยู่ข้างข้อมูลธุรกิจ") */
.settings-top { display: grid; gap: var(--space-4); align-items: stretch; }
@media (min-width: 1100px) { .settings-top { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.settings-top > .card { margin: 0; }
.settings-top .theme-settings { display: grid; gap: var(--space-3); }
.settings-top .theme-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); }
.settings-top .theme-option { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.settings-top .theme-preview { grid-template-columns: auto 1fr auto; align-items: center; padding: var(--space-2) var(--space-3); }
@media (max-width: 560px) { .settings-top .theme-preview { grid-template-columns: 1fr; } }

/* แถบตัวกรองบรรทัดเดียว (report-head $headInline · รายงานโค้ช ผู้ใช้สั่ง 2026-10-15) — จอแคบกว่า 1200px กลับไปขึ้นบรรทัดตามปกติ */
@media (min-width: 1200px) {
  .report-filter[data-inline="true"] { flex-wrap: nowrap; gap: var(--space-5); padding-block: var(--space-4); }
  .report-filter[data-inline="true"] .report-range-block { flex: none; padding-inline-end: var(--space-5); }
  .report-filter[data-inline="true"] .report-filter-form { flex: 1 1 0; flex-wrap: nowrap; gap: var(--space-3); min-inline-size: 0; }
  .report-filter[data-inline="true"] .report-filter-form .field { flex: 1 1 0; min-inline-size: 0; }
  .report-filter[data-inline="true"] .report-filter-actions { flex: none; flex-wrap: nowrap; }
}

/* ธีมสี — ตัวเลือก "เลือกสีเอง" (ผู้ใช้สั่ง 2026-10-15) · ยังไม่เคยเลือก = วงสีรุ้งจากชุดสำเร็จรูป */
.theme-swatch[data-swatch="custom"][data-empty="true"] {
  background: conic-gradient(var(--color-tenant-red), var(--color-tenant-orange), var(--color-tenant-gold), var(--color-tenant-green),
    var(--color-tenant-teal), var(--color-tenant-blue), var(--color-tenant-violet), var(--color-tenant-magenta), var(--color-tenant-red));
}
.theme-custom { display: block; }

/* ป้าย "ตัวอย่าง" เหนือแถบตัวอย่างธีม (ผู้ใช้สั่ง 2026-10-15 "เติมคำว่าตัวอย่าง") */
.theme-preview-label { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 calc(var(--space-2) * -1); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.theme-preview-label .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-text-muted); }

/* ตั้งค่า — การเข้าสู่ระบบของลูกค้า + สาขา แถวเดียวกัน (ผู้ใช้สั่ง 2026-10-15) · ช่องสรุปการเข้าสู่ระบบเหลือ 2 คอลัมน์ในการ์ดครึ่งจอ */
.settings-pair { display: grid; gap: var(--space-4); align-items: stretch; }
@media (min-width: 1100px) {
  .settings-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .settings-pair .detail-list[data-layout="tiles"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.settings-pair > .card { margin: 0; }

/* ตั้งค่าระบบ › การตั้งค่าทั่วไป — สองคอลัมน์ การ์ดซ้อนในคอลัมน์ การ์ดสุดท้ายยืดให้ก้นคอลัมน์เท่ากัน (ผู้ใช้สั่ง 2026-11-11 "เรียงสวยๆ") */
.pg-board { display: grid; gap: var(--space-4); align-items: stretch; }
.pg-col { display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0; }
.pg-col > .card { margin: 0; }
@media (min-width: 1100px) {
  .pg-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-col > .card:last-child { flex: 1 1 auto; }
  .pg-col .field-grid.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* "เลือกสีเอง" — เต็มแถว เด่นกว่าชุดสำเร็จรูป · ช่องเลือกสีซ่อนอยู่ในตัวเลือก กดแล้วเปิดหน้าต่างเลือกสีทันที (ผู้ใช้สั่ง 2026-10-15) */
.theme-option[data-custom="true"] {
  grid-column: 1 / -1; position: relative; justify-content: center; gap: var(--space-2);
  padding-block: var(--space-2); border: 1px solid var(--color-border-strong, var(--color-text-muted));
  font-weight: var(--weight-bold); color: var(--color-text-strong);
}
.theme-option[data-custom="true"]:hover { border-color: var(--color-text-strong); }
.theme-option[data-custom="true"] .theme-swatch { inline-size: 1.5rem; block-size: 1.5rem; }
.theme-custom-hex { font-family: var(--font-mono, ui-monospace); font-weight: var(--weight-normal); font-size: var(--text-sm); color: var(--color-text-muted); }
.theme-custom-hex:empty { display: none; }
.theme-custom-input { position: absolute; inset-block-end: 0; inset-inline-start: 50%; inline-size: 1px; block-size: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* ธีมสี — บรรทัด "ปรับให้เข้มขึ้น" จองที่ไว้เสมอ ไม่ให้การ์ดยืดหด · กรอบรอบตัวอย่าง (ผู้ใช้สั่ง 2026-10-15) */
.theme-preview-box { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); }
.theme-preview-box .theme-preview-label { margin: 0; }

/* "เลือกสีเอง" ห่างจากชุดสำเร็จรูป · หน้าต่างเลือกสีเปิดจากขอบบนของรายการสี (ไม่บังตัวอย่าง · ผู้ใช้สั่ง 2026-10-15) */
.theme-picker { position: relative; }
.theme-option[data-custom="true"] { position: static; margin-block-start: var(--space-3); }
.theme-custom-input { inset-block-start: 0; inset-block-end: auto; inset-inline-start: 0; }

/* "เลือกสีเอง" อยู่บนสุด · หน้าต่างเลือกสีเปิดใต้ปุ่มนี้ (ทับชุดสำเร็จรูป ไม่บังตัวอย่าง · ผู้ใช้สั่ง 2026-10-15) */
.theme-option[data-custom="true"] { position: relative; margin-block: 0 var(--space-3); }
.theme-custom-input { inset-block-start: auto; inset-block-end: 0; inset-inline-start: var(--space-3); }

/* หน้าต่างเลือกสีของเบราว์เซอร์สูง ~250px เปิดใต้จุดยึดเสมอ — ยึดไว้ที่ขอบบนของการ์ดธีม
   หน้าต่างจึงทับหัวการ์ด/รายการสี ไม่ลงไปบังตัวอย่าง (ผู้ใช้ทัก 2026-10-15 "ยังบังอยู่") */
#theme-color { position: relative; }
.settings-top .theme-picker, .settings-top .theme-option[data-custom="true"], .settings-top .theme-settings { position: static; }
.settings-top .theme-custom-input { inset-block-start: var(--space-4); inset-block-end: auto; inset-inline-start: var(--space-6); }

/* นโยบายการยกเลิก — แถบสถานะ "ใช้งานอยู่/ไม่ได้ใช้" + ปุ่มใช้เป็นนโยบายหลัก/ลบ (ผู้ใช้สั่ง 2026-10-15) */
.policy-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-block-end: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.policy-status[data-in-use="false"] { border-style: dashed; }
.policy-status-text { font-size: var(--text-sm); color: var(--color-text-normal); }
.policy-status-actions { display: flex; gap: var(--space-2); margin-inline-start: auto; align-items: center; }

/* แพ็กเกจ OMC ที่ใช้อยู่ — แถวละเรื่อง การ์ดในแถวสูงเท่ากัน (ผู้ใช้สั่ง 2026-10-15) */
.sub-row { display: grid; gap: var(--space-4); align-items: stretch; }
@media (min-width: 1100px) {
  .sub-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sub-row-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.sub-cell { display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; }
.sub-cell > .card { margin: 0; flex: 1 1 auto; }
.sub-cell > .icon-note { margin: 0; }
.sub-row-wide .active-modules { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.sub-row-wide .active-module p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ประวัติยาว — เลื่อนในกล่อง หัวตารางติดอยู่ ไม่ดันหน้ายาว */
.sub-history .table-wrap { max-block-size: 28rem; overflow: auto; }
.sub-history thead th { position: sticky; inset-block-start: 0; z-index: 1; background: var(--color-surface-head); }

/* นโยบายการยกเลิก — ฟอร์มเพิ่มกฎย่อย: เส้นคั่นจากตาราง · ช่องทั้งหมด + ปุ่ม อยู่บรรทัดเดียว (ผู้ใช้สั่ง 2026-10-15) */
.policy-rule-add { display: flex; align-items: flex-end; gap: var(--space-3); margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border-normal); }
.policy-rule-add .field-grid { display: grid; flex: 1 1 auto; min-inline-size: 0; gap: var(--space-3); grid-template-columns: minmax(7rem, .8fr) minmax(10rem, 1.4fr) minmax(6rem, .7fr) minmax(6rem, .7fr) minmax(8rem, 1.4fr); }
.policy-rule-add .field-grid .field { margin: 0; min-inline-size: 0; }
.policy-rule-add .field-grid .field :is(input, select) { inline-size: 100%; max-inline-size: none; }
.policy-rule-add .form-actions { flex: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }

.policy-rule-add .field-grid { align-items: end; grid-template-columns: minmax(13rem, 1fr) minmax(10rem, 1.3fr) minmax(7rem, .7fr) minmax(7rem, .7fr) minmax(8rem, 1.3fr); }
.policy-rule-add .field-grid .field label { white-space: nowrap; }
.policy-rule-add .form-actions .btn { min-block-size: 44px; }

/* ‼️ ต้องอยู่หลังกฎห้าคอลัมน์ข้างบน — เดิมอยู่ก่อน จึงถูกทับ จอ 375px ช่องล้นขอบขวา (เจอบน prod 2026-10-22)
      จอแคบ: สองคอลัมน์ · ป้ายตัดบรรทัดได้ (ป้ายยาว "ยกเลิกล่วงหน้าอย่างน้อย (ชั่วโมง)" ในครึ่งจอ) */
@media (max-width: 1000px) {
  .policy-rule-add { flex-direction: column; align-items: stretch; }
  .policy-rule-add .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policy-rule-add .field-grid .field label { white-space: normal; }
}

/* เวลาเปิด-ปิด / วันหยุด — ฟอร์มเพิ่มจัดระเบียบ (ผู้ใช้สั่ง 2026-10-15 "หน้าวันหยุด แก้ให้สวยงาม") */
.inline-add { display: flex; align-items: flex-end; gap: var(--space-3); margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border-normal); }
.inline-add .field-grid { display: grid; flex: 1 1 auto; min-inline-size: 0; gap: var(--space-3); align-items: end; grid-template-columns: minmax(10rem, .9fr) minmax(12rem, 1.6fr) minmax(12rem, 1.3fr) auto; }
.inline-add .field-grid .field, .hours-add .field-grid .field { margin: 0; min-inline-size: 0; }
.inline-add .field-grid .field :is(input, select), .hours-add .field-grid .field :is(input, select) { inline-size: 100%; max-inline-size: none; }
.inline-add .field-grid .field[data-width="full"] { grid-column: auto; display: flex; align-items: center; min-block-size: 44px; }
.inline-add .field-grid .field[data-width="full"] label, .hours-add .field-grid .field[data-width="full"] label { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; font-weight: var(--weight-medium); }
.inline-add .field-grid .field[data-width="full"] input, .hours-add .field-grid .field[data-width="full"] input { inline-size: auto; }
.inline-add .form-actions { flex: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.inline-add .form-actions .btn { min-block-size: 44px; }

.hours-add .field-grid { display: grid; gap: var(--space-3) var(--space-4); align-items: end; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hours-add .field-grid .field[data-width="full"] { grid-column: 1 / -1; }
/* ประจำสัปดาห์ = เลือกวัน · เฉพาะวันที่ = เลือกวันที่ — ไม่ต้องเห็นทั้งสองช่องพร้อมกัน */
.hours-add:has(select[name="rule_type"] option[value="weekday"]:checked) .field:has([name="specific_date"]) { display: none; }
.hours-add:has(select[name="rule_type"] option[value="specific"]:checked) .field:has([name="weekday"]) { display: none; }
@media (max-width: 1000px) {
  .inline-add { flex-direction: column; align-items: stretch; }
  .inline-add .field-grid, .hours-add .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .inline-add .field-grid, .hours-add .field-grid { grid-template-columns: 1fr; }
}

/* กฎเวลา: 2 แถวพอดี — ประเภท · วัน/วันที่ · คอร์ท · เปิด / ปิด · หมายเหตุ · ปิดทั้งวัน · ปุ่ม */
.hours-add { display: grid; gap: var(--space-3) var(--space-4); align-items: end; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hours-add .field-grid { display: contents; }
.hours-add .field-grid .field[data-width="full"] { grid-column: auto; display: flex; align-items: center; min-block-size: 44px; }
.hours-add .form-actions { grid-column: auto; justify-self: end; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.hours-add .form-actions .btn { min-block-size: 44px; }
@media (max-width: 1000px) { .hours-add { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hours-add { grid-template-columns: 1fr; } .hours-add .form-actions { justify-self: stretch; } .hours-add .form-actions .btn { inline-size: 100%; justify-content: center; } }

/* การใช้งานตามแพ็กเกจ / โมดูลที่ใช้อยู่ = เต็มแถว — ตาราง 6 คอลัมน์ครึ่งจอแล้วต้องเลื่อนซ้ายขวา (ผู้ใช้ทัก 2026-10-15) */
@media (min-width: 1100px) { .sub-row-full { grid-template-columns: minmax(0, 1fr); } }
.sub-row-full .active-modules { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

/* ประมาณการ — บิลเดือนหน้า (ผู้ใช้ทัก 2026-10-15) */
.policy-status-actions [data-confirm-tone="danger"] .btn { color: var(--color-state-danger); border-color: var(--color-state-danger); }
.policy-status-actions [data-confirm-tone="danger"] .btn:hover { background: var(--color-tint-danger); }
/* ตารางคอลัมน์เยอะ ($tableFit) — จอกลางลดช่องว่างในช่อง ไม่ให้ล้นกรอบการ์ด (ผู้ใช้ทัก 2026-10-15 "หน้าลูกค้ามันจะล้นกรอบ") */
@media screen and (min-width: 769px) and (max-width: 1280px) {
  .table[data-fit="true"] th, .table[data-fit="true"] td, .table[data-fit="true"] thead th { padding-inline: var(--space-2); }
  .table[data-fit="true"] .cell-person small { display: block; max-inline-size: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* จอ ≤1180px คอลัมน์ไม่พอ — ยุบเป็นการ์ด 2 คอลัมน์แบบมือถือ (ห้ามเลื่อนซ้ายขวา) */
@media screen and (min-width: 769px) and (max-width: 1180px) {
  .table[data-fit="true"] thead { display: none; }
  .table[data-fit="true"] tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .table[data-fit="true"] tbody tr { display: block; border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); padding: var(--space-3); }
  .table[data-fit="true"] td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border: 0; padding: var(--space-1) 0; height: auto; }
  .table[data-fit="true"] td::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-sm); }
  .table[data-fit="true"] td[data-primary]::before { content: none; }
  .table[data-fit="true"] .cell-person small { max-inline-size: none; }
}
.estimate-months { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.estimate-month { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.estimate-month[data-state="trial"], .estimate-month[data-state="free"] { border-color: var(--color-state-info); background: var(--color-tint-info); }
.estimate-month-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); color: var(--color-text-strong); }
.estimate-month-name { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.estimate-month-total { margin-inline-start: auto; font-weight: var(--weight-heavy); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.estimate-month-list { margin: var(--space-2) 0 0; padding: var(--space-2) 0 0; border-block-start: 1px dashed var(--color-border-normal); list-style: none; display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-normal); }
.estimate-month-list li { display: flex; justify-content: space-between; gap: var(--space-3); }
.estimate-month-list li > :last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.estimate-month-hint { margin: var(--space-2) 0 0; }

/* กลุ่มลูกค้า (CRM) — การ์ดกลุ่มบอกเกณฑ์ + ควรทำอะไร · กดดูรายชื่อ (ผู้ใช้สั่ง 2026-10-15 "ปรับดูง่าย ให้มีประโยชน์") */
.crm-updated { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.crm-updated .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.crm-segments { display: grid; gap: var(--space-3); grid-template-columns: repeat(5, minmax(0, 1fr)); margin-block-end: var(--space-5); }
@media (max-width: 1200px) { .crm-segments { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .crm-segments { grid-template-columns: 1fr; } }
.crm-segment { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); color: var(--color-text-normal); text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.crm-segment:hover, .crm-segment:focus-visible { border-color: var(--color-brand-accent); box-shadow: var(--shadow-md); }
.crm-segment[data-tone="warning"] { border-color: var(--color-state-warning); background: var(--color-tint-warning); }
.crm-segment-head { display: flex; align-items: center; gap: var(--space-2); }
.crm-segment-icon { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-md); background: var(--color-surface-raised); color: var(--color-text-strong); }
.crm-segment[data-tone="warning"] .crm-segment-icon { background: var(--color-surface-card); color: var(--color-state-warning); }
.crm-segment[data-tone="highlight"] .crm-segment-icon { color: var(--color-brand-accent); }
.crm-segment[data-tone="info"] .crm-segment-icon { color: var(--color-state-info); }
.crm-segment[data-tone="success"] .crm-segment-icon { color: var(--color-state-success); }
.crm-segment-icon .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.crm-segment-name { font-weight: var(--weight-bold); color: var(--color-text-strong); }
.crm-segment-count { font-size: var(--text-3xl); font-weight: var(--weight-heavy); line-height: var(--line-tight, 1.25); color: var(--color-text-strong); }
.crm-segment-count small { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.crm-segment-rule { font-size: var(--text-sm); color: var(--color-text-muted); }
.crm-segment-todo { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-normal); flex: 1 1 auto; }
.crm-segment-todo .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); margin-block-start: 2px; color: var(--color-text-muted); }
.crm-segment-link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-brand-link); }
.crm-segment-link .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.crm-copy { display: flex; justify-content: flex-end; padding: 0 var(--space-4) var(--space-3); }

/* จัดการสาขา › ข้อมูลสาขา — การ์ดมีไอคอน+คำอธิบาย ห่างกันเท่ากัน · ที่อยู่|กติกาการจอง และ สิ่งอำนวยความสะดวก|กีฬา แถวเดียวกัน (ผู้ใช้สั่ง 2026-10-15) */
.venue-form { display: grid; gap: var(--space-4); }
.venue-form > .card, .venue-pair > .card { margin: 0; }
.venue-pair { display: grid; gap: var(--space-4); align-items: stretch; }
@media (min-width: 1100px) { .venue-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.venue-form .field-grid { display: grid; gap: var(--space-3) var(--space-4); align-items: start; }
.venue-form .field-grid .field { margin: 0; min-inline-size: 0; }
.venue-form .field-grid .field :is(input:not([type="checkbox"]), select, textarea) { inline-size: 100%; max-inline-size: none; }
.venue-grid-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.venue-grid-details .field:has(:is([name="tagline"], [name="description"])), .venue-grid-details .venue-publish { grid-column: 1 / -1; }
.venue-grid-address { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.venue-grid-address .field:has(:is([name="address_line"], [name="map_url"])) { grid-column: 1 / -1; }

/* ฟอร์มสาขา: ลิงก์ Google Maps → แผนที่ตัวอย่าง (แบบหน้าติดต่อเรา · ผู้ใช้สั่ง 2026-10-28) */
.venue-map { grid-column: 1 / -1; }
/* ละติจูด/ลองจิจูด อ่านอย่างเดียว (ได้จากลิงก์) */
.venue-grid-address input[readonly] { background: var(--color-surface-head); color: var(--color-text-muted); cursor: default; }
/* ปุ่มค้นหา + ช่องลิงก์ บรรทัดเดียว: label เต็มแถว → [ปุ่ม][ช่อง] → คำแนะนำ → สถานะ */
.venue-map-link { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-2); align-items: stretch; }
.venue-map-link > .field { display: contents; }
.venue-map-link > .field > label { grid-column: 1 / -1; grid-row: 1; }
.venue-map-link > .venue-map-search { grid-column: 1; grid-row: 2; white-space: nowrap; }
.venue-map-link > .field > .field-control { grid-column: 2; grid-row: 2; }
.venue-map-link > .field > :is(.hint, .error) { grid-column: 1 / -1; margin: 0; }
.venue-map-link > .venue-map-status { grid-column: 1 / -1; }
.venue-map-link > .venue-map-status:empty { display: none; }
@media (max-width: 560px) { .venue-map-search > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.venue-map-status { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.venue-map-status[data-tone="success"] { color: var(--color-state-success); }
.venue-map-status[data-tone="error"] { color: var(--color-state-danger); }
.venue-map-frame { margin: 0; display: grid; gap: var(--space-2); }
.venue-map-frame iframe { display: block; inline-size: 100%; aspect-ratio: 16 / 9; min-block-size: 16rem; max-block-size: 26rem; border: 0; border-radius: var(--radius-lg); background: var(--color-surface-head); }
.venue-map-empty { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: 10rem; padding: var(--space-5); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }
.venue-map-empty[hidden], .venue-map-frame iframe[hidden] { display: none; }
.venue-map-empty .icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
.venue-map-frame figcaption a { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-brand-link); text-decoration: none; }
.venue-map-frame figcaption .icon { inline-size: 1rem; block-size: 1rem; }
.venue-grid-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.venue-grid-seo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.venue-grid-seo .field:has([name="seo_description"]) { grid-column: 1 / -1; }
.venue-pair .checkbox-grid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.venue-publish label { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); white-space: nowrap; }
.venue-publish input[type="checkbox"] { inline-size: auto; }
.venue-form > .form-actions { margin: 0; }
/* กีฬา + สิ่งอำนวยความสะดวกในกล่องเดียว (2026-10-22) — สองกลุ่มคั่นด้วยเส้น */
.venue-checks { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-3); min-inline-size: 0; }
.venue-checks > .card-head { margin: 0; padding: 0; border: 0; }
.venue-checks + .venue-checks { margin-block-start: var(--space-5); padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border); }
/* การ์ดรูปสาขา (ซ้าย) + แบนเนอร์หน้าเข้าสู่ระบบ (ขวา) — 2026-10-22 · คอลัมน์เดียวในแต่ละกล่อง: รูปปัจจุบัน/กรอบ → อัปโหลด → คลังภาพ */
.venue-photo { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-content: start; }
/* รูปเป็นภาพย่อซ้าย · อัปโหลด/คลังภาพขวา (ผู้ใช้ทัก 2026-10-22 "ใหญ่ไป") — จอแคบเรียงลงมา รูปไม่เกิน 18rem */
.venue-photo > :is(.venue-photo-now, .venue-photo-crop) { max-inline-size: 18rem; }
@media (min-width: 1280px) {
  /* รูปหลักใหญ่ครึ่งกล่องซ้าย · อัปโหลดขวา (ผู้ใช้ทัก 2026-10-22 "ขยายรูปหลักตามกรอบแดง") */
  .venue-photo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .venue-photo > :is(.venue-photo-now, .venue-photo-crop) { grid-column: 1; grid-row: 1; max-inline-size: none; }
  .venue-photo > :not(.venue-photo-now):not(.venue-photo-crop) { grid-column: 2; }
  .venue-photo > .venue-photo-presets.venue-photo-presets { grid-column: 1 / -1; }
  /* แบนเนอร์ 16:9 กว้างกว่ารูปสาขา 4:3 อยู่ 4/3 เท่า → สูงเท่ากัน คลังภาพสองกล่องอยู่ระดับเดียวกัน · ช่องอัปโหลดแคบลง (ผู้ใช้ทัก 2026-10-22) */
  .venue-photo[data-kind="banner"] { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); }
  /* หน้าตั้งค่า: การ์ดเต็มความกว้าง — จำกัดรูปตัวอย่างไม่ให้ใหญ่เกิน (ผู้ใช้ทัก 2026-10-22 "ใหญ่เกินไป") */
  /* การ์ดแบนเนอร์กว้างเต็มแถวเท่าการ์ดอื่น (ผู้ใช้ทัก 2026-10-28 "กรอบไม่สมดุล") — เนื้อหาข้างในยังจำกัดขนาด ไม่ยืดตาม (2026-10-22 "ไม่ต้องยืด") */
  .settings-banner { inline-size: auto; max-inline-size: 100%; }
  .settings-banner .venue-photo[data-kind="banner"] { grid-template-columns: minmax(0, 34rem) minmax(0, 24rem); justify-content: start; column-gap: var(--space-6); }
}
/* ช่องอัปโหลดแคบ + เตี้ย (ผู้ใช้ทัก 2026-10-22 "ทำให้แคบ") */
.venue-photo .upload-zone { min-block-size: 0; block-size: auto; padding: var(--space-3) var(--space-4); max-inline-size: none; font-size: var(--font-size-sm, .875rem); }
.venue-photo[data-kind="banner"] .venue-photo-now img, .venue-photo[data-kind="banner"] .venue-photo-crop .photo-crop-frame { aspect-ratio: 12 / 5; }
.venue-photo-now { margin: 0; display: grid; gap: var(--space-2); }
.venue-photo-now[hidden] { display: none; }
/* กรอบเลื่อน/ซูมรูปสาขา = ขนาดเดียวกับรูปตัวอย่าง (4:3 เต็มคอลัมน์) — ใช้ JS ตัวเดียวกับรูปสินค้า */
.venue-photo-crop { flex: none; }
.venue-photo-crop .photo-crop-frame { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.photo-crop.venue-photo-crop .hint { max-inline-size: none; }
.venue-photo-now img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--color-border-normal); background: var(--color-surface-court); }
.venue-photo-now figcaption { font-size: var(--text-sm); color: var(--color-text-muted); }
.venue-photo-presets { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); }
.venue-photo-presets legend { margin-block-end: var(--space-2); padding: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.venue-photo-preset { position: relative; display: grid; gap: var(--space-1); cursor: pointer; font-size: var(--text-xs); color: var(--color-text-normal); text-align: center; }
.venue-photo-preset input { position: absolute; opacity: 0; pointer-events: none; }
.venue-photo-preset img, .venue-photo-none {
  inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md);
  border: 2px solid transparent; box-shadow: var(--shadow-sm);
}
.venue-photo-none { display: grid; place-items: center; background: var(--color-surface-head); color: var(--color-text-muted); }
.venue-photo-preset:hover img, .venue-photo-preset:hover .venue-photo-none { border-color: var(--color-border-strong); }
.venue-photo-preset:has(input[data-current="true"]) img { border-color: var(--color-border-strong); }
.venue-photo-preset:has(input:checked) :is(img, .venue-photo-none) { border-color: var(--color-brand-accent); box-shadow: 0 0 0 2px var(--color-brand-accent); }
/* ภาพที่ใช้อยู่ไฮไลต์ไว้ตลอดจนกว่าจะเลือกภาพอื่น (ผู้ใช้ทัก 2026-10-22 "รูปหายจากที่เลือก") */
.venue-photo-presets:has(> input[value="keep"]:checked) .venue-photo-preset:has(input[data-current]) img { border-color: var(--color-brand-accent); box-shadow: 0 0 0 2px var(--color-brand-accent); }
.venue-photo-preset:has(input:checked) { color: var(--color-brand-accent); font-weight: var(--weight-bold); }
.venue-photo-preset:has(input:focus-visible) :is(img, .venue-photo-none) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* แท็บกติกาการจอง / การ์ด SEO — การ์ดเดียวเต็มแถว ช่องเรียง 3–4 คอลัมน์ (ไม่ยืดช่องเดียวเต็มจอ) */
.venue-form[data-section="rules"], .venue-form.venue-seo-form { grid-template-columns: minmax(0, 1fr); }
.venue-form[data-section="rules"] .venue-grid-rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.venue-seo-form .venue-grid-seo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.venue-seo-form { margin-block-end: var(--space-4); scroll-margin-block-start: calc(var(--space-12) * 2 + var(--space-6)); } /* ไม่จมใต้เมนูบน+เมนูย่อยที่ตรึงไว้ เมื่อกด แก้ไข (#venue-seo) */
.venue-seo-form .card-body .form-actions { padding: 0; border: 0; box-shadow: none; background: none; margin-block-start: var(--space-3); }
.venue-seo-path { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; }
.venue-seo-path .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
@media (max-width: 900px) { .venue-form[data-section="rules"] .venue-grid-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .venue-form[data-section="rules"] .venue-grid-rules, .venue-seo-form .venue-grid-seo { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .venue-grid-details, .venue-grid-address, .venue-grid-rules, .venue-grid-seo { grid-template-columns: 1fr; }
}

/* รายละเอียดสนาม 3 บรรทัด ไม่ต้องสูง (ผู้ใช้ทัก 2026-10-15) — ขยายเองได้ถ้าเขียนยาว */
.venue-grid-details textarea[name="description"] { min-block-size: 0; block-size: auto; resize: vertical; }

/* ข้อมูลสาขา — การ์ดทั้งหมดเป็น 2 คอลัมน์ ไม่มีการ์ดยืดเต็มจอ (ผู้ใช้ทัก 2026-10-15 "ช่องรายละเอียดมันยืดไป") */
@media (min-width: 1100px) {
  .venue-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .venue-form > .form-actions { grid-column: 1 / -1; }
  .venue-form > input[type="hidden"] { display: none; }
  .venue-grid-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venue-grid-details .field:has([name="slug"]) { grid-column: 1 / -1; }
  .venue-grid-address { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Academy Class (2026-10-15) — แถบสีม่วงที่กดได้ในตารางคอร์ท (หลังบ้าน) และตารางจอง (ลูกค้า) ───────── */
.court-cell[data-state="class"] {
  background: var(--color-slot-class);
  border-color: var(--color-slot-class);
  border-style: solid;
  color: var(--color-slot-on-class);
  text-decoration: none;
}
a.court-cell[data-state="class"]:hover { border-color: var(--color-text-strong); }
.court-legend-swatch[data-state="class"],
.grid-legend-swatch[data-state="class"] { background: var(--color-slot-class); border-color: var(--color-slot-class); }
.bk-legend li[data-state="class"]::before { border-color: var(--color-slot-class); background: var(--color-slot-class); }
.bk-grid td[data-state="class"] .bk-slot { border-color: var(--color-slot-class); background: var(--color-slot-class); cursor: pointer; }
.bk-grid td[data-state="class"] .bk-slot:hover { border-color: var(--color-text-strong); }
.bk-classes { display: grid; gap: var(--space-2); margin-block-end: var(--space-3); }
.bk-classes .bk-label { display: inline-flex; align-items: center; gap: var(--space-1); }
.bk-class {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-state-violet);
  border-radius: var(--radius-md);
  background: var(--color-tint-violet);
  color: var(--color-text-strong);
  text-decoration: none;
}
.bk-class:hover { border-color: var(--color-text-strong); }
.bk-class small { color: var(--color-text-normal); font-size: var(--text-xs); }
.check-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

/* Academy Class — การแบ่งรายได้เป็นขั้นตามลำดับที่ระบบหักจริง (ช่องตัวเลข + หน่วยคู่กัน) */
/* สรุปคาดการณ์เงินต่อรอบ — ฟอร์มตั้งรอบ class (ผู้ใช้สั่ง 2026-10-19) */
.academy-forecast .form-step-no .icon { inline-size: 1rem; block-size: 1rem; }
.academy-forecast-table { min-inline-size: 0; }
.academy-forecast-table th small { display: block; font-weight: 400; color: var(--color-text-tertiary); font-size: var(--text-xs); }
.academy-forecast-table tbody th { font-weight: 400; }
.academy-forecast-table .forecast-sub th, .academy-forecast-table .forecast-sub td { border-block-start: 1px solid var(--color-border-strong, var(--color-border-normal)); font-weight: 600; }
.academy-forecast-table .forecast-total th, .academy-forecast-table .forecast-total td { font-weight: 700; }
.academy-forecast-table .forecast-venue th, .academy-forecast-table .forecast-venue td { color: var(--color-brand-primary, inherit); }
.academy-forecast-table td[data-negative] { color: var(--color-state-danger); }
.academy-forecast-table tbody tr:last-child > * { border-block-end: 0; }
.academy-forecast [data-forecast-note] { margin-block-start: var(--space-3); }
@media (max-width: 767px) {
  /* ยังเป็นตาราง 3 คอลัมน์บนมือถือ (ไม่แตกเป็นการ์ด) */
  .academy-forecast-table thead { display: table-header-group; }
  .academy-forecast-table tr { display: table-row; }
  .academy-forecast-table th, .academy-forecast-table td { display: table-cell; padding: var(--space-2); }
  .academy-forecast-table td::before { content: none; }
}
.split-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.split-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-3) var(--space-4);
  align-items: start;
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border-normal);
}
.split-step-no {
  display: inline-grid; place-items: center;
  inline-size: 28px; block-size: 28px; border-radius: 50%;
  background: var(--color-brand-soft); color: var(--color-brand-accent);
  font-weight: 700; font-size: var(--text-sm);
}
.split-step-text { display: grid; gap: var(--space-1); }
.split-step-inputs { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.split-step-inputs .field { margin: 0; }
.split-pair { display: grid; grid-template-columns: minmax(7ch, 1fr) minmax(0, 1.3fr); gap: var(--space-2); }
.split-pair :is(input, select) { inline-size: 100%; max-inline-size: none; }
.split-formula { display: flex; gap: var(--space-2); align-items: flex-start; margin-block-start: var(--space-3); }
@media screen and (max-width: 760px) {
  .split-step { grid-template-columns: auto minmax(0, 1fr); }
  .split-step-inputs { grid-column: 1 / -1; }
}

/* Academy Class — เลือกความยาวรอบ 1–6 ชม. (ติ๊กทีละช่อง) */
.hour-picks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hour-pick { position: relative; }
.hour-pick input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.hour-pick span {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 72px; min-block-size: 44px; padding-inline: var(--space-3);
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-md);
  background: var(--color-surface-card); color: var(--color-text-normal);
  font-weight: 600; cursor: pointer;
}
.hour-pick span:hover { border-color: var(--color-brand-accent); }
.hour-pick input:checked + span { border-color: var(--color-brand-accent); background: var(--color-brand-soft); color: var(--color-brand-accent); }
.hour-pick input:focus-visible + span { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; }

/* Academy Class — ตั้งรอบจากตารางจองจริง */
.academy-pick { display: grid; gap: var(--space-4); }
.academy-pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.academy-pick-bar .hint { flex: 1 1 100%; margin: 0; }
.academy-pick-date { display: flex; align-items: center; gap: var(--space-3); }
.academy-pick-date :is(input, select) { min-block-size: 44px; padding-inline: 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); }
/* ฟอร์มตั้งรอบ: หัวข้อย่อย (เมื่อไหร่ · ใคร/ราคา · แบ่งเงิน) — ผู้ใช้สั่ง 2026-10-15 ย้ายค่าทั้งหมดจาก class มาตั้งที่รอบ */
.split-heading { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-base); font-weight: 700; color: var(--color-text-strong); }
.academy-pick button.court-cell[data-state="free"] { cursor: pointer; }
.academy-pick .court-cell[data-picked="ok"] { background: var(--color-slot-class); border-color: var(--color-slot-class); }
.academy-pick .court-cell[data-picked="clash"] { background: var(--color-tint-danger); border-color: var(--color-state-danger); }
.academy-pick-summary { margin: 0; }
@media screen and (max-width: 640px) {
  .academy-pick-bar { flex-wrap: nowrap; }
  .academy-pick-bar .hint { display: none; }
  .academy-pick-date strong { display: none; }
  .academy-pick-date { flex: 1 1 auto; }
  .academy-pick-date :is(input, select) { inline-size: 100%; min-inline-size: 0; }
}

/* แถบที่เลือกในตารางตั้งรอบ = แถบเดียวพร้อมเวลา (เหมือนตารางจองของลูกค้า) */
.academy-pick .court-cell[data-picked] { color: var(--color-slot-on-class); }
.academy-pick .court-cell[data-picked="clash"] { color: var(--color-state-danger); }
.academy-pick .court-cell[data-picked] [data-pick-label] {
  display: block;
  inline-size: calc(var(--slot-min-width) * var(--pick-len, 1) - var(--space-3));
  max-inline-size: none;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ตารางจองลูกค้า: รอบ Academy Class = ก้อนเดียว (colspan) มีเวลา + ระดับ + ชื่อ · คำอธิบายสีใต้ตาราง (ผู้ใช้สั่ง 2026-10-15) */
.bk-grid td[data-state="class"] .bk-class-slot {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding-inline: var(--space-2);
  border-color: var(--color-slot-class); background: var(--color-slot-class); color: var(--color-slot-on-class);
  text-decoration: none; overflow: hidden; line-height: 1.2;
}
.bk-class-slot-time { font-size: var(--text-xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-class-slot-name { font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-legend-under { margin: var(--space-3) 0 0; gap: var(--space-2) var(--space-4); }
.bk-legend-under li { color: var(--color-text-normal); font-size: var(--text-sm); }
.bk-class-level {
  display: inline-block; margin-inline-start: var(--space-2); padding: 0 var(--space-2);
  border-radius: var(--radius-full); background: var(--color-slot-class); color: var(--color-slot-on-class);
  font-size: var(--text-xs); font-weight: 600; vertical-align: middle;
}
/* ก้อน class ต้องไม่ดันคอลัมน์ให้กว้างกว่าคอลัมน์อื่น — ขนาดตามช่องที่ colspan ครอบ ข้อความยาวตัดด้วย … */
.bk-grid td[data-state="class"] .bk-class-slot { inline-size: 0; min-inline-size: 100%; }
.hour-pick span { flex-direction: column; gap: 0; line-height: 1.15; }
.hour-pick-price { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.hour-pick input:checked + span .hour-pick-price { color: inherit; }

/* Class Wallet — กระเป๋ารวมของ Academy Class บนสุดของหน้า (ผู้ใช้สั่ง 2026-10-16 "ต้องเห็นได้ง่าย") */
.academy-wallet { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: var(--space-4); margin-block-end: var(--space-4); }
.academy-wallet-main { display: grid; gap: var(--space-1); align-content: center; padding: var(--space-4); border: 1px solid var(--color-slot-class); border-radius: var(--radius-lg); background: var(--color-surface-card); }
.academy-wallet-label { color: var(--color-text-muted); font-size: var(--text-sm); }
.academy-wallet-amount { color: var(--color-slot-class); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.academy-wallet-amount small { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 500; }
.academy-wallet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); margin: 0; }
.academy-wallet-grid > div { padding: var(--space-3); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.academy-wallet-grid dt { color: var(--color-text-muted); font-size: var(--text-xs); }
.academy-wallet-grid dd { margin: 0; color: var(--color-text-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
@media screen and (max-width: 760px) { .academy-wallet { grid-template-columns: 1fr; } }

/* ‼️ แถบรอง (partials/tabs.php) — ทรงเดิม (เส้นใต้ทั้งแถว + ขีดใต้ตัวที่เลือก) แต่หัวข้อดูน่ากดขึ้น
      ผู้ใช้สั่ง 2026-10-16 "ชอบแบบเดิม มีขีดคั่น แค่ทำให้หัวข้อดูน่ากดขึ้น" — ไม่มีกรอบ/การ์ด
      ตัวหนังสือใหญ่และเข้มขึ้น · hover มีพื้นอ่อน · ตัวที่เลือกขีดใต้หนาขึ้น ตัวหนาสีธีม */
/* เส้นใต้แถบรองเป็นสีเข้ม (ผู้ใช้สั่ง 2026-10-20 "ขีดเขียวๆ ทำเป็นขีดสีดำ") — เดิม border-normal เทาอมเขียว */
.tabs { gap: var(--space-1); border-block-end: 1px solid var(--color-text-strong); margin-block-end: var(--space-2); }
.tab {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--color-text-normal);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-block-end-width: 3px;
}
.tab .icon { color: var(--color-text-muted); }
.tab:hover { background: var(--color-surface-head); color: var(--color-text-strong); text-decoration: none; }
.tab:hover .icon { color: var(--color-text-strong); }
.tab[aria-current="page"] {
  color: var(--color-brand-accent);
  font-weight: var(--weight-bold);
  border-block-end-color: var(--color-brand-accent);
}
.tab[aria-current="page"] .icon { color: var(--color-brand-accent); }
@media (max-width: 640px) { .tab { padding-inline: var(--space-3); } }

/* ฟอร์มโค้ช: ตารางสอนประจำสัปดาห์ (อ่านอย่างเดียว · แก้ที่หน้าตารางสอน) — ผู้ใช้สั่ง 2026-10-16 */
.coach-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.coach-week li { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); }
.coach-week li[data-off="true"] { background: var(--color-slot-past); }
.coach-week-day { font-weight: var(--weight-bold); color: var(--color-text-strong); font-size: var(--text-sm); }
.coach-week-time { color: var(--color-text-normal); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.coach-week li[data-off="true"] .coach-week-time { color: var(--color-text-muted); }
.schedule-timing { display: grid; gap: var(--space-3); margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border-normal); }

/* นโยบายยกเลิก: แก้ชื่อในที่เดิม (ผู้ใช้สั่ง 2026-10-16) */
.policy-rename { position: relative; display: inline-block; }
.policy-rename > summary { list-style: none; cursor: pointer; }
.policy-rename > summary::-webkit-details-marker { display: none; }
.policy-rename-form {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--space-1)); z-index: var(--z-raised);
  display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2);
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card);
  box-shadow: var(--shadow-md);
}
.policy-rename-form input[type="text"] { inline-size: 16rem; min-block-size: 40px; padding-inline: var(--space-3); border: 1px solid var(--color-border-normal); border-radius: var(--radius-sm); }
@media screen and (max-width: 640px) { .policy-rename-form { inset-inline-end: auto; inset-inline-start: 0; } .policy-rename-form input[type="text"] { inline-size: 11rem; } }

/* หน้าตั้งรอบ Academy: 5 ขั้นมีเลข ① ผู้จัด/ราคา → ② ความยาว/ประเภท → ③ ตาราง → ④ โค้ชที่ว่าง → ⑤ แบ่งเงิน (ผู้ใช้สั่ง 2026-10-16)
   แต่ละขั้น = กล่องการ์ดของตัวเอง (แทนเส้นคั่นด้านบนแบบเดิม) */
.form-steps { display: grid; gap: var(--space-4); }
.form-step {
  display: grid; gap: var(--space-4); min-inline-size: 0;
  padding: var(--space-5); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg);
  background: var(--color-surface-card);
}
.form-step-head { display: flex; gap: var(--space-3); align-items: flex-start; }
.form-step-head h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.form-step-head .hint { margin: 2px 0 0; }
.form-step-no {
  flex: none; display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%;
  background: var(--color-brand-primary); color: var(--color-brand-on-primary); font-weight: var(--weight-bold); font-size: var(--text-sm);
}

/* ตั้งรอบ: ช่องที่โค้ชที่เลือกไม่สอน/ไม่ว่าง = หรี่ (ยังกดได้ แต่จะเตือนแดง) — ผู้ใช้สั่ง 2026-10-16 */
.academy-pick [data-coach-off]:not([data-picked]) { opacity: .35; cursor: not-allowed; }

/* ตั้งรอบ Academy (ผู้ใช้สั่ง 2026-10-16): ช่องในขั้นเรียงแถวเดียวอย่างเป็นระเบียบ · ปุ่มประเภทกว้างพอสำหรับคำอธิบาย · การ์ดโค้ชบอกว่าว่างไหม */
/* ข้อ ① + ② ของฟอร์มตั้งรอบ class วางคู่กัน (ผู้ใช้สั่ง 2026-10-19) — จอแคบซ้อนกัน */
.form-step-pair { display: grid; gap: var(--space-4); min-inline-size: 0; }
.form-step-pair > .form-step { margin: 0; min-inline-size: 0; align-content: start; }
@media (min-width: 1100px) {
  .form-step-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}
.form-step-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4) var(--space-5); min-inline-size: 0; }
.form-step-row > .field { margin: 0; min-inline-size: 0; }
.form-step-row > .field[data-width="full"] { flex: 1 1 100%; }
.form-step .academy-pick-summary { margin: 0; }
.form-steps > .form-actions { margin: 0; padding: 0; border: 0; background: none; }
/* ตั้ง Class ขั้น ⑦ สรุปค่าที่เลือก (ผู้ใช้สั่ง 2026-10-20 ทีละขั้น) */
.academy-review { display: grid; gap: 0; margin: 0; }
.academy-review > div { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-2); border-block-end: 1px solid var(--color-border-normal); }
.academy-review > div:last-child { border-block-end: 0; }
.academy-review dt { color: var(--color-text-muted); }
.academy-review dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media screen and (max-width: 640px) { .academy-review > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }
/* ตั้ง Class ฟอร์มเดียว ข้อ ① (ผู้ใช้สั่ง 2026-10-20) — ชิปประเภท แล้วช่องพิมพ์ชื่อใหม่ใต้ชิป */
.class-type-pick { display: grid; gap: var(--space-3); min-inline-size: 0; }
.class-type-pick .field { margin: 0; }
.type-picks .hour-pick span { min-inline-size: 14rem; align-items: flex-start; justify-content: center; text-align: start; padding: var(--space-2) var(--space-4); }
.coach-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.coach-pick { position: relative; display: flex; }
.coach-pick input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.coach-pick-box {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
  min-block-size: 76px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-md);
  background: var(--color-surface-card); color: var(--color-text-normal); cursor: pointer;
}
.coach-pick-box strong { color: var(--color-text-strong); }
.coach-pick-hours, .coach-pick-note { font-size: var(--text-xs); color: var(--color-text-muted); }
.coach-pick-box:hover { border-color: var(--color-brand-accent); }
.coach-pick input:checked + .coach-pick-box { border-color: var(--color-brand-accent); background: var(--color-brand-soft); box-shadow: inset 0 0 0 1px var(--color-brand-accent); }
.coach-pick input:focus-visible + .coach-pick-box { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; }
.coach-pick input:disabled + .coach-pick-box { opacity: .55; cursor: not-allowed; }
.coach-pick input:disabled + .coach-pick-box:hover { border-color: var(--color-border-normal); }
[data-grid-live] { display: grid; gap: var(--space-3); min-inline-size: 0; }
[data-grid-live][aria-busy="true"] { opacity: .6; pointer-events: none; }
@media screen and (max-width: 640px) {
  .form-step { padding: var(--space-4); }
  .type-picks .hour-pick, .type-picks .hour-pick span { inline-size: 100%; min-inline-size: 0; }
  .coach-picks { grid-template-columns: minmax(0, 1fr); }
  .form-step-row > .field:not([data-width="short"]) { flex: 1 1 100%; }
}

/* แบ่งเงินข้อ 4: ส่วนของสนาม — กล่องแสดงผลอย่างเดียว ดูออกว่าแก้ไม่ได้ (ผู้ใช้สั่ง 2026-10-16) */
.field-label-static { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.split-readonly {
  display: flex; align-items: center; gap: var(--space-2); min-block-size: 46px; padding-inline: var(--space-3);
  border: 1px dashed var(--color-border-normal); border-radius: var(--radius-md);
  background: var(--color-surface-head); color: var(--color-text-strong); font-weight: var(--weight-bold); cursor: not-allowed;
}
.split-readonly .icon { color: var(--color-text-muted); flex: none; }
[data-venue-rest][data-invalid] .split-readonly { color: var(--color-state-danger); border-color: var(--color-state-danger); background: var(--color-tint-danger); }
/* ตารางจองลูกค้า: คำอธิบายสีอยู่ใต้ตาราง (ผู้ใช้สั่ง 2026-10-16) */
.bk-legend-under { margin: var(--space-3) 0 0; gap: var(--space-2) var(--space-4); }
.bk-legend-under li { color: var(--color-text-normal); font-size: var(--text-sm); }

/* ตารางจองแบบมือถือ (ปุ่มเวลา) — ผู้ใช้สั่ง 2026-10-16:
   ช่องเป็นพื้นขาวทุกช่อง · สถานะบอกด้วยจุดสีใต้เวลา (ว่าง = เขียว · ไม่ว่าง = เทาเข้ม · ปิด/ผ่านไปแล้ว = เทาอ่อน)
   ช่องที่ติ๊กเลือก/ช่วงที่เลือก/แถบสรุป = สีธีมขององค์กร
   ‼️ ซ้ำ class ให้ชนะกฎพื้นอ่อนของธีม (:root[data-tenant-theme] :is(...) ความเจาะจงสูง) */
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-time.bk-time.bk-time {
  --bk-dot: var(--color-state-success);
  align-content: center; gap: 3px;
  border-color: var(--color-border-normal); background: var(--color-surface-card); color: var(--color-text-strong);
  text-decoration: none;
}
.bk-time-status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--weight-normal); line-height: 1; color: inherit; }
.bk-time-status::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--bk-dot); flex: none; }
/* ช่องที่เลือก/อยู่ในช่วง: คำเปลี่ยนเป็น "เลือกแล้ว" (font-size 0 ซ่อนคำเดิม แล้วเขียนจาก data-on) */
.bk-time:is(:has(input:checked), [data-in-range]) .bk-time-status { font-size: 0; gap: 0; }
.bk-time:is(:has(input:checked), [data-in-range]) .bk-time-status::after { content: attr(data-on); font-size: var(--text-xs); margin-inline-start: 4px; }
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-time.bk-time.bk-time[data-state="booked"] {
  /* ไม่ว่าง = จุดแดง + ทั้งช่องจางลง (ผู้ใช้สั่ง 2026-10-16) */
  --bk-dot: var(--color-state-danger); color: var(--color-text-muted); opacity: .55;
}
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-time.bk-time.bk-time:is([data-state="past"], [data-state="closed"]) { --bk-dot: var(--color-border-normal); color: var(--color-text-muted); }
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-time.bk-time.bk-time[data-state="short"] { --bk-dot: var(--color-border-strong); color: var(--color-text-muted); }
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-time.bk-time.bk-time[data-state="coach"] { --bk-dot: var(--color-state-danger); color: var(--color-text-muted); }
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-time.bk-time.bk-time:hover:has(input) { border-color: var(--color-brand-accent); }
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-time.bk-time.bk-time:has(input:checked) {
  --bk-dot: var(--color-brand-on-accent);
  border-color: var(--color-brand-accent); background: var(--color-brand-accent); color: var(--color-brand-on-accent); font-weight: var(--weight-bold);
}
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-time.bk-time.bk-time[data-in-range]:not([data-in-range="start"]) {
  /* ช่วงที่เลือกเข้มเท่าช่องแรก ไม่ใช้สีจาง (ผู้ใช้สั่ง 2026-10-16) */
  --bk-dot: var(--color-brand-on-accent);
  border-color: var(--color-brand-accent); background: var(--color-brand-accent); color: var(--color-brand-on-accent); font-weight: var(--weight-bold);
}
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-picked.bk-picked.bk-picked { background: var(--color-brand-soft); color: var(--color-brand-accent); }

/* คำอธิบายใต้ปุ่มเวลา (จอแคบ) = จุดสีแบบเดียวกับในช่อง · ที่เลือก = สีธีม */
@media (max-width: 767px) {
  .bk-legend-under li::before { inline-size: 8px; block-size: 8px; border-radius: 50%; border: 0; }
  .bk-legend-under li[data-state="start"]::before { background: var(--color-state-success); }
  .bk-legend-under li[data-state="booked"]::before { background: var(--color-state-danger); }
  .bk-legend-under li[data-state="closed"]::before { background: var(--color-border-normal); }
  .bk-legend-under li[data-state="coach"]::before { background: var(--color-state-danger); }
  .bk-legend-under li[data-state="selected"]::before { inline-size: 12px; block-size: 12px; border-radius: 3px; background: var(--color-brand-accent); }
}

/* ตารางจองจอกว้าง (ผู้ใช้สั่ง 2026-10-16 "จอปกติก็สีขาว ไม่ว่างเทา ที่เลือกตามธีม")
   ช่องว่าง = พื้นขาว · มีคนจอง = เทาเดิม · ช่องที่เลือก/ช่วงที่เลือก/hover = สีธีมองค์กร */
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-grid td[data-state="start"] .bk-slot.bk-slot { border-color: var(--color-border-normal); background: var(--color-surface-card); }
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-grid td[data-state="start"] .bk-slot.bk-slot:hover { border-color: var(--color-brand-accent); }
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-grid :is(.bk-slot:has(input:checked), td[data-in-range] .bk-slot).bk-slot {
  border-color: var(--color-brand-accent); background: var(--color-brand-accent);
}
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-grid td[data-in-range="start"] .bk-slot[data-range-label]::after { color: var(--color-brand-on-accent); }
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-legend li[data-state="start"]::before { border-color: var(--color-border-normal); background: var(--color-surface-card); }
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-legend li[data-state="selected"]::before { border-color: var(--color-brand-accent); background: var(--color-brand-accent); }

/* ‼️ จอแคบ: คำอธิบายเป็นจุดสีแบบเดียวกับในปุ่มเวลา — ต้องอยู่หลังกฎจอกว้างและเจาะจงเท่ากัน
      ไม่งั้นจุด "ว่าง" กลายเป็นพื้นขาวไม่มีขอบ มองไม่เห็น (ผู้ใช้ทัก 2026-10-16) */
@media (max-width: 767px) {
  :is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-legend-under li::before { inline-size: 8px; block-size: 8px; border: 0; border-radius: 50%; }
  :is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-legend-under li[data-state="start"]::before { background: var(--color-state-success); }
  :is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-legend-under li[data-state="booked"]::before { background: var(--color-state-danger); }
  :is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-legend-under li[data-state="closed"]::before { background: var(--color-border-normal); }
  :is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-legend-under li[data-state="coach"]::before { background: var(--color-state-danger); }
  :is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-legend-under li[data-state="selected"]::before { inline-size: 12px; block-size: 12px; border-radius: 3px; background: var(--color-brand-accent); }
}

/* หน้าจอง: ระหว่างโหลดวันใหม่ (ไม่โหลดทั้งหน้า) ตาราง/ปุ่มเวลาจางลงเล็กน้อย */
[data-booking][aria-busy="true"] :is(.bk-grid-wrap, .bk-mobile, .bk-periods) { opacity: .5; pointer-events: none; transition: opacity var(--duration-fast); }

/* จองหน้าเคาน์เตอร์: ตารางคอร์ท × เวลา (ผู้ใช้สั่ง 2026-10-16) — ว่าง = ขาว · จองแล้ว/ปิด = เทา · ที่เลือก = สีธีม */
.counter-grid-wrap { overflow-x: auto; border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); }
.counter-grid { border-collapse: separate; border-spacing: 0 4px; min-inline-size: 100%; padding-inline: 2px; }
.counter-grid thead th { padding: var(--space-2) var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-normal); text-align: start; white-space: nowrap; }
.counter-grid tbody th {
  position: sticky; inset-inline-start: 0; z-index: 1;
  padding: var(--space-2); background: var(--color-surface-card); text-align: start; white-space: nowrap;
}
.counter-grid thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--color-surface-card); }
.counter-grid tbody th strong { display: block; font-size: var(--text-sm); color: var(--color-text-strong); }
.counter-grid tbody th small { color: var(--color-text-muted); font-size: var(--text-xs); }
.counter-grid td { padding: 0 2px; min-inline-size: 48px; }
.counter-cell {
  position: relative; display: block; inline-size: 100%; min-inline-size: 48px; block-size: 44px;
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-sm); background: var(--color-surface-card); cursor: pointer;
}
.counter-cell input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.counter-grid td[data-state="free"] .counter-cell:hover { border-color: var(--color-brand-accent); }
.counter-grid td[data-state="booked"] .counter-cell { border-color: var(--color-slot-taken); background: var(--color-slot-taken); cursor: not-allowed; }
.counter-grid td:not([data-state="free"]):not([data-state="booked"]) .counter-cell { background: var(--color-slot-past); cursor: not-allowed; }
.counter-grid td[data-state="coach"] .counter-cell { background: var(--color-tint-danger); border-color: var(--color-tint-danger); }
.counter-cell:has(input:checked) { border-color: var(--color-brand-accent); background: var(--color-brand-accent); }
.counter-cell:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.counter-grid.is-invalid { outline: 2px solid var(--color-state-danger); }
/* คำอธิบายสีหัวตารางหน้าเคาน์เตอร์ ให้ตรงกับตาราง */
.counter-legend { margin: var(--space-3) 0 0; }
.counter-legend .grid-legend-swatch[data-state="picked"] { border-color: var(--color-brand-accent); background: var(--color-brand-accent); }
:is(.counter-slots-head, .counter-legend) .grid-legend-swatch[data-state="free"] { border: 1px solid var(--color-border-normal); background: var(--color-surface-card); }
:is(.counter-slots-head, .counter-legend) .grid-legend-swatch[data-state="booked"] { border-color: var(--color-slot-taken); background: var(--color-slot-taken); }
:is(.counter-slots-head, .counter-legend) .grid-legend-swatch[data-state="blocked"] { border-color: var(--color-border-normal); background: var(--color-slot-past); }

/* ช่วงที่เลือกติดกัน = แถบเดียว (ไม่มีช่องไฟ มุมมนเฉพาะหัวท้าย) · เวลาอยู่กลางแถบ — ช่องเดียวไม่มีข้อความ */
.counter-grid td[data-in-range] { padding-inline: 0; position: relative; }
.counter-grid td[data-in-range="start"] { padding-inline-start: 2px; }
.counter-grid td[data-in-range="end"] { padding-inline-end: 2px; }
.counter-grid td[data-in-range] .counter-cell { border-radius: 0; }
.counter-grid td[data-in-range="start"] .counter-cell { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }
.counter-grid td[data-in-range="end"] .counter-cell { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.counter-range-label {
  position: absolute; inset-block: 0; inset-inline-start: 2px; z-index: 2;
  display: grid; place-items: center; pointer-events: none;
  color: var(--color-brand-on-accent); font-size: var(--text-xs); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* หน้าเคาน์เตอร์: ระหว่างโหลดวันใหม่ ตารางจางลง */
#counter-pick[aria-busy="true"] :is(.counter-grid-wrap, .counter-slot-grid) { opacity: .5; pointer-events: none; }

/* ตารางการจองพิมพ์ */
@media print { html { scrollbar-gutter: auto; } .schedule-print-table { inline-size: calc(100% - 1px); } }

/* รายงานโค้ช: ที่มาของเงิน (ผู้ใช้สั่ง 2026-10-16) — จุดสีหน้าชื่อ แยกจองพร้อมโค้ช / Academy Class */
.coach-source { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.coach-source::before { content: ""; flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--radius-full); background: var(--color-state-info); }
.coach-source[data-source="academy"]::before { background: var(--color-brand-accent); }

/* รายงานโค้ชรายคาบ (จอ): ไม่ตัดคำกลางชื่อ (ผู้ใช้สั่ง 2026-10-16 "คอร์ทโดนบีบ") — คอร์ท/ลูกค้า/เลขจอง/ที่มา บรรทัดเดียว
   ชื่อสาขาเป็นบรรทัดเล็กใต้คอร์ท · หัวคอลัมน์เงินตัดบรรทัดได้ · กว้างเกินจอเลื่อนในกรอบตาราง */
@media screen {
  .coach-sessions-table td { white-space: nowrap; }
  .coach-sessions-table td .cell-stack small { display: block; white-space: nowrap; }
  .coach-sessions-table thead th.numeric { white-space: normal; }
  .coach-sessions-table :is(th, td) { padding-inline: var(--space-2); }
}

/* ตารางแบ่งเงิน class: % ต่อท้ายชื่อแถว */
.split-pct { margin-inline-start: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--color-surface-muted, var(--color-tint-neutral)); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.split-pct:empty { display: none; }
.academy-forecast-table .split-pct { margin-inline: 0 var(--space-2); } /* % อยู่หน้าตัวเลข (ผู้ใช้สั่ง 2026-10-27) */

/* แถบจ่ายเงินโค้ช (ผู้ใช้สั่ง 2026-10-16) — แถบเลือกเดือน · ช่องค้างจ่าย · ฟอร์มบันทึกการจ่ายแบบป๊อปในแถว */
.coach-pay-month { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-4); flex-wrap: wrap; }
.coach-pay-month-name { font-size: var(--text-lg); min-inline-size: 8rem; text-align: center; }
.coach-pay-month-pick { margin-inline-start: auto; }
.coach-pay-month-pick input { min-block-size: 36px; }
.coach-pay-owed[data-due="true"] { color: var(--color-state-warning); }
.coach-pay-table td:last-child { text-align: end; }
.coach-pay-pop { position: relative; display: inline-block; }
.coach-pay-pop > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.coach-pay-pop > summary::-webkit-details-marker { display: none; }
.coach-pay-pop[open] > .coach-pay-form {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--space-2)); z-index: var(--z-dropdown);
  inline-size: min(22rem, 86vw); padding: var(--space-4); text-align: start;
  background: var(--color-surface-card); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.coach-pay-form-title { font-weight: var(--weight-bold); margin: 0; }
.coach-pay-empty { padding: var(--space-4) var(--space-5); margin: 0; }
/* จอแคบ: ฟอร์มจ่ายโค้ชกางในการ์ดของแถว ไม่ลอย (ลอยแล้วหลุดขอบซ้ายจอ) */
@media screen and (max-width: 767px) {
  .coach-pay-table td:has(> .coach-pay-pop) { display: block; text-align: start; }
  .coach-pay-table td:has(> .coach-pay-pop)::before { display: none; }
  .coach-pay-pop { display: block; inline-size: 100%; }
  .coach-pay-pop > summary { inline-size: 100%; justify-content: center; }
  .coach-pay-pop[open] > .coach-pay-form { position: static; inline-size: 100%; margin-block-start: var(--space-2); }
}

/* อุปกรณ์เช่า (112 · ผู้ใช้สั่ง 2026-10-19) — หน้าแก้ประเภท: ชิ้นแก้ในแถว · แถวเพิ่มชิ้นใต้ตาราง */
.equipment-empty { padding: var(--space-4) var(--space-5); margin: 0; }
.equipment-units td :is(input, select) {
    inline-size: 100%; min-inline-size: 8rem; min-block-size: 40px; padding-inline: var(--space-3);
    font: inherit; color: var(--color-text-strong); background: var(--color-surface-card);
    border: 1px solid color-mix(in srgb, var(--color-border-strong) 28%, var(--color-border-normal)); border-radius: var(--radius-md);
}
.equipment-units td :is(input, select):hover { border-color: color-mix(in srgb, var(--color-border-strong) 55%, var(--color-border-normal)); }
.equipment-units td :is(input, select):focus { outline: none; border-color: var(--color-brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-accent) 18%, transparent); }
.equipment-units td { vertical-align: middle; }
.equipment-units td .badge { margin-block-end: var(--space-1); display: inline-block; }
.equipment-code-input { font-family: var(--font-mono, monospace); }
.equipment-unit-actions { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; white-space: nowrap; }
.equipment-unit-actions form { margin: 0; }
.equipment-add { padding: var(--space-4) var(--space-5); }
.equipment-add-title { margin: 0 0 var(--space-3); font-weight: var(--weight-bold); }
.equipment-add-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); align-items: end; }
.inline-add.equipment-add { display: block; }

/* หน้าใบจอง: อุปกรณ์เช่า — ชิปรหัสชิ้น (ส่งแล้ว = เหลือง · คืนแล้ว = เทา) · เลือกชิ้นที่จะส่ง */
.equipment-lines { display: grid; gap: var(--space-4); }
.equipment-line { display: grid; gap: var(--space-2); padding-block-end: var(--space-3); border-block-end: 1px solid var(--color-border-subtle, var(--color-border-normal)); }
.equipment-line:last-of-type { border-block-end: 0; }
.equipment-line-head { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.equipment-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.equipment-chips li { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--color-border-normal); }
.equipment-chips li[data-state="out"] { background: var(--color-tint-warning, var(--color-surface-muted)); }
.equipment-chips li[data-state="back"] { opacity: .7; }
.equipment-chips form { margin: 0; }
.equipment-chip-code { font-family: var(--font-mono, monospace); font-weight: var(--weight-bold); }
.equipment-checkout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.equipment-checkout fieldset { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; margin: 0; padding: 0; }
.equipment-pick { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); cursor: pointer; }
.equipment-pick input { inline-size: 16px; block-size: 16px; min-block-size: 0; }
.equipment-pick span { font-family: var(--font-mono, monospace); }

/* หน้าจองลูกค้า ขั้นตรวจสอบ: อุปกรณ์เช่า (112) — รายการพร้อมช่องจำนวน · ปุ่มอัปเดตราคา */
/* ตัวเลือกอุปกรณ์เช่า — ติ๊ก + ปุ่ม − / + (partials/equipment-picker.php · ขั้นอุปกรณ์ของลูกค้า + หน้าเคาน์เตอร์ · ผู้ใช้สั่ง 2026-10-19) */
.eq-picker { display: grid; gap: var(--space-3); }
.eq-picker-rule, .eq-picker-full { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.eq-picker-rule .icon, .eq-picker-full .icon { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 1px; }
.eq-picker-full { color: var(--color-state-warning); font-weight: var(--weight-bold); }
.eq-picker-full[hidden] { display: none; }
.eq-picker-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.eq-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); border: 1.5px solid var(--color-border-normal); border-radius: var(--radius-lg, var(--radius-md));
    background: var(--color-surface-card); transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.eq-item:hover { border-color: color-mix(in srgb, var(--color-brand-accent) 45%, var(--color-border-normal)); }
.eq-item[data-on="true"] { border-color: var(--color-brand-accent); background: color-mix(in srgb, var(--color-brand-accent) 6%, var(--color-surface-card)); }
.eq-item[data-out="true"] { opacity: .55; }
.eq-item[data-out="true"]:hover { border-color: var(--color-border-normal); }
.eq-item[data-locked="true"] .eq-item-main { cursor: not-allowed; opacity: .6; }
.eq-item-main { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-inline-size: 0; cursor: pointer; }
.eq-item-check { flex: none; inline-size: 22px; block-size: 22px; min-block-size: 0; margin: 0; cursor: pointer; }
.eq-item-icon { flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-brand-accent) 12%, var(--color-surface-card)); color: var(--color-brand-accent); }
.eq-item-icon .icon { inline-size: 20px; block-size: 20px; }
.eq-item-text { display: grid; gap: 2px; min-inline-size: 0; }
.eq-item-text strong { color: var(--color-text-strong); font-size: var(--text-base); }
.eq-item-text small { color: var(--color-text-muted); font-size: var(--text-sm); }
.eq-item-left { color: var(--color-state-success) !important; }
.eq-item-left[data-out="true"] { color: var(--color-state-danger) !important; }
.eq-stepper { flex: none; display: inline-flex; align-items: center; border: 1px solid var(--color-border-normal); border-radius: var(--radius-full); background: var(--color-surface-card); overflow: hidden; }
.eq-step {
    inline-size: 40px; block-size: 40px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer;
    font-size: 1.25rem; line-height: 1; color: var(--color-brand-accent); font-weight: var(--weight-bold);
}
.eq-step:hover:not(:disabled) { background: color-mix(in srgb, var(--color-brand-accent) 10%, transparent); }
.eq-step:disabled { color: var(--color-text-muted); opacity: .45; cursor: not-allowed; }
.eq-step:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.eq-stepper .eq-qty {
    inline-size: 3rem; block-size: 40px; min-block-size: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center;
    font: inherit; font-weight: var(--weight-bold); color: var(--color-text-strong); appearance: textfield; -moz-appearance: textfield;
}
.eq-stepper .eq-qty::-webkit-inner-spin-button, .eq-stepper .eq-qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* JS พร้อม = ซ่อนตัวปรับจำนวนจนกว่าจะติ๊ก (ไม่มี JS ยังกรอกจำนวนได้ตรงๆ) */
[data-eq-ready] .eq-item[data-on="false"] .eq-stepper { visibility: hidden; }
.bk-eq-form { display: grid; gap: var(--space-5); }
.bk-actions.bk-actions-end { justify-content: flex-end; }
/* ข้อความผิดใต้กลุ่มตัวเลือกที่ไม่ได้อยู่ใน .field (เช่นระดับลูกค้า) — gate css-class-exists */
.field-error { margin: var(--space-1) 0 0; color: var(--color-state-danger); font-size: var(--text-sm); }
/* ใบจอง: ตารางส่งของ/รับคืน — สูงไม่เกิน ~8 แถว เลื่อนในกล่อง · หัวตารางติดบน (ผู้ใช้สั่ง 2026-10-19) */
.equipment-sync-wrap { max-block-size: min(60vh, 520px); overflow-y: auto; }
.equipment-codes { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.equipment-codes .equipment-chip-code { padding: 2px var(--space-2); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); font-size: var(--text-sm); }
.equipment-line-action { text-align: end; white-space: nowrap; }
.equipment-overdue { margin: var(--space-3) var(--space-5); }
/* มือถือ: ตารางเล็ก 4 คอลัมน์ — คงเป็นตาราง ไม่แตกเป็นการ์ด (ทับกฎ .table การ์ดมือถือ) */
@media screen and (max-width: 767px) {
    .equipment-sync-wrap table.table.equipment-sync { display: table; inline-size: 100%; }
    .equipment-sync-wrap table.table.equipment-sync thead { display: table-header-group; position: static; clip: auto; block-size: auto; inline-size: auto; overflow: visible; }
    .equipment-sync-wrap table.table.equipment-sync tbody { display: table-row-group; }
    .equipment-sync-wrap table.table.equipment-sync tbody tr,
    .equipment-sync-wrap table.table.equipment-sync thead tr { display: table-row; border: 0; padding: 0; margin: 0; border-radius: 0; box-shadow: none; }
    .equipment-sync-wrap table.table.equipment-sync :is(td, th) { display: table-cell; block-size: auto; padding: var(--space-2); text-align: start; border-block-end: 1px solid var(--color-border-normal); }
    .equipment-sync-wrap table.table.equipment-sync td::before { content: none; display: none; }
    .equipment-sync-wrap table.table.equipment-sync .equipment-sync-check { text-align: center; }
    .equipment-sync-wrap table.table.equipment-sync .equipment-sync-head th { display: table-cell; }
    .equipment-sync-wrap table.table.equipment-sync .equipment-chip-code { white-space: nowrap; }
}
.equipment-sync thead th { position: sticky; inset-block-start: 0; z-index: 1; background: var(--color-surface-head); }
.equipment-sync .equipment-sync-check { inline-size: 6.5rem; text-align: center; white-space: nowrap; }
.equipment-sync .equipment-sync-check input { inline-size: 20px; block-size: 20px; min-block-size: 0; cursor: pointer; }
.equipment-sync .equipment-sync-head th { background: var(--color-surface-mist); text-align: start; font-weight: var(--weight-bold); }
.equipment-sync .equipment-sync-head th > span { margin-inline-end: var(--space-3); color: var(--color-text-strong); }
.equipment-sync tr[data-state="out"] td { background: color-mix(in srgb, var(--color-state-warning) 6%, transparent); }
.equipment-sync .equipment-sync-code { font-weight: var(--weight-bold); white-space: nowrap; }
/* เอาติ๊ก "ส่งให้ลูกค้า" ออกจากชิ้นที่ส่งแล้ว = จะยกเลิกการส่ง (กดผิด) — บอกใต้ป้ายสถานะ */
.equipment-sync-cancel { display: none; margin-block-start: var(--space-1); font-size: var(--text-sm); color: var(--color-state-danger); }
.equipment-sync tr:has(input[data-eq-keep]:not(:checked)) .equipment-sync-cancel { display: block; }
.equipment-sync label { cursor: pointer; }
.equipment-sync-hint { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.equipment-sync-hint .icon { inline-size: 16px; block-size: 16px; }
/* กติกาการจอง: สวิตช์จองเป็นช่วงๆ / หลายคอร์ท (113) — แถวละสวิตช์ ข้อความซ้าย สวิตช์ขวา */
.venue-range-switches { display: grid; gap: var(--space-3); margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border-normal); }
.venue-range-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.venue-range-switch-text { display: grid; gap: 2px; min-inline-size: 0; }
.venue-range-switch-text strong { color: var(--color-text-strong); }
.venue-range-switch-text small { color: var(--color-text-muted); font-size: var(--text-sm); }
.venue-range-switch .switch { flex: none; }
/* หน้าอุปกรณ์: การ์ดข้อมูล | การ์ดราคา · ปุ่มบันทึกใต้ทั้งสองการ์ด ไม่มีกรอบ */
.equipment-form-actions { display: flex; justify-content: flex-end; margin-block: var(--space-4) var(--space-6); padding: 0; border: 0; background: none; }
.counter-equipment .eq-picker { margin-block-start: var(--space-2); }
.equipment-rule-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.equipment-rule-list li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.equipment-rule-list li > span { display: inline-flex; align-items: center; gap: var(--space-2); }
@media screen and (max-width: 520px) {
    .eq-item { padding: var(--space-3); gap: var(--space-2); flex-wrap: wrap; }
    .eq-item-icon { display: none; }
    .eq-item-main { flex-basis: calc(100% - 140px); }
    .eq-step { inline-size: 38px; block-size: 38px; }
}

.counter-equipment { border: 0; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.counter-equipment legend { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); margin-block-end: var(--space-2); }
/* หน้าเคาน์เตอร์ขั้นสรุป: อุปกรณ์เป็นการ์ดเรียงหลายคอลัมน์ ไม่ใช่แถวเต็มจอทีละรายการ (ผู้ใช้สั่ง 2026-10-27 "ปรับให้สวยงามกว่านี้") */
.counter-equipment .eq-picker-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; }
.counter-equipment .eq-item { flex-wrap: wrap; align-items: flex-start; padding: var(--space-3) var(--space-4); }
.counter-equipment .eq-item-main { flex-basis: 100%; align-items: flex-start; }
.counter-equipment .eq-item-check { margin-block-start: var(--space-1); }
/* ปุ่ม − / + ขึ้นบรรทัดของตัวเองเฉพาะรายการที่ติ๊ก — ไม่กินความกว้างข้อความตอนยังไม่เลือก */
.counter-equipment .eq-stepper { margin-inline-start: auto; }
.counter-equipment [data-eq-ready] .eq-item[data-on="false"] .eq-stepper { display: none; }

/* เพิ่มอุปกรณ์ที่หน้าสนาม (115 · ผู้ใช้สั่ง 2026-10-19) */
.equipment-remove-form { display: inline-flex; margin: 0; }
.equipment-line-action { white-space: nowrap; }
.equipment-empty { padding: var(--space-4) var(--space-6); margin: 0; }
.equipment-add-sub { display: block; }
.equipment-add-field { display: flex; justify-content: flex-end; margin: 0; }
.field input.equipment-add-qty { width: 5.5rem; text-align: right; }
.equipment-add-table td { vertical-align: middle; }

/* รูปย่อในตาราง (format image · หน้าสินค้า 115) — จัตุรัสเล็ก ไม่ดันแถวให้สูง */
.cell-image {
    display: grid; place-items: center; inline-size: 44px; block-size: 44px; overflow: hidden;
    border-radius: var(--radius-sm); background: var(--color-tint-neutral); color: var(--color-text-muted);
}
.cell-image img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.cell-image svg { inline-size: 18px; block-size: 18px; opacity: .6; }

/* ตั้งค่า POS · ข้อมูลรับเงินในหน้าขาย (116 · ผู้ใช้สั่ง 2026-10-20) */
.pos-settings-methods { display: flex; flex-direction: column; gap: var(--space-3); }
.pos-qr-preview img { object-fit: contain; background: var(--color-surface-card); }
.pos-pay-info { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px dashed var(--color-border-normal); border-radius: var(--radius-md); text-align: center; }
.pos-pay-info[hidden], .pos-cash[hidden] { display: none; }
/* ใบจอง: รับเงินแบบหน้า POS (ผู้ใช้สั่ง 2026-10-28) — ใช้ปุ่ม .pos-method ชุดเดียวกับหน้าขาย */
.booking-pay { display: flex; flex-direction: column; gap: var(--space-3); }
.booking-pay .field { margin: 0; }
.booking-pay-fields { display: flex; flex-direction: column; gap: var(--space-3); }
.booking-pay-fields[hidden], .booking-pay-online[hidden] { display: none; }
.booking-pay-methods .pos-method span { flex-wrap: wrap; text-align: center; }
.booking-pay-methods .pos-method span small { inline-size: 100%; font-size: var(--text-xs); opacity: .8; }
.booking-pay-methods .pos-method input:disabled + span { opacity: .45; cursor: not-allowed; }
.booking-pay-online { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; }
.booking-pay .form-actions { margin: 0; }

.pos-pay-info p { margin: 0; }
.pos-qr-image { inline-size: min(220px, 100%); aspect-ratio: auto; background: var(--color-surface-card); border-radius: var(--radius-sm); }
.pos-bank { font-size: var(--text-lg); }

/* ใบเสร็จตามตั้งค่า POS (117) — 58 มม. แคบลง · ข้อความหลายบรรทัดคงการขึ้นบรรทัด */
/* ใบเสร็จใช้ layout print — ซ่อนหัวเพจ/ท้ายเพจของหน้ารายงาน ไม่ให้ข้อความระบบออกบนกระดาษม้วน */
.print-page:has(.receipt) .print-page-head, .print-page:has(.receipt) .print-page-footer { display: none; }
.receipt[data-paper="58"] { max-inline-size: 58mm; font-size: var(--text-xs); }
.receipt-pre { white-space: pre-line; }
.receipt-wait { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-4); color: var(--color-text-muted); text-align: center; }
.receipt-wait svg { inline-size: 40px; block-size: 40px; }

/* ราคาลด (118) — ราคาเดิมขีดฆ่า + ป้ายลดมุมรูป */
.pos-price-was { margin-inline-end: var(--space-1); font-size: var(--text-xs); font-weight: normal; color: var(--color-text-muted); }
.pos-sale-badge {
    position: absolute; inset-block-start: calc(var(--space-3) + var(--space-1)); inset-inline-start: calc(var(--space-3) + var(--space-1)); z-index: 1;
    padding: 2px var(--space-2); border-radius: var(--radius-full);
    background: var(--color-state-danger); color: var(--color-brand-on-accent); font-size: var(--text-xs); font-weight: var(--weight-bold);
}

/* ชุดสินค้า (118) */
.product-kind { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; border: 0; }
.product-kind legend { margin-block-end: var(--space-2); font-weight: var(--weight-medium); }
.product-kind-option { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); cursor: pointer; }
.product-kind-option:has(input:checked) { border-color: var(--color-brand-accent); box-shadow: 0 0 0 1px var(--color-brand-accent); }
.product-kind-option span { display: flex; flex-direction: column; }
.product-kind-option small { color: var(--color-text-muted); font-size: var(--text-xs); }
.product-stock-fields { display: contents; }
.product-stock-fields[hidden], [data-kind-show][hidden] { display: none; }
.bundle-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.bundle-box { max-inline-size: 640px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.bundle-rows { inline-size: 100%; }
.bundle-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.5rem 6rem; gap: var(--space-2); align-items: center; }
.bundle-line { text-align: end; color: var(--color-text-muted); font-size: var(--text-sm); }
.bundle-sum { margin: 0; font-weight: var(--weight-medium); }
.bundle-sum[hidden] { display: none; }
.bundle-row select, .bundle-row input { min-block-size: 40px; }
.bundle-times { color: var(--color-text-muted); }
.pos-bundle-parts { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }

/* ฟอร์มแพ็กเกจ: การ์ดสินค้าในแพ็กเกจ + การ์ดรูป แถวเดียวกัน (ผู้ใช้สั่ง 2026-10-20) */
.product-bottom-pair { display: grid; gap: var(--space-4); margin-block-start: var(--space-4); align-items: stretch; }
.product-bottom-pair > .product-photo-section { margin: 0; }
.product-bottom-pair > .product-photo-section > .card { block-size: 100%; margin: 0; }
@media (min-width: 1100px) {
    .product-bottom-pair:has(> [data-kind-show="bundle"]:not([hidden])) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
.bundle-box { max-inline-size: none; }
.bundle-row { grid-template-columns: minmax(0, 1fr) auto 4rem 5.5rem; }
.bundle-row select, .bundle-row input { min-block-size: 36px; }
.bundle-rows { gap: var(--space-1); }
.product-bottom-pair .product-photo-preview { flex-basis: 140px; }

/* รูปสินค้า: ไม่ยืดเต็มจอ — สินค้าทั่วไปกว้างเท่าการ์ดซ้ายด้านบน · ช่องลากไฟล์เตี้ยลง (ผู้ใช้แจ้ง 2026-10-20) */
@media (min-width: 1100px) {
    .product-bottom-pair:not(:has(> [data-kind-show="bundle"]:not([hidden]))) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.product-photo-text { max-inline-size: 460px; }
.product-photo-text .upload-drop, .product-photo-text [data-upload-drop], .product-photo-text .dropzone { min-block-size: 0; padding-block: var(--space-4); }

/* การ์ดหน้าขาย: รูปเต็มกรอบการ์ด (ชิดขอบบน/ซ้าย/ขวา) · รายละเอียดอยู่ใต้รูปเหมือนเดิม (ผู้ใช้สั่ง 2026-10-20) */
.pos-tile-btn { padding: 0; overflow: hidden; gap: var(--space-1); }
.pos-tile[data-in-cart="true"] .pos-tile-btn { padding: 0; }
.pos-tile-btn .pos-thumb { border-radius: 0; }
.pos-tile-btn .pos-name { padding-inline: var(--space-3); margin-block-start: var(--space-1); }
.pos-tile-btn .pos-tile-foot { padding: 0 var(--space-3) var(--space-3); }
.pos-tile-btn .pos-sale-badge { inset-block-start: var(--space-2); inset-inline-start: var(--space-2); }

/* กล่องเตือนหน้าขาย (ผู้ใช้สั่ง 2026-10-20) */
.pos-alert-text { margin: 0 0 var(--space-3); color: var(--color-text-normal); }
.pos-alert-sum { margin: 0; display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-tint-neutral); }
.pos-alert-sum[hidden] { display: none; }
.pos-alert-sum > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.pos-alert-sum dt { color: var(--color-text-muted); }
.pos-alert-sum dd { margin: 0; font-weight: var(--weight-medium); }
.pos-alert-short { padding-block-start: var(--space-2); border-block-start: 1px solid var(--color-border-normal); }
.pos-alert-short dt, .pos-alert-short dd { color: var(--color-state-danger); font-weight: var(--weight-bold); }
.pos-alert-short dd { font-size: var(--text-lg); }

/* สาขาที่ทำงานของพนักงาน (121 · ผู้ใช้สั่ง 2026-10-20) */
.staff-venues { border: 0; padding: 0; margin: var(--space-4) 0 0; }
.staff-venues legend { font-weight: var(--weight-medium); margin-block-end: var(--space-2); }
.staff-venue-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

/* ปุ่มมุมขวาบนของตาราง (ดาวน์โหลด Excel · เพิ่ม) — ผู้ใช้สั่ง 2026-10-20 */
.table-tools { display: flex; justify-content: flex-end; gap: var(--space-2); }
.table-tools-cell { text-align: end; white-space: nowrap; }
/* แถบตัวกรองชิดรายการที่มันกรอง ทุกหน้า — เหลือช่องว่าง 12px แทน 40px (margin 16 + ช่องของ .page 24)
   เดิมทำเฉพาะตารางที่มีปุ่มมุมขวาบน (สินค้า/แพ็กเกจ) · ผู้ใช้ทักหน้า Academy Class "เว้นเยอะจัง หลายจุด" (2026-10-20) */
.page > .toolbar { margin-block-end: calc(var(--space-3) - var(--space-6)); }

/* ช่องตารางที่ห้ามตัดบรรทัด (ชื่อสาขา · คงเหลือ) — ภาษาไทยไม่มีช่องว่างจึงถูกตัดกลางคำ "รัช/ดา" */
.table td.cell-nowrap { white-space: nowrap; }

/* คอลัมน์รูป: หัว "รูป" อยู่กึ่งกลางรูปย่อ (ผู้ใช้สั่ง 2026-10-20) */
.table th.cell-image-col, .table td.cell-image-col { text-align: center; }
.table td.cell-image-col .cell-image { margin-inline: auto; }

/* แพ็กเกจ: รูปอยู่แถวบนคู่ข้อมูล · ราคาอยู่แถวล่างก่อนสินค้าในแพ็กเกจ (ผู้ใช้สั่ง 2026-10-20) */
.settings-pair > .product-photo-section { margin: 0; }
.settings-pair > .product-photo-section > .card { block-size: 100%; margin: 0; }

/* ใบเสร็จ: ชื่อ / จำนวน × ราคา ... ยอด / ส่วนลด (ผู้ใช้แจ้ง 2026-10-20) */
.receipt-lines tr.receipt-line-name td, .receipt-lines tr.receipt-line-name td:last-child { padding-block-start: var(--space-2); text-align: start; white-space: normal; }
.receipt-lines tr.receipt-line-qty td:first-child, .receipt-lines tr.receipt-line-disc td:first-child { text-align: start; padding-inline-start: var(--space-3); color: var(--color-text-muted); }

/* รูปในการ์ดข้อมูลสินค้า/แพ็กเกจ (ผู้ใช้สั่ง 2026-10-20) */
.settings-pair .product-photo-box .product-photo-preview { flex-basis: 140px; }

/* กรอบเลื่อน/ซูมรูปสินค้า (ผู้ใช้สั่ง 2026-10-20) — จัตุรัสเท่ารูปที่ขึ้นหน้าขาย */
.photo-crop { flex: 0 0 200px; display: grid; gap: var(--space-2); align-content: start; }
.photo-crop[hidden] { display: none; }
.photo-crop-frame {
    position: relative; inline-size: 200px; block-size: 200px; overflow: hidden; cursor: grab; touch-action: none;
    border-radius: var(--radius-md); background: var(--color-tint-neutral); outline: 2px solid var(--color-brand-primary);
}
.photo-crop-frame:active { cursor: grabbing; }
.photo-crop-frame img { position: absolute; inset-block-start: 0; inset-inline-start: 0; max-inline-size: none; user-select: none; pointer-events: none; }
.photo-crop-zoom { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.photo-crop-zoom input { flex: 1 1 auto; accent-color: var(--color-brand-primary); }
.photo-crop .hint { margin: 0; max-inline-size: 200px; }

/* ตะกร้า: เส้นแบ่งชัดระหว่างรายการ/ยอดรวม กับวิธีรับเงิน (ผู้ใช้สั่ง 2026-10-20) */
.pos-total { border-block-start-color: var(--color-text-strong); padding-block: var(--space-3); border-block-end: 2px solid var(--color-text-strong); margin-block-end: var(--space-2); }

/* เลขจำนวนในตะกร้าบนการ์ด: การ์ดตัดขอบ (overflow hidden) จึงวางวงกลมไว้ในมุมขวาบน ไม่ล้นขอบ (ผู้ใช้แจ้ง 2026-10-20) */
.pos-tile-btn .pos-tile-badge {
    inset-block-start: var(--space-2); inset-inline-end: var(--space-2); z-index: 2;
    min-inline-size: 28px; block-size: 28px; padding-inline: var(--space-1);
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-bold);
    background: var(--color-brand-accent); color: var(--color-brand-on-accent);
    box-shadow: 0 0 0 2px var(--color-surface-card), var(--shadow-md);
}
.pos-tile-btn .pos-tile-badge[hidden] { display: none; }

/* แพ็กเกจ: การ์ดข้อมูลเต็มแถว — ช่องกรอกซ้าย รูปขวา (ผู้ใช้สั่ง 2026-10-20) */
.settings-pair[data-package-info] { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
    .settings-pair[data-package-info] .product-info-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
    .settings-pair[data-package-info] .product-info-split > .form-subhead { grid-column: 2; grid-row: 1; margin-block-start: 0; }
    .settings-pair[data-package-info] .product-info-split > .product-photo-box { grid-column: 2; grid-row: 1; margin-block-start: calc(var(--space-8) + var(--space-3)); }
}
/* แพ็กเกจ: เส้นคั่นช่องกรอก | รูป เป็นแนวตั้ง แทนเส้นแนวนอนเหนือหัวรูป (ผู้ใช้สั่ง 2026-10-20) */
@media (min-width: 1100px) {
    .settings-pair[data-package-info] .product-info-split { position: relative; }
    .settings-pair[data-package-info] .product-info-split > .form-subhead { border-block-start: 0; padding-block-start: 0; }
    .settings-pair[data-package-info] .product-info-split > .form-subhead,
    .settings-pair[data-package-info] .product-info-split > .product-photo-box { padding-inline-start: var(--space-6); border-inline-start: 1px solid var(--color-border-normal); }
    .settings-pair[data-package-info] .product-info-split > .form-subhead { padding-block-end: var(--space-3); margin-block-end: 0; }
    .settings-pair[data-package-info] .product-info-split > .product-photo-box { margin-block-start: calc(var(--space-8) + var(--space-2)); padding-block-start: var(--space-2); }
}
@media (min-width: 1100px) {
    .settings-pair[data-package-info] .product-info-split > .form-subhead { display: flex; block-size: 100%; align-self: stretch; padding-block-end: 0; }
    .settings-pair[data-package-info] .product-info-split > .product-photo-box { border-inline-start: 0; }
}
@media (min-width: 1100px) {
    .settings-pair[data-package-info] .product-info-split > .form-subhead { align-items: flex-start; gap: var(--space-2); z-index: 1; position: relative; }
}

/* รูปสินค้า/แพ็กเกจ: รูปใหญ่ขึ้น (สูงลงไปด้านล่าง) · ช่องลากไฟล์เล็กลง (ผู้ใช้สั่ง 2026-10-20) */
.product-photo-box .product-photo-preview,
.settings-pair .product-photo-box .product-photo-preview { flex: 0 0 220px; inline-size: 220px; }
.product-photo-box .upload-zone { min-block-size: 0; block-size: auto; padding-block: var(--space-3); }
/* หัว "รูปสินค้า" ในการ์ดข้อมูล: ห่างเส้นด้านบนและห่างรูปด้านล่างให้พอดี (ผู้ใช้สั่ง 2026-10-20) */
.settings-pair:not([data-package-info]) .product-info-split > .form-subhead { margin-block-start: var(--space-5); padding-block-start: var(--space-5); margin-block-end: var(--space-4); }
/* แพ็กเกจ: ช่องกรอกแคบลง ฝั่งรูปกว้างขึ้น — ข้อความ "เลือกรูป" อยู่ข้างรูป ไม่ตกลงไปใต้รูป (ผู้ใช้แจ้ง 2026-10-20) */
@media (min-width: 1100px) {
    .settings-pair[data-package-info] .product-info-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .settings-pair[data-package-info] .product-info-split > .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-pair[data-package-info] .product-photo-box { flex-wrap: nowrap; }
    .settings-pair[data-package-info] .product-photo-text { flex: 1 1 auto; }
}
/* หัว "รูปแพ็กเกจ" ยืดเต็มความสูงเพื่อวาดเส้นแนวตั้ง — ต้องไม่บังการคลิกช่องเลือกไฟล์/รูปที่อยู่ช่องเดียวกัน (ผู้ใช้แจ้ง 2026-10-20) */
@media (min-width: 1100px) {
    .settings-pair[data-package-info] .product-info-split > .form-subhead { pointer-events: none; z-index: 0; }
    .settings-pair[data-package-info] .product-info-split > .product-photo-box { position: relative; z-index: 1; }
}

/* หน้าขาย: แถบรอลูกค้ายืนยัน Sports Credit (123) */
.pos-waiting { align-items: center; }
.pos-waiting-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-inline-size: 0; }
.pos-waiting-actions { display: flex; align-items: center; gap: var(--space-3); }
.pos-waiting-actions form { margin: 0; }
.pos-waiting-clock { font-size: var(--text-xl); color: var(--color-text-strong); }

/* บัญชีลูกค้า: ชำระสินค้า (123) */
.shop-bills { display: grid; gap: var(--space-4); }
.shop-bill { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); }
.shop-bill-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.shop-bill-head small { color: var(--color-text-muted); }
.shop-bill-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.shop-bill-lines li { display: flex; justify-content: space-between; gap: var(--space-3); }
.shop-bill-total { display: flex; justify-content: space-between; align-items: baseline; padding-block-start: var(--space-2); border-block-start: 1px dashed var(--color-border-strong); font-weight: var(--weight-bold); font-size: var(--text-lg); }
.shop-bill-balance { display: flex; justify-content: space-between; color: var(--color-text-muted); }
.shop-bill form { margin: 0; }
/* แท็บ "ชำระเงิน" — รายละเอียดใบจอง (ผู้ใช้สั่ง 2026-10-27) */
.shop-bill-head > span:first-child { display: grid; gap: var(--space-1); justify-items: start; }
.pay-due-facts { display: grid; gap: var(--space-2); margin: 0; }
.pay-due-facts > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-3); align-items: baseline; }
.pay-due-facts dt { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.pay-due-facts dt .icon { width: 1rem; height: 1rem; }
.pay-due-facts dd { margin: 0; }
.pay-due-sum { display: grid; gap: var(--space-1); margin: 0; padding-block-start: var(--space-2); border-block-start: 1px solid var(--color-border-normal); }
.pay-due-sum > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.pay-due-sum dt { color: var(--color-text-muted); }
.pay-due-sum dd { margin: 0; }
.pay-due-sum > div:last-child { font-weight: var(--weight-bold); font-size: var(--text-lg); }
.pay-due-sum > div:last-child dt { color: inherit; }
@media (max-width: 480px) { .pay-due-facts > div { grid-template-columns: 1fr; gap: 0; } }

/* แท็บ "ชำระสินค้า": เลขบิลรอเป็นวงแดงทึบเห็นชัด (ผู้ใช้สั่ง 2026-10-20) */
.tab-count[data-tone="danger"] { background: var(--color-state-danger); color: var(--color-surface-card); font-weight: var(--weight-bold); min-inline-size: 20px; block-size: 20px; border-radius: var(--radius-full); display: inline-grid; place-items: center; padding-inline: 6px; }


/* ป้ายตัวเลขการใช้งานข้างปุ่มหัวหน้า (เช่น "2 / 2 สาขา" ข้างปุ่มเพิ่มสาขา · ผู้ใช้สั่ง 2026-10-20) — ครบ = สีเตือน */
.page-action-count {
  display: inline-flex; align-items: center; min-block-size: 36px; padding-inline: var(--space-2);
  color: var(--color-text-normal); font-size: var(--text-sm); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* ไม่มีกรอบ/พื้น (ผู้ใช้สั่ง 2026-10-20 "ไม่ต้องมีกรอบ") — ครบแล้วเป็นตัวหนังสือสีเตือนอย่างเดียว */
.page-action-count[data-full="true"] { color: var(--color-state-warning); font-weight: var(--weight-bold); }

/* ตัวอย่างธีมแสดงพื้นหลังหน้าของธีมที่เลือกด้วย (ผู้ใช้ทัก 2026-10-21 "ตัวอย่างให้แสดงสีพื้นหลังด้วย มันไม่เปลี่ยน") */
.theme-settings:has(input[name="theme_color"][value="red"]:checked) .theme-preview { background: var(--color-tenant-red-page); }
.theme-settings:has(input[name="theme_color"][value="maroon"]:checked) .theme-preview { background: var(--color-tenant-maroon-page); }
.theme-settings:has(input[name="theme_color"][value="orange"]:checked) .theme-preview { background: var(--color-tenant-orange-page); }
.theme-settings:has(input[name="theme_color"][value="gold"]:checked) .theme-preview { background: var(--color-tenant-gold-page); }
.theme-settings:has(input[name="theme_color"][value="green"]:checked) .theme-preview { background: var(--color-tenant-green-page); }
.theme-settings:has(input[name="theme_color"][value="teal"]:checked) .theme-preview { background: var(--color-tenant-teal-page); }
.theme-settings:has(input[name="theme_color"][value="blue"]:checked) .theme-preview { background: var(--color-tenant-blue-page); }
.theme-settings:has(input[name="theme_color"][value="navy"]:checked) .theme-preview { background: var(--color-tenant-navy-page); }
.theme-settings:has(input[name="theme_color"][value="violet"]:checked) .theme-preview { background: var(--color-tenant-violet-page); }
.theme-settings:has(input[name="theme_color"][value="magenta"]:checked) .theme-preview { background: var(--color-tenant-magenta-page); }
.theme-settings:has(input[name="theme_color"][value="pink"]:checked) .theme-preview { background: var(--color-tenant-pink-page); }
.theme-settings:has(input[name="theme_color"][value="brown"]:checked) .theme-preview { background: var(--color-tenant-brown-page); }
.theme-settings:has(input[name="theme_color"][value="graphite"]:checked) .theme-preview { background: var(--color-tenant-graphite-page); }
.theme-settings:has(input[name="theme_color"][value="grape"]:checked) .theme-preview { background: var(--color-tenant-grape-page); }
.theme-settings:has(input[name="theme_color"][value="custom"]:checked) .theme-preview { background: var(--color-tenant-custom-page); }
.theme-settings:has(input[name="theme_color"][value="omc"]:checked) .theme-preview { background: var(--color-tenant-omc-page); }

/* Shared form rhythm. Width belongs to the control wrapper, never its label. */
.field, .field-control { min-inline-size: 0; }
.field-control { inline-size: 100%; }
.field[data-width="short"] > .field-control { max-inline-size: var(--form-short-width); }
.field[data-width="medium"] > .field-control { max-inline-size: var(--form-medium-width); }
.field[data-width] > .field-control > :is(input, select),
.field-grid .field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  inline-size: 100%; max-inline-size: 100%; min-inline-size: 0;
}
.field-grid .field > .field-control,
.form-step-row .field > .field-control { max-inline-size: 100%; }
.field[data-width][data-icon] > .field-control > :is(input, select) { max-inline-size: 100%; }
.field:not(.filter-field) > .field-control > :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select),
.field:not(.filter-field) > :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select) {
  block-size: var(--form-control-height); min-block-size: var(--form-control-height);
}
.field textarea { resize: vertical; }
.field :is(input, select, textarea):disabled { cursor: not-allowed; opacity: .65; }
.field :is(input, textarea)[readonly] { background: var(--color-surface-raised); }
.field [aria-invalid="true"] { border-color: var(--color-state-danger); }
.field > .error { margin: 0; }
.toolbar .field.filter-field :is(input, select) {
  block-size: var(--form-filter-height); min-block-size: var(--form-filter-height);
}
.toolbar[data-inline="true"] .toolbar-actions .btn { min-block-size: var(--form-filter-height); }

/* Explicit 24-hour segments; native source stays responsible for submitted values. */
[data-time24-source] { display: none !important; }
.time24 { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); inline-size: 100%; min-inline-size: 0; }
.time24-parts {
  display: flex; align-items: center; gap: var(--space-1);
  flex: 1 1 var(--form-time-width); min-inline-size: 0;
}
.time24 input, .field .time24 input {
  box-sizing: border-box; block-size: var(--form-control-height); min-block-size: var(--form-control-height);
  min-inline-size: 0; max-inline-size: 100%; padding: var(--space-2);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface-card); color: var(--color-text-strong);
  font: inherit; font-variant-numeric: tabular-nums;
}
.time24 .time24-parts input, .field .time24 .time24-parts input {
  flex: 1 1 var(--form-time-part-width); inline-size: var(--form-time-part-width); text-align: center;
}
.time24 > input[type="date"] { flex: 1 1 var(--form-short-width); inline-size: var(--form-short-width); }
.time24-separator, .time24-format { flex: none; color: var(--color-text-muted); }
.time24-format { font-size: var(--text-xs); white-space: nowrap; }
.time24-error { flex-basis: 100%; font-size: var(--text-sm); color: var(--color-state-danger); }
.time24 input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.time24 input:disabled { opacity: .65; cursor: not-allowed; }
.time24 input[readonly] { background: var(--color-surface-raised); }
.time24[data-invalid="true"] input { border-color: var(--color-state-danger); }
.time24 input[aria-invalid="true"] { border-color: var(--color-state-danger); }
.field > .field-control:has(> .time24) { max-inline-size: 100%; }
.schedule-range > .time24 { inline-size: var(--form-time-width); }
@media (max-width: 640px) {
  .field-control, .field[data-width] > .field-control { max-inline-size: 100%; }
  .form-actions { flex-wrap: wrap; }
}

/* Facts follow the available card width, including wide detail pages and step reviews.
   Keep compact receipt/side summaries vertical; do not infer columns from viewport width. */
@media screen {
  .detail-list:not([data-compact="true"]):not([data-layout="tiles"]),
  .academy-review,
  .summary-card-list,
  .bk-done-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-detail-min-width)), 1fr));
    gap: var(--space-4) var(--panel-inset);
    margin: 0;
    columns: auto;
    align-items: start;
  }

  .detail-list:not([data-compact="true"]):not([data-layout="tiles"]) > .detail-row,
  .academy-review > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    min-inline-size: 0;
    gap: var(--space-2);
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--color-border-normal);
  }

  .detail-list:not([data-compact="true"]):not([data-layout="tiles"]) > .detail-row dd,
  .academy-review dd {
    margin: 0;
    padding: 0;
    text-align: start;
    font-weight: var(--weight-medium);
    white-space: pre-line;
  }

  .detail-list > .detail-row[data-span="full"],
  .bk-done-list > .bk-done-total { grid-column: 1 / -1; }

  .detail-list[data-layout="tiles"], .settings-pair .detail-list[data-layout="tiles"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-detail-min-width)), 1fr));
  }
  .detail-list[data-layout="tiles"] .detail-row:not([data-icon="true"]) { padding-inline-start: var(--space-4); }
  .detail-list[data-layout="tiles"] .detail-row dd { margin: 0; padding: 0; text-align: start; }
  .detail-list[data-compact="true"] .detail-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .detail-list dt, .detail-list dd, .academy-review dt, .academy-review dd,
  .summary-card-row, .summary-card-row dd, .bk-done-list > div { min-inline-size: 0; overflow-wrap: anywhere; }
  .bk-done-list dt, .bk-done-list dd { min-inline-size: 0; overflow-wrap: anywhere; white-space: normal; }
}

/* Shared page rhythm: one gutter and panel scale across data pages and workflows. */
:root {
  --page-gutter: var(--layout-page-gutter);
  --panel-inset: var(--panel-padding);
}
.page { min-inline-size: 0; gap: var(--panel-gap); }
.page > *, .card, .card-body, .form-layout, .step-nav { min-inline-size: 0; }
.card, .form-step, .bk-card, .bk-summary, .bk-done {
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
}
.card-head { padding: var(--panel-inset) var(--panel-inset) var(--space-4); }
.card-body { padding: var(--panel-gap) var(--panel-inset) var(--panel-inset); gap: var(--panel-gap); }
.card[data-flush="true"] > .card-body { padding: var(--space-2) var(--panel-inset) var(--panel-inset); }
.card-head-text, .card-lead, .form-step-head, .bk-card-title { overflow-wrap: anywhere; }
.form-step, .bk-card, .bk-summary, .bk-done { padding: var(--panel-inset); gap: var(--panel-gap); }
.form-step-head { align-items: center; padding-block-end: var(--space-4); border-block-end: 1px solid var(--color-border-normal); }
.form-step-head h3, .bk-card-title { font-size: var(--text-lg); font-weight: var(--weight-heavy); }
.form-layout, .form-main, .form-aside, .form-steps, [data-step],
.bk-layout, .bk-main, .record-layout, .record-main, .record-side { gap: var(--panel-gap); }
.card-row { gap: var(--panel-gap); align-items: stretch; }
.card-row > .page-section { display: flex; flex-direction: column; margin-block-start: 0; }
.card-row > .page-section > .card { flex: 1; }
.form-layout .form-actions, .bk-actions { border-radius: var(--panel-radius); }
.bk-actions {
  padding: var(--space-4) var(--panel-inset);
  border: 1px solid var(--color-border-normal);
  background: var(--color-surface-card);
  align-items: center;
}
.step-nav .btn, .bk-actions .btn { min-block-size: var(--form-control-height); }
.bk-summary-row dd, .bk-summary-line dd, .detail-row dd { min-inline-size: 0; overflow-wrap: anywhere; }
.bk-summary-row dt { min-inline-size: 0; white-space: normal; }
.bk-done, .bk-done:has(.bk-done-group) { max-inline-size: none; }

/* Keep the progress rail above both form and summary; all final actions share its footer. */
form[data-steps-ready].form-layout > .stepper { grid-area: progress; }
form[data-steps-ready].form-layout { grid-template-areas: "progress" "main" "aside"; }
form[data-steps-ready].form-layout > .form-main { grid-area: main; }
form[data-steps-ready].form-layout > .form-aside { grid-area: aside; }
.step-nav > .form-actions[data-step-final] {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
@media screen and (min-width: 1024px) {
  form[data-steps-ready].form-layout[data-aside] {
    grid-template-columns: minmax(0, 1fr) var(--layout-aside-width);
    grid-template-areas: "progress progress" "main aside";
  }
}
@media screen and (max-width: 640px) {
  :root { --page-gutter: var(--layout-page-gutter-mobile); --panel-inset: var(--panel-padding-mobile); }
  .step-nav { padding: var(--space-3); }
  .step-nav > .form-actions[data-step-final] { flex-basis: 100%; }
  .step-nav > .form-actions[data-step-final] .form-actions-buttons { inline-size: 100%; }
  .step-nav > .form-actions[data-step-final] .btn { flex: 1; }
  .card-head { gap: var(--space-3); }
}
/* แถบ "ยังจ่ายราคาเก่า · ใช้ราคาปัจจุบัน" ในการ์ดแพ็กเกจ (2026-10-21) */
/* แถบ "ยังจ่ายราคาเก่า · ใช้ราคาปัจจุบัน" ในการ์ดแพ็กเกจ (2026-10-21 · ผู้ใช้สั่ง "ปรับให้สวย") — แถบบางสีอ่อน ไอคอนวงกลม + 2 บรรทัด + ปุ่มรอง */
.plan-reprice {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0 var(--space-6) var(--space-5); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-lg); background: var(--color-tint-warning);
  border-inline-start: 3px solid var(--color-state-warning);
}
.plan-reprice-icon { flex: none; display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: var(--radius-full); background: var(--color-surface-card); color: var(--color-state-warning); }
.plan-reprice-icon .icon { inline-size: 16px; block-size: 16px; }
.plan-reprice-text { flex: 1 1 auto; display: grid; gap: 1px; min-inline-size: 0; }
.plan-reprice-text strong { font-size: var(--text-sm); color: var(--color-text-strong); }
.plan-reprice-text small { font-size: var(--text-xs); color: var(--color-text-muted); }
.plan-reprice .btn { flex: none; white-space: nowrap; }
@media screen and (max-width: 640px) {
  .plan-reprice { flex-wrap: wrap; margin-inline: var(--space-4); }
  .plan-reprice .btn { inline-size: 100%; justify-content: center; }
}

/* ประมาณการในการ์ดแพ็กเกจ (ขวา ใต้ช่องสาขา/วันเริ่มคิดเงิน · 2026-10-21) */
.plan-summary-side .estimate-months { gap: var(--space-2); }

/* ช่องที่มีการ์ดซ้อนกันหลายใบ (เครดิต + SMS · 2026-10-21) — ไม่ยืดทุกใบ ใบสุดท้ายยืดให้สูงเท่าฝั่งขวา */
.sub-cell:has(> .card ~ .card) > .card { flex: 0 0 auto; }
.sub-cell:has(> .card ~ .card) > .card:last-of-type { flex: 1 1 auto; }

/* หน้าค่าบริการ OMC: SMS (ซ้าย) + ประมาณการ (ขวา) (2026-10-21) — SMS ครึ่งจอ = ช่องตัวเลข 2×2 */
.billing-sms-row { margin-block-end: var(--space-6); }
.billing-sms-row .mini-stats, .billing-sms-row .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ชิปตัวกรองแดชบอร์ดที่เลือกอยู่ = สีหลักทึบ + ตัวหนังสือขาว ทุกธีม (ผู้ใช้ทัก 2026-10-21 "ทำไมบางจุดไม่เป็นสีหลัก")
   ‼️ กฎพื้นอ่อนของธีม (.bk-chip[aria-pressed] → brand-soft) ชนะกฎเดิม จึงได้ตัวหนังสือขาวบนพื้นครีมอ่านไม่ออก — selector ต้องแรงกว่า */
:is(:root[data-tenant-theme][data-tenant-theme], :root) .dash-chips .bk-chip[aria-pressed="true"].bk-chip {
  background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent);
}
/* ปุ่มเลือกแบบ segmented ที่เลือกอยู่ (วิธีรับเงินเติม Sports Credit · เพิ่ม/ลดเครดิต) = สีหลักทึบทุกธีม (ผู้ใช้ทัก 2026-10-22)
   ‼️ กฎพื้นอ่อนของธีม (.wallet-topup .bk-chip:has(input:checked) → brand-soft) ชนะกฎเดิม ได้ปุ่มครีมจางในธีมอื่นที่ไม่ใช่เขียว */
:is(:root[data-tenant-theme][data-tenant-theme], :root) .wallet-adjust-direction.segmented .bk-chip.bk-chip:has(input:checked) {
  background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent);
}

/* บรรทัดที่สองของป้ายสวิตช์ — วงเล็บบอกช่องทาง เช่น (สมัครด้วย LINE) ขึ้นบรรทัดใหม่ (partials/switch-field.php $switchSub) */
.switch-label-sub { display: block; }

/* ── แถบขวาของหน้าใบจอง กระชับ (ผู้ใช้สั่ง 2026-10-26: แถบขวายาวมาก) ──
   ‼️ dd ใน detail-list มี white-space: pre-line แต่ค่าถูกแยกเป็น .detail-line อยู่แล้ว
      ช่องว่าง/ขึ้นบรรทัดของ template จึงกลายเป็นบรรทัดว่าง → แถวสรุปยอดสูง 2 เท่า */
.detail-list[data-compact="true"] .detail-row dd { white-space: normal; }
/* ‼️ ทุก detail-list: ค่าที่แยกเป็น .detail-line แล้วไม่ต้อง pre-line — ไม่งั้นช่องว่างของ template เป็นบรรทัดว่างเหนือค่า (หน้าติดต่อ: ค่าห่างป้ายครึ่งการ์ด · 2026-10-27) */
.detail-list .detail-row dd:has(.detail-line),
.detail-list:not([data-compact="true"]):not([data-layout="tiles"]) > .detail-row dd:has(.detail-line) { white-space: normal; }
/* ลิงก์ (โทร/อีเมล) ครอบ span.detail-line ที่เป็นบล็อก — inline ครอบบล็อกเกิดบรรทัดว่างแถม แถวสูงกว่าแถวอื่น · กว้างเท่าข้อความ ไม่ใช่ทั้งแถว */
.detail-list .detail-row dd > a:has(> .detail-line) { display: block; inline-size: fit-content; }
/* กล่องไอคอน (หน้าติดต่อ ฯลฯ): ป้ายชิดบนกล่องไอคอน ค่าอยู่ใต้ป้ายข้างกล่อง ทุกความกว้าง
   ‼️ กฎกลาง "Facts follow the available card width" ทำแถวเป็นคอลัมน์เดียวและล้าง margin/padding ของ dd — เดิมค่าตกไปใต้กล่องไอคอน ห่างป้ายมาก
   ดึง dd ขึ้น = สูงกล่องไอคอน (40px) + gap ของแถว − หนึ่งบรรทัดป้าย */
.detail-list[data-icon-box="true"]:not([data-compact="true"]):not([data-layout="tiles"]) > .detail-row[data-icon="true"] dt { align-items: flex-start; }
.detail-list[data-icon-box="true"]:not([data-compact="true"]):not([data-layout="tiles"]) > .detail-row[data-icon="true"] dd {
  padding-inline-start: calc(40px + var(--space-3));
  margin-block-start: calc((40px + var(--space-2) - 1.5rem) * -1);
}
.detail-list[data-compact="true"] .detail-row { grid-template-columns: minmax(0, auto) minmax(0, 1fr); padding-block: var(--space-2); }

.money-log { list-style: none; margin: 0; padding: 0; display: grid; border-block-start: 1px solid var(--color-border-normal); }
.money-log > li { display: grid; gap: 2px; padding-block: var(--space-2); border-block-end: 1px solid var(--color-border-normal); }
.money-log-main, .money-log-sub { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-inline-size: 0; }
.money-log-main .numeric { font-weight: var(--weight-medium); color: var(--color-text-strong); }
.money-log > li[data-out="true"] .money-log-main .numeric { color: var(--color-text-muted); }
.money-log-sub { font-size: var(--text-sm); color: var(--color-text-muted); }
.money-log-sub .badge { flex: none; }
.money-log-more { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-brand-accent); text-decoration: none; }
.money-log-more .icon { inline-size: 16px; block-size: 16px; }

.side-fold > summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-brand-accent); padding-block: var(--space-1); }
.side-fold > summary::-webkit-details-marker { display: none; }
.side-fold > summary .icon { inline-size: 16px; block-size: 16px; }
.side-fold > summary .icon:last-child { margin-inline-start: auto; transition: transform var(--duration-fast); }
.side-fold[open] > summary .icon:last-child { transform: rotate(180deg); }
.side-fold[open] > summary { margin-block-end: var(--space-3); }
.side-fold[data-tone="danger"] > summary { color: var(--color-state-danger); }
/* ฟอร์มยกเลิกการจองในแถบขวา (ผู้ใช้แจ้ง 2026-10-28 "ข้อความบีบ") — เรียงลงทีละชุด · การ์ดตัวเลือกเต็มความกว้าง · คำอธิบายไม่ตัด */
.booking-cancel { display: flex; flex-direction: column; gap: var(--space-4); }
.booking-cancel .refund-dest { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.booking-cancel .refund-dest legend { margin-block-end: var(--space-2); line-height: var(--leading-tight); }
.booking-cancel .choice-grid { grid-template-columns: 1fr; gap: var(--space-2); }
.booking-cancel .choice-card { padding: var(--space-3); }
.booking-cancel .choice-card-hint { display: block; -webkit-line-clamp: unset; overflow: visible; }
.booking-cancel .field { margin: 0; }
.booking-cancel .form-actions { margin: 0; }
.booking-cancel .form-actions .btn { inline-size: 100%; justify-content: center; }

/* หน้านโยบายของการจอง (ลูกค้า) — คอลัมน์เดียวกว้างพออ่าน · การ์ดต่อเรื่อง · ยอดคืนเด่น (ผู้ใช้สั่ง 2026-10-30 "ไม่สวยงาม") */
.account-policy { display: grid; gap: var(--space-5); align-items: start; }
/* PC: ซ้าย = นโยบาย/คำขอคืนเงิน · ขวา = การ์ดยกเลิก ติดจอตอนเลื่อน (ผู้ใช้สั่ง 2026-10-30 "ฝั่งขวาเหลือเยอะไป") */
@media (min-width: 1024px) {
  .account-policy:has(> .account-cancel) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .account-policy > .account-cancel { grid-column: 2; grid-row: 1 / span 9; position: sticky; inset-block-start: calc(var(--space-10) * 2); }
}
.account-policy-card { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--color-surface-card); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.account-policy-card .bk-policy { padding: 0; border: 0; font-size: var(--text-base); gap: var(--space-3); }
.account-policy-card .bk-policy .bk-label { font-size: var(--text-lg); }
.account-policy-card .bk-policy-lines { gap: var(--space-2); }
.account-policy-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-lg); color: var(--color-text-strong); }
.account-policy-title .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-brand-accent); }
.account-cancel .account-policy-title .icon { color: var(--color-state-danger); }
.account-policy-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border-normal); color: var(--color-text-muted); font-size: var(--text-sm); }
.account-policy-note .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); margin-block-start: 2px; color: var(--color-brand-accent); }
.account-cancel-refund { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-state-success) 10%, transparent); }
.account-cancel-refund[data-tone="danger"] { background: color-mix(in srgb, var(--color-state-danger) 10%, transparent); }
.account-cancel-refund > span { color: var(--color-text-muted); font-size: var(--text-sm); }
.account-cancel-refund > strong { font-size: var(--text-2xl); color: var(--color-state-success); line-height: var(--leading-tight); }
.account-cancel-refund[data-tone="danger"] > strong { color: var(--color-state-danger); }
.account-cancel-refund > small { color: var(--color-text-normal); font-size: var(--text-sm); }
.account-cancel .booking-cancel .choice-grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.account-refunds { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.account-refunds > li { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); }
.account-refund-head, .account-refund-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ดาวโค้ช (151 · ผู้ใช้สั่ง 2026-10-30) — partials/rating-stars.php · รายการรีวิว · ตัวเลือกดาวในหน้าให้ดาว */
.rating-stars { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.rating-stars-row { display: inline-flex; gap: 1px; line-height: 1; }
.rating-star { color: var(--color-border-strong); }
.rating-star[data-on="true"] { color: var(--color-state-warning); }
.rating-stars-text strong { color: var(--color-text-strong); }
.coach-rating { display: inline-flex; text-decoration: none; }
.review-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.review-item { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); }
.review-item[data-hidden] { opacity: .6; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.review-meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.review-comment { margin: 0; color: var(--color-text-normal); white-space: pre-line; overflow-wrap: anywhere; }
.review-action { justify-self: end; margin: 0; }
.history-rated { display: inline-flex; align-items: center; }
.coach-review-card { max-inline-size: 640px; }
.coach-review-who { display: flex; align-items: center; gap: var(--space-4); }
.coach-review-who p { margin: 0; }
.coach-review-form { display: grid; gap: var(--space-4); }
.coach-review-form .form-actions { margin: 0; }
.star-pick { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; gap: var(--space-2); }
.star-pick legend { margin-block-end: var(--space-2); font-weight: var(--weight-medium); color: var(--color-text-strong); }
.star-pick-row { display: inline-flex; gap: var(--space-1); }
.star-pick-item { position: relative; cursor: pointer; font-size: var(--text-3xl); line-height: 1; color: var(--color-border-strong); }
.star-pick-item input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.star-pick-item:has(input:focus-visible) { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
/* ระบายดาวที่เลือกและทุกดาวก่อนหน้า · hover แสดงตัวอย่าง */
.star-pick-row:has(input:checked) .star-pick-item { color: var(--color-state-warning); }
.star-pick-row .star-pick-item:has(input:checked) ~ .star-pick-item { color: var(--color-border-strong); }
.star-pick-row:hover .star-pick-item { color: var(--color-state-warning); }
.star-pick-row .star-pick-item:hover ~ .star-pick-item { color: var(--color-border-strong); }
@media (max-width: 560px) { .account-policy-card { padding: var(--space-4); } }


/* ═══════════ หน้าแรกผู้เล่น · เมนู "ผลิตภัณฑ์ของเรา" · รวมบทความ · หน้าติดต่อ (ผู้ใช้สั่ง 2026-10-22) */
@layer components {
  /* เมนูย่อยบนแถบบน — จอกว้าง: วางเมาส์/โฟกัสแล้วเปิด · มือถือ: ลิงก์ธรรมดาไป /business (แถบเมนูเลื่อนแนวนอน ตัดกล่องลอยทิ้ง) */
  .public-nav-menu { position: relative; display: flex; }
  /* หัวเมนูย่อยเป็นปุ่ม (ไม่ใช่ลิงก์) — หน้าตาเหมือนลิงก์อื่นในแถบ */
  .public-nav-trigger {
    display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) 0; margin: 0;
    border: 0; border-block-end: var(--tabs-indicator) solid transparent; background: none; cursor: default;
    color: var(--color-text-normal); font: inherit;
  }
  .public-nav-trigger:hover, .public-nav-menu:focus-within .public-nav-trigger { color: var(--color-text-strong); }
  .public-nav-trigger[data-current="true"] { color: var(--color-text-strong); border-block-end-color: var(--color-brand-accent); font-weight: var(--weight-medium); }
  .public-nav-trigger .icon { inline-size: 1rem; block-size: 1rem; transition: transform var(--duration-normal) var(--ease-standard); }
  .public-nav-panel {
    position: absolute; inset-block-start: 100%; inset-inline-start: 50%; translate: -50% 0; z-index: var(--z-header);
    min-inline-size: 20rem; padding: var(--space-2); margin-block-start: var(--space-2);
    background: var(--color-surface-card); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    display: none; flex-direction: column; gap: var(--space-1);
  }
  .public-nav-panel::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: calc(var(--space-2) * -1 - 2px); block-size: calc(var(--space-2) + 2px); }
  .public-nav .public-nav-panel a {
    display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 0; border-radius: var(--radius-md);
    color: var(--color-text-normal); font-weight: var(--weight-normal); white-space: normal;
  }
  .public-nav .public-nav-panel a:hover, .public-nav .public-nav-panel a[aria-current="page"] { background: var(--color-surface-head); }
  .public-nav-panel strong { display: block; color: var(--color-text-strong); font-weight: var(--weight-bold); }
  .public-nav-panel small { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
  .public-nav-panel-icon { flex: none; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius-md); background: var(--color-brand-wash); color: var(--color-brand-accent); }
  /* ชี้เมาส์ (จอกว้าง) หรือแตะ/โฟกัสปุ่ม (ทุกจอ) = เปิด */
  .public-nav-menu:focus-within .public-nav-panel { display: flex; }
  .public-nav-menu:focus-within .public-nav-trigger .icon { transform: rotate(180deg); }
  @media (min-width: 861px) {
    .public-nav-menu:hover .public-nav-panel { display: flex; }
    .public-nav-menu:hover .public-nav-trigger .icon { transform: rotate(180deg); }
  }
  /* มือถือ: แถบเมนูเลื่อนแนวนอน (overflow) ตัดกล่องลอย — วางกล่องแบบ fixed ใต้แถบบนแทน */
  @media (max-width: 860px) {
    .public-nav-trigger { min-block-size: 44px; white-space: nowrap; }
    .public-nav-panel { position: fixed; inset-block-start: auto; inset-inline: var(--space-4); translate: none; min-inline-size: 0; margin-block-start: var(--space-12); }
  }

  /* ── หน้าแรก: hero = เวทีดำ + สนาม 3D ตัวเดียวกับ /business (.lp-hero[data-hero-scene]) · ข้อความชิดซ้าย · ช่องค้นหาการ์ดขาวลอยบนเวที */
  .ph-stage-inner { display: grid; gap: var(--space-5); justify-items: start; }
  .ph-stage-body { max-inline-size: 42rem; }
  .ph-stage-body .lp-badge .icon { inline-size: 1rem; block-size: 1rem; }
  /* position + z-index: ม่านมืดหลังข้อความ (.lp-hero-body::before) ไม่ทับขอบบนของการ์ดค้นหา */
  .ph-stage .ph-search { position: relative; z-index: 1; margin-block-start: 0; box-shadow: none; border: 1px solid var(--color-stage-line); animation: lp-hero-rise 520ms var(--ease-enter) 340ms backwards; }
  .ph-stage-trust { margin: 0; }
  .ph-search {
    margin-block-start: var(--space-4); inline-size: 100%; max-inline-size: 64rem; text-align: start;
    display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) auto; align-items: end;
    padding: var(--space-3); background: var(--color-surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  }
  .ph-search-field { display: grid; gap: var(--space-1); min-inline-size: 0; padding: var(--space-1) var(--space-2); }
  .ph-search-field > span:first-child { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); }
  .ph-search-control { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0;
    border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); padding-inline: var(--space-3); background: var(--color-surface-card); }
  .ph-search-control:focus-within { border-color: var(--color-brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-accent) 22%, transparent); }
  .ph-search-control .icon { flex: none; inline-size: 1.1rem; block-size: 1.1rem; color: var(--color-text-muted); }
  .ph-search-control :is(input, select) { flex: 1; min-inline-size: 0; min-block-size: 44px; border: 0; outline: 0; background: transparent; color: var(--color-text-strong); font: inherit; }
  .ph-search-go { min-block-size: 46px; margin: var(--space-1); padding-inline: var(--space-6); }
  @media (max-width: 960px) {
    .ph-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ph-search-field[data-grow] { grid-column: 1 / -1; }
    .ph-search-go { grid-column: 1 / -1; }
  }
  @media (max-width: 520px) {
    .ph-search { grid-template-columns: minmax(0, 1fr); }
  }

  /* ── หัวแต่ละส่วน + ลิงก์ "ดูทั้งหมด" ชิดขวา */
  .ph-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-5); flex-wrap: wrap; }
  .ph-head .lp-h2 { margin: 0; }
  .ph-head .lp-sub { margin: var(--space-1) 0 0; }
  .ph-more { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-bold); color: var(--color-brand-link); text-decoration: none; white-space: nowrap; }
  .ph-more .icon { inline-size: 1rem; block-size: 1rem; }
  .ph-more:hover { text-decoration: underline; }

  /* ── กีฬา: การ์ดรูปฉาก + ชื่อทับล่าง */
  .ph-sports { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  .ph-sport { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; display: block; text-decoration: none; box-shadow: var(--shadow-sm); }
  .ph-sport img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--duration-normal) var(--ease-standard); }
  .ph-sport::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--color-overlay)); }
  .ph-sport span { position: absolute; inset-inline: var(--space-3); inset-block-end: var(--space-2); z-index: 1; color: var(--color-text-on-dark); font-weight: var(--weight-bold); }
  .ph-sport:hover img { transform: scale(1.06); }

  /* ── จังหวัด */
  .ph-provinces { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
  .ph-province { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 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); }
  .ph-province .icon { flex: none; inline-size: 1.1rem; block-size: 1.1rem; color: var(--color-brand-accent); }
  .ph-province small { margin-inline-start: auto; color: var(--color-text-muted); font-weight: var(--weight-normal); font-size: var(--text-sm); white-space: nowrap; }
  .ph-province:hover { border-color: var(--color-brand-accent); }

  /* ── บทความ */
  /* การ์ดมีรูปด้านบน + ป้ายหมวดบนรูป (ข่าวสาร/บทความ) · ข่าวแรกเป็นการ์ดเด่นกว้าง 2 คอลัมน์ (ผู้ใช้สั่ง 2026-10-29 "ทำให้สวย มีรูป") */
  .ph-articles { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
  .ph-article { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border-normal); border-radius: var(--radius-xl);
    background: var(--color-surface-card); color: var(--color-text-normal); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .ph-article:hover { border-color: var(--color-brand-accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
  .ph-article-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-court); }
  .ph-article-media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
  .ph-article:hover .ph-article-media img { transform: scale(1.04); }
  .ph-article-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--color-text-strong) 35%, transparent)); }
  .ph-article-type { position: absolute; z-index: 1; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-surface-card); color: var(--color-brand-accent);
    font-size: var(--text-xs); font-weight: var(--weight-bold); box-shadow: var(--shadow-sm); }
  .ph-article[data-kind="news"] .ph-article-type { background: var(--color-brand-accent); color: var(--color-brand-on-accent); }
  .ph-article-type .icon { inline-size: 0.95rem; block-size: 0.95rem; }
  .ph-article-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
  .ph-article h3 { margin: 0; color: var(--color-text-strong); font-size: var(--text-xl); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ph-article p { margin: 0; color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ph-article-foot { margin-block-start: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border-normal); }
  .ph-article-foot > span { display: inline-flex; align-items: center; gap: var(--space-1); }
  .ph-article-foot .icon { inline-size: 1rem; block-size: 1rem; }
  .ph-article-go { color: var(--color-brand-link); font-weight: var(--weight-bold); }

  @media (min-width: 900px) {
    .ph-articles[data-feature="true"] > .ph-article:first-child { grid-column: span 2; display: grid; grid-template-columns: 1.1fr 1fr; }
    .ph-articles[data-feature="true"] > .ph-article:first-child .ph-article-media { aspect-ratio: auto; min-block-size: 100%; }
    .ph-articles[data-feature="true"] > .ph-article:first-child h3 { font-size: var(--text-2xl); -webkit-line-clamp: 3; }
    .ph-articles[data-feature="true"] > .ph-article:first-child p { -webkit-line-clamp: 5; font-size: var(--text-base); }
  }

  /* "ดูเพิ่มเติม" ใต้การ์ด — ซ่อนการ์ดเกิน N แถว (data-rows-limit · app.js) */
  .ph-article.is-rows-hidden { display: none; }
  .ph-articles-more { display: flex; justify-content: center; margin-block-start: var(--space-6); }

  /* สมัครใช้ระบบเอง /signup (ผู้ใช้สั่ง 2026-11-02) — เวทีดำเดียวกับ hero หน้าแรก + ฉาก 3D ฝั่งซ้าย (signup-scene.js) · การ์ดฟอร์มสว่างลอยด้านขวา */
  .signup-stage { position: relative; isolation: isolate; overflow: clip; background: var(--color-stage-surface); color: var(--color-stage-text);
    min-block-size: calc(100svh - var(--space-20)); display: grid; align-content: center; padding-block: var(--space-12); }
  .signup-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 70% at 22% 55%, color-mix(in srgb, var(--color-stage-accent) 16%, transparent), transparent 70%),
                radial-gradient(40% 50% at 85% 20%, color-mix(in srgb, var(--color-brand-highlight) 8%, transparent), transparent 70%),
                /* เส้นตารางแบบเดียวกับหัวหน้าเว็บขาย (.bz-top) (ผู้ใช้สั่ง 2026-11-02) */
                repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-stage-line) 55%, transparent) 0 1px, transparent 1px 96px),
                repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-stage-line) 55%, transparent) 0 1px, transparent 1px 96px);
    mask-image: linear-gradient(180deg, var(--color-stage-surface) 55%, transparent); }
  /* ฉาก 3D: ครึ่งซ้ายของเวที สูงเท่าจอ (คอร์ทอยู่ใต้ข้อความ) · จอแคบ = เต็มกว้าง จางลง */
  .signup-canvas { position: absolute; inset: 0 auto auto 0; inline-size: 100%; block-size: min(100%, calc(100svh - var(--space-20))); z-index: -1; pointer-events: none; opacity: 0; transition: opacity .9s ease;
    -webkit-mask-image: linear-gradient(180deg, var(--color-stage-surface) 80%, transparent);
    mask-image: linear-gradient(180deg, var(--color-stage-surface) 80%, transparent); }
  .signup-stage.is-scene-ready .signup-canvas { opacity: 1; }
  @media (max-width: 999px) { .signup-canvas { inline-size: 100%; block-size: 70svh; } .signup-stage.is-scene-ready .signup-canvas { opacity: .4; } }
  .content:has(> .page > .signup-stage:first-child) { padding-block-start: 0; } /* เวทีดำชิดใต้แถบบน ไม่มีแถบขาว */
  .signup-grid { align-items: start; }
  /* ป้ายชื่อกีฬาของฉาก 3D — มุมล่างซ้ายของเวที จางเข้าเมื่อสนามเปลี่ยน */
  .signup-sport { position: absolute; inset-block-start: calc(100svh - var(--space-20) - var(--space-16)); /* ใต้สนาม ภายในจอแรก (เวทีสูงกว่าจอเพราะฟอร์มยาว) */ inset-inline-start: max(var(--page-gutter, var(--space-6)), calc((100% - var(--layout-public-width, 1360px)) / 2 + var(--space-5)));
    z-index: 0; pointer-events: none; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--color-stage-accent) 40%, transparent); background: color-mix(in srgb, var(--color-stage-surface) 70%, transparent);
    color: var(--color-stage-accent); font-weight: var(--weight-bold); letter-spacing: .04em; opacity: 0; }
  .signup-sport:empty { display: none; }
  .signup-sport.is-in { animation: signup-sport-in .6s var(--ease-enter, ease-out) forwards; }
  @keyframes signup-sport-in { from { opacity: 0; transform: translateY(var(--space-2)); } to { opacity: 1; transform: none; } }
  @media (max-width: 999px) { .signup-sport { display: none; } }
  /* ข้อความซ้ายอยู่กลางจอแรกตามแนวตั้ง (สูงเท่าจอใต้แถบบน) · อยู่กับที่ ไม่ลอยตามการเลื่อน (ผู้ใช้สั่ง 2026-11-02) */
  @media (min-width: 1000px) {
    .signup-intro { min-block-size: calc(100svh - var(--space-20) - var(--space-12) * 2); display: flex; flex-direction: column; justify-content: center; padding-block-end: var(--space-24); } /* ยกขึ้นเหนือกลางจอเล็กน้อย (ผู้ใช้แจ้ง "ต่ำไป") */
  }
  .signup-stage .signup-card { color: var(--color-text-normal); }
  .signup-stage .lp-eyebrow { color: var(--color-stage-accent); }
  .signup-stage .lp-title { color: var(--color-stage-text); text-wrap: balance; text-shadow: 0 2px 24px var(--color-stage-surface); }
  .signup-stage .lp-lead { color: var(--color-stage-muted); }
  .signup-stage .signup-points { color: var(--color-stage-text); }
  .signup-stage .signup-points li { padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-stage-surface) 55%, transparent); backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, var(--color-stage-line) 80%, transparent); }
  .signup-stage .signup-points .icon { background: var(--color-stage-accent); color: var(--color-stage-surface); }
  .signup-stage .signup-card { border: 1px solid color-mix(in srgb, var(--color-stage-accent) 35%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-stage-accent) 10%, transparent), 0 30px 80px -20px color-mix(in srgb, var(--color-stage-accent) 35%, transparent), var(--shadow-lg); }
  .signup-stage .lp-hero-visual .empty-state { background: var(--color-surface-card); border-radius: var(--radius-xl); padding: var(--space-6); }
  .signup-plan-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
  .signup-plan-label a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-brand-link); font-size: var(--text-sm); font-weight: var(--weight-medium); }
  .signup-plan-label a .icon { inline-size: 0.95rem; block-size: 0.95rem; }
  .signup-plan-field .required { color: var(--color-danger, currentColor); }
  @media (max-width: 999px) { .signup-stage { min-block-size: 0; padding-block: var(--space-8); } }

  .signup-card .card-body { display: grid; gap: var(--space-4); }
  .signup-card .card-body > form { display: grid; gap: var(--space-4); margin: 0; }
  .signup-card-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-xl); color: var(--color-text-strong); }
  .signup-card-title .icon { inline-size: 1.4rem; block-size: 1.4rem; color: var(--color-brand-accent); }
  .signup-card-lead { margin: 0; color: var(--color-text-muted); line-height: 1.7; }
  .signup-code-input { font-size: var(--text-2xl); letter-spacing: 0.5em; text-align: center; }
  .signup-code-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
  .signup-code-actions form { margin: 0; }
  .signup-terms label { line-height: 1.6; }
  .signup-terms a, .signup-login a { color: var(--color-brand-link); font-weight: var(--weight-medium); }
  .signup-login { margin: 0; text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }

  /* เวทีดำของ /signup และ /login ยาวถึง footer — ไม่มีแถบสีหน้าเว็บโผล่ใต้เวที (ผู้ใช้แจ้ง 2026-11-02 "ไม่ถึงขอบล่าง") */
  .content:has(> .page > .signup-stage:first-child) { padding-block-end: 0; }
  .content:has(> .page > .signup-stage:first-child) + .public-footer { margin-block-start: 0; } /* footer มี margin บน 64px → แถบขาวใต้เวที */
  .page:has(> .signup-stage:first-child) { padding-block-end: 0; margin-block-end: 0; }
  .signup-stage { min-block-size: calc(100svh - var(--hero-offset, var(--space-20))); } /* --hero-offset วัดจริงจาก signup-scene.js แบบหน้าแรก — ค่าตายตัวเหลือขอบ footer โผล่ใต้เวที (ผู้ใช้แจ้ง 2026-11-02) */
  /* หน้า /login: การ์ดฟอร์มเดิม (.auth-card) วางบนเวทีดำ */
  .login-stage .auth-card { max-inline-size: 30rem; margin-inline-start: auto; padding: var(--space-8); color: var(--color-text-normal); border-radius: var(--radius-xl);
    background: var(--color-surface-card); border: 1px solid color-mix(in srgb, var(--color-stage-accent) 35%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-stage-accent) 10%, transparent), 0 30px 80px -20px color-mix(in srgb, var(--color-stage-accent) 35%, transparent), var(--shadow-lg); }
  .login-stage .lp-title em { font-style: normal; color: var(--color-stage-accent); display: block; }
  .login-stage .signup-points { display: grid; gap: var(--space-3); }
  @media (max-width: 999px) { .login-stage .lp-hero-visual { order: -1; } .login-stage .auth-card { margin-inline: auto; } }

  /* หน้า /login เวทีดำ + ฉาก 3D เดียวกับ /signup (layouts/auth.php $authStage) — ส่วนหัว/ท้ายยังสว่างเหมือนเดิม (ผู้ใช้สั่ง 2026-11-02) */
  .auth-main[data-stage="dark"] { position: relative; isolation: isolate; overflow: clip; max-inline-size: none;
    padding-inline: max(clamp(var(--space-4), 4vw, var(--space-10)), calc((100% - var(--layout-public-width)) / 2));
    background: var(--color-stage-surface); color: var(--color-stage-text); --color-focus: var(--color-stage-accent); }
  .auth-main[data-stage="dark"]::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: radial-gradient(60% 70% at 22% 55%, color-mix(in srgb, var(--color-stage-accent) 16%, transparent), transparent 70%),
                radial-gradient(40% 50% at 85% 20%, color-mix(in srgb, var(--color-brand-highlight) 8%, transparent), transparent 70%),
                repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-stage-line) 55%, transparent) 0 1px, transparent 1px 96px),
                repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-stage-line) 55%, transparent) 0 1px, transparent 1px 96px);
    mask-image: linear-gradient(180deg, var(--color-stage-surface) 55%, transparent); }
  .auth-main[data-stage="dark"] .signup-canvas { block-size: 100%; }
  .auth-main[data-stage="dark"].is-scene-ready .signup-canvas { opacity: 1; }
  @media (max-width: 999px) { .auth-main[data-stage="dark"].is-scene-ready .signup-canvas { opacity: .4; } }
  .auth-main[data-stage="dark"] .auth-hero { gap: var(--space-5); }
  @media (max-width: 999px) { .auth-main[data-stage="dark"] .auth-card { order: -1; } } /* มือถือ: ฟอร์มขึ้นก่อน เรื่องเล่าตามหลัง */
  .auth-main[data-stage="dark"] .auth-script { display: none; } /* ป้ายชื่อกีฬาอยู่มุมล่างแทน */
  .auth-main[data-stage="dark"] .signup-sport { inset-block-start: auto; inset-block-end: var(--space-6);
    inset-inline-start: max(clamp(var(--space-4), 4vw, var(--space-10)), calc((100% - var(--layout-public-width)) / 2)); }
  .auth-main[data-stage="dark"] .auth-hero-media { display: none; }
  .auth-main[data-stage="dark"] .lp-eyebrow { color: var(--color-stage-accent); }
  .auth-main[data-stage="dark"] .auth-hero-title { color: var(--color-stage-text); text-shadow: 0 2px 24px var(--color-stage-surface); }
  .auth-main[data-stage="dark"] .auth-hero-title em { color: var(--color-stage-accent); }
  .auth-main[data-stage="dark"] .auth-hero-lead { color: var(--color-stage-muted); }
  .auth-main[data-stage="dark"] .auth-benefit { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); max-inline-size: 34rem;
    background: color-mix(in srgb, var(--color-stage-surface) 55%, transparent); backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, var(--color-stage-line) 80%, transparent); }
  .auth-main[data-stage="dark"] .auth-benefit-icon { background: var(--color-stage-accent); color: var(--color-stage-surface); }
  .auth-main[data-stage="dark"] .auth-benefit-title { color: var(--color-stage-text); }
  .auth-main[data-stage="dark"] .auth-benefit-note { color: var(--color-stage-muted); }
  .auth-main[data-stage="dark"] .auth-script { color: var(--color-stage-accent); }
  .auth-main[data-stage="dark"] .auth-card { color: var(--color-text-normal); border: 1px solid color-mix(in srgb, var(--color-stage-accent) 35%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-stage-accent) 10%, transparent), 0 30px 80px -20px color-mix(in srgb, var(--color-stage-accent) 35%, transparent), var(--shadow-lg); }

  /* หน้าดูทั้งหมดของหมวด (/articles?type=news|guide): แถบค้นหา คำ + วันที่ลง (ผู้ใช้สั่ง 2026-11-02) */
  .art-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border-normal); border-radius: var(--radius-xl); background: var(--color-surface-card); box-shadow: var(--shadow-sm); }
  .art-search-field { display: grid; gap: var(--space-1); flex: 0 1 12rem; }
  .art-search-field[data-kind="q"] { flex: 1 1 18rem; }
  .art-search-field label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-strong); }
  .art-search-control { position: relative; }
  .art-search-control .icon { position: absolute; inset-inline-start: var(--space-3); inset-block-start: 50%; translate: 0 -50%; inline-size: 1.1rem; block-size: 1.1rem; color: var(--color-text-muted); pointer-events: none; }
  .art-search-control input { inline-size: 100%; padding-inline-start: calc(var(--space-3) + 1.1rem + var(--space-2)); }
  .art-search-control[data-plain="true"] input { padding-inline-start: var(--space-3); } /* ช่องวันที่มีไอคอนปฏิทินของเบราว์เซอร์อยู่แล้ว */
  .art-search-count { margin: calc(var(--space-8) * -1 + var(--space-4)) 0 calc(var(--space-8) * -1 + var(--space-4)); /* ชิดแถบค้นหาและการ์ด (.art-page gap 32px) */ color: var(--color-text-muted); font-size: var(--text-base); }
  .art-pager { margin-block-start: var(--space-6); }
  /* แบ่งหน้าข่าว/บทความอยู่กึ่งกลาง (ข้อความจำนวนอยู่บน ปุ่มอยู่ล่าง) (ผู้ใช้สั่ง 2026-11-02) */
  .art-pager .pagination-bar { flex-direction: column; justify-content: center; align-items: center; gap: var(--space-3); }
  .art-pager .pagination-bar > .spacer { margin-inline-start: 0; }
  @media (max-width: 640px) { .art-search-field, .art-search-field[data-kind="q"] { flex-basis: 100%; } .art-search .btn { flex: 1 1 auto; } }

  /* หน้า /articles: แท็บหมวด + ส่วนข่าวสาร / บทความ แยกกัน */
  .art-page { display: grid; gap: var(--space-8); }
  .art-tabs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
  .art-tabs::-webkit-scrollbar { display: none; }
  .art-tab { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-full); background: var(--color-surface-card); color: var(--color-text-normal); text-decoration: none; font-weight: var(--weight-medium); }
  .art-tab .icon { inline-size: 1.05rem; block-size: 1.05rem; color: var(--color-brand-accent); }
  .art-tab small { min-inline-size: 1.5rem; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--color-surface-head); color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; }
  .art-tab:hover { border-color: var(--color-brand-accent); }
  .art-tab[aria-current="page"] { border-color: var(--color-brand-accent); background: var(--color-brand-accent); color: var(--color-brand-on-accent); }
  .art-tab[aria-current="page"] .icon { color: inherit; }
  .art-tab[aria-current="page"] small { background: color-mix(in srgb, var(--color-brand-on-accent) 22%, transparent); color: inherit; }
  .art-group { scroll-margin-block-start: var(--space-20); }

  /* ── เรื่องเด่นหัวหน้าข่าวสาร (ผู้ใช้สั่ง 2026-10-30 "จัด layout ข่าว บทความให้ดูน่าเปิดอ่าน") — ภาพใหญ่ตัวหนังสือบนรูป + ข่าวล่าสุด 3 ข่าวด้านข้าง */
  .art-spot { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); margin-block-end: var(--space-6); }
  .art-spot[data-solo="true"] { grid-template-columns: minmax(0, 1fr); }
  .art-spot-main { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-block-size: 28rem; overflow: hidden; border-radius: var(--radius-xl);
    background: var(--color-stage-surface); color: var(--color-stage-text); text-decoration: none; box-shadow: var(--shadow-md); }
  .art-spot-main > img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
  .art-spot-main:hover > img, .art-spot-main:focus-visible > img { transform: scale(1.06); }
  .art-spot-shade { position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, transparent 15%, color-mix(in srgb, var(--color-stage-surface) 72%, transparent) 50%, color-mix(in srgb, var(--color-stage-surface) 96%, transparent) 100%); }
  .art-spot-text { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-10) var(--space-8) var(--space-8); }
  .art-spot-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
    background: var(--color-stage-accent); color: var(--color-stage-surface); font-size: var(--text-sm); font-weight: var(--weight-bold); }
  .art-spot-badge .icon { inline-size: 1rem; block-size: 1rem; }
  .art-spot-main h3 { margin: 0; color: inherit; text-shadow: 0 2px 12px var(--color-stage-surface); font-size: clamp(1.45rem, 1rem + 1.5vw, 2.25rem); line-height: 1.3; text-wrap: balance;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .art-spot-main p { margin: 0; max-inline-size: 42rem; color: var(--color-stage-muted); font-size: var(--text-lg); line-height: 1.65;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .art-spot-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--color-stage-muted); font-size: var(--text-sm); }
  .art-spot-meta > span { display: inline-flex; align-items: center; gap: var(--space-1); }
  .art-spot-meta .icon { inline-size: 1rem; block-size: 1rem; }
  .art-spot-side { display: grid; align-content: start; gap: var(--space-3); }
  .art-spot-label { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); color: var(--color-text-strong); font-size: var(--text-lg); font-weight: var(--weight-bold); }
  .art-spot-label::before { content: ""; inline-size: 4px; block-size: 1.1em; border-radius: var(--radius-full); background: var(--color-brand-accent); }
  .art-spot-item { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: var(--space-4); padding: var(--space-3);
    border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); color: var(--color-text-strong); text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .25s ease; }
  .art-spot-item:hover { border-color: var(--color-brand-accent); box-shadow: var(--shadow-sm); transform: translateX(4px); }
  .art-spot-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface-court); }
  .art-spot-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
  .art-spot-item:hover .art-spot-thumb img { transform: scale(1.08); }
  .art-spot-item-text { display: grid; gap: var(--space-1); min-inline-size: 0; }
  .art-spot-item strong { font-size: var(--text-base); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .art-spot-item small { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
  .art-spot-item small .icon { inline-size: .9rem; block-size: .9rem; }
  @media (max-width: 960px) {
    .art-spot { grid-template-columns: minmax(0, 1fr); }
    .art-spot-main { min-block-size: 24rem; }
  }
  @media (max-width: 640px) {
    .art-spot-main { min-block-size: 22rem; }
    .art-spot-text { padding: var(--space-8) var(--space-5) var(--space-5); }
    .art-spot-main p { font-size: var(--text-base); }
    .art-spot-item { grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-3); }
  }

  /* การ์ด: เวลาอ่าน + ลูกศรอ่านต่อขยับเมื่อชี้ (2026-10-30) */
  .ph-article-foot { flex-wrap: wrap; }
  .ph-article-read { color: var(--color-text-muted); }
  .ph-article-go .icon { transition: transform .25s ease; }
  .ph-article:hover .ph-article-go .icon { transform: translateX(4px); }
  .news-readmore .icon { transition: transform .25s ease; }
  .news-readmore:hover .icon { transform: translateX(4px); }

  /* แถบความคืบหน้าการอ่าน (หน้าอ่านข่าว/บทความ) */
  .read-progress { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60; block-size: 3px; pointer-events: none; }
  .read-progress > span { display: block; block-size: 100%; background: var(--color-brand-accent); transform-origin: left center; transform: scaleX(var(--read-p, 0)); }

  /* ══ ให้สวยขึ้นอีกขั้น (ผู้ใช้สั่ง 2026-10-30 "ให้สวยกว่านี้อีก" · "หน้าหลัก เลื่อนลงไปไม่สวยเลย") ══ */
  /* หัวข้อส่วน: ป้ายเล็กเหนือหัวข้อ + ปุ่มดูทั้งหมดแบบเม็ดยา */
  .ph-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
    border-radius: var(--radius-full); background: var(--color-tint-success); color: var(--color-brand-accent); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: normal; }
  .ph-eyebrow .icon { inline-size: 1rem; block-size: 1rem; }
  .ph-sec .ph-head, .art-group .ph-head { margin-block-end: var(--space-6); }
  .lp-section.ph-sec { padding-block: clamp(var(--space-12), 5vw, var(--space-16)); }  /* ไม่เว้นช่องระหว่างส่วนมากเกิน */
  .ph-sec .lp-h2, .art-group .lp-h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing: -0.01em; }
  .ph-more { padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-normal); border-radius: var(--radius-full); background: var(--color-surface-card);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
  .ph-more:hover { text-decoration: none; background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); }
  .ph-more .icon { transition: transform .25s ease; }
  .ph-more:hover .icon { transform: translateX(3px); }

  /* กีฬา: 5 คอลัมน์ ภาพใหญ่ขึ้น ยกขึ้นเมื่อชี้ ลูกศรโผล่ */
  .ph-sec .ph-sports { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
  .ph-sec .ph-sport { border-radius: var(--radius-xl); aspect-ratio: 4 / 3; transition: transform .3s ease, box-shadow .3s ease; }
  .ph-sec .ph-sport:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  .ph-sec .ph-sport img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
  .ph-sec .ph-sport:hover img { transform: scale(1.1); }
  .ph-sec .ph-sport::after { background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--color-stage-surface) 82%, transparent)); }
  .ph-sec .ph-sport span { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); inset-inline: var(--space-4); inset-block-end: var(--space-3);
    color: var(--color-stage-text); font-size: var(--text-lg); }
  .ph-sec .ph-sport span .icon { flex: none; inline-size: 1.15rem; block-size: 1.15rem; opacity: 0; translate: -8px 0; transition: opacity .25s ease, translate .25s ease; }
  .ph-sec .ph-sport:hover span .icon { opacity: 1; translate: 0 0; }
  @media (max-width: 1100px) { .ph-sec .ph-sports { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 760px) {
    .ph-sec .ph-sports { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .ph-sec .ph-sport span { font-size: var(--text-base); }
    .ph-sec .ph-sport span .icon { opacity: 1; translate: 0 0; }
  }

  /* สนาม: ยกการ์ด + รูปขยายเมื่อชี้ */
  .ph-venues .vd-card { transition: transform .3s ease, box-shadow .3s ease, border-color .2s ease; }
  .ph-venues .vd-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  .ph-venues .vd-card-media { overflow: hidden; }
  .ph-venues .vd-card-media img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
  .ph-venues .vd-card:hover .vd-card-media img { transform: scale(1.08); }

  /* จังหวัด: การ์ดมีวงไอคอน + จำนวนเป็นป้าย */
  .ph-sec .ph-provinces { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-3); }
  .ph-sec .ph-province { gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-lg);
    transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease; }
  .ph-sec .ph-province:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .ph-province-pin { flex: none; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-full); background: var(--color-tint-success);
    transition: background-color .2s ease; }
  .ph-sec .ph-province:hover .ph-province-pin { background: var(--color-brand-accent); }
  .ph-sec .ph-province:hover .ph-province-pin .icon { color: var(--color-brand-on-accent); }
  .ph-sec .ph-province small { padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--color-surface-head); }

  /* การ์ดบทความเติมเต็มแถว (3 ใบไม่เหลือช่องว่างท้ายแถว) */
  .ph-articles { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
  .ph-article { transition: transform .3s ease, box-shadow .3s ease, border-color .2s ease; }
  .ph-article:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

  .lp-section.art-section { padding-block-start: var(--space-5); }
  .art-tabs + .art-group { margin-block-start: calc(var(--space-2) * -1); }
  .art-group + .art-group { padding-block-start: var(--space-8); border-block-start: 1px solid var(--color-border-normal); }
  @media (max-width: 639px) {
    .art-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
    .art-tab { justify-content: center; gap: var(--space-1); padding-inline: var(--space-2); min-inline-size: 0; }
    .art-tab .icon { display: none; }
  }
  .article-cover { display: block; inline-size: 100%; max-inline-size: 48rem; aspect-ratio: 16 / 9; object-fit: cover; margin-block: var(--space-4) var(--space-6); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
  /* ── หน้าอ่านข่าว/บทความ (ผู้ใช้สั่ง 2026-10-29 "อ่านยาก ฟอนต์เล็กมาก") — คอลัมน์อ่านกลางจอ ตัวใหญ่ บรรทัดห่าง */
  .news-article { inline-size: 100%; max-inline-size: 46rem; margin-inline: auto; padding-block: var(--space-6) var(--space-8); }
  .news-article-head { display: grid; justify-items: start; gap: var(--space-3); margin-block-end: var(--space-6); }
  .news-article-back { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-bold); text-decoration: none; }
  .news-article-back:hover { color: var(--color-brand-link); }
  .news-article-back .icon { inline-size: 1rem; block-size: 1rem; }
  .news-article-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-tint-success); color: var(--color-brand-accent); font-size: var(--text-sm); font-weight: var(--weight-bold); }
  .news-article-chip[data-kind="news"] { background: var(--color-brand-accent); color: var(--color-brand-on-accent); }
  .news-article-chip .icon { inline-size: 1rem; block-size: 1rem; }
  .news-article-head h1 { margin: 0; color: var(--color-text-strong); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
  .news-article-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; color: var(--color-text-muted); font-size: var(--text-base); }
  .news-article-meta > * { display: inline-flex; align-items: center; gap: var(--space-1); }
  .news-article-meta .icon { inline-size: 1.05rem; block-size: 1.05rem; }
  .news-article-meta a { color: var(--color-brand-link); }
  .news-article-lead { margin: var(--space-2) 0 0; padding-inline-start: var(--space-4); border-inline-start: 4px solid var(--color-brand-accent); color: var(--color-text-strong); font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); line-height: 1.75; font-weight: var(--weight-medium, 500); }
  .news-article-cover { margin: 0 0 var(--space-8); }
  .news-article-cover img { display: block; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); background: var(--color-surface-court); }
  .news-article-cover figcaption { margin-block-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
  .news-article-body { display: grid; gap: 1.4em; color: var(--color-text-strong); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.9; }
  .news-article-body p { margin: 0; }
  /* บล็อกในบทความ (App\Lib\ContentBody · 2026-10-29) */
  .news-article-body h2 { margin: 1.2em 0 0; color: var(--color-text-strong); font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem); line-height: 1.4; }
  .news-article-body h3 { margin: 0.6em 0 0; color: var(--color-text-strong); font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.35rem); line-height: 1.45; }
  .news-article-body ul { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 0.55em; }
  .news-article-body li::marker { color: var(--color-brand-accent); }
  .news-readmore { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border-normal); border-inline-start: 4px solid var(--color-brand-accent); border-radius: var(--radius-lg); background: var(--color-surface-raised); color: var(--color-text-strong); font-weight: var(--weight-bold); text-decoration: none; line-height: 1.5; }
  .news-readmore:hover { border-color: var(--color-brand-accent); box-shadow: var(--shadow-sm); }
  .news-readmore > span { display: grid; gap: 2px; }
  .news-readmore small { color: var(--color-brand-link); font-size: var(--text-sm); }
  .news-readmore .icon { flex: none; inline-size: 1.3rem; block-size: 1.3rem; color: var(--color-brand-accent); }
  .news-tip { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-tint-success); color: var(--color-text-strong); }
  .news-tip .icon { flex: none; inline-size: 1.4rem; block-size: 1.4rem; margin-block-start: 0.25em; color: var(--color-brand-accent); }
  .news-figure { margin: 0.4em 0; }
  .news-figure img { display: block; inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-xl); background: var(--color-surface-court); }
  .news-figure figcaption { margin-block-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; }
  .news-chat { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-surface-head); font-size: 0.95em; line-height: 1.65; }
  .news-chat-line { display: grid; gap: 2px; max-inline-size: 85%; justify-self: start; }
  .news-chat-line[data-side="end"] { justify-self: end; justify-items: end; }
  .news-chat-line small { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); padding-inline: var(--space-2); }
  .news-chat-line p { margin: 0; padding: var(--space-2) var(--space-4); border-radius: 1.1rem 1.1rem 1.1rem 0.3rem; background: var(--color-surface-raised); border: 1px solid var(--color-border-normal); }
  .news-chat-line[data-side="end"] p { border-radius: 1.1rem 1.1rem 0.3rem 1.1rem; background: var(--color-social-line); border-color: var(--color-social-line); color: var(--color-social-on-line); }
  .news-article-source { display: flex; gap: var(--space-3); align-items: flex-start; margin-block-start: var(--space-8); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-head); color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.7; }
  .news-article-source .icon { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.2em; }
  .news-article-source p { margin: 0; }
  .news-article-source strong { color: var(--color-text-strong); }
  .news-article-source a { color: var(--color-brand-link); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 3px; }
  .news-article-source a .icon { display: inline-block; inline-size: 0.95rem; block-size: 0.95rem; margin: 0 0 0 var(--space-1); vertical-align: -0.1em; }
  .news-article-foot { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; margin-block-start: var(--space-8); padding-block-start: var(--space-6); border-block-start: 1px solid var(--color-border-normal); }
  .news-related { inline-size: 100%; max-inline-size: 72rem; margin: 0 auto var(--space-10, 4rem); display: grid; gap: var(--space-5); }
  .news-related h2 { margin: 0; font-size: var(--text-2xl); color: var(--color-text-strong); }
  @media (max-width: 40rem) { .news-article-foot .btn { flex: 1 1 100%; justify-content: center; } }

  /* ── หน้าบทความแบบมีสารบัญ (ผู้ใช้สั่ง 2026-11-09 ตัวอย่าง campaign.omc-software.com/articles) ──
     จอกว้าง: เนื้อหา 46rem | สารบัญ + แชร์ ติดขวาขณะเลื่อน · ≤ 1100px: สารบัญเป็นกล่องพับก่อนเนื้อหา
     หัวข้อ h2 มีเลขในวงกลม · คำตัวหนา = ไฮไลต์ปากกาเน้นข้อความ · ตาราง · กล่องเคล็ดลับมีป้าย */
  /* หัวบทความเต็มแถว · ใต้หัวข้อจึงแบ่ง เนื้อหา | สารบัญ — สารบัญเริ่มระดับรูปปก ไม่สูงกว่า (ผู้ใช้สั่ง 2026-11-09) */
  .news-article[data-has-toc] { max-inline-size: calc(46rem + 17.5rem + var(--space-10, 3rem)); }
  .news-article[data-has-toc] .news-article-head { max-inline-size: 46rem; }
  .news-article[data-has-toc] .art-cols { display: grid; grid-template-columns: minmax(0, 46rem) 17.5rem; gap: var(--space-10, 3rem); align-items: start; }
  /* ติดตามจอแบบไม่มีแถบเลื่อน: top = --follow-top (app.js) — คอลัมน์สูงกว่าจอ = เลื่อนไปกับหน้าจนเห็นท้ายคอลัมน์แล้วจึงติด */
  .art-aside { position: sticky; inset-block-start: var(--follow-top, calc(var(--space-12) * 2)); display: grid; gap: var(--space-4); }
  .art-toc { padding: var(--space-5); border: 1px solid var(--color-border-normal); border-radius: var(--radius-xl); background: var(--color-surface-raised); box-shadow: var(--shadow-sm); max-block-size: calc(100vh - var(--space-12) * 4); overflow-y: auto; }
  .art-toc h2 { margin: 0 0 var(--space-3); color: var(--color-text-strong); font-size: var(--text-lg); }
  .art-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .art-toc a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
  .art-toc a > span { display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--radius-full); background: var(--color-surface-head); font-size: var(--text-xs); font-weight: var(--weight-bold); }
  .art-toc a:hover { background: var(--color-surface-head); color: var(--color-text-strong); }
  .art-toc a[aria-current="true"] { background: var(--color-tint-success); color: var(--color-brand-accent); font-weight: var(--weight-bold); }
  .art-toc a[aria-current="true"] > span { background: var(--color-brand-accent); color: var(--color-brand-on-accent); }
  .art-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border-normal); border-radius: var(--radius-xl); background: var(--color-surface-raised); }
  .art-share > span { flex: 1 1 100%; color: var(--color-text-muted); font-size: var(--text-sm); }
  .art-share a, .art-share button { display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; padding: 0; border: 1px solid var(--color-border-normal); border-radius: var(--radius-full); background: var(--color-surface-head); color: var(--color-text-strong); font-size: var(--text-sm); font-weight: var(--weight-bold); text-decoration: none; cursor: pointer; }
  .art-share a[data-net="line"] { inline-size: auto; padding-inline: var(--space-3); border-color: var(--color-social-line); background: var(--color-social-line); color: var(--color-social-on-line); font-size: var(--text-xs); }
  .art-share a:hover, .art-share button:hover { border-color: var(--color-brand-accent); }
  .art-share .icon { inline-size: 1.1rem; block-size: 1.1rem; }
  /* คอลัมน์ขวาไม่โล่ง (ผู้ใช้สั่ง 2026-11-09 ตัวอย่าง mlmsoftware.omc.co.th) — ข้อมูลระบบที่เกี่ยวกับบทความนี้ · บทความที่เกี่ยวข้องรูปเล็ก */
  .art-links, .art-latest, .art-cta { display: grid; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border-normal); border-radius: var(--radius-xl); background: var(--color-surface-raised); box-shadow: var(--shadow-sm); }
  .art-links h2, .art-latest h2 { margin: 0 0 var(--space-2); color: var(--color-text-strong); font-size: var(--text-lg); line-height: 1.4; }
  .art-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); color: var(--color-text-strong); font-size: var(--text-sm); line-height: 1.55; text-decoration: none; }
  .art-links a + a { border-block-start: 1px solid var(--color-border-normal); }
  .art-links a[data-first] { color: var(--color-brand-accent); font-weight: var(--weight-bold); }
  .art-links a:hover { color: var(--color-brand-link); }
  .art-links .icon { flex: none; inline-size: 1rem; block-size: 1rem; color: var(--color-brand-accent); transition: transform .2s ease; }
  .art-links a:hover .icon { transform: translateX(3px); }
  /* ข่าว: ข่าวล่าสุด · ชวนหาสนาม */
  .art-latest h2 { display: flex; align-items: center; gap: var(--space-2); }
  .art-latest h2 .icon { inline-size: 1.1rem; block-size: 1.1rem; color: var(--color-brand-accent); }
  .art-latest a { display: grid; gap: 2px; padding-block: var(--space-3); color: var(--color-text-strong); font-size: var(--text-sm); line-height: 1.5; text-decoration: none; }
  .art-latest a + a { border-block-start: 1px solid var(--color-border-normal); }
  .art-latest time { color: var(--color-brand-accent); font-size: var(--text-xs); font-weight: var(--weight-bold); }
  .art-latest span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .art-latest a:hover span { color: var(--color-brand-link); }
  .art-cta { gap: var(--space-2); justify-items: start; background: var(--color-tint-success); border-color: transparent; }
  .art-cta > .icon { inline-size: 1.6rem; block-size: 1.6rem; color: var(--color-brand-accent); }
  .art-cta strong { color: var(--color-text-strong); font-size: var(--text-base); }
  .art-cta p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; }
  .art-cta .btn { margin-block-start: var(--space-1); }
  .art-toc { max-block-size: none; overflow: visible; }
  .news-article-body .art-h2 { display: flex; align-items: center; gap: var(--space-4); margin-block-start: 1em; padding-block-start: 1.4em; border-block-start: 1px solid var(--color-border-normal); scroll-margin-block-start: calc(var(--space-12) * 2); }
  .art-num { display: grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-full); background: var(--color-brand-accent); color: var(--color-brand-on-accent); font-size: 1.15rem; line-height: 1; box-shadow: var(--shadow-sm); }
  .news-article-body strong { color: var(--color-text-strong); font-weight: var(--weight-bold); background: linear-gradient(transparent 60%, color-mix(in srgb, var(--color-brand-accent) 20%, transparent) 60%); padding-inline: 2px; border-radius: 2px; }
  .news-tip-label { color: var(--color-brand-accent); font-weight: var(--weight-bold); }
  .news-tip strong { background: none; padding: 0; }
  .art-table { overflow-x: auto; border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-raised); }
  .art-table table { inline-size: 100%; border-collapse: collapse; font-size: 0.9em; line-height: 1.6; }
  .art-table th { padding: var(--space-3) var(--space-4); background: var(--color-tint-success); color: var(--color-brand-accent); font-weight: var(--weight-bold); text-align: start; white-space: nowrap; }
  .art-table td { padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--color-border-normal); vertical-align: top; }
  .art-table tbody tr:nth-child(even) td { background: var(--color-surface-head); }
  .art-table td:first-child { color: var(--color-text-strong); font-weight: var(--weight-bold); }
  .art-toc-inline { display: none; margin-block-end: var(--space-6); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-raised); }
  .art-toc-inline summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); color: var(--color-text-strong); font-weight: var(--weight-bold); cursor: pointer; }
  .art-toc-inline summary .icon { inline-size: 1.1rem; block-size: 1.1rem; color: var(--color-brand-accent); }
  .art-toc-inline summary small { margin-inline-start: auto; color: var(--color-text-muted); font-weight: var(--weight-normal, 400); }
  .art-toc-inline ol { display: grid; gap: var(--space-2); margin: 0; padding: 0 var(--space-5) var(--space-4) calc(var(--space-5) + 1.25em); }
  .art-toc-inline li::marker { color: var(--color-brand-accent); font-weight: var(--weight-bold); }
  .art-toc-inline a { color: var(--color-brand-link); text-decoration: none; line-height: 1.5; }
  @media (max-width: 1100px) {
    .news-article[data-has-toc] { max-inline-size: 46rem; }
    .news-article[data-has-toc] .art-cols { display: block; }
    .art-aside { display: none; }
    .art-toc-inline { display: block; }
  }
  @media (max-width: 40rem) { .art-num { inline-size: 2.25rem; block-size: 2.25rem; font-size: 1rem; } }
  /* เครดิตภาพจากแหล่งข่าวใต้รูปปก (2026-10-29) */
  .article-cover-figure { margin: 0; max-inline-size: 48rem; }
  .article-cover-figure:has(figcaption) .article-cover { margin-block-end: var(--space-2); }
  .article-cover-figure figcaption { margin-block-end: var(--space-6); color: var(--color-text-muted); font-size: var(--text-xs); }

  /* ── หน้าติดต่อ: รายการแถวไอคอนซ้าย + แผนที่ขวา (แบบ omc.co.th) */
  .ct-layout { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  .ct-layout[data-map="none"] { grid-template-columns: minmax(0, 46rem); }
  .ct-side { display: grid; gap: var(--space-6); min-inline-size: 0; }
  .ct-list { margin: 0; display: grid; gap: var(--space-5); }
  /* โลโก้โซเชียลในหน้าติดต่อ + footer — สีแบรนด์จริง (2026-11-12) */
  .ct-text dd:has(.ct-social) { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); }
  .ct-social { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
  .ct-social .icon { inline-size: 1.15rem; block-size: 1.15rem; }
  [data-brand="facebook"] .icon { color: var(--color-social-facebook); }
  [data-brand="instagram"] .icon { color: var(--color-social-instagram); }
  [data-brand="tiktok"] .icon { color: var(--color-text-strong); }
  .ct-row { display: flex; gap: var(--space-4); align-items: flex-start; }
  .ct-icon { flex: none; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-md);
    border: 1px solid var(--color-border-normal); background: var(--color-surface-head); color: var(--color-brand-accent); }
  .ct-icon .icon { inline-size: 1.15rem; block-size: 1.15rem; }
  .ct-text { min-inline-size: 0; }
  .ct-text dt { font-size: var(--text-xs); color: var(--color-text-muted); }
  .ct-text dd { margin: 2px 0 0; color: var(--color-text-strong); font-weight: var(--weight-bold); line-height: 1.5; overflow-wrap: anywhere; }
  .ct-text dd a { color: inherit; text-decoration: none; }
  .ct-text dd a:hover { color: var(--color-brand-link); text-decoration: underline; }
  .ct-sep { margin-inline: var(--space-2); color: var(--color-text-muted); font-weight: var(--weight-normal); }
  .ct-policies { padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border-normal); }
  .ct-policies-title { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-bold); }
  .ct-map { margin: 0; position: sticky; inset-block-start: var(--space-6); display: grid; gap: var(--space-2); }
  .ct-map iframe { display: block; inline-size: 100%; aspect-ratio: 4 / 3; min-block-size: 22rem; border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); background: var(--color-surface-head); }
  .ct-map figcaption a { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-brand-link); text-decoration: none; }
  .ct-map figcaption .icon { inline-size: 1rem; block-size: 1rem; }
  @media (max-width: 860px) {
    .ct-layout { grid-template-columns: minmax(0, 1fr); }
    .ct-map { position: static; }
    .ct-map iframe { min-block-size: 18rem; }
  }
}

/* ═══════════ เว็บขายระบบ: หัวหน้าเวทีเข้ม (ราคา · ความสามารถ) + ภาพประกอบหน้าความสามารถ (ผู้ใช้สั่ง 2026-10-22) */
@layer components {
  .bz-top {
    position: relative; isolation: isolate; overflow: hidden;
    padding-block: var(--space-12) var(--space-20);
    min-block-size: min(72vh, 42rem); align-content: center; display: grid; grid-template-columns: minmax(0, 1fr);
    background: var(--color-stage-surface); color: var(--color-stage-text);
  }
  /* แสงเขียวจางๆ + เส้นตารางคอร์ท — ของตกแต่งจาก token ของเวที */
  .bz-top::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(60% 70% at 85% 0%, color-mix(in srgb, var(--color-stage-accent) 26%, transparent), transparent 70%),
      radial-gradient(40% 50% at 0% 100%, color-mix(in srgb, var(--color-brand-highlight) 12%, transparent), transparent 70%),
      repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-stage-line) 55%, transparent) 0 1px, transparent 1px 96px),
      repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-stage-line) 55%, transparent) 0 1px, transparent 1px 96px);
    mask-image: linear-gradient(180deg, var(--color-stage-surface) 40%, transparent);
  }
  .content:has(> .page > .bz-top:first-child) { padding-block-start: 0; }
  .bz-top > .lp-inner { inline-size: 100%; }
  .bz-top-inner { display: grid; gap: var(--space-4); justify-items: start; }
  .bz-top-inner[data-align="center"] { justify-items: center; text-align: center; }
  .bz-top .breadcrumb, .bz-top .breadcrumb a, .bz-top .breadcrumb .icon { color: var(--color-stage-muted); }
  .bz-top .breadcrumb [aria-current] { color: var(--color-stage-text); }
  .bz-top .lp-badge { background: color-mix(in srgb, var(--color-stage-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-stage-accent) 30%, transparent); color: var(--color-stage-text); }
  .bz-top .lp-badge .icon { color: var(--color-brand-highlight); }
  .bz-title { margin: 0; font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.15; font-weight: var(--weight-heavy); color: var(--color-stage-text); max-inline-size: 26ch; text-wrap: balance; }
  .bz-title em { font-style: normal; color: var(--color-stage-accent); }
  .bz-lead { margin: 0; max-inline-size: 48rem; font-size: var(--text-lg); color: var(--color-stage-muted); }
  .bz-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }
  .bz-top .bz-actions .btn-primary { background: var(--color-stage-accent); border-color: var(--color-stage-accent); color: var(--color-stage-surface); }
  .bz-top .bz-actions .btn-secondary { background: color-mix(in srgb, var(--color-stage-text) 6%, var(--color-stage-surface)); border-color: var(--color-stage-line); color: var(--color-stage-text); }
  .bz-top .lp-billing-row { margin-block-start: var(--space-2); }
  .bz-cards { margin-block-start: var(--space-6); inline-size: 100%; max-inline-size: 64rem; margin-inline: auto; align-items: start; text-align: start; }
  .bz-note { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-stage-muted); }
  .bz-trust { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); color: var(--color-stage-muted); font-size: var(--text-sm); }
  .bz-trust li { display: inline-flex; align-items: center; gap: var(--space-2); }
  .bz-trust .icon { inline-size: 1.1rem; block-size: 1.1rem; padding: 2px; border-radius: var(--radius-full); background: var(--color-stage-accent); color: var(--color-stage-surface); }

  /* ── หน้าความสามารถ: ทางลัด */
  .fx-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-6); }
  .fx-jump a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full);
    border: 1px solid var(--color-stage-line); background: color-mix(in srgb, var(--color-stage-text) 5%, transparent); color: var(--color-stage-text); text-decoration: none; font-size: var(--text-sm); }
  .fx-jump a:hover { border-color: var(--color-stage-accent); color: var(--color-stage-accent); }
  .fx-jump .icon { inline-size: 1rem; block-size: 1rem; color: var(--color-stage-accent); }

  /* ── รองรับได้ขนาดไหน: การ์ดตัวเลขลอยคร่อมขอบเวที */
  /* หน้าความสามารถ/ติดต่อ: เวทียาวลงไปรองครึ่งบนของการ์ดที่ลอยคร่อม */
  /* หน้าติดต่อ: หัวสั้น แล้วพื้นดำต่อลงมาคลุมกล่องข้อมูล+แผนที่ทั้งกล่อง (ผู้ใช้สั่ง 2026-10-22) */
  .bz-top[data-variant="contact"] { min-block-size: 0; padding-block: var(--space-8) var(--space-8); }
  .fx-scale-band { inline-size: 100%; margin-block-start: var(--space-10); }
  .fx-scale-band .fx-scale-title { color: var(--color-stage-muted); }
  /* .page เป็น flex มี gap — ดึงขึ้นชนหัวดำ ไม่ให้มีแถบสว่างคั่น */
  .ct-band { position: relative; z-index: 1; background: var(--color-stage-surface); padding-block: 0 var(--space-12); margin-block-start: calc(var(--space-5) * -1); }
  .ct-band > .ct-layout { padding: var(--space-8); background: var(--color-surface-card); border: 1px solid var(--color-border-normal); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
  @media (max-width: 640px) { .ct-band > .ct-layout { padding: var(--space-5); } }
  .fx-scale-title { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-stage-muted); }
  .fx-scale { list-style: none; margin: 0; padding: var(--space-4); display: grid; gap: var(--space-2); grid-template-columns: repeat(6, minmax(0, 1fr));
    background: var(--color-surface-card); border: 1px solid var(--color-border-normal); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
  .fx-scale li { display: grid; justify-items: start; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); }
  .fx-scale li + li { border-inline-start: 1px solid var(--color-border-normal); border-radius: 0; }
  .fx-scale-icon { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; margin-block-end: var(--space-2); border-radius: var(--radius-md); background: var(--color-brand-wash); color: var(--color-brand-accent); }
  .fx-scale-icon .icon { inline-size: 1.15rem; block-size: 1.15rem; }
  .fx-scale b { font-size: var(--text-lg); color: var(--color-text-strong); }
  .fx-scale small { font-size: var(--text-sm); color: var(--color-text-muted); }
  @media (max-width: 1000px) {
    .fx-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fx-scale li:nth-child(4) { border-inline-start: 0; }
  }
  @media (max-width: 560px) {
    .fx-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-scale li { border-inline-start: 0 !important; }
  }

  /* ── หัวข้อ */
  .fx-module { scroll-margin-block-start: var(--space-16); }
  .fx-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-brand-accent); }
  .fx-eyebrow-icon { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-md); background: var(--color-brand-wash); }
  .fx-eyebrow-icon .icon { inline-size: 1.05rem; block-size: 1.05rem; }
  .fx-points { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
  .fx-points li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-normal); }
  .fx-points .icon { flex: none; inline-size: 1.25rem; block-size: 1.25rem; padding: 3px; margin-block-start: 1px; border-radius: var(--radius-full); background: var(--color-brand-accent); color: var(--color-brand-on-accent); }
  .fx-limit { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-5) 0 0; padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md); background: var(--color-surface-head); border: 1px dashed var(--color-border-strong); font-size: var(--text-sm); color: var(--color-text-strong); }
  .fx-limit .icon { flex: none; inline-size: 1.1rem; block-size: 1.1rem; color: var(--color-brand-accent); }
  .fx-media { position: relative; }
  .fx-media::before { content: ""; position: absolute; inset: 8% 4%; z-index: 0; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--color-brand-accent) 18%, transparent), transparent); filter: blur(8px); }
  .fx-media > * { position: relative; z-index: 1; }

  /* ── ภาพประกอบ (feature-art.php) */
  .fa { position: relative; display: grid; min-block-size: 22rem; place-items: center; padding: var(--space-6) var(--space-4); }
  .fa-demo { position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 3; font-size: var(--text-xs); color: var(--color-text-muted);
    background: var(--color-surface-card); border: 1px solid var(--color-border-normal); border-radius: var(--radius-full); padding: 2px var(--space-2); }
  .fa-card { background: var(--color-surface-card); border: 1px solid var(--color-border-normal); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-5); }
  .fa-label { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); }
  .fa-amount { margin: var(--space-2) 0; font-size: var(--text-2xl); font-weight: var(--weight-heavy); color: var(--color-text-strong); }
  .fa-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-bold);
    background: var(--color-surface-head); color: var(--color-text-normal); white-space: nowrap; }
  .fa-pill[data-tone="ok"] { background: var(--color-brand-wash); color: var(--color-brand-accent); }
  .fa-pill .icon { inline-size: .85rem; block-size: .85rem; }
  .fa-btn { display: block; margin-block-start: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); text-align: center;
    background: var(--color-brand-primary); color: var(--color-brand-on-primary); font-weight: var(--weight-bold); font-size: var(--text-sm); }
  .fa-chips { display: flex; gap: var(--space-1); flex-wrap: wrap; }
  .fa-chips span { padding: 2px var(--space-2); border-radius: var(--radius-full); border: 1px solid var(--color-border-normal); font-size: var(--text-xs); color: var(--color-text-normal); }
  .fa-chips span[data-on="true"] { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); }
  .fa-bar { display: block; block-size: .5rem; border-radius: var(--radius-full); background: var(--color-surface-head); overflow: hidden; }
  .fa-bar span { display: block; block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-brand-accent), var(--color-brand-highlight)); }
  .fa-bar span[data-w="64"] { inline-size: 64%; } .fa-bar span[data-w="71"] { inline-size: 71%; }
  .fa-bar span[data-w="75"] { inline-size: 75%; } .fa-bar span[data-w="82"] { inline-size: 82%; }
  .fa-avatar { flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-brand-accent), var(--color-brand-primary)); color: var(--color-brand-on-primary); font-weight: var(--weight-bold); }
  .fa-avatar[data-size="lg"] { inline-size: 4rem; block-size: 4rem; }
  .fa-avatar .icon { inline-size: 1.6rem; block-size: 1.6rem; }

  /* มือถือจอง */
  .fa-phone { inline-size: 15.5rem; padding: var(--space-4); border-radius: 2rem; border: 8px solid var(--color-text-strong); background: var(--color-surface-card); box-shadow: var(--shadow-lg); display: grid; gap: var(--space-3); }
  .fa-phone-top { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-strong); }
  .fa-dot { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--color-brand-accent); }
  .fa-phone .fa-label { margin: 0; }
  .fa-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1); }
  .fa-slots span { padding: var(--space-2) 0; text-align: center; border-radius: var(--radius-sm); border: 1px solid var(--color-border-normal); font-size: var(--text-xs); color: var(--color-text-strong); }
  .fa-slots span[data-state="off"] { color: var(--color-text-muted); background: var(--color-surface-head); text-decoration: line-through; }
  .fa-slots span[data-state="on"] { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); font-weight: var(--weight-bold); }
  .fa-float { position: absolute; z-index: 2; display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
    background: var(--color-surface-card); border: 1px solid var(--color-border-normal); box-shadow: var(--shadow-lg); font-size: var(--text-sm); }
  .fa-float strong { display: block; color: var(--color-text-strong); }
  .fa-float small { display: block; color: var(--color-text-muted); }
  .fa-float[data-pos="br"] { inset-block-end: 12%; inset-inline-end: 2%; }
  .fa-float[data-pos="tl"] { inset-block-start: 14%; inset-inline-start: 2%; }
  .fa-float-icon { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-full); background: var(--color-brand-accent); color: var(--color-brand-on-accent); }
  .fa-float-icon[data-tone="line"] { background: var(--color-brand-highlight); color: var(--color-brand-on-highlight); }
  .fa-float-icon .icon { inline-size: 1rem; block-size: 1rem; }

  /* QR + เครดิต */
  .fa[data-kind="payment"], .fa[data-kind="coach"], .fa[data-kind="branches"], .fa[data-kind="seo"] { grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: center; }
  .fa-qr-card { text-align: center; transform: rotate(-2deg); }
  .fa-qr { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; inline-size: 9rem; margin-inline: auto; padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-surface-head); }
  .fa-qr i { aspect-ratio: 1; border-radius: 2px; }
  .fa-qr i[data-on="true"] { background: var(--color-text-strong); }
  .fa-ledger { transform: translateY(var(--space-6)) rotate(1.5deg); }
  .fa-ledger ul, .fa-rows { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
  .fa-ledger li, .fa-rows li { display: flex; justify-content: space-between; gap: var(--space-2); align-items: center; padding-block-start: var(--space-2); border-block-start: 1px solid var(--color-border-normal); color: var(--color-text-normal); }
  .fa-ledger b { color: var(--color-text-strong); white-space: nowrap; }
  .fa-ledger b[data-tone="ok"] { color: var(--color-brand-accent); }

  /* ลูกค้า */
  .fa-profile { inline-size: min(100%, 24rem); }
  .fa-profile-head { display: flex; gap: var(--space-3); align-items: center; }
  .fa-profile-head strong, .fa-profile-head small { display: block; }
  .fa-profile-head strong { color: var(--color-text-strong); }
  .fa-profile-head small { color: var(--color-text-muted); font-size: var(--text-xs); }
  .fa-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-block: var(--space-4) var(--space-2); }
  .fa-stats span { padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-surface-head); }
  .fa-stats b { display: block; color: var(--color-text-strong); }
  .fa-stats small { color: var(--color-text-muted); font-size: var(--text-xs); }
  .fa-rows li > span:first-child { display: inline-flex; align-items: center; gap: var(--space-2); }
  .fa-rows .icon { inline-size: 1rem; block-size: 1rem; color: var(--color-brand-accent); }

  /* โค้ช + คลาส */
  .fa-coach { display: grid; justify-items: center; gap: var(--space-2); text-align: center; transform: rotate(-1.5deg); }
  .fa-coach strong { color: var(--color-text-strong); }
  .fa-coach small, .fa-class small { color: var(--color-text-muted); font-size: var(--text-xs); }
  .fa-coach .fa-chips { justify-content: center; }
  .fa-class { display: grid; gap: var(--space-2); transform: translateY(var(--space-6)) rotate(1.5deg); }
  .fa-class strong { color: var(--color-text-strong); }

  /* สาขา + สิทธิ์ */
  .fa-branches { display: grid; gap: var(--space-3); }
  .fa-branch { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-1) var(--space-2); align-items: center; }
  .fa-branch-icon { grid-row: span 2; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-md); background: var(--color-brand-wash); color: var(--color-brand-accent); }
  .fa-branch-icon .icon { inline-size: 1rem; block-size: 1rem; }
  .fa-branch-name strong { font-size: var(--text-sm); color: var(--color-text-strong); }
  .fa-branch-name small { margin-inline-start: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
  .fa-branch b { font-size: var(--text-sm); color: var(--color-text-strong); }
  .fa-branch .fa-bar { grid-column: 2 / -1; }
  .fa-roles { display: grid; gap: var(--space-2); transform: translateY(var(--space-6)); }
  .fa-role { display: grid; grid-template-columns: minmax(0, 1fr) 3rem 3rem; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-strong); }
  .fa-role[data-head="true"] { order: -1; }
  .fa-role[data-head="true"] small { text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); }
  .fa-roles .fa-label { order: -2; }
  .fa-tick { justify-self: center; display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--radius-full); background: var(--color-surface-head); color: var(--color-text-muted); }
  .fa-tick[data-on="true"] { background: var(--color-brand-accent); color: var(--color-brand-on-accent); }
  .fa-tick .icon { inline-size: .85rem; block-size: .85rem; }

  /* SEO: ผลค้นหา + การ์ดไดเรกทอรี */
  .fa-search { display: grid; gap: var(--space-3); }
  .fa-searchbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--color-border-normal); font-size: var(--text-sm); color: var(--color-text-strong); }
  .fa-searchbar .icon { inline-size: 1rem; block-size: 1rem; color: var(--color-text-muted); }
  .fa-result { display: grid; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--color-text-muted); }
  .fa-result[data-top="true"] { background: var(--color-brand-wash); outline: 2px solid var(--color-brand-accent); }
  .fa-result strong { font-size: var(--text-sm); color: var(--color-brand-link); }
  .fa-stars { color: var(--color-brand-highlight); letter-spacing: 1px; }
  .fa-line { display: block; block-size: .5rem; border-radius: var(--radius-full); background: var(--color-surface-head); }
  .fa-line[data-short="true"] { inline-size: 60%; }
  .fa-dir { padding: 0; overflow: hidden; transform: translateY(var(--space-6)) rotate(1.5deg); }
  .fa-dir img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .fa-dir > div { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-4); }
  .fa-dir strong { color: var(--color-text-strong); }
  .fa-dir small { color: var(--color-text-muted); font-size: var(--text-xs); }

  @media (max-width: 640px) {
    .fa[data-kind="payment"], .fa[data-kind="coach"], .fa[data-kind="branches"], .fa[data-kind="seo"] { grid-template-columns: minmax(0, 1fr); }
    .fa-ledger, .fa-class, .fa-roles, .fa-dir, .fa-qr-card, .fa-coach { transform: none; }
    .fa-float { position: static; }
    .fa[data-kind="online"] { gap: var(--space-3); }
  }
}

/* หน้าแรกผู้เล่น: จัดแบบ /business — สองคอลัมน์ ช่องค้นหาอยู่คอลัมน์ซ้าย จัด 2 แถว (ผู้ใช้สั่ง 2026-10-22) */
@layer components {
  .ph-stage-grid .ph-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-stage-grid .ph-search-field[data-grow] { grid-column: 1 / -1; }
  .ph-stage-grid .ph-search-go { grid-column: auto; align-self: end; }
  @media (max-width: 560px) { .ph-stage-grid .ph-search { grid-template-columns: minmax(0, 1fr); } }
}
/* แถบบนเว็บสาธารณะ: เมนูชิดขวา ติดปุ่มเข้าสู่ระบบ (ผู้ใช้สั่ง 2026-10-22) — มือถือยังเป็นแถวเลื่อนใต้โลโก้เหมือนเดิม */
@layer components {
  @media (min-width: 861px) {
    .public-bar-inner > .public-nav { margin-inline-start: auto; }
    .public-bar-inner > .public-nav ~ .public-bar-actions { margin-inline-start: 0; }
  }
}
/* หัวดำของหน้าขาย (ความสามารถ · ราคา · ติดต่อ): ไม่มีแถบสว่างคั่นใต้หัว และบนจอคอมพื้นดำลงไปถึงขอบล่างจอ (ผู้ใช้สั่ง 2026-10-22 "ให้ชิดจอ") */
@layer components {
  .page > .bz-top:first-child { margin-block-end: calc(var(--space-5) * -1); }
  @media (min-width: 861px) {
    .page > .bz-top:first-child:not([data-variant="contact"]) { min-block-size: calc(100svh - var(--public-bar-h, 77px)); }
  }
}

/* ═══════════ เรื่องเล่าบนมือถือ: หน้าตาเลียนหน้าจองจริง (ผู้ใช้สั่ง 2026-10-22) — กล่องขนาดเท่าเดิม */
/* ‼️ ไม่อยู่ใน @layer — กฎเดิมของ .lp-story อยู่นอก layer ถ้าใส่ layer จะแพ้ทุกข้อ */
  .lp-story-screen { gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); }
  .lp-story-steps { list-style: none; margin: 0 0 var(--space-1); padding: 0; display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
  .lp-story-steps li { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
  .lp-story-steps li + li::before { content: ""; inline-size: var(--space-3); block-size: 1px; background: var(--color-border-strong); margin-inline-end: var(--space-1); }
  .lp-story-steps b { display: grid; place-items: center; inline-size: 1.1rem; block-size: 1.1rem; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); font-size: .65rem; }
  .lp-story-steps li[data-state="on"] { color: var(--color-text-strong); font-weight: var(--weight-bold); }
  .lp-story-steps li[data-state="on"] b { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-brand-on-primary); }
  .lp-story-steps li[data-state="done"] b { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); }

  .lp-story-title { font-size: var(--text-sm); }
  /* แถบวันที่แบบหน้าจองจริง: วันในสัปดาห์ + เลขวัน · วันนี้เป็นบล็อกสีหลัก */
  .lp-story-days { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }
  .lp-story-day { gap: 0; padding: var(--space-1) 0; }
  .lp-story-day small { font-size: .65rem; }
  .lp-story-day b { font-size: var(--text-base); color: var(--color-text-strong); line-height: 1.2; }
  .lp-story-day[data-active="true"] b { color: inherit; }

  /* ช่องคอร์ท/เวลา: บรรทัดบนตัวหนา บรรทัดล่างสถานะพร้อมจุดสี */
  .lp-story-slot { block-size: auto; min-block-size: var(--space-10); gap: 0; padding-block: var(--space-1); align-content: center; text-decoration: none; }
  .lp-story-slot b { font-size: var(--text-xs); }
  .lp-story-slot small { display: inline-flex; align-items: center; gap: 3px; font-size: .62rem; color: var(--color-text-muted); }
  .lp-story-slot small i { inline-size: .4rem; block-size: .4rem; border-radius: 50%; background: var(--color-state-success); }
  .lp-story-slot[data-state="booked"] { text-decoration: none; }
  .lp-story-slot[data-state="booked"] b { text-decoration: line-through; color: var(--color-text-muted); }
  .lp-story-slot[data-state="booked"] small i { background: var(--color-text-muted); }
  .lp-story-slot[data-picked] small, .lp-story-slot[data-picked] b { color: inherit; }
  .lp-story-slot[data-picked] small i { background: currentColor; }

  /* แถบสรุปล่าง + ปุ่มดำเนินการต่อ (จางจนกว่าจะเลือกเวลา) */
  .lp-story-bar { margin-block-start: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding-block-start: var(--space-2); border-block-start: 1px solid var(--color-border-normal); }
  .lp-story-bar-sum { display: grid; line-height: 1.25; }
  .lp-story-bar-sum small { font-size: var(--text-xs); color: var(--color-text-muted); }
  .lp-story-bar-sum b { color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
  .lp-story-bar-sum [data-when="picked"] { display: none; }
  .lp-story[data-picked] .lp-story-bar-sum [data-when="picked"] { display: block; }
  .lp-story[data-picked] .lp-story-bar-sum [data-when="idle"] { display: none; }
  .lp-story-bar .lp-story-cta { margin: 0; min-block-size: 38px; padding-inline: var(--space-4); font-size: var(--text-xs); }

  /* ตรวจสอบ + จ่าย */
  .lp-story-review { margin: 0; display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-head); font-size: var(--text-xs); }
  .lp-story-review > div { display: flex; justify-content: space-between; gap: var(--space-2); }
  .lp-story-review dt { color: var(--color-text-muted); }
  .lp-story-review dd { margin: 0; color: var(--color-text-strong); text-align: end; }
  .lp-story-review [data-total] { padding-block-start: var(--space-1); border-block-start: 1px dashed var(--color-border-strong); font-weight: var(--weight-bold); }
  .lp-story-payrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
  .lp-story-payrow .lp-story-qr { inline-size: calc(var(--space-20) * 1.35); block-size: calc(var(--space-20) * 1.35); margin: 0; }
  .lp-story-paytext { display: grid; gap: var(--space-1); }
  .lp-story-paytext small { font-size: var(--text-xs); color: var(--color-text-muted); }
  .lp-story-paytext .lp-story-amount { margin: 0; font-size: var(--text-xl); }
  .lp-story-paytext .lp-story-status { justify-content: flex-start; font-size: var(--text-xs); }
  @keyframes lp-story-scan { from { transform: translateY(var(--space-2)); } to { transform: translateY(calc(var(--space-20) * 1.2)); } }
.lp-story-days { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lp-story-day { padding: 2px 0; }
.lp-story-slot { min-block-size: calc(var(--space-8) + 2px); }
.lp-story-screen { inset-block-start: calc(var(--space-10) + 2px); }
.lp-story-paytext .lp-story-status { justify-content: flex-start; }

/* เลือกคอร์ท → เลือกเวลา = หน้าเดียวกัน: เนื้อหาเลื่อนขึ้น (ผู้ใช้สั่ง 2026-10-22 "ต้องเป็นสไลด์ลง เพราะหน้าเดียวกัน")
   แถบขั้นตอนบนและแถบสรุปล่างค้างที่เดิม ส่วนกลางเลื่อนเหมือนนิ้วปัดหน้าจอ */
.lp-story[data-story-step="venue"] [data-screen="pick"],
.lp-story[data-story-step="book"] [data-screen="pick"] { opacity: 1; translate: 0 0; }
.lp-story:is([data-story-step="pay"], [data-story-step="route"], [data-story-step="map"]) [data-screen="pick"] { translate: -12% 0; }
.lp-story-view { position: relative; flex: 1; min-block-size: 0; overflow: hidden; margin-inline: calc(var(--space-2) * -1); padding-inline: var(--space-2); }
.lp-story-track { display: grid; grid-template-rows: 1fr 1fr; block-size: 200%; transition: translate 650ms var(--ease-enter); }
.lp-story[data-story-step="book"] .lp-story-track,
.lp-story[data-story-step="pay"] .lp-story-track,
.lp-story[data-story-step="route"] .lp-story-track,
.lp-story[data-story-step="map"] .lp-story-track { translate: 0 -50%; }
.lp-story .lp-story-track > .lp-story-part[data-screen] { display: flex; flex-direction: column; gap: var(--space-2); min-block-size: 0; overflow: hidden; opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { .lp-story-track { transition: none; } }

/* ── ลำดับจองเหมือนระบบจริง: สาขา → วันที่ + ตารางคอร์ท×เวลา → อุปกรณ์เสริม (ผู้ใช้สั่ง 2026-10-22) */
.lp-story .lp-story-track > .lp-story-part { display: flex; flex-direction: column; gap: var(--space-2); min-block-size: 0; overflow: hidden; }
.lp-story-branch { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--color-border-normal); background: var(--color-surface-card); transition: border-color 300ms, background-color 300ms, scale 200ms; }
.lp-story-branch > span:nth-child(2) { flex: 1; display: grid; line-height: 1.3; }
.lp-story-branch b { color: var(--color-text-strong); font-size: var(--text-sm); }
.lp-story-branch small { color: var(--color-text-muted); font-size: var(--text-xs); }
.lp-story-branch > .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-text-muted); }
.lp-story-branch-icon { display: grid; place-items: center; inline-size: var(--space-8); block-size: var(--space-8); border-radius: var(--radius-md); background: var(--color-brand-wash); color: var(--color-brand-accent); }
.lp-story-branch-icon .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.lp-story-branch[data-picked] { border-color: var(--color-brand-accent); background: var(--color-brand-wash); scale: 1.02; }

.lp-story-day { transition: background-color var(--duration-slow), border-color var(--duration-slow), color var(--duration-slow); }
.lp-story-grid { display: none; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: var(--space-1); align-items: center; font-size: var(--text-xs); }
.lp-story-grid[data-grid="0"], .lp-story[data-venue="1"] .lp-story-grid[data-grid="1"] { display: grid; }
.lp-story[data-venue="1"] .lp-story-grid[data-grid="0"] { display: none; }
.lp-story-grid-head { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); white-space: nowrap; }
.lp-story-grid-head .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); color: var(--color-brand-accent); }
.lp-story-grid-time { text-align: center; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.lp-story-grid-court { color: var(--color-text-strong); font-weight: var(--weight-bold); padding-inline-end: var(--space-2); white-space: nowrap; }
.lp-story-cell { display: grid; place-items: center; block-size: var(--space-8); border-radius: var(--radius-sm); border: 1px solid var(--color-slot-free-border);
  background: var(--color-slot-free); color: var(--color-state-success); font-size: .65rem; transition: background-color var(--duration-slow), color var(--duration-slow), scale 200ms; }
.lp-story-cell[data-state="booked"] { background: var(--color-slot-blocked); border-color: var(--color-border-normal); color: var(--color-text-muted); }
.lp-story-cell[data-picked] { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); font-weight: var(--weight-bold); scale: 1.06; }

.lp-story-extras { display: grid; gap: var(--space-2); }
.lp-story-extra { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border-normal); background: var(--color-surface-card); font-size: var(--text-sm); color: var(--color-text-strong); transition: border-color 300ms, background-color 300ms; }
.lp-story-extra > span { flex: 1; }
.lp-story-extra b { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.lp-story-check { display: grid; place-items: center; inline-size: 1.15rem; block-size: 1.15rem; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border-strong); color: transparent; transition: background-color 200ms, border-color 200ms, color 200ms; }
.lp-story-check .icon { inline-size: .8rem; block-size: .8rem; }
.lp-story-extra[data-on] { border-color: var(--color-brand-accent); background: var(--color-brand-wash); }
.lp-story-extra[data-on] .lp-story-check { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); }
.lp-story-extra[data-on] b { color: var(--color-text-strong); }

.lp-story[data-story-step="extra"] [data-screen="extra"] { opacity: 1; translate: 0 0; }
.lp-story:is([data-story-step="extra"], [data-story-step="pay"], [data-story-step="route"], [data-story-step="map"]) [data-screen="pick"],
.lp-story:is([data-story-step="pay"], [data-story-step="route"], [data-story-step="map"]) [data-screen="extra"] { opacity: 0; translate: -12% 0; }
.lp-story[data-story-step="extra"] .lp-story-track { translate: 0 -50%; }
.lp-story-review { gap: 2px; }

/* มุมมองช่องเวลาแบบหน้าจองจริง (ผู้ใช้สั่ง 2026-10-22) */
.lp-story-courts { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); }
.lp-story-courts[data-grid="0"], .lp-story[data-venue="1"] .lp-story-courts[data-grid="1"] { display: grid; }
.lp-story[data-venue="1"] .lp-story-courts[data-grid="0"] { display: none; }
.lp-story-chip { display: grid; place-items: center; block-size: var(--space-6); border-radius: var(--radius-full); border: 1px solid var(--color-border-normal); background: var(--color-surface-card);
  font-size: var(--text-xs); color: var(--color-text-strong); transition: background-color 300ms, border-color 300ms, color 300ms; }
.lp-story-chip[data-picked] { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-brand-on-primary); font-weight: var(--weight-bold); }
.lp-story-period { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.lp-story-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
.lp-story-time { display: grid; place-items: center; gap: 0; padding-block: 3px; border-radius: var(--radius-md); border: 1px solid var(--color-border-normal); background: var(--color-surface-card); line-height: 1.25;
  transition: background-color var(--duration-slow), border-color var(--duration-slow), color var(--duration-slow), scale 200ms; }
.lp-story-time b { font-size: var(--text-xs); color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.lp-story-time small { display: inline-flex; align-items: center; gap: 3px; font-size: .6rem; color: var(--color-text-muted); }
.lp-story-time small i { inline-size: .35rem; block-size: .35rem; border-radius: 50%; background: var(--color-state-success); }
.lp-story-time [data-when="picked"] { display: none; }
.lp-story-time[data-state="booked"] { background: var(--color-slot-blocked); }
.lp-story-time[data-state="booked"] b { color: var(--color-text-muted); }
.lp-story-time[data-state="booked"] small i { background: var(--color-text-muted); }
.lp-story-time[data-picked] { background: var(--color-brand-primary); border-color: var(--color-brand-primary); scale: 1.04; }
.lp-story-time[data-picked] b, .lp-story-time[data-picked] small { color: var(--color-brand-on-primary); }
.lp-story-time[data-picked] small i { background: currentColor; }
.lp-story-time[data-picked] [data-when="free"] { display: none; }
.lp-story-time[data-picked] [data-when="picked"] { display: inline; }

/* ภาพประกอบหน้าร้าน (POS) — สินค้า + บิล (ผู้ใช้แจ้ง 2026-10-22) */
@layer components {
  .fa[data-kind="pos"] { grid-template-columns: 1.25fr 1fr; gap: var(--space-4); align-items: center; }
  .fa-shop { display: grid; gap: var(--space-3); padding: var(--space-4); transform: rotate(-1.5deg); }
  .fa-shop-head { display: grid; gap: var(--space-2); }
  .fa-shop-head .fa-label { margin: 0; }
  .fa-shop .fa-searchbar { font-size: var(--text-xs); color: var(--color-text-muted); }
  .fa-goods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .fa-good { display: grid; gap: 2px; padding: var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--color-border-normal); background: var(--color-surface-card); font-size: var(--text-xs); }
  .fa-good strong { color: var(--color-text-strong); font-weight: var(--weight-medium); line-height: 1.3; }
  .fa-good b { color: var(--color-text-strong); }
  .fa-good small { color: var(--color-text-muted); }
  .fa-good small[data-low="true"] { color: var(--color-state-warning); font-weight: var(--weight-bold); }
  .fa-good[data-in="true"] { border-color: var(--color-brand-accent); background: var(--color-brand-wash); }
  .fa-good[data-out="true"] { opacity: .5; }
  .fa-bill { display: grid; gap: var(--space-2); transform: translateY(var(--space-6)) rotate(1.5deg); }
  .fa-bill .fa-label { margin: 0; }
  .fa-bill ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
  .fa-bill li { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--color-text-normal); }
  .fa-bill li b { color: var(--color-text-strong); white-space: nowrap; }
  .fa-bill-total { display: flex; justify-content: space-between; align-items: baseline; padding-block-start: var(--space-2); border-block-start: 1px dashed var(--color-border-strong); }
  .fa-bill-total strong { font-size: var(--text-xl); color: var(--color-text-strong); }
  .fa-bill-cash { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
  .fa-bill-cash b { color: var(--color-brand-accent); }
  .fa-bill .fa-pill { justify-self: start; }
  @media (max-width: 640px) {
    .fa[data-kind="pos"] { grid-template-columns: minmax(0, 1fr); }
    .fa-shop, .fa-bill { transform: none; }
  }
}

/* /venues: สลับ "จองได้ผ่าน OMC" (ค่าเริ่ม) กับ "ทั้งหมด" (ผู้ใช้สั่ง 2026-10-22) */
@layer components {
  .vd-scope { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-full); background: var(--color-surface-head); border: 1px solid var(--color-border-normal); }
  .vd-scope a { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--text-sm); color: var(--color-text-normal); text-decoration: none; white-space: nowrap; }
  .vd-scope a .icon { inline-size: 1rem; block-size: 1rem; }
  .vd-scope a span { font-size: var(--text-xs); color: var(--color-text-muted); }
  .vd-scope a[aria-current="true"] { background: var(--color-brand-primary); color: var(--color-brand-on-primary); font-weight: var(--weight-bold); }
  .vd-scope a[aria-current="true"] span { color: inherit; opacity: .8; }
  .vd-scope a[aria-current="false"] .icon { display: none; }
}

/* การ์ดบัญชีเข้าระบบของโค้ช (personnel/form.php) — อยู่บนสุดก่อนข้อมูลพื้นฐาน · ปุ่มอยู่ในแถวเดียวกับช่อง ไม่มีเส้นคั่นของ .form-actions (ผู้ใช้สั่ง 2026-10-27) */
.coach-account .field-grid > .form-actions { border-block-start: 0; margin-block-start: 0; align-self: start; padding-block-start: 24px; justify-content: flex-end; }

/* ============================================================ responsive sweep (ผู้ใช้สั่ง 2026-10-28 "check responsive ทั้งระบบ บางทีเห็น search มัน 2 บรรทัด บางจุดเละ")
   1) แถบตัวกรองของหน้า (partials/filters.php) — ปุ่ม "ตัวกรอง" ติดท้ายช่องค้นหาใน .toolbar-search-row
      จอ ≥1280px กล่องนี้หายไป (display:contents) + ปุ่ม order ท้ายแถว = หน้าตาบนจอคอมเหมือนเดิมทุกพิกเซล
      จอ <1280px ช่องค้นหา + ปุ่มอยู่บรรทัดเดียวกันเสมอ ไม่มีปุ่มตกไปอยู่เดี่ยวๆ แถวล่าง · ช่องเลือกยืดเต็มแถว ไม่เหลือรูขวา
      มือถือ ≤640px ปุ่มเหลือแค่ไอคอน · ช่องเลือก/วันที่ 2 ช่องต่อแถว แทนช่องละแถว (แถบเดิมยาว 5–9 แถว) */
.toolbar-search-row { display: contents; }
.toolbar-search-row > .toolbar-actions { order: 99; }
.filter-field input { text-overflow: ellipsis; }

/* จอ ≥1280px แต่ช่องกรอง ≥5 ช่อง (การรับเงิน · ออเดอร์ · รายการจอง · ค่าบริการ OMC) แถวยังเต็มแล้วปุ่มตกไปอยู่เดี่ยวแถวล่าง
   → ใช้แบบจอแคบ: ปุ่มติดช่องค้นหา (div:nth-of-type นับช่องกรอง + กล่อง search-row ซึ่งเป็น div ทั้งหมด) */
@media screen and (min-width: 1280px) {
  .toolbar:has(> div:nth-of-type(5)) > .toolbar-search-row {
    display: flex; align-items: center; gap: var(--space-3); flex: 1 1 22rem; min-inline-size: 0;
  }
  .toolbar:has(> div:nth-of-type(5)) > .toolbar-search-row > .filter-field[data-type="search"] { flex: 1 1 auto; min-inline-size: 0; }
  .toolbar:has(> div:nth-of-type(5)) > .toolbar-search-row > .toolbar-actions { order: 0; flex: none; margin-inline-start: 0; }
}

@media screen and (max-width: 1279px) {
  .toolbar-search-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1 1 22rem;
    min-inline-size: 0;
  }
  .toolbar-search-row > .filter-field[data-type="search"] { flex: 1 1 auto; min-inline-size: 0; }
  .toolbar-search-row > .toolbar-actions { order: 0; flex: none; margin-inline-start: 0; inline-size: auto; flex-wrap: nowrap; }
}

@media screen and (max-width: 640px) {
  .toolbar-search-row { flex: 1 1 100%; gap: var(--space-2); }
  .toolbar-search-row > .toolbar-actions { gap: var(--space-1); }
  .toolbar-search-row > .toolbar-actions .btn { inline-size: var(--form-filter-height); padding-inline: 0; justify-content: center; }
  .toolbar-search-row .toolbar-btn-label {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .toolbar:not([data-inline="true"]):has(> .toolbar-search-row) > .filter-field:is([data-type="select"], [data-type="date"], [data-type="number"]) {
    flex: 1 1 calc(50% - var(--space-3)); min-inline-size: 0;
  }
  .toolbar:not([data-inline="true"]):has(> .toolbar-search-row) > .filter-field:is([data-type="select"], [data-type="date"], [data-type="number"]) :is(select, input) {
    min-inline-size: 0; padding-inline-start: 12px;
  }
  .toolbar:not([data-inline="true"]):has(> .toolbar-search-row) > .filter-field:is([data-type="select"], [data-type="date"], [data-type="number"]) > label {
    inset-inline-start: 12px; max-inline-size: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* 2) ตัวกรองในหัวการ์ด ($sectionFilters) — ช่องเยอะเกินที่ข้างชื่อการ์ด เดิมตกบรรทัดเป็นขั้นบันได (ช่องเดี่ยวชิดขวาแถวล่าง)
      ≥4 ช่อง: ลงไปเต็มแถวใต้ชื่อการ์ดเสมอ เป็นตารางช่องกว้างเท่ากัน (ช่องค้นหากิน 2 ช่อง) — แถวสุดท้ายไม่มีช่องยืดเต็มแถว
      3 ช่อง: เฉพาะจอ <1280px ลงเต็มแถว ช่องยืดเต็มแถวเดียว */
.card-head:has(> .card-tools .toolbar[data-inline="true"] > .filter-field:nth-of-type(4)) > .card-tools { flex-basis: 100%; }
.card-tools .toolbar[data-inline="true"]:has(> .filter-field:nth-of-type(4)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  align-items: center;
}
.card-tools .toolbar[data-inline="true"]:has(> .filter-field:nth-of-type(4)) > .filter-field[data-type="search"] { grid-column: span 2; max-inline-size: none; }
.card-tools .toolbar[data-inline="true"]:has(> .filter-field:nth-of-type(4)) > .filter-field :is(input, select) { inline-size: 100%; min-inline-size: 0; }
.card-tools .toolbar[data-inline="true"]:has(> .filter-field:nth-of-type(4)) > .toolbar-reset { justify-self: start; }
@media screen and (max-width: 640px) {
  .card-tools .toolbar[data-inline="true"]:has(> .filter-field:nth-of-type(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 1279px) {
  .card-head:has(> .card-tools .toolbar[data-inline="true"] > .filter-field:nth-of-type(3)) > .card-tools { flex-basis: 100%; }
  .card-tools .toolbar[data-inline="true"]:has(> .filter-field:nth-of-type(3)) > .filter-field { flex: 1 1 9.5rem; }
  .card-tools .toolbar[data-inline="true"]:has(> .filter-field:nth-of-type(3)) > .filter-field[data-type="search"] { flex: 2 1 16rem; max-inline-size: none; }
}

/* 3) แถว KPI 4 ใบ: จอ 920–1279px เดิมได้ 3+1 (ใบที่ 4 ตกไปอยู่เดี่ยว เป็นรู) → 2×2
      แถว KPI 5 ใบ: เดิม 4+1 → 3+2 (แบบซ้อน = แดชบอร์ด: ที่จอ <1112px เท่านั้น ที่กว้างกว่านั้นยังห้าใบแถวเดียว) */
@media screen and (min-width: 641px) and (max-width: 1279px) {
  .kpi-row:not([data-layout="stack"]):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width: 641px) and (max-width: 1111px) {
  .kpi-row[data-layout="stack"]:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (min-width: 1100px) {
  .kpi-row:not([data-layout="stack"]):has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 4) กล่องแจ้งเตือนที่มีปุ่ม (เช่น "ขอเพิ่ม Limit" หน้าสาขา/คอร์ท) — มือถือปุ่มเดิมถูกบีบเหลือคำละบรรทัด → ปุ่มลงบรรทัดใต้ข้อความ */
.callout > .btn { white-space: nowrap; flex: none; }
@media screen and (max-width: 640px) {
  .callout:has(> .btn) { flex-wrap: wrap; }
  .callout:has(> .btn) > :is(span, div) { flex: 1 1 calc(100% - 36px); }
  .callout > .btn { margin-inline-start: 32px; }
}

/* ‼️ ภาพเคลื่อนไหวหน้าเว็บสาธารณะ (ผู้ใช้สั่ง 2026-10-30 "แต่ง animation หน้าเว็บให้สวยงาม")
   · ส่วนบนจอ: เลื่อนขึ้นจางเข้าตอนเปิดหน้า (CSS ล้วน ไม่กระพริบ)
   · ส่วนล่างจอ: app.js ใส่ data-anim-wait แล้วค่อยแสดงเมื่อเลื่อนมาถึง (ทีละชิ้นห่างกันเล็กน้อย)
   · ใช้ translate (ไม่ใช่ transform) — ไม่ชนกับ hover ยกการ์ดเดิม · ปิดหมดเมื่อผู้ใช้ตั้งลดภาพเคลื่อนไหว */
@keyframes pub-rise { from { opacity: 0; translate: 0 18px; } }
@keyframes pub-zoom { from { opacity: 0; scale: 1.03; } }
@keyframes pub-grow { from { scale: 0 1; } }
@media (prefers-reduced-motion: no-preference) {
  .vd-head-text, .art-tabs, .art-spot-main, .news-article-head > * { animation: pub-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .art-tabs { animation-delay: .08s; }
  .news-article-cover { animation: pub-zoom .9s cubic-bezier(.2, .7, .2, 1) .2s both; }
  .art-spot-main { animation-delay: .14s; }
  .news-article-head > :nth-child(2) { animation-delay: .06s; }
  .news-article-head > :nth-child(3) { animation-delay: .12s; }
  .news-article-head > :nth-child(n+4) { animation-delay: .18s; }
  .art-spot-label::before { animation: pub-grow .6s ease .3s both; transform-origin: center bottom; }
  .anim-on [data-anim-wait] { transition: opacity .65s cubic-bezier(.2, .7, .2, 1) var(--anim-delay, 0ms), translate .65s cubic-bezier(.2, .7, .2, 1) var(--anim-delay, 0ms); }
  .anim-on [data-anim-wait]:not([data-anim-in]) { opacity: 0; translate: 0 28px; }
  .anim-on .news-chat-line[data-anim-wait][data-side="right"]:not([data-anim-in]) { translate: 24px 0; }
  .anim-on .news-chat-line[data-anim-wait][data-side="left"]:not([data-anim-in]) { translate: -24px 0; }
}

/* ตัดสินคำขอคืนเงิน — เลือก อนุมัติ/ไม่อนุมัติ แล้วแสดงฟอร์มของทางนั้นในแถวเดียว (ผู้ใช้สั่ง 2026-10-30 "อยู่แยกกันแล้วมันยืด") */
.rr-decide { display: grid; gap: var(--space-4); }
.rr-decide-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rr-decide-pick .choice-card[data-tone="success"]:has(input:checked) { border-color: var(--color-brand-accent); background: var(--color-tint-success); }
.rr-decide-pick .choice-card[data-tone="danger"]:has(input:checked) { border-color: var(--color-state-danger); background: var(--color-tint-danger); }
.rr-decide-form { display: none; grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr) auto; align-items: end; gap: var(--space-3); }
.rr-decide-form[data-decision="reject"] { grid-template-columns: minmax(0, 1fr) auto; }
.rr-decide-form .field { margin: 0; }
.rr-decide-form .btn { min-block-size: 44px; white-space: nowrap; }
.rr-decide-hint { grid-column: 1 / -1; margin: 0; }
.rr-decide:has(input[value="approve"]:checked) .rr-decide-form[data-decision="approve"],
.rr-decide:has(input[value="reject"]:checked) .rr-decide-form[data-decision="reject"] { display: grid; }
@media (max-width: 640px) {
  .rr-decide-pick, .rr-decide-form, .rr-decide-form[data-decision="reject"] { grid-template-columns: minmax(0, 1fr); }
  .rr-decide-form .btn { inline-size: 100%; }
}

/* ‼️ นโยบายเป็นข้อๆ มีจุดนำหน้า อ่านแยกบรรทัดชัด (ผู้ใช้สั่ง 2026-10-30 "รวมกันเกิน เติม • หน่อย") — reset ปิด list-style ไว้ จึงวาดจุดเอง */
.bk-policy-lines { list-style: none; padding-inline-start: 0; gap: var(--space-2); }
.bk-policy-lines > li { position: relative; padding-inline-start: var(--space-5); line-height: 1.6; }
.bk-policy-lines > li::before { content: ""; position: absolute; inset-inline-start: var(--space-1); inset-block-start: .62em; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--color-brand-accent); }
/* ‼️ ข้อนโยบายเยื้องเข้ามาจากหัวข้อ ไม่ชิดเสมอกัน (ผู้ใช้สั่ง 2026-10-30 "เว้นออกมาหน่อย") */
.bk-policy-lines { padding-inline-start: var(--space-5); }

/* ‼️ กล่องเลือกวิธีชำระเงินให้เด่น — ลูกค้าเลื่อนผ่านบ่อย (ผู้ใช้สั่ง 2026-10-30) · ไม่เลือกให้ ต้องเลือกเอง */
.bk-pay {
  padding: var(--space-4);
  border: 2px solid var(--color-brand-accent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-brand-accent) 6%, var(--color-surface-card));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-brand-accent) 14%, transparent);
  scroll-margin-block: var(--space-10);
}
.bk-pay .bk-pay-head { font-size: var(--text-lg); color: var(--color-text-strong); }
.bk-pay .bk-pay-head .icon { inline-size: var(--icon-md); block-size: var(--icon-md); }
.bk-pay-need { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-state-danger); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.bk-pay-need .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.bk-pay:has(input[name="payment_channel"]:checked):not([data-invalid="true"]) .bk-pay-need { display: none; }
.bk-pay:not(:has(input[name="payment_channel"]:checked)) .bk-pay-option { border-style: dashed; border-color: var(--color-border-strong); }
.bk-pay[data-invalid="true"] { border-color: var(--color-state-danger); background: var(--color-tint-danger); animation: bk-pay-shake .35s ease 1; }
@keyframes bk-pay-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .bk-pay[data-invalid="true"] { animation: none; } }

/* ‼️ นโยบายการยกเลิกอยู่ในกล่องยอมรับ — ข้อๆ สีแดงก่อน checkbox (ผู้ใช้สั่ง 2026-10-30) */
.bk-consent-policy { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--color-state-danger) 35%, transparent); border-radius: var(--radius-md); background: var(--color-tint-danger); color: var(--color-state-danger); }
.bk-consent-policy-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: var(--weight-bold); font-size: var(--text-sm); }
.bk-consent-policy-title .icon { flex: none; inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.bk-consent-policy-lines { display: grid; gap: var(--space-1); margin: 0; padding-inline-start: var(--space-5); list-style: none; font-size: var(--text-sm); line-height: 1.6; }
.bk-consent-policy-lines > li { position: relative; padding-inline-start: var(--space-4); }
.bk-consent-policy-lines > li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.bk-consent-policy-link { margin: 0; font-size: var(--text-xs); }
.bk-consent-policy-link a { color: var(--color-state-danger); text-decoration: underline; }
.bk-consent-policy + .bk-check { border-color: color-mix(in srgb, var(--color-state-danger) 35%, transparent); }

/* ‼️ ฟอร์มโค้ช: ข้อมูลพื้นฐาน + รูปโปรไฟล์ แถวเดียวกัน (ผู้ใช้สั่ง 2026-10-30) — ช่องในการ์ดจัดคอลัมน์เองด้วย container query */
.coach-head-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: stretch; }
.coach-head-row > .card { margin: 0; }
@media (min-width: 1100px) {
  .coach-head-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coach-head-row .coach-photo-box { flex-wrap: nowrap; align-items: flex-start; }
  .coach-head-row .coach-photo-text { flex: 1 1 auto; }
}

/* ‼️ หน้าแก้โค้ช: การ์ดบัญชีเข้าระบบอยู่คอลัมน์ซ้าย · ตัวอย่างโปรไฟล์ติดขวาตลอด (ผู้ใช้สั่ง 2026-10-30) */
.coach-page-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.coach-page-grid > .coach-form, .coach-page-grid > .coach-form > .form-shell { display: contents; }
.coach-page-grid > .coach-account { margin: 0; }
@media (min-width: 1101px) {
  .coach-page-grid { grid-template-columns: minmax(0, 1fr) var(--layout-aside-width); }
  .coach-page-grid > .coach-account { grid-column: 1; grid-row: 1; }
  .coach-page-grid .form-shell-main { grid-column: 1; }
  .coach-page-grid .form-shell-side { grid-column: 2; grid-row: 1 / span 2; }
  .coach-page-grid:not(:has(> .coach-account)) .form-shell-side { grid-row: 1; }
}
.coach-page-grid .form-shell-main, .coach-page-grid .form-shell-side { display: flex; flex-direction: column; gap: var(--space-5); min-inline-size: 0; }

/* ‼️ ตารางคอร์ท: จองพร้อมโค้ชแยกสี + ทุกสีปรับได้จากคำอธิบายสี (ผู้ใช้สั่ง 2026-10-30)
      --grid-<state> ตั้งจาก app.js เมื่อผู้ใช้เลือกสี · ไม่ตั้ง = สีของธีม · --grid-<state>-ink = สีตัวอักษรที่อ่านออกบนพื้นนั้น */
.court-cell[data-state="booked"]     { background: var(--grid-booked, var(--color-grid-booked)); border-color: var(--grid-booked, var(--color-grid-booked)); color: var(--grid-booked-ink, var(--color-text-strong)); }
.court-cell[data-state="coach_booking"]      { background: var(--grid-coach_booking, var(--color-grid-coach)); border-color: var(--grid-coach_booking, var(--color-grid-coach)); color: var(--grid-coach_booking-ink, var(--color-text-strong)); }
.court-cell[data-state="checked_in"] { background: var(--grid-checked_in, var(--color-tint-warning)); border-color: var(--grid-checked_in, var(--color-state-warning)); color: var(--grid-checked_in-ink, var(--color-text-strong)); }
.court-cell[data-state="class"]      { background: var(--grid-class, var(--color-grid-class)); border-color: var(--grid-class, var(--color-grid-class)); color: var(--grid-class-ink, var(--color-text-strong)); }
.court-cell[data-state="partial"]    { background: var(--grid-partial, var(--color-slot-held)); border-color: var(--grid-partial, var(--color-state-warning)); color: var(--grid-partial-ink, var(--color-text-strong)); }
.court-cell[data-state="blocked"]    { background: var(--grid-blocked, var(--color-slot-blocked)); color: var(--grid-blocked-ink, var(--color-text-muted)); }
a.court-cell[data-state="coach_booking"]:hover { border-color: var(--color-text-strong); }
.court-legend-swatch[data-state="booked"]     { background: var(--grid-booked, var(--color-grid-booked)); border-color: var(--grid-booked, var(--color-grid-booked)); }
.court-legend-swatch[data-state="coach_booking"]      { background: var(--grid-coach_booking, var(--color-grid-coach)); border-color: var(--grid-coach_booking, var(--color-grid-coach)); }
.court-legend-swatch[data-state="checked_in"] { background: var(--grid-checked_in, var(--color-tint-warning)); border-color: var(--grid-checked_in, var(--color-state-warning)); }
.court-legend-swatch[data-state="class"]      { background: var(--grid-class, var(--color-grid-class)); border-color: var(--grid-class, var(--color-grid-class)); }
.court-legend-swatch[data-state="partial"]    { background: var(--grid-partial, var(--color-slot-held)); border-color: var(--grid-partial, var(--color-state-warning)); }
.court-legend-swatch[data-state="blocked"]    { background: var(--grid-blocked, var(--color-slot-blocked)); }
.court-legend-item[data-pickable] { position: relative; cursor: pointer; border-radius: var(--radius-sm); padding: 2px var(--space-1); }
.court-legend-item[data-pickable]:hover { background: var(--color-tint-neutral); }
.court-legend-item[data-pickable] .court-legend-swatch { position: relative; box-shadow: 0 0 0 2px var(--color-surface-card), 0 0 0 3px var(--color-border-strong); }
.court-legend-item[data-pickable] input[type="color"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.court-legend-item[data-pickable]:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* หน้าแรกของโค้ช (ผู้ใช้สั่ง 2026-10-30) — partials/coach-agenda.php · รายได้ · ลูกค้าของฉัน */
.coach-agenda { display: grid; gap: var(--space-5); }
.coach-agenda-day { display: grid; gap: var(--space-2); }
.coach-agenda-date { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-base); color: var(--color-text-strong); }
.coach-agenda-date small { margin-inline-start: auto; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.coach-agenda-free { margin: 0; padding: var(--space-3) var(--space-4); border: 1px dashed var(--color-border-normal); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--text-sm); }
.coach-agenda-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.coach-agenda-item { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-normal); border-inline-start: 4px solid var(--color-brand-accent); border-radius: var(--radius-md); background: var(--color-surface-card); }
.coach-agenda-day[data-today] .coach-agenda-item { border-inline-start-color: var(--color-state-success); }
.coach-agenda-time { display: grid; line-height: var(--leading-tight); }
.coach-agenda-time strong { font-size: var(--text-xl); color: var(--color-text-strong); }
.coach-agenda-time small { color: var(--color-text-muted); font-size: var(--text-sm); }
.coach-agenda-body { display: grid; gap: var(--space-1); min-inline-size: 0; }
.coach-agenda-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-text-strong); font-size: var(--text-base); overflow-wrap: anywhere; }
.coach-agenda-who small { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.coach-agenda-where, .coach-agenda-phone { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
.coach-agenda-phone { color: var(--color-brand-link); text-decoration: none; justify-self: start; }
.coach-agenda :is(.coach-agenda-who, .coach-agenda-where, .coach-agenda-phone) .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); flex: none; }
.coach-agenda-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
@media (max-width: 640px) {
  .coach-agenda-item { grid-template-columns: 4rem minmax(0, 1fr); }
  .coach-agenda-tags { grid-column: 1 / -1; justify-content: flex-start; }
}
.coach-income { display: grid; gap: var(--space-2); margin: 0; }
.coach-income > div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.coach-income dt { color: var(--color-text-muted); }
.coach-income dd { margin: 0; color: var(--color-text-strong); }
.coach-income-total { padding-block: var(--space-2); border-block: 1px solid var(--color-border-normal); }
.coach-income-total dd { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-state-success); }
.coach-students { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.coach-students > li { display: grid; gap: var(--space-1); padding-block: var(--space-2); border-block-end: 1px solid var(--color-border-normal); }
.coach-student-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.coach-student-head a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-brand-link); font-size: var(--text-sm); text-decoration: none; }
.coach-student-head a .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.coach-student-meta { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
/* หน้าแรกโค้ช: จอแคบ ตารางสอนขึ้นก่อน (สิ่งที่โค้ชเปิดดูบ่อยที่สุด · ผู้ใช้เรียง 1. ตารางสอน 2. รายได้ 3. ลูกค้า) — กลับกฎ record-side ขึ้นก่อน */
@media (max-width: 1100px) { .record-layout.coach-home > .record-side { order: 0; } }
/* หน้าจองสำเร็จ: โค้ช + เบอร์โทร (ผู้ใช้สั่ง 2026-10-30) */
.bk-done-coach dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-1) var(--space-3); text-align: end; }
.bk-done-coach-phone { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-bold); color: var(--color-brand-accent); }
.bk-done-coach-phone .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.bk-done-coach small { color: var(--color-text-muted); }

/* ส่งเวลาว่างให้ลูกค้า แบบสั้นมุมขวาบนหัวเพจ (ผู้ใช้สั่ง 2026-10-30) */
.page-tools .share-bar[data-compact="true"] { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); margin: 0; inline-size: auto; max-inline-size: 100%; }
.page-tools .share-bar[data-compact="true"] .share-bar-text { display: none; }
.page-tools .share-bar[data-compact="true"] .share-bar-icon { inline-size: 32px; block-size: 32px; }
@media (max-width: 640px) { .page-tools .share-bar[data-compact="true"] { inline-size: 100%; justify-content: space-between; } }

/* ‼️ ตารางคอร์ท 7 วัน (ผู้ใช้สั่ง 2026-10-30 "เวลาเป็น column วันเป็น row") — แถว = วัน × คอร์ท · คอลัมน์ = ช่องเวลา
      สีใช้ --grid-<state> ตัวเดียวกับมุมมองรายวัน ปรับสีจากคำอธิบายสีแล้วเปลี่ยนตามกัน */
.week-h-wrap { overflow-x: auto; border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); }
.week-h { border-collapse: separate; border-spacing: 0; table-layout: fixed; inline-size: 100%; min-inline-size: calc(8.5rem + 32 * 1.75rem); font-size: var(--text-xs); }
.week-h th, .week-h td { padding: 0; }
.week-h thead th { position: sticky; inset-block-start: 0; z-index: 2; background: var(--color-surface-card); block-size: 2rem; border-block-end: 1px solid var(--color-border-strong); font-weight: 600; color: var(--color-text-strong); }
.week-h-corner { position: sticky; inset-inline-start: 0; z-index: 3 !important; text-align: start; padding-inline: var(--space-2) !important; color: var(--color-text-muted) !important; font-weight: 500 !important; }
.week-h-time { min-inline-size: 1.75rem; text-align: start; padding-inline-start: 2px !important; white-space: nowrap; }
.week-h-time[data-hour="true"] { border-inline-start: 1px solid var(--color-border-normal); }
.week-h-time[data-now="true"] { color: var(--color-state-danger) !important; }
.week-h-date { position: sticky; inset-inline-start: 0; z-index: 1; inline-size: 4.75rem; min-inline-size: 4.75rem; max-inline-size: 4.75rem; background: var(--color-surface-card); vertical-align: middle; text-align: start; border-inline-end: 1px solid var(--color-border-normal); }
.week-h-date a { display: grid; gap: 2px; padding: var(--space-1) var(--space-2); text-decoration: none; color: var(--color-text-strong); line-height: 1.2; }
.week-h-date a:hover { background: var(--color-tint-neutral); }
.week-h-weekday { font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.week-h-dmy { white-space: nowrap; font-size: 0.6875rem; }
.week-h-dmy { color: var(--color-text-muted); }
.week-h-court { position: sticky; inset-inline-start: 4.75rem; z-index: 1; inline-size: 3.75rem; min-inline-size: 3.75rem; max-inline-size: 3.75rem; background: var(--color-surface-card); text-align: start; padding-inline: var(--space-1) !important; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-inline-end: 1px solid var(--color-border-normal); }
.week-h-day + .week-h-day > tr:first-child > * { border-block-start: 2px solid var(--color-border-strong); }
.week-h-day[data-today="true"] :is(.week-h-date, .week-h-court) { background: color-mix(in srgb, var(--color-brand-wash) 70%, var(--color-surface-card)); }
.week-h-slot { position: relative; block-size: 1.75rem; }
.week-h-slot[data-hour="true"] { border-inline-start: 1px solid var(--color-border-normal); }
.week-v-cell { position: absolute; inset: 1px; display: flex; align-items: flex-start; box-sizing: border-box; border-radius: var(--radius-sm); border: 1px solid transparent; padding: 1px 3px; text-decoration: none; overflow: hidden; color: inherit; }
.week-v-cell { align-items: center; }
.week-v-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2; font-weight: 600; }
.week-v-cell[data-state="free"]    { background: var(--color-slot-free); border-color: var(--color-slot-free-border); }
a.week-v-cell[data-state="free"]:hover { background: var(--color-tint-success); border-color: var(--color-slot-selected); }
.week-v-cell[data-state="booked"]        { background: var(--grid-booked, var(--color-grid-booked)); border-color: var(--grid-booked, var(--color-grid-booked)); color: var(--grid-booked-ink, var(--color-text-strong)); }
.week-v-cell[data-state="coach_booking"] { background: var(--grid-coach_booking, var(--color-grid-coach)); border-color: var(--grid-coach_booking, var(--color-grid-coach)); color: var(--grid-coach_booking-ink, var(--color-text-strong)); }
.week-v-cell[data-state="checked_in"]    { background: var(--grid-checked_in, var(--color-tint-warning)); border-color: var(--grid-checked_in, var(--color-state-warning)); color: var(--grid-checked_in-ink, var(--color-text-strong)); }
.week-v-cell[data-state="class"]         { background: var(--grid-class, var(--color-grid-class)); border-color: var(--grid-class, var(--color-grid-class)); color: var(--grid-class-ink, var(--color-text-strong)); }
.week-v-cell[data-state="partial"]       { background: var(--grid-partial, var(--color-slot-held)); border-color: var(--grid-partial, var(--color-state-warning)); color: var(--grid-partial-ink, var(--color-text-strong)); }
.week-v-cell[data-state="blocked"]       { background: var(--grid-blocked, var(--color-slot-blocked)); border: 1px dashed var(--color-border-strong); color: var(--grid-blocked-ink, var(--color-text-muted)); }
.week-v-cell:is([data-state="past"], [data-state="closed"]) { background: var(--color-slot-past); opacity: .7; }
a.week-v-cell:is([data-state="booked"], [data-state="coach_booking"], [data-state="checked_in"], [data-state="class"]):hover { outline: 2px solid var(--color-text-strong); outline-offset: -1px; }

/* ‼️ ลูกค้า VIP จอง = ส้ม · ลูกค้าทั่วไป = เขียว (ผู้ใช้สั่ง 2026-10-30) — ทุกตาราง (รายวัน · 7 วัน · คำอธิบายสี · พิมพ์) ปรับสีได้ */
.court-cell[data-state="vip_booking"], .week-v-cell[data-state="vip_booking"] { background: var(--grid-vip_booking, var(--color-grid-vip)); border-color: var(--grid-vip_booking, var(--color-grid-vip)); color: var(--grid-vip_booking-ink, var(--color-text-strong)); }
a.court-cell[data-state="vip_booking"]:hover, a.week-v-cell[data-state="vip_booking"]:hover { border-color: var(--color-text-strong); outline: 2px solid var(--color-text-strong); outline-offset: -1px; }
.court-legend-swatch[data-state="vip_booking"] { background: var(--grid-vip_booking, var(--color-grid-vip)); border-color: var(--grid-vip_booking, var(--color-grid-vip)); }
.schedule-print-table td[data-kind="vip"], .schedule-print-legend [data-kind="vip"] { background: var(--print-vip); }

/* ‼️ tooltip แบบการ์ดของการจองบนตารางคอร์ท (ผู้ใช้สั่ง 2026-10-30 "แก้ให้สวย") — พื้นขาว เงา หัวชื่อลูกค้า แถวป้าย/ค่าเรียงตรงกัน */
.tooltip[data-card="true"] {
  max-width: 20rem; min-width: 15rem; padding: var(--space-3); white-space: normal;
  background: var(--color-surface-card); color: var(--color-text-strong);
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 1;
}
.tooltip-title { display: block; font-size: var(--text-base); font-weight: 700; line-height: 1.3; }
.tooltip-sub { display: block; margin-block: 2px var(--space-2); padding-block-end: var(--space-2); border-block-end: 1px solid var(--color-border-normal); color: var(--color-text-muted); font-size: var(--text-xs); }
.tooltip-rows { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); margin: 0; font-size: var(--text-sm); }
.tooltip-rows dt { color: var(--color-text-muted); white-space: nowrap; }
.tooltip-rows dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.week-h-col-date { inline-size: 4.75rem; }
.week-h-col-court { inline-size: 3.75rem; }

/* ‼️ ชื่อบนช่องการจองอยู่กลางช่องทั้งแนวตั้งและแนวนอน — รายวันและ 7 วัน (ผู้ใช้สั่ง 2026-10-30 "text ไม่ตรงกลาง") */
a.court-cell:is([data-state="booked"], [data-state="vip_booking"], [data-state="coach_booking"], [data-state="checked_in"], [data-state="class"]),
.week-v-cell { justify-content: center; align-items: center; text-align: center; }
a.court-cell .court-cell-text, .week-v-text { line-height: 1.2; }

/* ‼️ ชื่อกลางแถบการจองทั้งแถบ ไม่ใช่กลางช่องแรก (ผู้ใช้ทัก 2026-10-30 "รายวันยังไม่ตรงกลาง")
      ข้อความอยู่ในช่องแรกของแถบ — กว้างเท่าทั้งแถบ (จำนวนช่อง × ช่อง − ช่องไฟ − padding) แล้วจัดกลาง */
a.court-cell[data-run] .court-cell-text { text-align: center; max-inline-size: none; }
a.court-cell[data-run-len="1"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 1 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="2"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 2 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="3"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 3 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="4"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 4 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="5"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 5 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="6"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 6 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="7"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 7 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="8"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 8 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="9"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 9 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="10"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 10 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="11"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 11 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="12"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 12 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="13"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 13 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="14"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 14 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="15"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 15 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="16"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 16 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="17"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 17 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="18"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 18 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="19"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 19 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="20"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 20 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="21"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 21 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="22"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 22 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="23"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 23 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run-len="24"] .court-cell-text { inline-size: calc(var(--slot-min-width) * 24 - var(--slot-gap) - var(--space-2)); }
a.court-cell[data-run="start"] { justify-content: flex-start; }

/* ปิดคอร์ทชั่วคราว (ซ้าย) + ส่งเวลาว่างให้ลูกค้า (ขวา) แถวเดียวกัน สูงเท่ากัน (ผู้ใช้สั่ง 2026-10-30) */
.calendar-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: stretch; }
.calendar-pair > .page-section { margin: 0; display: flex; flex-direction: column; }
.calendar-pair > .page-section > .card { flex: 1 1 auto; }
@media (min-width: 1100px) {
  .calendar-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .calendar-pair .block-form[data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-pair .block-form > .field:nth-of-type(3) { grid-column: 1 / -1; }
  .calendar-pair .block-form > .form-actions { grid-column: 1 / -1; justify-self: end; }
}
/* ตัวอย่างแชท: พื้นแบบห้องแชท LINE + ฟองข้อความ ขึ้นบรรทัดตามข้อความจริง */
.share-preview { display: block; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-raised); max-block-size: 24rem; overflow-y: auto; }
.share-preview-bubble { max-inline-size: 26rem; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border-start-start-radius: var(--radius-sm); background: var(--color-surface-card); box-shadow: var(--shadow-sm); white-space: pre-line; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-strong); }

/* ‼️ ชี้แถบการจองหลายช่อง = กรอบเดียวรอบทั้งแถบ (ผู้ใช้สั่ง 2026-10-30) — app.js ใส่ data-run-hover ให้ทุกช่องของใบเดียวกัน */
a.court-cell[data-run-hover="true"] { border-color: var(--color-text-strong); outline: none; }
a.court-cell[data-run-hover="true"]:is([data-run="start"], [data-run="mid"]) { border-inline-end-color: transparent; }
a.court-cell[data-run-hover="true"]:is([data-run="mid"], [data-run="end"]) { border-inline-start-color: transparent; }

/* ระดับสมาชิกบนหัวการ์ดรายละเอียด (ผู้ใช้สั่ง 2026-10-30) */
.tooltip-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tooltip-pill { flex: none; padding: 1px var(--space-2); border-radius: 999px; font-size: var(--text-xs); font-weight: 600; background: var(--color-tint-neutral); color: var(--color-text-muted); border: 1px solid var(--color-border-normal); }
.tooltip-pill[data-vip="true"] { background: var(--color-grid-vip); color: var(--color-text-strong); border-color: var(--color-grid-vip); }

/* AI Content Manager (168) — ปุ่มทดสอบ/สร้างตอนนี้ + ช่องคีย์ในการ์ดสถานะ (คอลัมน์ขวา) */
.ai-content-action, .ai-content-key { display: grid; gap: var(--space-2); margin-block-start: var(--space-4); }
.ai-content-key .field { margin: 0; }
.ai-content-action small { font-size: var(--text-xs); }
.ai-content-note { margin-block-start: var(--space-3); font-size: var(--text-xs); }
/* แท็บ AI › ตั้งค่า: ปุ่มบันทึกอยู่ท้ายการ์ดเดียวกับช่องกรอก (เดิมเป็นการ์ดเปล่าแยกอีกใบ · ผู้ใช้ทัก 2026-11-02) */
.ai-card-actions { display: flex; justify-content: flex-end; margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border-normal); }

/* แท็บ AI › ตั้งค่า AI: การ์ดคีย์ไม่ยืดเต็มจอ — เรียงเป็นตาราง เหลือที่ให้การ์ดของ AI ตัวอื่น (ผู้ใช้สั่ง 2026-11-02) */
/* Gemini · Facebook/IG · Meta Ads เรียงแถวเดียวกัน (ผู้ใช้สั่ง 2026-11-05 "เอามาต่อการเชื่อมต่อ FB IG ไม่ใช่ซ้อนลงล่าง") — จอแคบค่อยตกบรรทัด */
.ai-provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--space-4); align-items: start; }
.ai-provider-grid > .card { margin: 0; }
/* หัวเพจ AI Content Manager: สวิตช์เปิด/ปิด + ปุ่มฟันเฟือง (ผู้ใช้สั่ง 2026-11-02) */
.ai-head-tools { display: flex; align-items: center; gap: var(--space-3); }
.ai-head-tools form { display: inline-flex; margin: 0; }

/* AI Content Manager › แถบตั้งค่า: การ์ดตั้งค่า Cron + การ์ดสร้างตอนนี้ ไม่ยืดเต็มจอ (ผู้ใช้สั่ง 2026-11-02) */
/* 3 คอลัมน์: ตั้งค่า Cron · สร้างตอนนี้ · ข้อความโพสต์แชร์ (ผู้ใช้สั่ง 2026-11-04 "แทรกเป็น 3 column ไม่ซ้อน") */
.ai-settings-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.ai-settings-grid > .ai-share-text-form > fieldset > .card { margin: 0; }
@media (max-width: 1360px) { .ai-settings-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .ai-settings-grid > .ai-share-text-form { grid-column: 2; } }
.ai-settings-grid > form > fieldset > .card, .ai-settings-grid > .card { margin: 0; }
@media (max-width: 1100px) { .ai-settings-grid { grid-template-columns: minmax(0, 720px); } .ai-settings-grid > .ai-share-text-form { grid-column: auto; } }

/* AI Content Manager › ภาพรวม: การ์ดรายการล่าสุดสองคอลัมน์ (ผู้ใช้สั่ง 2026-11-02) */
.ai-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.ai-dash-grid > .card { margin: 0; }
@media (max-width: 1100px) { .ai-dash-grid { grid-template-columns: minmax(0, 1fr); } }
/* รายงาน SEO (195) — คำค้นเป้าหมาย | หน้าเป้าหมาย สูงเท่ากัน · อีเมล Service Account ในการ์ด Google (คัดลอกได้) */
.seo-target-grid, .seo-settings-grid { align-items: stretch; }
.seo-target-grid > .card, .seo-settings-grid > .card { block-size: 100%; }
.seo-sa-email { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-3); font-size: var(--text-sm); }
.seo-sa-email code { overflow-wrap: anywhere; min-inline-size: 0; }
/* การ์ดแคบ: รูปย่อกับชื่ออยู่แถวเดียวกัน (ไม่ให้รูปตกบรรทัด) */
@media (min-width: 769px) {
  .ai-dash-grid td[data-primary] { white-space: nowrap; }
  .ai-dash-grid .cell-stack[data-clamp="true"] { max-inline-size: min(18rem, 28vw); white-space: normal; }
}

/* ป้ายสถานะมุมขวาบนหัวเพจ AI Content Manager — ปิด = สีเตือนเด่น (ผู้ใช้สั่ง 2026-11-02) */
.ai-status-pill { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); border: 1px solid transparent; font-size: var(--text-sm); }
.ai-status-pill > span { display: flex; flex-direction: column; line-height: 1.35; }
.ai-status-pill small { color: var(--color-text-muted); font-size: var(--text-xs); }
.ai-status-pill[data-tone="warning"] { background: var(--color-tint-warning); border-color: var(--color-state-warning); }
.ai-status-pill[data-tone="warning"] > .icon { color: var(--color-state-warning); inline-size: 22px; block-size: 22px; }
.ai-status-pill[data-tone="warning"] strong { color: var(--color-state-warning); }
.ai-status-pill[data-tone="success"] { background: var(--color-tint-success, var(--color-tint-info)); padding-block: var(--space-2); }
.ai-status-pill[data-tone="success"] > .icon { color: var(--color-state-success, var(--color-brand-accent)); }
.ai-status-pill[data-tone="success"] > span { flex-direction: row; gap: 4px; }

/* AI Content Manager › ประวัติการรัน: เห็นราว 10 แถวแล้วเลื่อนในกรอบ · หัวตารางและแถวสรุปตรึงไว้ (ผู้ใช้สั่ง 2026-11-02) */
/* ‼️ กล่องเลื่อน = .table-wrap เอง (มัน overflow-x:auto อยู่แล้ว จึงเป็นกรอบของ sticky) — เลื่อนที่กล่องนอกแล้ว tfoot ไม่ติดล่าง */
.ai-list-scroll .table-wrap { max-block-size: 620px; overflow: auto; }
.ai-runs-scroll .table-wrap { max-block-size: 540px; }
.ai-list-scroll .table thead th { position: sticky; inset-block-start: 0; z-index: 2; }
.ai-runs-scroll .table tfoot td { position: sticky; inset-block-end: 0; z-index: 2; background: var(--color-surface-head); font-weight: var(--weight-bold);
  border-block-start: 1px solid var(--color-border-normal); }
.filter-field[data-type="number"] input { inline-size: 9rem; }
@media (max-width: 768px) { .ai-list-scroll .table-wrap { max-block-size: none; overflow: visible; } }
/* ตั้งค่า Cron: การ์ดคงขนาดนี้ (กว้างสุด 720px) · ช่องฐานความรู้สูงคงที่ ~5 บรรทัด ยืดเองได้ไม่เกิน 260px แล้วเลื่อนในช่อง (ผู้ใช้สั่ง 2026-11-02 "ช่องข้อความขยายเยอะมาก") */
/* แฮชแท็ก: สูงตามข้อความ (field-sizing · เบราว์เซอร์เก่าใช้ app.js) */
.ai-settings-grid textarea[name^="ai_content_share_hashtags"] { field-sizing: content; min-block-size: 3rem; max-block-size: 12rem; resize: vertical; overflow-y: auto; }
.ai-settings-grid textarea[name="ai_content_knowledge"] { block-size: 128px; min-block-size: 128px; max-block-size: 260px; overflow-y: auto; resize: vertical; }
.ai-settings-grid > .ai-settings-form { max-inline-size: none; }
/* การ์ดตั้งค่า Cron แบ่งส่วน — หัวส่วนเต็มแถว · ส่วนแรกไม่มีเส้นคั่น */
.ai-settings-sections > .form-subhead { grid-column: 1 / -1; margin: 0; }
.ai-settings-sections > .ai-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.ai-pair-col { display: grid; gap: var(--space-4); align-content: start; min-inline-size: 0; }
.ai-pair-col > .form-subhead { margin: 0; }
.ai-pair-col > .field :is(input, select, textarea) { max-inline-size: 100%; }
@media (max-width: 640px) { .ai-settings-sections > .ai-pair { grid-template-columns: minmax(0, 1fr); } }
.ai-settings-sections > .form-subhead:first-child { border-block-start: 0; padding-block-start: 0; }
/* ระยะหายใจของการ์ดตั้งค่า AI Content (ผู้ใช้ทัก 2026-11-04 "เบียด ชิดเกิน") — ห่างระหว่างช่อง/ส่วน · ช่องเต็มคอลัมน์ให้แนวตรง */
.ai-settings-grid { gap: var(--space-5); }
.ai-settings-sections { row-gap: var(--space-5); column-gap: var(--space-6); }
.ai-settings-sections > .form-subhead { padding-block-start: var(--space-5); margin-block-start: var(--space-1); }
.ai-settings-sections > .ai-pair { column-gap: var(--space-6); }
.ai-pair-col { gap: var(--space-5); }
.ai-pair-col > .form-subhead { padding-block-start: var(--space-5); margin-block-start: var(--space-1); }
.ai-pair-col + .ai-pair-col { padding-inline-start: var(--space-6); border-inline-start: 1px solid var(--color-border-normal); }
.ai-pair-col + .ai-pair-col > .form-subhead { border-block-start-color: var(--color-border-normal); }
.ai-settings-sections .field { gap: var(--space-2); }
.ai-settings-sections .field[data-width="medium"] :is(input, select) { max-inline-size: 100%; }
.ai-settings-sections .field .hint, .ai-settings-sections .field small { line-height: 1.55; }
@media (max-width: 640px) { .ai-pair-col + .ai-pair-col { padding-inline-start: 0; border-inline-start: 0; } }

/* หมายเหตุโควตาอยู่แถวเดียวกับหัวข้อ (ชิดขวา) · ตัวกรองขึ้นแถวใหม่ใต้ — ไม่งั้นตัวกรองดันหมายเหตุตกลงไปท้าย */
#runs > .card-head, #runs .card-head { flex-wrap: wrap; }
#runs .card-head > .card-meta { order: 1; margin-inline-start: auto; align-self: center; display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--color-state-info); font-size: var(--text-xs); background: var(--color-tint-info); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill, 999px); }
#runs .card-head > .card-tools { order: 2; flex-basis: 100%; }
/* ภาพรวม: การ์ดในแถวเดียวกันสูงเท่ากัน · แถวตารางสูงเท่ากันทุกการ์ด · แสดง 5 รายการ (ผู้ใช้สั่ง 2026-11-02 "พื้นที่ขาวให้เท่ากัน") */
.ai-dash-grid { align-items: stretch; }
.ai-dash-grid > .card { display: flex; flex-direction: column; min-inline-size: 0; }
.ai-dash-grid > .card > .card-body { flex: 1 1 auto; min-block-size: 300px; }
.ai-dash-grid .table tbody td { block-size: 52px; padding-block: 6px; vertical-align: middle; }
.ai-dash-grid .table thead th { padding-block: 10px; }
.ai-dash-grid .detail-list > * { min-block-size: 42px; }
/* ผลของรอบล่าสุดบรรทัดเดียว (คอลัมน์ที่ 4) — ไม่แตะคอลัมน์หัวข้อที่มีรูปย่อ */
#ai-dash-runs .table td:nth-child(4) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 10rem; }

/* ── AI ADS Manager (169) — หน้าดูโพสต์: ตัวอย่าง FB/IG ซ้าย · สถานะ+ปุ่มขวา · หน้าแก้: ฟอร์มซ้าย · รูปขวา */
.ads-show-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--space-4); align-items: start; }
.ads-mock-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-4); align-items: start; }
.ads-error { margin-block-start: var(--space-3); overflow-wrap: anywhere; }
.ads-mock { background: var(--color-surface-card); border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.ads-mock-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.ads-mock-head > span:last-child { display: grid; line-height: 1.3; }
.ads-mock-head small { color: var(--color-text-muted); font-size: var(--text-xs); }
.ads-mock-avatar { display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--color-brand-accent); color: var(--color-brand-on-accent); font-weight: var(--weight-bold); }
.ads-mock-caption { margin: 0; padding: var(--space-3) var(--space-4); white-space: pre-line; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-normal); }
.ads-mock-image { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--color-surface-raised); }
.ads-mock-noimage { display: flex; align-items: center; justify-content: center; gap: var(--space-2); aspect-ratio: 4 / 5; margin: 0; background: var(--color-surface-raised); color: var(--color-text-muted); }
.ads-side > .card { margin: 0; }
.ads-actions { display: grid; gap: var(--space-2); margin-block-start: var(--space-4); }
.ads-actions form { margin: 0; }
.ads-actions small { font-size: var(--text-xs); }
.ads-edit-grid { display: grid; grid-template-columns: minmax(0, 720px) minmax(260px, 340px); gap: var(--space-4); align-items: start; }
.ads-edit-grid > .card, .ads-edit-grid > form > .card { margin: 0; }
.ads-edit-image { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); background: var(--color-surface-raised); }
.ads-meta-help { font-size: var(--text-sm); color: var(--color-text-normal); }
.ads-meta-help summary { cursor: pointer; font-weight: var(--weight-bold); color: var(--color-brand-link); }
.ads-meta-help ol { margin: var(--space-2) 0 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-1); overflow-wrap: anywhere; }
/* AI Ads Manager เฟส 1 (176) — แท็บแอดเสียเงิน / รายงาน AI */
.ads-mgr-steps { margin: 0; padding: var(--space-4) var(--space-5) var(--space-5) calc(var(--space-5) + var(--space-4)); display: grid; gap: var(--space-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ads-mgr-sync { align-items: center; }
.ads-mgr-sync > form { margin: 0; flex: none; }
.ads-mgr-summary { margin: 0; line-height: 1.7; white-space: pre-line; }
.ads-mgr-subhead { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.ads-mgr-list { margin: 0; padding-inline-start: var(--space-5); list-style: disc; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.ads-mgr-decisions { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.ads-mgr-decisions > li { display: flex; gap: var(--space-2); align-items: baseline; }

/* ── AI Ads Manager เฟส 2 (177): ข้อเสนอรออนุมัติ */
.ads-act-empty { display: flex; gap: var(--space-2); align-items: center; margin: 0; color: var(--color-state-success); }
.ads-act-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ads-act-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); }
.ads-act-item[data-kind="pause"] { border-inline-start: 3px solid var(--color-state-danger); }
.ads-act-item[data-kind="budget_up"] { border-inline-start: 3px solid var(--color-state-success); }
.ads-act-item[data-kind="budget_down"] { border-inline-start: 3px solid var(--color-state-warning); }
.ads-act-item[data-kind="refresh"] { border-inline-start: 3px solid var(--color-state-info); }
.ads-act-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ads-act-reason { margin: 0; line-height: 1.6; }
.ads-act-budget { margin: 0; font-weight: var(--weight-semibold); }
.ads-act-buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ads-act-buttons form { margin: 0; }
/* ── AI Ads Manager เฟส 3 (178): สร้างแอด */
.ads-act-inline { margin: 0; display: inline; }
.ads-create-steps { margin: 0 0 var(--space-4); padding-inline-start: 1.4em; display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.ads-create-form { display: grid; gap: var(--space-3); justify-items: start; }
.ads-create-form > .field, .ads-create-form > .field-grid { inline-size: 100%; }
.ads-create-brief { margin: 0 0 var(--space-3); white-space: pre-line; }
.ads-create-variants { inline-size: 100%; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ads-create-variant { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); display: grid; gap: var(--space-2); margin: 0; min-inline-size: 0; }
.ads-create-variant legend { padding: 0 var(--space-1); font-weight: var(--weight-medium); white-space: nowrap; }
.ads-create-angle { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.ads-create-variant .field { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.ads-create-variant textarea, .ads-create-variant input[type="text"] { inline-size: 100%; }
.ads-create-preview img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); display: block; }
.ads-create-noimg { aspect-ratio: 4 / 5; border: 1px dashed var(--color-border); border-radius: var(--radius-md); display: grid; place-content: center; justify-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
.ads-create-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-block-start: var(--space-4); }
.ads-create-actions form { margin: 0; }
.ads-act-verdicts { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.ads-act-verdicts > li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.ads-act-rules { margin-block-start: var(--space-4); border-top: 1px solid var(--color-border); padding-block-start: var(--space-3); }
.ads-act-rules > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-weight: var(--weight-medium); }
.ads-act-rules-form { margin-block-start: var(--space-3); display: grid; gap: var(--space-3); justify-items: start; }
.ads-act-rules-form .field-grid { inline-size: 100%; }
.ads-act-note { margin: 0; font-size: var(--text-sm); }
.ads-act-propose { margin-block-start: var(--space-2); }
.ads-mgr-decisions > li > .badge { flex: none; }
.ads-mgr-decisions > li > span:last-child { min-inline-size: 0; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .ads-show-grid, .ads-edit-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ช่องเวลาหลายช่วง (partials/time-slots.php) — แถวละหนึ่งเวลา เรียงต่อกัน · ปุ่มเพิ่มใต้รายการ */
.time-slots-label { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.time-slots { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.time-slot { display: inline-flex; align-items: center; gap: var(--space-1); }
.time-slot .time24-format { display: none; }
.time-slots-add { margin-block-start: var(--space-2); justify-self: start; inline-size: fit-content; }

/* ช่องที่ถูกล็อกตามอีกช่อง (data-lock-* · AI Content เผยแพร่รออนุมัติ = ไม่แชร์ · ผู้ใช้สั่ง 2026-11-04) */
select.is-locked { pointer-events: none; background-color: var(--color-surface-head); color: var(--color-text-muted); }
.field:has(select.is-locked) { cursor: not-allowed; }
.ai-pair-col.is-off > .field:not(:has(input[type="number"])) { opacity: .55; }
.ai-pair-col.is-off :is(select, textarea, input:not([type="number"])) { pointer-events: none; background-color: var(--color-surface-head); }
/* กลุ่มช่องที่แสดงตามอีกช่อง (data-show-when · ฟอร์มรอบ Cron 2026-11-05) — ไม่เป็นกล่องของตัวเอง ช่องข้างในเรียงในตารางของฟอร์มตามเดิม */
.field-contents { display: contents; }
/* AI Content › ตั้งค่าบทความ (ผู้ใช้สั่ง 2026-11-05) — 2 คอลัมน์ แบรนด์ | เน้นอะไร + ฐานความรู้ · เส้นแบ่งกลาง · จอแคบซ้อน */
.ai-article-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.ai-article-cols > .field-grid + .field-grid { border-inline-start: 1px solid var(--color-border-subtle, var(--color-border-normal)); padding-inline-start: var(--space-8); }
@media (max-width: 900px) {
  .ai-article-cols { grid-template-columns: minmax(0, 1fr); }
  .ai-article-cols > .field-grid + .field-grid { border-inline-start: 0; padding-inline-start: 0; }
}
/* ช่องตารางที่แถวนั้นตั้งไม่ได้ (partials/table.php blank · ผู้ใช้สั่ง 2026-11-05) — ถมเทาอ่อน ไม่ใช่แดง (แดง = ผิดพลาด) */
td.cell-na { background-color: var(--color-surface-head); }
@media screen and (max-width: 768px) { td.cell-na { display: none; } }
.field-contents[hidden] { display: none; }
/* กล่องเพิ่ม/แก้รอบ Cron (ผู้ใช้สั่ง 2026-11-05) — แถวบน เวลา | ชนิด (สองส่วน แถวเดียว · ช่องในส่วนเรียงแนวนอน) · แถวล่าง ข่าว/บทความ | เผยแพร่และแชร์ */
.ai-schedule-form .ai-schedule-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.ai-schedule-form .ai-schedule-row .field:not(:has(.time-slots)) :is(input, select) { max-inline-size: 100%; inline-size: 100%; }
.ai-schedule-form > .ai-schedule-pair { border-block-start: 1px solid var(--color-border-normal); }
/* เส้นแบ่งคอลัมน์เส้นเดียวยาวตลอดทั้งสองแถว ตัดกับเส้นแนวนอนเป็นกากบาท (ผู้ใช้ทัก 2026-11-05 "ขีดแบ่งมันขาดๆ") — วาดที่ฟอร์ม ไม่ใช่ขอบของแต่ละคอลัมน์ */
.ai-schedule-form { position: relative; }
.ai-schedule-form > .ai-pair > .ai-pair-col + .ai-pair-col { border-inline-start: 0; }
.ai-schedule-form::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(50% + var(--ai-schedule-gap, 12px)); border-inline-start: 1px solid var(--color-border-normal); pointer-events: none; }
@media (max-width: 760px) { .ai-schedule-form::before { display: none; } }
/* เว้นขอบซ้าย/ขวาของกล่องรอบ (ผู้ใช้ทัก 2026-11-05 "ชิดไป") — หัว เนื้อหา ปุ่มท้าย ตรงแนวเดียวกัน */
dialog[id^="ai-schedule-"] :is(.dialog-body, .dialog-foot) { padding-inline: var(--space-8); }
dialog[id^="ai-schedule-"] > .dialog-head { padding-inline: var(--space-8); }
/* ช่องเวลา (time-slots) ตรงแนวกับช่อง select ข้างๆ */
.ai-schedule-form .time-slots-label { margin-block-end: 0; }
/* ข่าว/บทความซ้อนกันในช่องเดียว — กลุ่มที่ซ่อนยังกินที่ (มองไม่เห็น) ความสูงจึงคงที่ */
.ai-schedule-form .ai-schedule-content { display: grid; }
.ai-schedule-form .ai-schedule-content > .field-contents { display: grid; gap: var(--space-4); align-content: start; grid-area: 1 / 1; min-inline-size: 0; }
.ai-schedule-form .ai-schedule-content > .field-contents[data-show-off] { visibility: hidden; }
@media (max-width: 760px) { .ai-schedule-form .ai-schedule-row { grid-template-columns: minmax(0, 1fr); } }
.ai-schedule-form .ai-pair-col .form-subhead { margin: 0; padding-block-start: 0; border-block-start: 0; }
.ai-schedule-form .ai-pair-col .field:not(:has(.time-slots)) :is(input, select, textarea) { max-inline-size: 100%; inline-size: 100%; }
.ai-list-scroll .cell-stack[data-clamp="true"] { max-inline-size: min(22rem, 30vw); }
.table-tools .confirm-form .btn { white-space: nowrap; }
/* หัวข่าว/บทความที่อยู่บนสุดของการ์ด (สร้างตอนนี้) ไม่มีเส้นคั่นซ้อนกับเส้นใต้หัวการ์ด (ผู้ใช้สั่ง 2026-11-04) */
/* เส้นคั่นเหนือข่าว|บทความ = เส้นเดียวต่อเนื่องเต็มความกว้าง ต่อกับเส้นแบ่งคอลัมน์เป็นรูปตัว T (ผู้ใช้สั่ง 2026-11-04 "ขาดกันแปลกๆ")
   เดิมแต่ละคอลัมน์มีเส้นของตัวเอง เว้นช่องตรงกลาง · บนสุดของการ์ด (สร้างตอนนี้) = ไม่มีเส้น */
.ai-settings-sections > .ai-pair > .ai-pair-col > .form-subhead { border-block-start: 0; padding-block-start: 0; margin-block-start: 0; }
.ai-settings-sections > .ai-pair:not(:first-child) { border-block-start: 1px solid var(--color-border-normal); padding-block-start: var(--space-5); }

/* ═══════════════════════════════════════════════════════════════ ธีมแยกส่วน (174 · ผู้ใช้สั่ง 2026-11-05)
   ‼️ ค่าสีมาจาก /theme/custom/{id}.css (TenantThemeService::css) — ที่นี่มีแค่กฎที่อ้างตัวแปร
   ‼️ ทำงานเฉพาะส่วนที่ <html data-tenant-custom="..."> มีชื่อ และเฉพาะโหมดสว่าง (โหมดมืดใช้พื้นมืดของระบบ)
   ‼️ แถบหัวเว็บ/ท้ายเว็บ: เปลี่ยน token พื้น/ตัวหนังสือภายในแถบนั้น — ลูกในแถบใช้ token เดิมจึงเปลี่ยนตามทั้งหมด
      กล่องที่เด้งจากแถบ (เมนูย่อย · ลิ้นชักมือถือ) คืน token เดิม ไม่ให้เมนูยาวทั้งกล่องเป็นสีแถบ */
:root[data-theme="light"][data-tenant-custom] {
  --tenant-base-card: var(--color-surface-card);
  --tenant-base-raised: var(--color-surface-raised);
  --tenant-base-strong: var(--color-text-strong);
  --tenant-base-normal: var(--color-text-normal);
  --tenant-base-muted: var(--color-text-muted);
  --tenant-base-border: var(--color-border-normal);
  --tenant-base-accent: var(--color-brand-accent);
  --tenant-base-on-accent: var(--color-brand-on-accent);
}

:root[data-theme="light"][data-tenant-custom~="header"] :is(.appbar, .public-bar, .topbar) {
  --color-surface-card: var(--tenant-header);
  --color-surface-raised: var(--tenant-header);
  --color-text-strong: var(--tenant-header-on);
  --color-text-normal: var(--tenant-header-on);
  --color-text-muted: var(--tenant-header-soft);
  --color-border-normal: var(--tenant-header-line);
  --color-brand-accent: var(--tenant-header-on);
  /* พื้นอ่อน/hover/ตัวที่เลือก ในแถบ = เฉดของสีแถบเอง (พื้นอ่อนของธีมกับตัวหนังสือแถบสีขาว อ่านไม่ออก) */
  --color-brand-soft: var(--tenant-header-line);
  --color-brand-wash: var(--tenant-header-line);
  --color-surface-mist: var(--tenant-header-line);
  --color-tint-success: var(--tenant-header-line);
}

:root[data-theme="light"][data-tenant-custom~="footer"] :is(.public-footer, .site-footer) {
  --color-surface-card: var(--tenant-footer);
  --color-surface-raised: var(--tenant-footer);
  --color-text-strong: var(--tenant-footer-on);
  --color-text-normal: var(--tenant-footer-on);
  --color-text-muted: var(--tenant-footer-soft);
  --color-border-normal: var(--tenant-footer-line);
  --color-brand-accent: var(--tenant-footer-on);
  /* พื้นอ่อน/hover/ตัวที่เลือก ในแถบ = เฉดของสีแถบเอง (พื้นอ่อนของธีมกับตัวหนังสือแถบสีขาว อ่านไม่ออก) */
  --color-brand-soft: var(--tenant-footer-line);
  --color-brand-wash: var(--tenant-footer-line);
  --color-surface-mist: var(--tenant-footer-line);
  --color-tint-success: var(--tenant-footer-line);
}
:root[data-theme="light"][data-tenant-custom~="footer"] :is(.public-footer, .site-footer) { background: var(--tenant-footer); }

:root[data-theme="light"][data-tenant-custom] :is(.appbar, .public-bar, .topbar) :is(.appbar-pop-panel, .appnav-drawer, .public-nav-panel, .public-drawer-body, dialog) {
  --color-surface-card: var(--tenant-base-card);
  --color-surface-raised: var(--tenant-base-raised);
  --color-text-strong: var(--tenant-base-strong);
  --color-text-normal: var(--tenant-base-normal);
  --color-text-muted: var(--tenant-base-muted);
  --color-border-normal: var(--tenant-base-border);
  --color-brand-accent: var(--color-brand-link);
}

/* ปุ่มในแถบหัวเว็บ/ท้ายเว็บ: accent ในแถบถูกเปลี่ยนเป็นสีตัวหนังสือของแถบ — ปุ่มทึบต้องได้สีปุ่มเดิมคืน ไม่งั้นพื้นกับตัวหนังสือสีเดียวกัน */
:root[data-theme="light"][data-tenant-custom] :is(.appbar, .public-bar, .topbar, .public-footer, .site-footer) .btn-primary {
  --color-brand-accent: var(--tenant-base-accent);
  --color-brand-on-accent: var(--tenant-base-on-accent);
}

/* ช่องเวลาในหน้าจอง — selector ยาวให้ชนะกฎของชุดสี (:is(:root[data-tenant-theme]...) .bk-time.bk-time.bk-time) */
:root[data-theme="light"][data-tenant-custom~="slot-free"] .bk-time.bk-time.bk-time.bk-time:not([data-state]):not(:has(input:checked)):not([data-in-range]) {
  background: var(--tenant-slot-free);
}
:root[data-theme="light"][data-tenant-custom~="slot-selected"] .bk-time.bk-time.bk-time.bk-time:is(:has(input:checked), [data-in-range]) {
  border-color: var(--tenant-slot-selected);
  background: var(--tenant-slot-selected);
  color: var(--tenant-slot-selected-on);
}
:root[data-theme="light"][data-tenant-custom~="slot-booked"] .bk-time.bk-time.bk-time.bk-time[data-state="booked"] {
  background: var(--tenant-slot-booked);
}

/* ─────────────────────────────── หน้าตั้งค่า › ธีมและรูปแบบ */
.theme-parts { display: grid; gap: var(--space-6); }
.theme-parts-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1100px) {
  .theme-parts-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
  .theme-parts-preview { position: sticky; inset-block-start: calc(var(--space-20) + var(--space-4)); }
}
.theme-part-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.color-field-control { display: flex; align-items: center; gap: var(--space-2); }
.color-field-control input[type="color"] {
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  padding: 2px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  cursor: pointer;
}
.color-field-control input[type="text"] { flex: 1; inline-size: auto; max-inline-size: none; min-inline-size: 0; font-family: var(--font-mono); text-transform: uppercase; }
.color-field-control input[type="text"]:placeholder-shown { text-transform: none; font-family: var(--font-body); }
.color-field[data-auto="true"] input[type="color"] { opacity: .45; }
.color-field-used { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }

.shape-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.shape-option { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 44px; 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-normal); cursor: pointer; }
.shape-option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.shape-option:has(input:checked) { border-color: var(--color-brand-accent); color: var(--color-text-strong); font-weight: var(--weight-medium); box-shadow: 0 0 0 1px var(--color-brand-accent); }
.shape-option:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.shape-sample { flex: none; inline-size: 28px; block-size: 18px; border: 2px solid var(--color-brand-accent); background: var(--color-brand-soft); }
.shape-sample[data-shape="square"] { border-radius: 3px; }
.shape-sample[data-shape="rounded"] { border-radius: 7px; }
.shape-sample[data-shape="pill"], .shape-sample[data-shape="round"] { border-radius: 999px; }
.shape-sample[data-frame="shadow"] { border-color: transparent; box-shadow: var(--shadow-md); background: var(--color-surface-card); }
.shape-sample[data-frame="none"] { border-color: transparent; background: var(--color-surface-raised); }
.shape-sample[data-font] { display: grid; place-items: center; border: 0; background: none; color: var(--color-text-strong); font-weight: var(--weight-bold); }
.shape-sample[data-font="sm"] { font-size: var(--text-sm); }
.shape-sample[data-font="md"] { font-size: var(--text-base); }
.shape-sample[data-font="lg"] { font-size: var(--text-lg); }
.shape-sample[data-font="xl"] { font-size: var(--text-xl); }

/* ตัวอย่างหน้าเว็บ — ค่าตั้งต้น = ธีมที่บันทึกแล้ว (หน้านี้โหลดไฟล์ธีมขององค์กร) · JS ตั้ง --mock-* ตามช่องที่กำลังแก้ */
.theme-mock { display: grid; overflow: hidden; border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg);
  background: var(--mock-page, var(--color-surface-page)); font-size: calc(var(--text-sm) * var(--mock-font, 1)); color: var(--color-text-normal); }
.theme-mock-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--mock-header-line, var(--color-border-normal)); background: var(--mock-header, var(--color-surface-card)); color: var(--mock-header-on, var(--color-text-strong)); font-weight: var(--weight-bold); }
.theme-mock-nav { display: flex; gap: var(--space-3); font-weight: var(--weight-normal); color: var(--mock-header-soft, var(--color-text-muted)); }
.theme-mock-body { display: grid; gap: var(--space-3); padding: var(--space-4); }
.theme-mock-card { display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--mock-card-border, var(--tenant-card-border, 1px solid var(--color-border-normal)));
  border-radius: var(--mock-radius-card, var(--tenant-radius-card, var(--radius-xl))); box-shadow: var(--mock-card-shadow, var(--tenant-card-shadow, var(--shadow-sm)));
  background: var(--mock-card, var(--color-surface-card)); }
.theme-mock-title { margin: 0; color: var(--color-text-strong); font-size: 1.15em; font-weight: var(--weight-bold); }
.theme-mock-link { color: var(--mock-link, var(--color-brand-link)); text-decoration: underline; text-underline-offset: 3px; }
.theme-mock-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.theme-mock-slots span { display: grid; place-items: center; min-block-size: 36px; border: 1px solid var(--color-slot-free-border); border-radius: var(--radius-md);
  background: var(--mock-slot-free, var(--tenant-slot-free, var(--color-tint-success))); color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.theme-mock-slots span[data-state="selected"] { border-color: var(--mock-slot-selected, var(--color-brand-accent)); background: var(--mock-slot-selected, var(--color-brand-accent));
  color: var(--mock-slot-selected-on, var(--color-brand-on-accent)); font-weight: var(--weight-bold); }
.theme-mock-slots span[data-state="booked"] { background: var(--mock-slot-booked, var(--color-slot-blocked)); color: var(--color-text-muted); text-decoration: line-through; opacity: .7; }
.theme-mock-btn { justify-self: start; display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: var(--space-5);
  border-radius: var(--mock-radius-button, var(--tenant-radius-button, var(--radius-md))); background: var(--mock-primary, var(--color-brand-primary)); color: var(--mock-primary-on, var(--color-brand-on-primary)); font-weight: var(--weight-medium); }
.theme-mock-footer { padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--mock-footer-line, var(--color-border-normal));
  background: var(--mock-footer, var(--color-surface-raised)); color: var(--mock-footer-soft, var(--color-text-muted)); font-size: .9em; }
.theme-parts .theme-picker { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }

/* ชุดธีม 10 ชุด (ผู้ใช้สั่ง 2026-11-05) — สีของตัวอย่างบนการ์ด = --pk-* ที่ app.js ตั้งจาก data-* (ค่าจาก TenantThemeService::PACKS) */
.theme-packs { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.theme-pack { position: relative; display: grid; gap: var(--space-1); padding: var(--space-2); border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-lg); background: var(--color-surface-card); cursor: pointer; }
.theme-pack input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.theme-pack:hover { border-color: var(--color-border-strong); }
.theme-pack:has(input:checked) { border-color: var(--color-brand-accent); box-shadow: 0 0 0 2px var(--color-brand-accent); }
.theme-pack:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.theme-pack-mock { display: grid; overflow: hidden; border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--pk-page, var(--color-surface-page)); }
.theme-pack-bar { block-size: 14px; background: var(--pk-bar, var(--color-surface-card)); border-block-end: 1px solid var(--color-border-normal); }
.theme-pack-body { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: var(--space-2);
  padding: var(--space-2); border-radius: var(--radius-sm); background: var(--pk-card, var(--color-surface-card)); }
.theme-pack-slots { display: flex; gap: 4px; }
.theme-pack-slots span { inline-size: 16px; block-size: 12px; border-radius: 3px; background: var(--pk-free, var(--color-tint-success)); }
.theme-pack-slots span[data-on] { background: var(--pk-on, var(--color-brand-accent)); }
.theme-pack-slots span[data-off] { background: var(--pk-off, var(--color-slot-blocked)); }
.theme-pack-btn { inline-size: 30px; block-size: 12px; border-radius: 999px; background: var(--pk-btn, var(--color-brand-accent)); }
.theme-pack-name { font-weight: var(--weight-bold); color: var(--color-text-strong); font-size: var(--text-sm); }
.theme-pack-hint { font-size: var(--text-xs); color: var(--color-text-muted); }

/* โปร่งแสง (ผู้ใช้สั่ง 2026-11-05 "อยากได้แบบโปร่งแสงด้วย") — แถบหัวเว็บ/การ์ดกึ่งใส เบลอสิ่งที่อยู่ข้างหลัง · พื้นหน้าไล่สีจางของธีมให้มีอะไรให้เห็นผ่านกระจก
   ‼️ ใช้ color-mix กับ token พื้นเดิม — สีที่ตั้งเอง/โหมดมืดยังตามเดิม แค่ใสขึ้น · เบราว์เซอร์ที่ไม่รองรับ backdrop-filter เห็นพื้นกึ่งใสธรรมดา */
:root[data-tenant-custom~="glass"] body {
  background:
    radial-gradient(1100px 520px at 0% -10%, color-mix(in srgb, var(--color-brand-accent) 16%, transparent), transparent 70%),
    radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--tenant-button, var(--color-brand-accent)) 14%, transparent), transparent 70%),
    var(--color-surface-page);
  /* ‼️ ไม่ใช้ background-attachment: fixed — ทำให้วาดทั้งหน้าใหม่ทุกครั้งที่เลื่อน (ผู้ใช้แจ้งช้า 2026-11-05) */
}
:root[data-tenant-custom~="glass"] :is(.appbar, .public-bar, .topbar) {
  background: color-mix(in srgb, var(--color-surface-card) var(--tenant-glass-alpha, 70%), transparent);
  backdrop-filter: blur(16px) saturate(160%);
}
:root[data-tenant-custom~="glass"] .card {
  background: color-mix(in srgb, var(--color-surface-card) var(--tenant-glass-alpha, 78%), transparent);
  /* เบลอเบาบนการ์ด (มีหลายใบต่อหน้า = แพงตอนเลื่อน) · แถบบนเบลอเต็ม */
  backdrop-filter: blur(6px);
}
.shape-sample[data-surface="glass"] { border-color: transparent; background: color-mix(in srgb, var(--color-brand-soft) 60%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-surface-card) 60%, transparent); }
.shape-sample[data-surface="solid"] { border-color: var(--color-border-strong); background: var(--color-surface-card); }
.theme-mock .theme-mock-title, .theme-mock-card { color: var(--mock-text, var(--color-text-strong)); }
.theme-mock[data-glass] { background: radial-gradient(260px 160px at 0% 0%, color-mix(in srgb, var(--mock-primary, var(--color-brand-accent)) 22%, transparent), transparent 70%), var(--mock-page, var(--color-surface-page)); }
.theme-mock[data-glass] .theme-mock-header { background: color-mix(in srgb, var(--mock-header, var(--color-surface-card)) var(--mock-glass-alpha, 70%), transparent); backdrop-filter: blur(10px); }
.theme-mock[data-glass] .theme-mock-card { background: color-mix(in srgb, var(--mock-card, var(--color-surface-card)) var(--mock-glass-alpha, 72%), transparent); backdrop-filter: blur(10px); }

/* แถบเมนูชั้นที่ 2 (.subnav) แยกสีจากแถบบน (ผู้ใช้สั่ง 2026-11-05) — ไม่ตั้ง = สืบจากแถบบน */
:root[data-theme="light"][data-tenant-custom~="subnav"] .subnav {
  --color-surface-card: var(--tenant-subnav);
  --color-surface-raised: var(--tenant-subnav);
  --color-text-strong: var(--tenant-subnav-on);
  --color-text-normal: var(--tenant-subnav-on);
  --color-text-muted: var(--tenant-subnav-soft);
  --color-border-normal: var(--tenant-subnav-line);
  --color-brand-accent: var(--tenant-subnav-on);
  --color-brand-soft: var(--tenant-subnav-line);
  --color-brand-wash: var(--tenant-subnav-line);
  --color-surface-mist: var(--tenant-subnav-line);
  background: var(--tenant-subnav);
}
.theme-mock-subnav { display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-block-end: 1px solid var(--mock-subnav-line, var(--mock-header-line, var(--color-border-normal)));
  background: var(--mock-subnav, var(--mock-header, var(--color-surface-card))); color: var(--mock-subnav-soft, var(--mock-header-soft, var(--color-text-muted))); font-size: .9em; }
.theme-mock-subnav [data-on] { color: var(--mock-subnav-on, var(--mock-header-on, var(--color-text-strong))); font-weight: var(--weight-bold); }

/* AI Ads Autopilot (179) */
.ads-auto-status { display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; }
.ads-auto-status > span { flex: 1 1 260px; }
.ads-auto-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-4, 16px); }
.ads-auto-set { border: 1px solid var(--color-border-normal); border-radius: var(--radius-md, 10px); padding: var(--space-3, 12px); display: flex; flex-direction: column; gap: 8px; }
.ads-auto-set[data-status="paused"] { opacity: .65; }
.ads-auto-set > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ads-auto-ads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ads-auto-ads li { display: flex; gap: 10px; align-items: flex-start; }
.ads-auto-ads li[data-status="paused"] { opacity: .6; }
.ads-auto-ads img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }
.ads-auto-ads li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ads-auto-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ads-auto-log li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
/* Liquid Glass แบบ iOS (ผู้ใช้สั่ง 2026-11-05) — กระจกฝ้าที่ใสตามที่ตั้ง + เบลอแรงขึ้น + ขอบสะท้อนแสงด้านบน/ล่าง (เหมือนแก้วหนา)
   ‼️ ขอบสะท้อนใช้ token ตัวหนังสือบนพื้นเข้ม (ขาว) ผสมโปร่ง — ไม่มีค่าสีดิบ */
:root[data-tenant-custom~="liquid"] :is(.appbar, .public-bar, .topbar) { backdrop-filter: blur(24px) saturate(180%); }
:root[data-tenant-custom~="liquid"] .card { backdrop-filter: blur(8px) saturate(150%); }
:root[data-tenant-custom~="liquid"] :is(.appbar, .public-bar, .topbar, .card) {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text-on-dark) 70%, transparent),
              inset 0 -1px 0 color-mix(in srgb, var(--color-text-on-dark) 22%, transparent),
              var(--shadow-md);
}
:root[data-tenant-custom~="liquid"] .card { border-color: color-mix(in srgb, var(--color-text-on-dark) 45%, transparent); }
:root[data-tenant-custom~="liquid"] .btn-primary {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text-on-dark) 55%, transparent), inset 0 -2px 6px color-mix(in srgb, var(--color-text-strong) 18%, transparent), var(--shadow-sm);
}
.theme-mock[data-liquid] :is(.theme-mock-card, .theme-mock-header) { backdrop-filter: blur(16px) saturate(185%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text-on-dark) 70%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--color-text-on-dark) 22%, transparent), var(--shadow-md); }
.theme-mock[data-liquid] .theme-mock-btn { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text-on-dark) 55%, transparent), var(--shadow-sm); }

/* เอาเมาส์ชี้ (ผู้ใช้สั่ง 2026-11-05) — darken = เดิม (ไม่มีกฎ) · ใช้กับปุ่มและการ์ดที่กดได้ · ลดการเคลื่อนไหวของระบบ = ไม่ขยับ */
:root[data-tenant-custom~="hover-lift"] :is(.btn, a.card, .choice-card, .shape-option, .theme-pack, .bk-time) { transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); }
:root[data-tenant-custom~="hover-lift"] :is(.btn, a.card, .choice-card, .theme-pack, .bk-time):hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
:root[data-tenant-custom~="hover-glow"] :is(.btn, a.card, .choice-card, .theme-pack, .bk-time):hover {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tenant-button, var(--color-brand-accent)) 28%, transparent), var(--shadow-sm);
}
:root[data-tenant-custom~="hover-glow"] .btn-primary:hover, :root[data-tenant-custom~="hover-none"] .btn-primary:hover {
  background: var(--tenant-button, var(--color-brand-accent)); border-color: var(--tenant-button, var(--color-brand-accent));
}
@media (prefers-reduced-motion: reduce) { :root[data-tenant-custom~="hover-lift"] :is(.btn, a.card, .choice-card, .theme-pack, .bk-time):hover { transform: none; } }

.clarity-field { display: flex; align-items: center; gap: var(--space-3); max-inline-size: 420px; }
.clarity-field input[type="range"] { flex: 1; accent-color: var(--color-brand-accent); }
.shape-sample[data-surface="liquid"] { border-color: transparent; background: color-mix(in srgb, var(--color-brand-soft) 45%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text-on-dark) 80%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--color-text-strong) 12%, transparent), var(--shadow-sm); }
.shape-sample[data-hover="lift"] { box-shadow: 0 4px 0 -1px var(--color-border-strong); }
.shape-sample[data-hover="glow"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-accent) 30%, transparent); }
.shape-sample[data-hover="none"], .shape-sample[data-motion="off"] { border-style: dashed; }
.shape-sample[data-motion="smooth"] { border-radius: 999px; }
.shape-sample[data-motion="fast"] { border-radius: 2px; }

/* สีตอนเลือก (ผู้ใช้สั่ง 2026-11-05) — โหมดสว่าง · attribute ซ้ำ 4 ครั้ง = specificity ชนะกฎชุดสีเดิม (:is() คิดจาก selector ที่สูงสุดในรายการ เช่น .wallet-adjust .bk-chip:has(...))
   ‼️ เคยแพ้: เมนูหลักที่เลือกอยู่ได้แค่สีตัวหนังสือ พื้นยังเป็นสีเดิม (ผู้ใช้ส่งภาพ 2026-11-05) */
:root[data-theme="light"][data-tenant-custom~="active"][data-tenant-custom~="active"][data-tenant-custom~="active"][data-tenant-custom~="active"] :is(.appbar-menu-item[aria-current], .subnav-row a[aria-current], .tabs .tab[aria-current="page"], .public-nav a[aria-current="page"]) {
  background: var(--tenant-active); color: var(--tenant-active-on);
}
:root[data-theme="light"][data-tenant-custom~="hover"][data-tenant-custom~="hover"][data-tenant-custom~="hover"][data-tenant-custom~="hover"] :is(.appbar-menu-item, .subnav-row a, .tabs .tab, .btn-ghost, .choice-card, .bk-chip, .dash-period-btn, .dash-seg-btn, .public-nav a, tbody tr):hover:not([aria-current]):not([aria-pressed="true"]) {
  background: var(--tenant-hover); color: var(--tenant-hover-on);
}
:root[data-theme="light"][data-tenant-custom~="selected"][data-tenant-custom~="selected"][data-tenant-custom~="selected"][data-tenant-custom~="selected"] :is(.choice-card:has(input:checked), .bk-chip:is([aria-current="true"], [aria-pressed="true"]), .chip-tab[aria-current="page"],
  .dash-period-btn[aria-pressed="true"], .dash-seg-btn[aria-pressed="true"], .bk-pay-option:has(input:checked), .theme-pack:has(input:checked), .shape-option:has(input:checked)) {
  background: var(--tenant-selected); color: var(--tenant-selected-on); border-color: var(--tenant-selected);
}
.theme-mock-subnav [data-on] { padding-inline: var(--space-2); border-radius: var(--radius-sm); background: var(--mock-active, transparent); color: var(--mock-active-on, var(--mock-subnav-on, var(--mock-header-on, var(--color-text-strong)))); }

/* หน้าคอร์ทของลูกค้า (ออกแบบใหม่ ผู้ใช้สั่ง 2026-11-05) — รูป + ข้อมูล + ปุ่มจอง · ตารางเวลาว่างเต็มความกว้าง */
.court-hero { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .court-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-10); } }
.court-hero-media { margin: 0; overflow: hidden; border-radius: var(--tenant-radius-card, var(--radius-xl)); box-shadow: var(--shadow-md); aspect-ratio: 16 / 10; background: var(--color-surface-raised); }
.court-hero-media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.court-hero-info { display: grid; gap: var(--space-4); align-content: start; }
.court-hero-lead { margin: 0; font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--color-text-normal); }
.court-hero-price { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; color: var(--color-text-muted); }
.court-hero-price strong { font-size: var(--text-3xl); font-weight: var(--weight-heavy); color: var(--color-text-strong); line-height: 1; }
.court-hero-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.court-hero-facts li { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-full); background: var(--color-surface-card); font-size: var(--text-sm); color: var(--color-text-normal); }
.court-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 599px) { .court-hero-actions .btn { flex: 1 1 100%; justify-content: center; } }
.court-avail-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-4); }
.court-avail-title { margin: 0; font-size: var(--text-xl); }
.court-avail-head p { margin: var(--space-1) 0 0; }
.court-avail-date { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.court-avail-date input[type="date"] { min-block-size: 44px; }
@media (max-width: 599px) { .court-avail-date { inline-size: 100%; } .court-avail-date input[type="date"] { flex: 1; } }

/* ช่องเวลาหน้าคอร์ทของลูกค้า — 3 สถานะ ว่าง/Academy Class/ไม่ว่าง · บอกด้วยข้อความในปุ่มด้วย ไม่ใช่สีอย่างเดียว */
.court-slots { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.court-slot { display: grid; gap: 2px; place-items: center; min-block-size: 60px; padding: var(--space-2); border: 1px solid var(--color-border-normal);
  border-radius: var(--radius-md); text-decoration: none; font-size: var(--text-xs); transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.court-slot strong { font-size: var(--text-base); }
.court-slot[data-state="free"] { border-color: var(--color-state-success); background: var(--tenant-slot-free, var(--color-tint-success)); color: var(--color-text-strong); }
.court-slot[data-state="free"] span { color: var(--color-state-success); font-weight: var(--weight-bold); }
.court-slot[data-state="class"] { border-color: var(--color-state-violet); background: var(--color-tint-violet); color: var(--color-text-strong); }
.court-slot[data-state="class"] span { color: var(--color-state-violet); font-weight: var(--weight-bold); }
.court-slot[data-state="busy"] { background: var(--tenant-slot-booked, var(--color-slot-blocked)); color: var(--color-text-muted); cursor: not-allowed; }
.court-slot[data-state="busy"] strong { text-decoration: line-through; font-weight: var(--weight-normal); }
a.court-slot:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
a.court-slot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.court-slots-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-3); padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-text-muted); }
.court-slots-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.court-slots-legend li::before { content: ""; inline-size: 12px; block-size: 12px; border-radius: 4px; background: var(--color-slot-blocked); }
.court-slots-legend li[data-state="free"]::before { background: var(--color-state-success); }
.court-slots-legend li[data-state="class"]::before { background: var(--color-state-violet); }
.court-slots-empty { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
@media (max-width: 599px) { .court-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* หน้าจองที่มาจากหน้าคอร์ท (data-locked="court" · ผู้ใช้สั่ง 2026-11-05) — ซ่อนสาขา/รูปแบบ/วันที่ เหลือเลือกช่วงเวลาของคอร์ทนั้น */
.bk-main[data-locked="court"] > .bk-card[aria-labelledby="bk-branch-title"],
.bk-main[data-locked="court"] .bk-block:has(> .bk-modes),
.bk-main[data-locked="court"] .bk-block:has(.bk-dates) { display: none; }
.bk-locked { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.bk-locked-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.bk-locked-item > span { display: grid; }
.bk-locked-item small { color: var(--color-text-muted); font-size: var(--text-xs); }
.bk-locked-item strong { color: var(--color-text-strong); font-size: var(--text-lg); }
.bk-locked .btn { margin-inline-start: auto; }
.bk-locked-hint { flex-basis: 100%; margin: 0; }

/* หน้าจองจากหน้าคอร์ท รอบ 2 (ผู้ใช้สั่ง 2026-11-05 "เพิ่มตัวเลือกโค้ช · ช่วงเวลายังดูไม่สวยใช้งานยาก")
   การ์ดสรุปเป็นแถวเดียว · โค้ชเป็นการ์ดเลือก · เวลาเป็นปุ่มใหญ่ "18:00–19:00" แบ่งเช้า/บ่าย/เย็น */
.bk-card.bk-locked { flex-direction: row; justify-content: flex-start; }
.bk-coach-pick { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bk-coach-pick .bk-coach { color: inherit; text-decoration: none; }
.bk-coach-pick .bk-coach[aria-current="true"] { border-color: var(--color-brand-accent); background: var(--tenant-selected, var(--color-tint-success)); box-shadow: inset 0 0 0 1px var(--color-brand-accent); }
.bk-coach-none { display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none; border-radius: 50%; background: var(--color-surface-raised); color: var(--color-text-muted); }
.bk-lock-slots { display: flex; flex-direction: column; gap: var(--space-4); }
.bk-lock-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.bk-lock-grid .bk-time { min-block-size: 64px; padding: var(--space-2); text-align: center; }
.bk-time-range { font-size: var(--text-xs); color: inherit; }
.bk-time-range strong { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.bk-lock-grid a.bk-time { color: inherit; text-decoration: none; }
:is(:root[data-tenant-theme][data-tenant-theme], :root) .bk-time.bk-time.bk-time[data-state="class"] {
  --bk-dot: var(--color-state-violet);
  border-color: var(--color-state-violet); background: var(--color-tint-violet); color: var(--color-text-strong);
}
.bk-lock-grid .bk-time[data-state="class"] .bk-time-status { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-lock-grid .bk-time[data-state] .bk-time-range strong { font-weight: var(--weight-normal); }
.bk-lock-grid .bk-time[data-state="class"] .bk-time-range strong { font-weight: var(--weight-bold); }
@media (max-width: 599px) {
  .bk-lock-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-lock-grid .bk-time-range strong { display: block; }
  .bk-card.bk-locked .btn { inline-size: 100%; margin-inline-start: 0; }
  /* มือถือ: โค้ชเลื่อนซ้าย-ขวา ไม่กินความสูงทั้งจอ */
  .bk-coach-pick { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--space-1); }
  .bk-coach-pick .bk-coach { scroll-snap-align: start; }
}

/* ยิง Ads จากโพสต์ (180) */
.ads-boost-body { display: flex; gap: 12px; align-items: flex-start; }
.ads-boost-body img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; flex: none; }
.ads-boost-body > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ads-boost-body p { margin: 0; }
.ads-boost-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4, 16px); }
.ads-boost-post { border: 1px solid var(--color-border-normal); border-radius: var(--radius-md, 10px); overflow: hidden; display: flex; flex-direction: column; }
.ads-boost-post > img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.ads-boost-post-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ads-boost-text { margin: 0; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.ads-boost-post details > summary { list-style: none; cursor: pointer; display: inline-flex; }
.ads-boost-post details > summary::-webkit-details-marker { display: none; }
.ads-boost-post details[open] > summary { margin-bottom: 8px; }
.ads-boost-card[data-state="paused"] .ads-boost-body, .ads-boost-card[data-state="replaced"] { opacity: .7; }

/* ตัวอย่าง Ads แบบ Facebook (180) */
.ads-fb-preview { flex: none; width: 100%; max-width: 640px; margin: 0 auto; border: 1px solid var(--color-border-normal); border-radius: 10px; overflow: hidden; background: var(--color-surface-card); }
.ads-fb-preview > header { display: flex; gap: 10px; align-items: center; padding: 12px; }
.ads-fb-preview > header > span:last-child { display: flex; flex-direction: column; }
.ads-fb-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-brand-accent); color: var(--color-brand-on-accent); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.ads-fb-text { margin: 0; padding: 0 12px 12px; white-space: pre-line; }
.ads-fb-preview > img { width: 100%; display: block; }
.ads-fb-preview > footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: var(--color-surface-head); }
.ads-fb-preview > footer > span:first-child { display: flex; flex-direction: column; min-width: 0; }

/* ยิง Ads: การ์ดเป็นกริด (ผู้ใช้สั่ง 2026-11-09 "จัดให้สวย") */
.ads-boost-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--space-4, 16px); }
.ads-boost-toolbar form { margin: 0; }
.ads-boost-toolbar small { flex: 1 1 260px; }
.ads-boost-card { gap: 12px; }
.ads-boost-card > header strong { line-height: 1.4; }
.ads-boost-body img { width: 112px; height: 112px; }
.ads-boost-body small.muted { line-height: 1.5; }
.ads-boost-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--color-border-normal); }
.ads-boost-actions form { margin: 0; }

/* ยิง Ads แบบตาราง + สวิตช์เปิด/ปิดหน้าแถว (ผู้ใช้สั่ง 2026-11-09) */
.ads-boost-table td { vertical-align: middle; }
.ads-boost-table form { margin: 0; }
.ads-boost-cell { display: flex; gap: 10px; align-items: center; min-width: 220px; }
.ads-boost-cell img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }
.ads-boost-cell > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ads-boost-cell .btn-link { display: inline-flex; gap: 4px; align-items: center; padding: 0; border: 0; background: none; color: var(--color-brand-accent); cursor: pointer; font-size: var(--text-sm); }
.ads-boost-ai { min-width: 160px; max-width: 300px; }
.ads-boost-ai small { display: block; margin-top: 4px; line-height: 1.45; }
.ads-boost-table tr[data-state="replaced"] { opacity: .6; }
.ads-switch { position: relative; display: inline-block; width: 40px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: var(--color-border-normal); cursor: pointer; vertical-align: middle; }
.ads-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-surface-card); box-shadow: var(--shadow-sm); transition: transform .15s; }
.ads-switch[aria-checked="true"] { background: var(--color-brand-accent); }
.ads-switch[aria-checked="true"]::after { transform: translateX(18px); }
.ads-switch[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ads-switch:focus-visible { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; }
.ads-boost-table .nowrap { white-space: nowrap; }
.ads-boost-manage { display: flex; flex-direction: column; align-items: stretch; gap: 6px; align-items: center; white-space: nowrap; }
.ads-boost-manage form { margin: 0; display: flex; flex-direction: column; }
.ads-boost-table + * { margin-top: 0; }
#boosts .card-control form { margin: 0; }
#boosts .card-control { display: flex; gap: 8px; flex-wrap: wrap; }

/* แท็บ Ads: สรุปบรรทัดเดียว + สถานะจาก AI (182) */
.ads-boost-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 14px; margin-bottom: var(--space-4, 16px); border: 1px solid var(--color-border-normal); border-radius: 10px; background: var(--color-surface-head); }
.ads-boost-summary .muted { margin-inline-start: auto; }
.ads-health { display: inline-block; font-weight: 700; white-space: nowrap; }
.ads-health[data-tone="success"] { color: var(--color-state-success); }
.ads-health[data-tone="warning"] { color: var(--color-state-warning); }
.ads-health[data-tone="danger"] { color: var(--color-state-danger); }
.ads-health[data-tone="info"] { color: var(--color-state-info); }
.ads-health-proposal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 8px; border-radius: 8px; background: var(--color-tint-warning); }
.ads-health-proposal strong { flex-basis: 100%; font-size: var(--text-sm); }
.ads-health-proposal form { margin: 0; }
.ads-target-why { display: flex; gap: 4px; align-items: flex-start; margin-top: 4px; line-height: 1.4; max-width: 220px; }
.ads-target-why svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.ads-post-form .checkbox-inline { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; }

/* รายงานโฆษณาแบบ Ads Manager */
.ads-rep-levels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4, 16px); }
.ads-rep-scroll .table-wrap { overflow-x: auto; }
.ads-rep-note { margin: 10px 0 0; font-size: var(--text-sm); }

/* ── AI Ads › ตั้งค่า (ผู้ใช้สั่ง 2026-11-09 "ตั้งค่า AI ให้ชัดเจน มีแต่ text ไม่เข้าใจ") — ขั้นตอนเป็นภาพ · ผลตัดสิน 3 สี · การ์ดเลือกโหมด · แถบเพดานงบ */
.ads-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-3); }
.ads-flow-step { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-normal); border-radius: var(--radius-md); background: var(--color-surface-card); }
.ads-flow-head { display: flex; align-items: center; gap: var(--space-2); color: var(--color-brand-accent); margin-block-end: var(--space-1); }
.ads-flow-num { display: grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%;
    background: var(--color-brand-accent); color: var(--color-brand-on-accent); font-weight: var(--weight-bold); font-size: var(--text-sm); }
.ads-cfg-sub { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-base); }
.ads-verdicts { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-3); }
.ads-verdicts > li { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    border: 1px solid var(--color-border-normal); border-inline-start-width: 4px; }
.ads-verdicts > li[data-tone="success"] { border-inline-start-color: var(--color-state-success); background: var(--color-tint-success); }
.ads-verdicts > li[data-tone="warning"] { border-inline-start-color: var(--color-state-warning); background: var(--color-tint-warning); }
.ads-verdicts > li[data-tone="danger"]  { border-inline-start-color: var(--color-state-danger);  background: var(--color-tint-danger); }
.ads-verdicts > li > .badge { align-self: flex-start; }
.ads-verdicts > li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.ads-cfg-form { display: flex; flex-direction: column; gap: var(--space-4); align-items: stretch; }
.ads-cfg-form > .btn { align-self: flex-start; min-inline-size: 12rem; }
.ads-mode-pick { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-3); }
.ads-mode-card { align-items: flex-start; padding: var(--space-4); }
.ads-mode-card input[type="radio"] { inline-size: var(--icon-base); block-size: var(--icon-base); flex: none; margin-block-start: 2px; }
.ads-mode-hint { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal, 1.5); }
.ads-cfg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-5); align-items: center;
    padding-block: var(--space-3); border-block-end: 1px solid var(--color-border-normal); }
.ads-cfg-row > label { display: flex; flex-direction: column; gap: 2px; }
/* ช่องตัวเลขตรงกันทุกแถว: [฿] [ตัวเลข] [หน่วย] — แถวที่ไม่มี ฿ หรือหน่วยเว้นคอลัมน์ว่างไว้ */
.ads-cfg-input { display: grid; grid-template-columns: 1rem 8rem 6rem; align-items: center; gap: var(--space-2); white-space: nowrap; }
.ads-cfg-input input { grid-column: 2; inline-size: 100%; text-align: end; }
.ads-cfg-input input + span { grid-column: 3; }
.ads-cap-meter { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-1); }
.ads-cap-bar { --cap: var(--color-state-success); appearance: none; inline-size: 100%; block-size: 10px; border: 0; border-radius: 999px; background: var(--color-tint-neutral); overflow: hidden; }
.ads-cap-bar::-webkit-progress-bar { background: var(--color-tint-neutral); border-radius: 999px; }
.ads-cap-bar::-webkit-progress-value { background: var(--cap); border-radius: 999px; }
.ads-cap-bar::-moz-progress-bar { background: var(--cap); border-radius: 999px; }
.ads-cap-meter[data-tone="warning"] .ads-cap-bar { --cap: var(--color-state-warning); }
.ads-cap-meter[data-tone="danger"] .ads-cap-bar { --cap: var(--color-state-danger); }
@media (max-width: 640px) {
    .ads-cfg-row { grid-template-columns: 1fr; }
    .ads-cfg-form > .btn { align-self: stretch; }
}

/* ═══ หน้าเอกสารกลาง /legal/{doc} — ส่วนหัวมีไอคอน · ปุ่มสลับเอกสาร · สารบัญติดข้าง · การ์ดเนื้อหา (ผู้ใช้สั่ง 2026-11-11 "มีแต่ text กับพื้นหลังโล้นๆ") ═══ */
.legal-hero {
  display: flex; align-items: flex-start; gap: var(--space-5);
  padding: clamp(var(--space-5), 4vw, var(--space-8));
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 100% 0%, var(--color-tint-highlight) 0, transparent 45%),
    linear-gradient(135deg, var(--color-tint-success), var(--color-brand-wash));
}
.legal-hero-icon {
  flex: none; display: grid; place-items: center; inline-size: 64px; block-size: 64px;
  border-radius: var(--radius-lg); background: var(--color-brand-accent); color: var(--color-brand-on-accent);
  box-shadow: var(--shadow-md);
}
.legal-hero-icon .icon { inline-size: 32px; block-size: 32px; }
.legal-hero-body { display: grid; gap: var(--space-2); min-inline-size: 0; }
.legal-hero-eyebrow { margin: 0; color: var(--color-brand-accent); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase; }
.legal-hero-title { margin: 0; font-size: clamp(var(--text-2xl), 3.2vw, var(--text-3xl)); line-height: 1.25; color: var(--color-text-strong); }
.legal-hero-lead { margin: 0; max-inline-size: 60ch; color: var(--color-text-normal); }
.legal-hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; }
.legal-chip {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 12px;
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-full);
  background: var(--color-surface-card); color: var(--color-text-muted); font-size: var(--text-xs);
}
.legal-chip .icon { inline-size: 14px; block-size: 14px; }
a.legal-chip { color: var(--color-brand-link); text-decoration: none; font-weight: var(--weight-medium); }
a.legal-chip:hover { border-color: var(--color-brand-accent); }

.legal-docs { display: flex; gap: var(--space-2); margin-block-start: calc(var(--space-4) - var(--panel-gap)); overflow-x: auto; scrollbar-width: none; }
.legal-docs a {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 16px;
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-full);
  background: var(--color-surface-card); color: var(--color-text-normal); font-size: var(--text-sm); text-decoration: none; white-space: nowrap;
}
.legal-docs a .icon { inline-size: 16px; block-size: 16px; color: var(--color-text-muted); }
.legal-docs a:hover { border-color: var(--color-brand-accent); color: var(--color-text-strong); }
.legal-docs a[aria-current="page"] { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); font-weight: var(--weight-bold); }
.legal-docs a[aria-current="page"] .icon { color: currentColor; }

.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-block-start: calc(var(--space-5) - var(--panel-gap)); }
@media (min-width: 1024px) {
  .legal-layout { grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-6); }
  .legal-layout[data-toc="none"] { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: sticky; inset-block-start: calc(var(--space-8) + 64px); max-block-size: calc(100vh - 120px); overflow-y: auto; }
  .legal-toc summary { pointer-events: none; }
  .legal-toc summary .icon:last-child { display: none; }
}

.legal-toc { border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); padding: var(--space-3); }
.legal-toc summary {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2);
  list-style: none; cursor: pointer; font-weight: var(--weight-bold); color: var(--color-text-strong); font-size: var(--text-sm);
}
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc summary .icon { inline-size: 16px; block-size: 16px; color: var(--color-brand-accent); }
.legal-toc summary .icon:last-child { margin-inline-start: auto; color: var(--color-text-muted); transition: transform .15s; }
.legal-toc[open] summary .icon:last-child { transform: rotate(180deg); }
.legal-toc ol { display: grid; gap: 2px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.legal-toc a {
  display: flex; align-items: flex-start; gap: var(--space-2); padding: 6px var(--space-2);
  border-radius: var(--radius-md); color: var(--color-text-normal); font-size: var(--text-sm); line-height: 1.45; text-decoration: none;
}
.legal-toc a:hover { background: var(--color-surface-head); color: var(--color-text-strong); }
.legal-toc a[aria-current="true"] { background: var(--color-tint-success); color: var(--color-brand-accent); font-weight: var(--weight-bold); }
.legal-toc-num {
  flex: none; display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: var(--radius-full);
  background: var(--color-surface-head); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.legal-toc a[aria-current="true"] .legal-toc-num { background: var(--color-brand-accent); color: var(--color-brand-on-accent); }

.legal-article {
  min-inline-size: 0; padding: clamp(var(--space-5), 3.5vw, var(--space-8));
  border: 1px solid var(--color-border-normal); border-radius: var(--radius-xl); background: var(--color-surface-card); box-shadow: var(--shadow-sm);
}
.legal-article > .prose { max-width: none; gap: var(--space-3); line-height: 1.8; color: var(--color-text-normal); }
.legal-article > .prose > :not(h2):not(.table-wrap):not(hr) { max-inline-size: 72ch; }
.legal-article .prose h2 {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-1); padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border-normal);
  font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-strong); line-height: 1.4;
  scroll-margin-block-start: 96px;
}
.legal-article .prose > h2:first-child { margin-block-start: 0; padding-block-start: 0; border: 0; }
.legal-article .prose hr + h2 { margin-block-start: 0; padding-block-start: 0; border: 0; }
/* หัวข้อ "ส่วนที่ 1 — …" (ไม่มีเลขข้อ) = แถบแบ่งส่วนของเอกสาร */
.legal-article .prose h2:not(:has(.legal-num)) {
  padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-md);
  background: var(--color-brand-wash); border-inline-start: 4px solid var(--color-brand-accent);
}
.legal-toc li[data-part] a { color: var(--color-text-strong); font-weight: var(--weight-bold); }
.legal-toc li[data-part]:not(:first-child) { margin-block-start: var(--space-2); padding-block-start: var(--space-2); border-block-start: 1px solid var(--color-border-normal); }
.legal-num {
  flex: none; display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: var(--radius-md);
  background: var(--color-tint-success); color: var(--color-brand-accent); font-size: var(--text-base); font-weight: var(--weight-bold);
}
.legal-article .prose h3 { margin: var(--space-3) 0 0; font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-text-strong); }
.legal-article .prose strong { color: var(--color-text-strong); }
.legal-article .prose ul, .legal-article .prose ol { gap: var(--space-2); padding-inline-start: var(--space-5); }
.legal-article .prose ul > li::marker { color: var(--color-brand-accent); }
.legal-article .prose ol > li::marker { color: var(--color-brand-accent); font-weight: var(--weight-bold); }
.legal-article .prose a { color: var(--color-brand-link); }
.legal-article .prose blockquote {
  margin: var(--space-2) 0; padding: var(--space-3) var(--space-4);
  border-inline-start: 4px solid var(--color-brand-accent); border-radius: var(--radius-md); background: var(--color-tint-success);
}
.legal-article .prose hr { margin: var(--space-4) 0; border: 0; border-block-start: 1px solid var(--color-border-normal); }
.legal-article .prose .table-wrap { margin: var(--space-2) 0; border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); overflow-x: auto; }
.legal-article .prose .table { inline-size: 100%; font-size: var(--text-sm); line-height: 1.6; }
.legal-article .prose .table th { background: var(--color-surface-head); color: var(--color-text-strong); text-align: start; }
@media (min-width: 769px) {
  .legal-article .prose .table th, .legal-article .prose .table td { padding: var(--space-3) var(--space-4); vertical-align: top; }
  .legal-article .prose .table tbody tr + tr td { border-block-start: 1px solid var(--color-border-normal); }
}
/* มือถือ: ตารางยุบเป็นการ์ดของกลางอยู่แล้ว — เอากรอบนอกออก (ไม่ซ้อนกรอบ) · ชื่อคอลัมน์อยู่เหนือค่า (ข้อความไทยยาว) */
@media screen and (max-width: 768px) {
  .legal-article .prose .table-wrap { border: 0; border-radius: 0; }
  .legal-article .prose .table tbody tr { background: var(--color-surface-raised); }
  .legal-article .prose .table td { display: block; }
  .legal-article .prose .table td::before { display: block; margin-block-end: 2px; font-size: var(--text-xs); }
  .legal-article .prose .table td[data-primary] { font-weight: var(--weight-medium); padding-block-end: var(--space-2); }
}

.legal-help {
  display: flex; align-items: center; gap: var(--space-4); margin-block-start: var(--space-8); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg); background: var(--color-brand-wash); border: 1px solid var(--color-border-normal);
}
.legal-help > div { flex: 1 1 auto; min-inline-size: 0; }
.legal-help strong { color: var(--color-text-strong); }
.legal-help p { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.legal-help-icon { flex: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--radius-full); background: var(--color-surface-card); color: var(--color-brand-accent); }
.legal-help-icon .icon { inline-size: 22px; block-size: 22px; }
.legal-help .btn { flex: none; }
.legal-versions { margin-block-start: var(--space-4); }

@media screen and (max-width: 640px) {
  .legal-hero { flex-direction: column; gap: var(--space-3); border-radius: var(--radius-lg); }
  .legal-hero-icon { inline-size: 48px; block-size: 48px; }
  .legal-hero-icon .icon { inline-size: 24px; block-size: 24px; }
  .legal-article { border-radius: var(--radius-lg); }
  .legal-article .prose h2 { font-size: var(--text-base); gap: var(--space-2); }
  .legal-num { inline-size: 28px; block-size: 28px; font-size: var(--text-sm); }
  .legal-help { flex-wrap: wrap; }
  .legal-help .btn { inline-size: 100%; justify-content: center; }
}

@media print {
  .legal-docs, .legal-toc, .legal-help { display: none; }
  .legal-layout { display: block; }
  .legal-hero, .legal-article { border: 0; box-shadow: none; background: none; padding: 0; }
}

/* หน้า landing/เว็บขาย (เริ่มด้วย section เต็มจอ .lp-bleed — .lp-hero / .bz-top) — section ต่อกันสนิท ไม่มีแถบพื้นหลังหน้า 20px คั่น
   และ section สุดท้ายชน footer พอดี (เดิมเว้น 20px + margin footer 64px = รอยต่อสองชั้น · ผู้ใช้สั่ง 2026-11-11) */
.page:has(> .lp-bleed:first-child) { gap: 0; }
/* ของเดิมที่ใช้ margin -20px หักล้าง gap — gap เป็น 0 แล้ว ต้องคืนเป็น 0 ไม่งั้นทับกัน */
.page:has(> .lp-bleed:first-child) > .bz-top:first-child,
.page:has(> .lp-bleed:first-child) > .ct-band { margin-block: 0; }
/* หน้าที่ขึ้นด้วย breadcrumb (/articles · /venues · /sports/…) — section เต็มจอที่ติดกันก็ต้องชนกัน */
.page:not(:has(> .lp-bleed:first-child)) > .lp-bleed + .lp-bleed { margin-block-start: calc(var(--panel-gap) * -1); }
/* section เต็มจออันสุดท้ายชน footer */
.content:has(> .page > .lp-bleed:last-child) { padding-block-end: 0; }
.content:has(> .page > .lp-bleed:last-child) + .public-footer { margin-block-start: 0; }
/* section พื้นขาวสองอันติดกัน — เส้นบางคั่นให้รู้ว่าเป็นคนละเรื่อง */
.lp-section[data-tone="card"] + .lp-section[data-tone="card"] { border-block-start: 1px solid var(--color-border-normal); }
/* ลิงก์ #faq จากหน้าอื่น — หัวข้อไม่จมใต้แถบเมนูที่ติดบน */
.lp-section[id] { scroll-margin-block-start: 80px; }

/* รายงานของ Ads ตัวเดียว (190) */
.ads-br-status { display: flex; gap: 16px; align-items: center; padding: 16px; margin-bottom: var(--space-4, 16px); border: 1px solid var(--color-border-normal); border-radius: 12px; background: var(--color-surface-card); }
.ads-br-status img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; flex: none; }
.ads-br-status .ads-health { display: block; font-size: var(--text-lg); margin: 2px 0 4px; }
.ads-br-status p { margin: 0; }
.ads-br-setup { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ads-br-setup dl { margin: 0; padding: 12px 14px; border: 1px solid var(--color-border-normal); border-radius: 10px; }
.ads-br-setup dt { display: flex; gap: 6px; align-items: center; font-weight: 700; margin-bottom: 6px; }
.ads-br-setup dd { margin: 4px 0 0; }
.ads-br-rules { margin: 12px 0 0; font-size: var(--text-sm); }

/* แท็บตั้งค่าแบบกระชับ (ผู้ใช้สั่ง 2026-11-09) */
.ads-cfg2 { display: flex; flex-direction: column; }
.ads-cfg2-row { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 6px 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-border-normal); }
.ads-cfg2-row > .field-error, .ads-cfg2-row > .ads-cap-bar { grid-column: 2; }
.ads-cfg2-label { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.ads-cfg2-label svg { width: 18px; height: 18px; grid-row: span 2; }
.ads-cfg2-label small { grid-column: 2; }
.ads-cfg2-input { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ads-cfg2-input input { width: 96px; }
.ads-cfg2 select { max-width: 220px; }
.ads-cfg2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ads-chip { position: relative; }
.ads-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ads-chip span { display: inline-block; padding: 6px 12px; border: 1px solid var(--color-border-normal); border-radius: 999px; font-variant-numeric: tabular-nums; }
.ads-chip input:checked + span { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-brand-on-accent); font-weight: 700; }
.ads-chip input:focus-visible + span { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; }
.ads-cfg2 .ads-cap-bar { width: 100%; max-width: 320px; height: 8px; }
.ads-cfg2-more { padding: 10px 0; border-bottom: 1px solid var(--color-border-normal); }
.ads-cfg2-more summary { cursor: pointer; font-weight: 600; }
.ads-cfg2-more .ads-cfg2-row { border-bottom: 0; padding-bottom: 0; }
.ads-cfg2-foot { padding-top: 14px; }
.ads-cfg2-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ads-cfg2-rules li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--color-border-normal); border-radius: 10px; }
.ads-cfg2-note { margin: 10px 0 0; font-size: var(--text-sm); }
@media (max-width: 720px) { .ads-cfg2-row { grid-template-columns: 1fr; } .ads-cfg2-row > .field-error, .ads-cfg2-row > .ads-cap-bar { grid-column: 1; } }

/* ดึงข้อมูล: ทุกชั่วโมง / เลือกเวลาเอง (2026-11-11) */
.ads-cfg2-sync { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ads-chip-sm span { padding: 4px 10px; font-size: var(--text-sm); }

/* ผลประเมิน AI (191) */
.ads-rv-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ads-rv-head strong { font-size: var(--text-lg); }
.ads-rv-reason { margin: 10px 0 0; font-size: var(--text-md, 1rem); }
.ads-rv-analysis { line-height: 1.7; padding: 12px 14px; border-radius: 10px; background: var(--color-surface-card); border: 1px solid var(--color-border-normal); }
.ads-rv-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0; }
.ads-rv-meta dt { font-size: var(--text-sm); color: var(--color-text-muted, inherit); }
.ads-rv-meta dd { margin: 2px 0 0; font-weight: 600; }
.ads-rv-analysis p { margin: 0 0 4px; }

/* แท็บตั้งค่า: 4 ค่าแถวเดียว (2026-11-12) */
.ads-cfg3-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-border-normal); }
.ads-cfg3-tile { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--color-border-normal); border-radius: 10px; min-width: 0; }
.ads-cfg3-tile > label, .ads-cfg3-label { display: flex; align-items: center; gap: 6px; }
.ads-cfg3-tile svg { width: 18px; height: 18px; flex: none; }
.ads-cfg3-tile select { width: 100%; }
.ads-cfg3-tile .ads-cfg2-input input { width: 76px; }
.ads-cfg3-tile .ads-cap-bar { width: 100%; height: 6px; }
.ads-cfg3-tile small { font-size: var(--text-xs, .78rem); line-height: 1.4; }
.ads-cfg2-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ads-cfg2-rules li { grid-template-columns: 1fr; gap: 6px; align-items: start; }
@media (max-width: 1100px) { .ads-cfg3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ads-cfg3-grid, .ads-cfg2-rules { grid-template-columns: 1fr; } }

/* ตั้งค่า | AI ทำอะไรเมื่อครบรอบ แถวเดียว (2026-11-12) */
.ads-cfg-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4, 16px); align-items: start; }
.ads-cfg-split > * { margin-block: 0; min-width: 0; }
.ads-cfg-split .ads-cfg3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ads-cfg-split .ads-cfg2-row { grid-template-columns: minmax(150px, 200px) 1fr; }
.ads-cfg-split .ads-cfg2-rules { grid-template-columns: 1fr; }
.ads-cfg-split .ads-cfg2-rules li { grid-template-columns: 96px 1fr; align-items: center; }
@media (max-width: 1000px) { .ads-cfg-split { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .ads-cfg-split .ads-cfg3-grid, .ads-cfg-split .ads-cfg2-row { grid-template-columns: 1fr; } }