/* =========================================================
SOULSTACK APPLICATION UI

VERSION : 1.0.0
TYPE : APPLICATION COMPONENTS
DEVELOPED BY : Mr. Kachin Sukhumjitpitayotai
LICENSED TO : CN Soft Solutions Co., Ltd.
LAST UPDATED : 29 July 2025

Copyright © 2025 CN Soft Solutions Co., Ltd.
All rights reserved.
========================================================= */
@layer ss-components
{
	/* ================= PAGE SHELL ================= */

	.ss-page{min-height:100vh;}

	.ss-page__header{padding:var(--cn-space-xl) 0;}
	
	.ss-page__header--start	{
		text-align:start;
	}

	.ss-page__header--end	{
		text-align:end;
	}

	.ss-page__header--center {
		text-align:center;
	}

	.ss-page__header--center .ss-page__heading {
		width:100%;
	}

	.ss-page__title{
		font-size:var(--cn-font-size-2xl);
		font-weight:700;
		line-height:var(--cn-line-height-tight);
		color:var(--cn-text-strong);
	}

	.ss-page__subtitle{
		margin-top:var(--cn-space-xs);
		color:var(--cn-text-soft);
	}

	.ss-page__body{
		padding-bottom:var(--cn-space-4xl);
	}
	

	/* ================= DASHBOARD ================= */

	.ss-dashboard{
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
		gap:var(--cn-space-lg);
	}

	.ss-kpi{
		background:var(--cn-card-bg);
		border:1px solid var(--cn-card-border);
		border-radius:var(--cn-radius-lg);
		box-shadow:var(--cn-shadow-sm);
		padding:var(--cn-space-lg);
	}

	.ss-kpi__label{
		font-size:var(--cn-font-size-sm);
		color:var(--cn-text-soft);
	}

	.ss-kpi__value{
		margin-top:var(--cn-space-sm);
		font-size:var(--cn-font-size-3xl);
		font-weight:700;
		line-height:1.1;
		color:var(--cn-text-strong);
	}

	.ss-kpi__meta{
		margin-top:var(--cn-space-sm);
		font-size:var(--cn-font-size-sm);
		color:var(--cn-text-soft);
	}


	/* ================= STAT ================= */

	.ss-stat-list{
		display:grid;
		gap:var(--cn-space-md);
	}

	.ss-stat{
		display:grid;
		grid-template-columns:1fr auto;
		gap:var(--cn-space-md);
		padding:10px 0;
		border-bottom:1px dashed var(--cn-border-color);
	}

	.ss-stat:last-child{border-bottom:none;}

	.ss-stat__label{color:var(--cn-text-soft);}
	.ss-stat__value{font-weight:600;color:var(--cn-text-strong);text-align:right;}

	/* ================= TIMELINE ================= */

	.ss-timeline{
		position:relative;
		display:grid;
		gap:var(--cn-space-lg);
	}

	.ss-timeline::before{
		content:"";
		position:absolute;
		top:0;bottom:0;left:9px;
		width:2px;
		background:var(--cn-border-color);
	}

	.ss-timeline__item{
		position:relative;
		padding-left:32px;
	}

	.ss-timeline__item::before{
		content:"";
		position:absolute;
		top:6px;left:2px;
		width:16px;height:16px;
		border-radius:50%;
		background:var(--cn-primary);
		box-shadow:0 0 0 4px color-mix(in srgb,var(--cn-primary) 16%,transparent);
	}

	.ss-timeline__title{font-weight:600;color:var(--cn-text-strong);}
	.ss-timeline__meta{margin-top:var(--cn-space-xs);font-size:var(--cn-font-size-sm);color:var(--cn-text-soft);}
	.ss-timeline__body{margin-top:var(--cn-space-sm);color:var(--cn-text);}


	/* ================= STEPS ================= */

	.ss-steps{display:flex;flex-wrap:wrap;gap:var(--cn-space-md);}

	.ss-step{
		display:flex;align-items:center;gap:var(--cn-space-sm);
		padding:8px 12px;
		border:1px solid var(--cn-border-color);
		border-radius:var(--cn-radius-pill);
		background:var(--cn-bg-surface);
		color:var(--cn-text-soft);
	}

	.ss-step__dot{
		display:inline-flex;align-items:center;justify-content:center;
		width:22px;height:22px;border-radius:50%;
		background:var(--cn-bg-subtle);
		font-size:var(--cn-font-size-xs);
		font-weight:700;
	}

	.ss-step.is-active{
		border-color:color-mix(in srgb,var(--cn-primary) 45%,var(--cn-border-color));
		background:color-mix(in srgb,var(--cn-primary) 8%,transparent);
		color:var(--cn-primary);
	}

	.ss-step.is-active .ss-step__dot{background:var(--cn-primary);color:#fff;}

	.ss-step.is-done{
		border-color:color-mix(in srgb,var(--cn-success) 45%,var(--cn-border-color));
		background:color-mix(in srgb,var(--cn-success) 8%,transparent);
		color:var(--cn-success);
	}

	.ss-step.is-done .ss-step__dot{background:var(--cn-success);color:#fff;}


	/* ================= TABLE TOOLS ================= */

	.ss-table-tools{
		display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
		gap:var(--cn-space-md);
		margin-bottom:var(--cn-space-md);
	}

	.ss-table-tools__filters,
	.ss-table-tools__actions{
		display:flex;flex-wrap:wrap;align-items:center;
		gap:var(--cn-space-sm);
	}


	/* ================= EMPTY ================= */

	.ss-empty{
		display:grid;place-items:center;
		min-height:220px;
		padding:var(--cn-space-2xl);
		text-align:center;
		border:1px dashed var(--cn-border-color);
		border-radius:var(--cn-radius-lg);
		background:var(--cn-bg-subtle);
	}

	.ss-empty__icon{font-size:40px;color:var(--cn-text-soft);margin-bottom:var(--cn-space-md);}
	.ss-empty__title{font-size:var(--cn-font-size-lg);font-weight:600;color:var(--cn-text-strong);}
	.ss-empty__text{margin-top:var(--cn-space-sm);color:var(--cn-text-soft);max-width:520px;}


	/* ================= LOADER ================= */

	.ss-loader{display:inline-flex;align-items:center;gap:var(--cn-space-sm);color:var(--cn-text-soft);}

	.ss-loader__spinner{
		width:18px;height:18px;
		border:2px solid color-mix(in srgb,var(--cn-primary) 18%,transparent);
		border-top-color:var(--cn-primary);
		border-radius:50%;
		animation:ss-ui-spin .9s linear infinite;
	}
	@keyframes ss-ui-spin
	{
		from{transform:rotate(0deg);}
		to{transform:rotate(360deg);}
	}

	/* ================= LIST ================= */

	.ss-list{display:grid;gap:var(--cn-space-md);}

	.ss-list__item{
		padding:12px 14px;
		border:1px solid var(--cn-border-soft);
		border-radius:var(--cn-radius-md);
		background:var(--cn-bg-surface);
		transition:border-color var(--cn-motion-base),box-shadow var(--cn-motion-base),transform var(--cn-motion-fast);
	}

	.ss-list__item:hover{
		border-color:var(--cn-border-color);
		box-shadow:var(--cn-shadow-xs);
		transform:translateY(-1px);
	}

	.ss-list__title{font-weight:600;color:var(--cn-text-strong);}
	.ss-list__meta{margin-top:var(--cn-space-xs);font-size:var(--cn-font-size-sm);color:var(--cn-text-soft);}

	/* =========================================================
	   DETAIL / READ-ONLY DATA
	   PURPOSE:
	   - แสดงข้อมูลหน้า Show / Detail / Summary
	   - ใช้แทน view-grid, field-grid และ subfield-grid
	   - ใช้ 12-column grid เดียวกับ SoulStack
	========================================================= */

	.ss-detail-grid
	{
		display:grid;
		grid-template-columns:repeat(12,minmax(0,1fr));
		gap:var(--cn-space-lg) var(--cn-space-xl);
	}

	.ss-detail-grid--compact
	{
		gap:var(--cn-space-md);
	}

	.ss-detail-grid--relaxed
	{
		gap:var(--cn-space-xl) var(--cn-space-2xl);
	}

	.ss-detail-grid--divided
	{
		column-gap:0;
		row-gap:0;

		border:1px solid var(--cn-border-color);
		border-radius:var(--cn-radius-md);

		overflow:hidden;
	}
	
		/* =====================================================
	   DETAIL ITEM
	===================================================== */

	.ss-detail
	{
		min-width:0;

		display:flex;
		flex-direction:column;
		align-items:stretch;
	}

	.ss-detail__label
	{
		margin-bottom:var(--cn-space-xs);

		color:var(--cn-text-soft);
		font-size:var(--cn-font-size-sm);
		font-weight:500;
		line-height:var(--cn-line-height-base);
	}

	.ss-detail__value
	{
		min-width:0;

		color:var(--cn-text-strong);
		font-size:inherit;
		font-weight:600;
		line-height:var(--cn-line-height-base);

		overflow-wrap:anywhere;
		word-break:break-word;
	}

	.ss-detail__value:empty::before
	{
		content:"-";
		color:var(--cn-text-muted,var(--cn-text-soft));
		font-weight:400;
	}

	.ss-detail__hint
	{
		margin-top:var(--cn-space-xs);

		color:var(--cn-text-soft);
		font-size:var(--cn-font-size-sm);
		line-height:var(--cn-line-height-base);
	}

	.ss-detail__meta
	{
		margin-top:var(--cn-space-xs);

		color:var(--cn-text-soft);
		font-size:var(--cn-font-size-xs);
	}
	
		/* =====================================================
	   INLINE DETAIL
	   Label อยู่ซ้าย Value อยู่ขวา
	===================================================== */

	.ss-detail--inline
	{
		display:grid;
		grid-template-columns:
			minmax(
				var(--ss-detail-label-min,140px),
				var(--ss-detail-label-width,190px)
			)
			minmax(0,1fr);

		column-gap:var(--cn-space-lg);
		row-gap:var(--cn-space-xs);

		align-items:start;
	}

	.ss-detail--inline .ss-detail__label
	{
		margin-bottom:0;
	}

	.ss-detail--inline .ss-detail__value
	{
		min-width:0;
	}
	
	/* =====================================================
	   BOXED DETAIL
	   ใช้กับค่าที่ต้องการเน้นเหมือน readonly input
	===================================================== */

	.ss-detail--boxed .ss-detail__value
	{
		min-height:44px;

		display:flex;
		align-items:center;

		padding:10px 12px;

		border:1px solid var(--cn-border-color);
		border-radius:var(--cn-radius-md);

		background:var(--cn-bg-subtle);
		color:var(--cn-text-strong);
	}

	.ss-detail--boxed-multiline .ss-detail__value
	{
		min-height:88px;
		align-items:flex-start;
		white-space:pre-wrap;
	}
	
	/* =====================================================
	   DIVIDED DETAIL ITEMS
	===================================================== */

	.ss-detail-grid--divided
	{
		gap:1px;
		padding:1px;
		border-radius:var(--cn-radius-md);
		overflow:hidden;
		background:var(--cn-border-color);
	}

	.ss-detail-grid--divided .ss-detail
	{
		padding:var(--cn-space-lg);
		background:var(--cn-bg-surface);
	}
	
	/* =====================================================
	   DETAIL LIST
	===================================================== */

	.ss-detail-list
	{
		display:flex;
		flex-direction:column;
	}

	.ss-detail-list > .ss-detail
	{
		padding-block:var(--cn-space-md);
		border-bottom:1px solid var(--cn-border-soft);
	}

	.ss-detail-list > .ss-detail:first-child
	{
		padding-top:0;
	}

	.ss-detail-list > .ss-detail:last-child
	{
		padding-bottom:0;
		border-bottom:0;
	}
	
		/* =====================================================
	   DETAIL VALUE FORMATTING
	===================================================== */

	.ss-detail__value--muted
	{
		color:var(--cn-text-soft);
		font-weight:400;
	}

	.ss-detail__value--strong
	{
		font-weight:700;
	}

	.ss-detail__value--number
	{
		text-align:right;
		font-variant-numeric:tabular-nums;
	}

	.ss-detail__value--center
	{
		text-align:center;
	}

	.ss-detail__value--nowrap
	{
		white-space:nowrap;
	}

	.ss-detail__value--preline
	{
		white-space:pre-line;
	}

	.ss-detail__value--preserve
	{
		white-space:pre-wrap;
	}

	.ss-detail__value--truncate
	{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	
	/* =====================================================
	   UNDERLINE DETAIL
	===================================================== */

	.ss-detail--underline .ss-detail__value
	{
		min-height:32px;
		padding-bottom:var(--cn-space-xs);

		border-bottom:1px solid var(--cn-border-color);
	}

	.ss-detail--underline-soft .ss-detail__value
	{
		min-height:32px;
		padding-bottom:var(--cn-space-xs);

		border-bottom:1px dashed var(--cn-border-soft);
	}
	
	/* ================= PARAGRAPH ================= */

	.ss-paragraph
	{
		text-indent:3em;
		line-height:1.8;
	}

	/* ================= NOTE ================= */

	.ss-note{
		padding:10px 12px;
		border-left:4px solid var(--cn-primary);
		background:color-mix(in srgb,var(--cn-primary) 8%,transparent);
		border-radius:0 var(--cn-radius-sm) var(--cn-radius-sm) 0;
	}
	
	
	/* ================= POSITION UTILITIES =================
	   PURPOSE : Small positioning helpers for patterns/components
	   USAGE   : Place small action/button/icon at corner
	   NOTE    : Parent must be position:relative
	===================================================== */

	.ss-top-right
	{
		position:absolute;
		top:10px;
		right:10px;
		display:flex;
		align-items:center;
		gap:6px;
	}
	
	/* ================= ACTIONS BAR =================
	   PURPOSE : Grouped action buttons (Back / Next / Save / Cancel etc.)
	   USAGE   : Footer / Modal / Card / Inline section
	   NOTE    : Layout helper (not navigation)
	================================================ */

	.ss-actions
	{
		display:flex;
		align-items:center;
		flex-wrap:wrap;
		gap:var(--cn-space-sm);
	}

	.ss-actions__left,
	.ss-actions__right
	{
		display:flex;
		align-items:center;
		gap:var(--cn-space-sm);
	}

	.ss-actions__right
	{
		margin-left:auto;
	}
	
	/* =====================================================
	   ACTIONS MODIFIERS
	===================================================== */

	.ss-actions--between
	{
		justify-content:space-between;
	}

	.ss-actions--start
	{
		justify-content:flex-start;
	}

	.ss-actions--center
	{
		justify-content:center;
	}

	.ss-actions--end
	{
		justify-content:flex-end;
	}

	.ss-actions--fill > *
	{
		flex:1 1 0;
		min-width:0;
	}

	.ss-actions--nowrap
	{
		flex-wrap:nowrap;
	}
	
	/* =========================================================
	   MESSAGE BAR (UNDER HEADER)
	========================================================= */

	.ss-message
	{
		display:flex;
		align-items:flex-start;
		justify-content:space-between;
		gap:var(--cn-space-md);

		padding:12px 18px;
		border-bottom:1px solid var(--cn-border-soft);

		font-size:var(--cn-font-size-sm);
	}

	/* body */
	.ss-message__body
	{
		flex:1;
	}

	/* list */
	.ss-message__list
	{
		margin:6px 0 0 18px;
	}

	/* close */
	.ss-message__close
	{
		background:none;
		border:none;
		cursor:pointer;
		color:inherit;
		opacity:.7;
	}

	.ss-message__close:hover
	{
		opacity:1;
	}

	/* variants */

	.ss-message--danger
	{
		background:color-mix(in srgb,var(--cn-danger) 12%,white);
		color:#7a1c24;
	}

	.ss-message--success
	{
		background:color-mix(in srgb,var(--cn-success) 14%,white);
		color:#14532d;
	}
		
	/* =========================================================
	   SOULSTACK DOCUMENT RENDERING
	   PURPOSE : PRINT / PDF / OFFICIAL FORM
	   NOTE    : DO NOT USE IN SCREEN UI
	========================================================= */
	/* FONT SIZE (PT BASED FOR PDF ENGINE) */
	
			.doc-fs-8   { font-size:8pt; }
			.doc-fs-9   { font-size:9pt; }
			.doc-fs-10  { font-size:10pt; }
			.doc-fs-11  { font-size:11pt; }
			.doc-fs-12  { font-size:12pt; }
			.doc-fs-14  { font-size:14pt; }
			.doc-fs-16  { font-size:16pt; }
			.doc-fs-18  { font-size:18pt; }
			.doc-fs-20  { font-size:20pt; }
			.doc-fs-22  { font-size:22pt; }
			.doc-fs-24  { font-size:24pt; }
			.doc-fs-26  { font-size:26pt; }
			.doc-fs-28  { font-size:28pt; }
			.doc-fs-36  { font-size:36pt; }
			.doc-fs-48  { font-size:48pt; }
			.doc-fs-60  { font-size:60pt; }
	


	/* =========================================================
	   APPLICATION COMPONENT CONTRACTS — v1.0
	========================================================= */

	/* ---------- NOTICE ---------- */
	.ss-notice
	{
		display:flex;
		align-items:flex-start;
		gap:var(--cn-space-md);
		padding:var(--cn-space-lg);
		border:1px solid var(--cn-border-color);
		border-left:4px solid var(--ss-notice-accent,var(--cn-info));
		border-radius:var(--cn-radius-md);
		background:color-mix(in srgb,var(--ss-notice-accent,var(--cn-info)) 8%,var(--cn-bg-surface));
		color:var(--cn-text);
	}
	.ss-notice--info{--ss-notice-accent:var(--cn-info);}
	.ss-notice--success{--ss-notice-accent:var(--cn-success);}
	.ss-notice--warning{--ss-notice-accent:var(--cn-warning);}
	.ss-notice--danger{--ss-notice-accent:var(--cn-danger);}
	.ss-notice__icon{flex:0 0 auto;color:var(--ss-notice-accent);font-size:1.2em;line-height:1.4;}
	.ss-notice__content{min-width:0;flex:1 1 auto;}
	.ss-notice__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cn-space-md);}
	.ss-notice__title{font-weight:700;color:var(--cn-text-strong);}
	.ss-notice__body{margin-top:var(--cn-space-xs);color:var(--cn-text);}
	.ss-notice__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--cn-space-sm);margin-top:var(--cn-space-md);}
	.ss-notice__close{flex:0 0 auto;color:inherit;opacity:.65;}
	.ss-notice__close:hover{opacity:1;}
	
	
	/* ---------- NOTICE SPACING ---------- */
	
	.ss-container--page > .ss-notice:first-child
	{
		margin-top:var(--cn-space-md);
	}

	.ss-container--page > .ss-notice + .ss-notice
	{
		margin-top:var(--cn-space-sm);
	}
	
	/* ---------- ACCESSIBILITY ---------- */
	.ss-skip-link
	{
		position:fixed;
		top:var(--cn-space-sm);
		left:var(--cn-space-sm);
		z-index:var(--cn-z-tooltip);

		display:inline-flex;
		align-items:center;
		justify-content:center;

		min-height:var(--cn-touch-target);

		padding:
			var(--cn-space-sm)
			var(--cn-space-md);

		color:var(--cn-text-on-primary);
		background:var(--cn-primary);

		border:
			var(--cn-line-xs)
			solid
			var(--cn-primary);

		border-radius:var(--cn-radius-md);
		box-shadow:var(--cn-shadow-md);

		transform:translateY(
			calc(-100% - var(--cn-space-lg))
		);

		transition:
			transform
			var(--cn-motion-fast)
			var(--cn-ease-standard);
	}

	.ss-skip-link:focus,
	.ss-skip-link:focus-visible
	{
		transform:translateY(0);
		outline:none;
		box-shadow:
			var(--cn-shadow-md),
			var(--cn-focus-ring);
	}

	/* ---------- APPLICATION SHELL ---------- */
	.ss-app-shell
	{
		--ss-app-header-height:72px;
		--ss-bottom-nav-height:0px;
		display:flex;
		flex-direction:column;

		width:100%;
		min-width:0;
		min-height:100dvh;

		background:var(--cn-bg-page);
	}
	
	.ss-app-shell--fixed-header
	{
		padding-top: calc( var(--ss-app-header-height) + var(--cn-safe-top));
	}

	.ss-app-shell--bottom-nav
	{
		padding-bottom: calc( var(--ss-bottom-nav-height) + var(--cn-safe-bottom));
	}

	.ss-app-shell__main
	{
		flex:1 1 auto;

		width:100%;
		min-width:0;
	}
	
	.ss-app-shell--fixed-header
	{
		padding-top: calc( var(--ss-app-header-height) + var(--cn-safe-top));
	}

	.ss-app-shell--bottom-nav
	{
		padding-bottom:	calc( var(--ss-bottom-nav-height) + var(--cn-safe-bottom));
	}

	.ss-app-shell__main
	{
		flex:1 1 auto;

		width:100%;
		min-width:0;
	}
	
	.ss-app-shell__footer
	{
		flex:0 0 auto;

		width:100%;
		min-width:0;

		/*
		padding:
			var(--cn-space-lg)
			max( var(--cn-space-lg), var(--cn-safe-right))
			calc( var(--cn-space-lg) + var(--cn-safe-bottom))
			max( var(--cn-space-lg), var(--cn-safe-left));
		*/
		color:var(--cn-text-soft);
		background:var(--cn-bg-surface);

		border-top:
			var(--cn-line-xs)
			solid
			var(--cn-border-color);
	}
	
	.ss-app-shell__footer-credit
	{
		display:block;
		width:100%;
		text-align:right;
	}

	/* ---------- APP HEADER ---------- */

	.ss-app-header
	{
		position:relative;
		z-index:var(--cn-z-fixed);

		display:flex;
		align-items:center;

		width:100%;
		min-height:var(--ss-app-header-height,72px);

		padding-block:var(--cn-space-sm);
		padding-inline:0;

		border-bottom:1px solid var(--cn-border-soft);
		background:var(--cn-bg-elevated);
		box-shadow:var(--cn-shadow-sm);

		overflow:visible;
	}


	/* =====================================================
	   HEADER CONTAINER
	===================================================== */

	.ss-app-header > .ss-container
	{
		flex:1 1 auto;

		width:100%;
		max-width:var(--cn-page-max);

		margin-inline:auto;
		padding-inline:var(--cn-space-lg);

		overflow:visible;
	}


	/* =====================================================
	   FIXED HEADER
	===================================================== */

	.ss-app-shell--fixed-header .ss-app-header
	{
		position:fixed;
		inset:0 0 auto;
		z-index:var(--cn-z-fixed);

		padding-top:
			calc(
				var(--cn-space-sm)
				+ var(--cn-safe-top)
			);

		overflow:visible;
	}

	/* =====================================================
	   HEADER INNER
	===================================================== */

	.ss-app-header__inner
	{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:var(--cn-space-lg);

		width:100%;
		min-width:0;

		overflow:visible;
	}

	/* =====================================================
	   BRAND
	===================================================== */

	.ss-app-header__brand
	{
		display:flex;
		align-items:center;
		gap:var(--cn-space-lg);

		flex:1 1 auto;
		min-width:0;
	}


	/* =====================================================
	   HEADER ACTIONS
	===================================================== */

	.ss-app-header__actions
	{
		display:flex;
		align-items:center;
		gap:var(--cn-space-sm);

		flex:0 0 auto;
		margin-inline-start:auto;

		overflow:visible;
	}

	/* =====================================================
	   LOGO
	===================================================== */

	.ss-app-header__logo
	{
		display:block;

		width:auto;
		height:var(--ss-app-header-logo-height, 46px);

		object-fit:contain;
	}

	.ss-app-header__logo--lg
	{
		--ss-app-header-logo-height:80px;
	}

	.ss-app-header__logo-link
	{
		display:inline-flex;
		align-items:center;
		justify-content:center;

		flex:0 0 auto;
	}


	/* =====================================================
	   IDENTITY
	===================================================== */

	.ss-app-header__identity
	{
		min-width:0;
	}

	.ss-app-header__organization,
	.ss-app-header__system
	{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}

	.ss-app-header__organization
	{
		font-weight:700;
		color:var(--cn-text-strong);
	}

	.ss-app-header__system
	{
		font-size:var(--cn-font-size-sm);
		color:var(--cn-text-soft);
	}

	.ss-app-header__alternate
	{
		display:none;
	}
	

	/* ---------- HERO ---------- */
	.ss-hero
	{
		display:grid;
		gap:var(--cn-space-lg);
		padding:clamp(var(--cn-space-xl),4vw,var(--cn-space-4xl));
		border:1px solid var(--cn-border-soft);
		border-radius:var(--cn-radius-xl);
		background:linear-gradient(135deg,color-mix(in srgb,var(--cn-primary) 12%,var(--cn-bg-surface)),var(--cn-bg-surface));
		box-shadow:var(--cn-shadow-sm);
	}
	.ss-hero__eyebrow{color:var(--cn-primary);font-size:var(--cn-font-size-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
	.ss-hero__title{color:var(--cn-text-strong);font-size:clamp(var(--cn-font-size-2xl),4vw,var(--cn-font-size-4xl));font-weight:800;line-height:var(--cn-line-height-tight);}
	.ss-hero__text{max-width:760px;color:var(--cn-text-soft);}
	.ss-hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--cn-space-sm);}

	/* ---------- DRAWER ---------- */
	.ss-drawer-overlay{position:fixed;inset:0;z-index:var(--cn-z-overlay);display:none;background:var(--cn-overlay-bg);}
	.ss-drawer-overlay.is-open{display:block;}
	.ss-drawer
	{
		position:fixed;
		inset:0 auto 0 0;
		z-index:calc(var(--cn-z-overlay) + 1);
		display:flex;
		flex-direction:column;
		width:min(var(--ss-drawer-width,320px),calc(100vw - 48px));
		padding-top:var(--cn-safe-top);
		padding-bottom:var(--cn-safe-bottom);
		border-right:1px solid var(--cn-border-soft);
		background:var(--cn-bg-elevated);
		box-shadow:var(--cn-shadow-xl);
		transform:translateX(-105%);
		transition:transform var(--cn-motion-slow) var(--cn-ease-standard);
	}
	.ss-drawer--right{inset:0 0 0 auto;border-right:0;border-left:1px solid var(--cn-border-soft);transform:translateX(105%);}
	.ss-drawer.is-open{transform:translateX(0);}
	.ss-drawer__header,.ss-drawer__footer{flex:0 0 auto;padding:var(--cn-space-lg);}
	.ss-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cn-space-md);border-bottom:1px solid var(--cn-border-soft);}
	.ss-drawer__title{font-weight:700;color:var(--cn-text-strong);}
	.ss-drawer__body{min-height:0;flex:1 1 auto;overflow:auto;padding:var(--cn-space-lg);-webkit-overflow-scrolling:touch;}
	.ss-drawer__footer{border-top:1px solid var(--cn-border-soft);}

	/* ---------- BOTTOM NAV ---------- */
	.ss-bottom-nav
	{
		position:fixed;
		inset:auto 0 0;
		z-index:var(--cn-z-fixed);
		display:none;
		align-items:stretch;
		min-height:calc(var(--ss-bottom-nav-height,64px) + var(--cn-safe-bottom));
		padding-bottom:var(--cn-safe-bottom);
		border-top:1px solid var(--cn-border-soft);
		background:var(--cn-bg-elevated);
		box-shadow:0 -4px 18px rgba(0,0,0,.08);
	}
	.ss-bottom-nav__item{display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:6px;color:var(--cn-text-soft);}
	.ss-bottom-nav__item.is-active,.ss-bottom-nav__item[aria-current="page"]{color:var(--cn-primary);}
	.ss-bottom-nav__icon{font-size:1.2rem;line-height:1;}
	.ss-bottom-nav__label{max-width:100%;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap;}

	/* ---------- MILESTONE ---------- */
	.ss-milestone{position:relative;width:100%;padding:var(--cn-space-md) 0;}
	.ss-milestone__track{position:absolute;top:29px;right:6%;left:6%;height:3px;border-radius:var(--cn-radius-pill);background:var(--cn-border-color);}
	.ss-milestone__progress{display:block;width:var(--ss-milestone-progress,0%);height:100%;border-radius:inherit;background:var(--cn-primary);}
	.ss-milestone__steps{position:relative;display:grid;grid-template-columns:repeat(var(--ss-milestone-count,4),minmax(0,1fr));}
	.ss-milestone__step{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;color:var(--cn-text-soft);}
	.ss-milestone__point{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border:3px solid var(--cn-bg-surface);border-radius:50%;background:var(--cn-border-color);box-shadow:0 0 0 1px var(--cn-border-soft);}
	.ss-milestone__step.is-done .ss-milestone__point{background:var(--cn-success);color:#fff;}
	.ss-milestone__step.is-active .ss-milestone__point{background:var(--cn-primary);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--cn-primary) 16%,transparent);}
	.ss-milestone__label{margin-top:var(--cn-space-sm);max-width:150px;color:inherit;font-size:var(--cn-font-size-sm);font-weight:600;}
	.ss-milestone__date{margin-top:2px;color:var(--cn-text-soft);font-size:var(--cn-font-size-xs);}

	/* ---------- DATA LIST ---------- */
	.ss-data-list{display:flex;flex-direction:column;border:1px solid var(--cn-border-soft);border-radius:var(--cn-radius-md);overflow:hidden;background:var(--cn-bg-surface);}
	.ss-data-list__row{display:flex;align-items:flex-start;gap:var(--cn-space-lg);padding:var(--cn-space-lg);border-bottom:1px solid var(--cn-border-soft);}
	.ss-data-list__row:last-child{border-bottom:0;}
	.ss-data-list__main{min-width:0;flex:1 1 auto;}
	.ss-data-list__title{color:var(--cn-text-strong);font-weight:700;overflow-wrap:anywhere;}
	.ss-data-list__meta{display:flex;flex-wrap:wrap;gap:var(--cn-space-xs) var(--cn-space-md);margin-top:var(--cn-space-xs);color:var(--cn-text-soft);font-size:var(--cn-font-size-sm);}
	.ss-data-list__fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--cn-space-md);margin-top:var(--cn-space-md);}
	.ss-data-list__label{color:var(--cn-text-soft);font-size:var(--cn-font-size-xs);}
	.ss-data-list__value{color:var(--cn-text-strong);font-weight:600;overflow-wrap:anywhere;}
	.ss-data-list__aside{display:flex;align-items:center;gap:var(--cn-space-sm);flex:0 0 auto;}
	.ss-data-list__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--cn-space-sm);}

	/* ---------- AUTH ---------- */
	.ss-auth
	{
		display:grid;
		place-items:center;
		min-height:100dvh;
		padding:max(var(--cn-space-xl),var(--cn-safe-top)) max(var(--cn-space-lg),var(--cn-safe-right)) max(var(--cn-space-xl),var(--cn-safe-bottom)) max(var(--cn-space-lg),var(--cn-safe-left));
		background:var(--cn-bg-page);
	}
	.ss-auth__card{width:min(100%,var(--ss-auth-width,460px));overflow:hidden;border:1px solid var(--cn-card-border);border-radius:var(--cn-radius-xl);background:var(--cn-card-bg);box-shadow:var(--cn-shadow-lg);}
	.ss-auth__header,.ss-auth__inner,.ss-auth__footer{padding:var(--cn-space-2xl);}
	.ss-auth__header{text-align:center;border-bottom:1px solid var(--cn-border-soft);}
	.ss-auth__title{color:var(--cn-text-strong);font-size:var(--cn-font-size-2xl);font-weight:800;}
	.ss-auth__subtitle{margin-top:var(--cn-space-xs);color:var(--cn-text-soft);}
	.ss-auth__footer{border-top:1px solid var(--cn-border-soft);background:var(--cn-bg-subtle);text-align:center;}

	/* ---------- CHOICE CONTROLS ---------- */
	.ss-choice-group{display:flex;flex-wrap:wrap;gap:var(--cn-space-sm) var(--cn-space-lg);}
	.ss-choice-group--stacked{flex-direction:column;align-items:flex-start;}
	.ss-choice{display:inline-flex;align-items:flex-start;gap:var(--cn-space-sm);min-height:var(--cn-touch-target);cursor:pointer;}
	.ss-choice__control{flex:0 0 auto;margin-top:.25em;accent-color:var(--cn-primary);}
	.ss-choice__content{min-width:0;}
	.ss-choice__label{color:var(--cn-text-strong);font-weight:500;}
	.ss-choice__hint{margin-top:2px;color:var(--cn-text-soft);font-size:var(--cn-font-size-sm);}

	/* ---------- SAFE AREA ---------- */
	.ss-safe-top{padding-top:var(--cn-safe-top) !important;}
	.ss-safe-right{padding-right:var(--cn-safe-right) !important;}
	.ss-safe-bottom{padding-bottom:var(--cn-safe-bottom) !important;}
	.ss-safe-left{padding-left:var(--cn-safe-left) !important;}
	.ss-safe-x{padding-right:var(--cn-safe-right) !important;padding-left:var(--cn-safe-left) !important;}
	.ss-safe-y{padding-top:var(--cn-safe-top) !important;padding-bottom:var(--cn-safe-bottom) !important;}

	/* ---------- RESPONSIVE VISIBILITY BASE ---------- */
	.ss-show-lg-down,.ss-show-md-down,.ss-show-sm-down,.ss-show-xs{display:none !important;}

	/* =========================================================
	   RESPONSIVE APPLICATION UI
	========================================================= */

	@media (max-width:768px)
	{
		.ss-actions--responsive
		{
			width:100%;
		}

		.ss-actions--responsive .ss-actions__left,
		.ss-actions--responsive .ss-actions__right
		{
			width:100%;
		}

		.ss-actions--responsive .ss-actions__right
		{
			margin-left:0;
		}

		.ss-table-tools
		{
			align-items:stretch;
		}

		.ss-table-tools__filters,
		.ss-table-tools__actions
		{
			width:100%;
		}
		
		/* =====================================================
		   DETAIL — TABLET / MOBILE
		===================================================== */

		.ss-detail-grid
		{
			column-gap:var(--cn-space-lg);
			row-gap:var(--cn-space-md);
		}

		.ss-detail--inline
		{
			--ss-detail-label-width:160px;
		}
	}

	@media (max-width:576px)
	{
		.ss-actions--stack-mobile,
		.ss-actions--stack-mobile .ss-actions__left,
		.ss-actions--stack-mobile .ss-actions__right
		{
			width:100%;
			flex-direction:column;
			align-items:stretch;
		}

		.ss-actions--stack-mobile .ss-actions__right
		{
			margin-left:0;
		}

		.ss-actions--stack-mobile .ss-button
		{
			width:100%;
		}

		.ss-table-tools__filters,
		.ss-table-tools__actions
		{
			flex-direction:column;
			align-items:stretch;
		}
		
		/* =====================================================
		   DETAIL — MOBILE
		===================================================== */

		.ss-detail-grid
		{
			grid-template-columns:1fr;
			gap:var(--cn-space-md);
		}

		.ss-detail-grid > *
		{
			grid-column:1 / -1;
		}

		.ss-detail--inline
		{
			display:flex;
			flex-direction:column;
			gap:0;
		}

		.ss-detail--inline .ss-detail__label
		{
			margin-bottom:var(--cn-space-xs);
		}

		.ss-detail-grid--divided
		{
			gap:1px;
		}

		.ss-detail-grid--divided .ss-detail
		{
			padding:var(--cn-space-md);
		}
	}
	
	/* =========================================================
	   RESPONSIVE APPLICATION COMPONENTS
	========================================================= */

	@media (max-width:1200px)
	{
		.ss-hide-lg-down
		{
			display:none !important;
		}

		.ss-show-lg-down
		{
			display:block !important;
		}
	}


	@media (max-width:992px)
	{
		.ss-hide-md-down
		{
			display:none !important;
		}

		.ss-show-md-down
		{
			display:block !important;
		}
	}


	@media (max-width:768px)
	{
		.ss-app-shell--bottom-nav
		{
			--ss-bottom-nav-height:64px;
		}

		.ss-bottom-nav
		{
			display:flex;
		}

		.ss-app-header
		{
			gap:var(--cn-space-sm);

			padding-right:
				max(var(--cn-space-md),var(--cn-safe-right));

			padding-left:
				max(var(--cn-space-md),var(--cn-safe-left));
		}

		.ss-app-header__logo
		{
			height:
				var(
					--ss-app-header-logo-height-mobile,
					38px
				);
		}

		.ss-app-header__organization
		{
			font-size:var(--cn-font-size-sm);
		}

		.ss-app-header__system
		{
			font-size:var(--cn-font-size-xs);
		}

		.ss-hero
		{
			border-radius:var(--cn-radius-lg);
		}

		.ss-data-list__row
		{
			gap:var(--cn-space-md);
			padding:var(--cn-space-md);
		}

		.ss-notice
		{
			padding:var(--cn-space-md);
		}

		.ss-hide-sm-down
		{
			display:none !important;
		}

		.ss-show-sm-down
		{
			display:block !important;
		}
	}

	@media (max-width:576px)
	{
		.ss-app-header__brand--collapse-mobile
		{
			display:none;
		}

		.ss-app-header__brand--collapse-mobile
			+ .ss-app-header__alternate
		{
			display:block;
			flex:1 1 auto;
		}

		.ss-app-header__actions
		{
			gap:var(--cn-space-xs);
		}

		.ss-hero__actions
		{
			flex-direction:column;
			align-items:stretch;
		}

		.ss-hero__actions .ss-button
		{
			width:100%;
		}

		.ss-notice__header
		{
			align-items:flex-start;
		}

		.ss-notice__actions
		{
			flex-direction:column;
			align-items:stretch;
		}

		.ss-notice__actions > *
		{
			width:100%;
		}

		.ss-data-list__row
		{
			flex-direction:column;
			align-items:stretch;
		}

		.ss-data-list__aside
		{
			width:100%;
			justify-content:space-between;
		}

		.ss-data-list__actions
		{
			width:100%;
		}

		.ss-data-list__actions > *
		{
			flex:1 1 auto;
		}

		.ss-milestone
		{
			overflow-x:auto;

			-webkit-overflow-scrolling:touch;
			overscroll-behavior-inline:contain;
		}

		.ss-milestone__track
		{
			right:40px;
			left:40px;
		}

		.ss-milestone__steps
		{
			min-width:
				var(
					--ss-milestone-mobile-width,
					520px
				);
		}

		.ss-milestone__point
		{
			width:26px;
			height:26px;
		}

		.ss-milestone__label
		{
			max-width:110px;
			font-size:11px;
		}

		.ss-milestone__date
		{
			font-size:10px;
		}

		.ss-auth
		{
			place-items:start center;

			padding-top:
				max(
					var(--cn-space-lg),
					var(--cn-safe-top)
				);
		}

		.ss-auth__card
		{
			border-radius:var(--cn-radius-lg);
		}

		.ss-auth__inner
		{
			padding:var(--cn-space-xl);
		}
	}


	@media (max-width:480px)
	{
		.ss-hide-xs
		{
			display:none !important;
		}

		.ss-show-xs
		{
			display:block !important;
		}

		.ss-bottom-nav__label
		{
			font-size:10px;
		}

		.ss-drawer
		{
			width:min(
				var(--ss-drawer-width,320px),
				calc(100vw - 24px)
			);
		}
	}


	@media (min-width:769px)
	{
		.ss-mobile-only
		{
			display:none !important;
		}
	}


	@media (max-width:768px)
	{
		.ss-desktop-only
		{
			display:none !important;
		}
	}


	@media
		(orientation:landscape)
		and (max-height:500px)
	{
		.ss-auth
		{
			place-items:start center;
		}

		.ss-drawer__body
		{
			overscroll-behavior:contain;
		}
	}
	

	/* Responsive display variants for preserving layout semantics */
	.ss-show-flex-lg-down,.ss-show-flex-md-down,.ss-show-flex-sm-down,.ss-show-flex-xs,
	.ss-show-grid-lg-down,.ss-show-grid-md-down,.ss-show-grid-sm-down,.ss-show-grid-xs
	{
		display:none !important;
	}

	@media (max-width:1200px)
	{
		.ss-show-flex-lg-down{display:flex !important;}
		.ss-show-grid-lg-down{display:grid !important;}
	}

	@media (max-width:992px)
	{
		.ss-show-flex-md-down{display:flex !important;}
		.ss-show-grid-md-down{display:grid !important;}
	}

	@media (max-width:768px)
	{
		.ss-show-flex-sm-down{display:flex !important;}
		.ss-show-grid-sm-down{display:grid !important;}
	}

	@media (max-width:480px)
	{
		.ss-show-flex-xs{display:flex !important;}
		.ss-show-grid-xs{display:grid !important;}
	}


	@media (prefers-reduced-motion:reduce)
	{
		.ss-drawer,
		.ss-list__item,
		.ss-notice,
		.ss-data-list__row
		{
			transition:none !important;
		}

		.ss-loader__spinner
		{
			animation-duration:1.5s;
		}
	}
	
	/* =====================================================
	   SIDEBAR NAVIGATION
	===================================================== */

	.ss-nav
	{
		display:flex;
		flex-direction:column;
		width:100%;
		min-width:0;
	}

	.ss-nav__section
	{
		display:flex;
		flex-direction:column;
		gap:var(--ss-sidebar-item-gap);
		width:100%;
		min-width:0;
	}

	.ss-nav__section-title
	{
		padding:
			var(--cn-space-sm)
			var(--ss-sidebar-item-padding-x);

		color:var(--ss-sidebar-section-text);
		font-size:var(--cn-font-size-xs);
		font-weight:700;
	}

	.ss-nav__divider
	{
		height:1px;
		margin:var(--cn-space-sm) 0;
		background:var(--ss-sidebar-divider);
	}

	.ss-nav__group
	{
		display:block;
		width:100%;
		min-width:0;
	}

	/* =====================================================
	   LINK / TOGGLE
	===================================================== */

	.ss-nav__link
	{
		display:block;
		width:100%;
		min-width:0;

		margin:0;
		padding:0;

		border:0;
		border-radius:var(--ss-sidebar-item-radius);

		background:transparent;
		color:inherit;

		font:inherit;
		text-align:left;
		text-decoration:none;

		cursor:pointer;
	}

	button.ss-nav__link
	{
		appearance:none;
		-webkit-appearance:none;
	}

	.ss-nav__toggle--static
	{
		cursor:default;
	}

	.ss-nav__item
	{
		display:flex;
		align-items:center;
		gap:var(--cn-space-sm);

		width:100%;
		min-width:0;
		min-height:var(--ss-sidebar-item-height);

		padding-block:var(--ss-sidebar-item-padding-y);

		padding-inline-start:
			calc(
				var(--ss-sidebar-item-padding-x)
				+ var(--ss-nav-indent, 0px)
			);

		padding-inline-end:var(--ss-sidebar-item-padding-x);

		border-radius:var(--ss-sidebar-item-radius);

		background:transparent;
		color:var(--ss-sidebar-item-text);

		transition:
			background var(--cn-motion-fast) var(--cn-ease-standard),
			color var(--cn-motion-fast) var(--cn-ease-standard);
	}

	.ss-nav__link:hover .ss-nav__item
	{
		background:var(--ss-sidebar-hover-bg);
		color:var(--ss-sidebar-hover-text);
	}

	.ss-nav__link:focus-visible
	{
		outline:none;
	}

	.ss-nav__link:focus-visible .ss-nav__item
	{
		box-shadow:var(--cn-focus-ring);
	}

	.ss-nav__item--active
	{
		background:var(--ss-sidebar-active-bg);
		color:var(--ss-sidebar-active-text);
		font-weight:600;
	}

	/* =====================================================
	   ICON / LABEL / RIGHT SIDE
	===================================================== */

	.ss-nav__icon
	{
		display:inline-flex;
		align-items:center;
		justify-content:center;

		flex:0 0 22px;

		width:22px;
		height:22px;

		color:var(--ss-sidebar-item-icon);
	}

	.ss-nav__label
	{
		flex:1 1 auto;
		min-width:0;

		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}

	.ss-nav__end
	{
		display:inline-flex;
		align-items:center;
		justify-content:flex-end;
		gap:var(--cn-space-xs);

		flex:0 0 auto;

		margin-inline-start:auto;
	}

	/* =====================================================
	   SUBMENU
	===================================================== */

	.ss-nav__submenu
	{
		display:none;
		width:100%;
		min-width:0;
	}

	.ss-nav__submenu.is-open
	{
		display:block;
	}

	.ss-nav__submenu[hidden]
	{
		display:none !important;
	}

	.ss-nav__item--child
	{
		font-size:var(--cn-font-size-sm);
	}

	/* =====================================================
	   ARROW
	===================================================== */

	.ss-nav__arrow
	{
		display:inline-flex;
		align-items:center;
		justify-content:center;

		flex:0 0 20px;

		width:20px;
		height:20px;

		color:var(--cn-text-soft);

		transition:
			transform
			var(--ss-sidebar-transition-duration)
			var(--ss-sidebar-transition-timing);
	}

	.ss-nav__toggle[aria-expanded="true"] .ss-nav__arrow
	{
		transform:rotate(180deg);
	}

	/* =====================================================
	   BADGE
	===================================================== */

	.ss-nav__badge
	{
		display:inline-flex;
		align-items:center;
		justify-content:center;

		flex:0 0 auto;

		min-width:20px;
		height:20px;
		padding:0 6px;

		border-radius:999px;

		background:var(--cn-bg-subtle);
		color:var(--cn-text-soft);

		font-size:10px;
		font-weight:700;
		line-height:1;
	}

	.ss-nav__badge--primary
	{
		background:var(--cn-primary);
		color:var(--cn-text-on-primary);
	}

	.ss-nav__badge--success
	{
		background:var(--cn-success);
		color:var(--cn-text-on-success);
	}

	.ss-nav__badge--warning
	{
		background:var(--cn-warning);
		color:#1f2937;
	}

	.ss-nav__badge--danger
	{
		background:var(--cn-danger);
		color:var(--cn-text-on-danger);
	}

	.ss-nav__badge--info
	{
		background:var(--cn-info);
		color:#ffffff;
	}

	.ss-nav__badge--secondary
	{
		background:var(--cn-secondary);
		color:#ffffff;
	}

	.ss-nav__badge--neutral
	{
		background:var(--cn-gray-200);
		color:var(--cn-gray-700);
	}

	.ss-nav__badge-dot
	{
		display:inline-block;

		flex:0 0 8px;

		width:8px;
		height:8px;

		border-radius:50%;
		background:var(--cn-primary);
	}

	.ss-nav__badge-dot--danger
	{
		background:var(--cn-danger);
	}

	.ss-nav__badge-dot--warning
	{
		background:var(--cn-warning);
	}

	.ss-nav__badge-dot--success
	{
		background:var(--cn-success);
	}

	.ss-nav__badge-dot--info
	{
		background:var(--cn-info);
	}

	.ss-nav__badge-dot--secondary
	{
		background:var(--cn-secondary);
	}

	.ss-nav__badge-dot--neutral
	{
		background:var(--cn-gray-500);
	}
	
}

/* =========================================================
   SOULSTACK APPLICATION OVERLAYS
========================================================= */
@layer ss-overlays
{
	.ss-loading-overlay .ss-loader
	{
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		gap:var(--cn-space-md);

		min-width:160px;

		padding:
			var(--cn-space-xl)
			var(--cn-space-2xl);

		color:var(--cn-text);
		background:var(--cn-bg-elevated);

		border:
			var(--cn-line-xs)
			solid
			var(--cn-border-color);

		border-radius:var(--cn-radius-lg);
		box-shadow:var(--cn-shadow-xl);
	}

	.ss-loading-overlay .ss-loader__spinner
	{
		width:32px;
		height:32px;
	}

	/* ============================================================
	   COLLAPSIBLE NAVIGATION
	   ใช้ได้กับ nav, div, section หรือ container ใดก็ได้
	============================================================ */
	
	.ss-collapse-nav
	{
		display:flex;
		align-items:center;
		width:100%;
	}

	/* ============================================================
	   HEADER ROW
	============================================================ */

	.ss-collapse-nav__header
	{
		display:flex;
		align-items:center;
		flex:0 1 auto;
		min-width:0;
	}


	/* ============================================================
	   MENU
	============================================================ */

	.ss-collapse-nav__menu
	{
		display:flex;
		align-items:center;
		flex:0 0 auto;
		margin-inline-start:auto;
	}

	.ss-collapse-nav__links
	{
		display:flex;
		align-items:center;
		justify-content:flex-end;
		gap:var(--cn-space-sm);
	}


	/* ============================================================
	   TOGGLE
	============================================================ */

	.ss-collapse-nav__toggle
	{
		display:none;
		flex:0 0 auto;
		margin-inline-start:auto;
	}
	
	@media (max-width:767.98px)
	{
		.ss-collapse-nav
		{
			display:block;
		}


		/* --------------------------------------------------------
		   HEADER เป็นแถวแยก
		-------------------------------------------------------- */

		.ss-collapse-nav__header
		{
			display:flex;
			align-items:center;
			width:100%;
		}


		/* --------------------------------------------------------
		   TOGGLE อยู่ขวาของ Header
		-------------------------------------------------------- */

		.ss-collapse-nav__toggle
		{
			display:inline-flex;
			margin-inline-start:auto;
		}

		/* --------------------------------------------------------
		   MENU เป็นพื้นที่แยกด้านล่าง
		-------------------------------------------------------- */

		.ss-collapse-nav__menu
		{
			display:none;
			width:100%;
			margin-inline-start:0;
			margin-block-start:var(--cn-space-sm);
			padding-block-start:var(--cn-space-sm);
			border-block-start:1px solid var(--cn-border);
		}


		.ss-collapse-nav__menu.is-open
		{
			display:block;
		}


		.ss-collapse-nav__links
		{
			display:grid;
			grid-template-columns:1fr;
			gap:var(--cn-space-xs);
			width:100%;
		}


		.ss-collapse-nav__links .ss-button
		{
			width:100%;
			justify-content:flex-start;
		}
	}
}