/* ============================================================
   PORTAL COLOR TOKENS
   ใช้เฉพาะหน้า .page-portal
============================================================ */

.page-portal
{
	/* ========================================================
	   NAVBAR BACKGROUND
	======================================================== */

	--portal-nav-bg-start:rgba(184,200,217,.82);
	--portal-nav-bg-end:rgba(169,187,207,.76);


	/* ========================================================
	   NAVBAR TEXT
	======================================================== */

	--portal-nav-text:#5e6874;
	--portal-nav-text-hover:#253448;


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

	--portal-brand-text:#283442;
	--portal-ministry-text:#ff2f24;


	/* ========================================================
	   STAFF BUTTON
	======================================================== */

	--portal-staff-start:#2757df;
	--portal-staff-end:#3d7bf3;
	--portal-staff-hover-start:#1f4dd1;
	--portal-staff-hover-end:#326ee8;


	/* ========================================================
	   BORDER / SHADOW
	======================================================== */

	--portal-nav-border:rgba(255,255,255,.34);

	--portal-nav-shadow:
		0 4px 18px rgba(48,65,86,.12);
}


/* ============================================================
   NAVIGATION BACKGROUND
============================================================ */

.page-portal .ss-app-shell__header
{
	position:sticky;
	inset-block-start:0;
	z-index:1000;
}

.page-portal .ss-app-header
{
	background:
		linear-gradient(
			135deg,
			var(--portal-nav-bg-start) 0%,
			var(--portal-nav-bg-end) 100%
		);

	border-block-end:
		1px solid var(--portal-nav-border);

	box-shadow:
		var(--portal-nav-shadow);

	-webkit-backdrop-filter:
		blur(16px) saturate(135%);

	backdrop-filter:
		blur(16px) saturate(135%);
}

/* ============================================================
   NAVIGATION SPACING
============================================================ */

.page-portal .ss-collapse-nav
{
	min-height:76px;
	padding-block:8px;
}

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

.page-portal .ss-collapse-nav__brand
{
	color:var(--portal-brand-text);
	display:flex;
	align-items:center;
	min-width:0;
}

.page-portal .ss-app-header__brand
{
	display:flex;
	align-items:center;
	gap:18px;

	min-width:0;

	color:var(--portal-brand-text);
	text-decoration:none;
}

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

.page-portal .ss-app-header__logo
{
	display:block;

	width:auto;
	height:62px;

	flex:0 0 auto;
	object-fit:contain;
}

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

.page-portal .ss-app-header__identity
{
	display:flex;
	flex-direction:column;
	justify-content:center;

	gap:2px;
	min-width:0;

	line-height:1.2;
}

.page-portal .ss-app-header__brand:hover
{
	color:var(--portal-brand-text);
	text-decoration:none;
}

.page-portal .ss-app-header__organization
{
	color:var(--portal-brand-text);

	font-size:20px;
	font-weight:500;

	white-space:nowrap;
}

.page-portal .ss-app-header__system
{
	color:var(--portal-ministry-text);

	font-size:16px;
	font-weight:400;

	white-space:nowrap;
}


/* ============================================================
   NORMAL NAVIGATION LINKS
============================================================ */

.page-portal .ss-collapse-nav__menu
{
	margin-inline-start:auto;
}

.page-portal .ss-collapse-nav__links
{
	display:flex;
	align-items:center;
	justify-content:flex-end;

	gap:4px;
}

.page-portal .ss-collapse-nav__links
	.ss-button.ss-ghost
{
	color:var(--portal-nav-text);
	background:transparent;
	border-color:transparent;
	box-shadow:none;

	font-weight:500;
}

.page-portal .ss-collapse-nav__links
	.ss-button.ss-ghost:hover,
.page-portal .ss-collapse-nav__links
	.ss-button.ss-ghost:focus-visible
{
	color:var(--portal-nav-text-hover);

	background:
		rgba(255,255,255,.24);

	border-color:
		rgba(255,255,255,.18);
}


/* ============================================================
   STAFF BUTTON
============================================================ */

.page-portal .ss-collapse-nav__links
	.ss-button.ss-primary
{
	color:#ffffff;

	background:
		linear-gradient(
			135deg,
			var(--portal-staff-start) 0%,
			var(--portal-staff-end) 100%
		);

	border-color:transparent;
	border-radius:8px;

	box-shadow:
		0 5px 14px rgba(39,87,223,.24);

	font-weight:600;
}

.page-portal .ss-collapse-nav__links
	.ss-button.ss-primary:hover,
.page-portal .ss-collapse-nav__links
	.ss-button.ss-primary:focus-visible
{
	color:#ffffff;

	background:
		linear-gradient(
			135deg,
			#204dcc 0%,
			#326fe8 100%
		);

	box-shadow:
		0 7px 18px rgba(39,87,223,.32);

	transform:translateY(-1px);
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width:767.98px)
{
	.page-portal .ss-collapse-nav
	{
		min-height:64px;
		padding-block:6px;
	}

	.page-portal .ss-app-header__brand
	{
		gap:10px;
	}

	.page-portal .ss-app-header__logo
	{
		height:44px;
	}

	/*
		หน้าจอเล็กใช้ขนาดเดิม
	*/
	.page-portal .ss-app-header__organization
	{
		font-size:var(--cn-font-size-sm);
		white-space:normal;
	}

	.page-portal .ss-app-header__system
	{
		font-size:var(--cn-font-size-xs);
		white-space:normal;
	}

	.page-portal .ss-collapse-nav__menu
	{
		margin-block-start:6px;
		padding-block:10px;

		background:
			rgba(174,193,214,.72);

		border-block-start:
			1px solid rgba(255,255,255,.34);

		-webkit-backdrop-filter:
			blur(14px);

		backdrop-filter:
			blur(14px);
	}
}

/* ============================================================
   PORTAL HERO
============================================================ */

.page-portal .portal-hero
{
	position:relative;
	isolation:isolate;

	width:100vw;
	margin-inline:calc(50% - 50vw);
	
	background:
		radial-gradient(circle at 80% 20%, rgba(255,255,255,0.6), transparent 40%),
		linear-gradient(135deg,#e0f2fe 0%,#bfdbfe 50%,#dbeafe 100%);
	padding:30px 10px;
	position:relative;
	overflow:hidden;
}


/* ============================================================
   HERO DECORATION
============================================================ */

.page-portal .portal-hero::before
{
	content:"";
	position:absolute;
	width:500px;
	height:500px;
	top:-150px;
	right:-150px;
	border-radius:50%;
	background: radial-gradient(
		circle,
		rgba(255,255,255,0.75) 0%,
		rgba(173,216,255,0.45) 40%,
		transparent 70%
	);
	filter: blur(20px);
	z-index:0;
}

.page-portal .portal-hero::after
{
	content:"";
	position:absolute;
	width:100%;
	height:150px;
	bottom:0;
	left:0;
	background:url("data:image/svg+xml,%3Csvg width='1440' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239bdcff' fill-opacity='0.35' d='M0,96L60,101.3C120,107,240,117,360,117.3C480,117,600,107,720,90.7C840,75,960,53,1080,48C1200,43,1320,53,1380,58.7L1440,64V150H0Z'%3E%3C/path%3E%3C/svg%3E");
	background-size:cover;
	background-repeat:no-repeat;
	z-index:0;
}


/* ============================================================
   HERO LAYOUT
============================================================ */

.page-portal .portal-hero__layout
{
	position:relative;
	z-index:1;

	display:grid;
	grid-template-columns:
		minmax(170px,5fr)
		minmax(0,7fr);

	align-items:center;
	gap:var(--cn-space-xl);

	width:100%;
}

.page-portal .portal-hero__media
{
	display:flex;
	align-items:center;
	justify-content:center;

	min-width:0;
}

.page-portal .portal-hero__content
{
	min-width:0;
}


/* ============================================================
   HERO IMAGE
============================================================ */

.page-portal .portal-hero__image
{
	display:block;

	width:auto;
	max-width:100%;
	max-height:150px;

	margin-inline:auto;

	object-fit:contain;

	filter:
		drop-shadow(
			0 12px 20px rgba(48,73,104,.14)
		);
}


/* ============================================================
   HERO TYPOGRAPHY
============================================================ */

.page-portal .portal-hero__content .ss-page__title
{
	margin:0;

	color:#253448;

	font-size:clamp(18px,2vw,28px);

	font-weight:500;
	line-height:1.3;
}

.page-portal .portal-hero__content .ss-page__subtitle
{
	margin:0;

	color:#46576d;

	font-size:
		clamp(14px,1.25vw,18px);

	font-weight:500;
	line-height:1.65;
}

.page-portal .portal-hero__content .ss-color-soft
{
	margin:0;

	color:#68798c;

	font-size:15px;
	line-height:1.65;
}


/* ============================================================
   TABLET / MOBILE
============================================================ */

@media (max-width:767.98px)
{
	.page-portal .portal-hero
	{
		padding:28px 0 48px;
	}

	.page-portal .portal-hero::before
	{
		top:-120px;
		right:-180px;

		width:360px;
		height:360px;
	}

	.page-portal .portal-hero::after
	{
		height:72px;
	}

	.page-portal .portal-hero__layout
	{
		grid-template-columns:
			minmax(90px,4fr)
			minmax(0,8fr);

		gap:var(--cn-space-md);
	}

	.page-portal .portal-hero__image
	{
		max-height:100px;
	}

	.page-portal .portal-hero__content .ss-page__title
	{
		font-size:var(--cn-font-size-lg);
		line-height:1.35;
	}

	.page-portal .portal-hero__content .ss-page__subtitle
	{
		font-size:var(--cn-font-size-sm);
		line-height:1.5;
	}

	.page-portal .portal-hero__content .ss-color-soft
	{
		font-size:var(--cn-font-size-xs);
		line-height:1.5;
	}
}


/* ============================================================
   EXTRA SMALL
============================================================ */

@media (max-width:480px)
{
	.page-portal .portal-hero
	{
		padding:22px 0 42px;
	}

	.page-portal .portal-hero__layout
	{
		grid-template-columns:
			minmax(72px,3fr)
			minmax(0,9fr);

		gap:var(--cn-space-sm);
	}

	.page-portal .portal-hero__image
	{
		max-height:82px;
	}

	.page-portal .portal-hero__content .ss-page__title
	{
		font-size:15px;
	}

	.page-portal .portal-hero__content .ss-page__subtitle
	{
		font-size:12px;
	}

	.page-portal .portal-hero__content .ss-color-soft
	{
		display:none;
	}
}

/* =========================================================
	PORTAL MAIN SERVICES
========================================================= */

.page-portal .portal-service-grid
{
	align-items:stretch;
	gap:var(--cn-space-lg);
}


/* =========================================================
	SERVICE CARD
========================================================= */

.page-portal .portal-service-card
{
	position:relative;

	display:flex;
	flex-direction:column;

	width:100%;
	height:100%;
	min-height:242px;

	overflow:hidden;

	border:1px solid rgba(148,163,184,.24);
	border-radius:14px;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,.98) 0%,
			rgba(255,255,255,.94) 58%,
			var(--portal-service-soft) 100%
		);

	box-shadow:
		0 10px 28px rgba(51,65,85,.06);

	transition:
		transform .22s ease,
		box-shadow .22s ease,
		border-color .22s ease;
}


/* แสงนุ่มบริเวณมุมขวาบน */
.page-portal .portal-service-card::before
{
	content:"";

	position:absolute;
	inset-block-start:-80px;
	inset-inline-end:-80px;

	width:190px;
	height:190px;

	border-radius:50%;

	background:
		radial-gradient(
			circle,
			var(--portal-service-glow) 0%,
			transparent 70%
		);

	pointer-events:none;
}


/* แสงจางบริเวณล่างซ้าย */
.page-portal .portal-service-card::after
{
	content:"";

	position:absolute;
	inset-inline-start:-70px;
	inset-block-end:-90px;

	width:180px;
	height:180px;

	border-radius:50%;

	background:
		radial-gradient(
			circle,
			rgba(255,255,255,.75) 0%,
			transparent 72%
		);

	pointer-events:none;
}


.page-portal .portal-service-card:hover
{
	transform:translateY(-4px);

	border-color:
		color-mix(
			in srgb,
			var(--portal-service-color) 30%,
			transparent
		);

	box-shadow:
		0 16px 34px rgba(51,65,85,.12);
}


/* =========================================================
	CARD BODY
========================================================= */

.page-portal .portal-service-card .ss-card__body
{
	position:relative;
	z-index:1;

	display:flex;
	align-items:center;
	justify-content:center;
	flex:1 1 auto;

	padding:38px 28px;
}


.page-portal .portal-service-card .ss-stack
{
	align-items:center;
	justify-content:center;

	width:100%;
	height:100%;

	text-align:center;
}


/* =========================================================
	ICON
========================================================= */

.page-portal .portal-service-card .fa
{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	width:70px;
	height:70px;

	margin-block-end:4px;

	border:1px solid
		color-mix(
			in srgb,
			var(--portal-service-color) 70%,
			transparent
		);

	border-radius:14px;

	background:
		linear-gradient(
			145deg,
			var(--portal-service-color) 0%,
			var(--portal-service-color-dark) 100%
		);

	color:#ffffff;

	font-size:26px;
	line-height:1;

	box-shadow:
		0 12px 22px
		color-mix(
			in srgb,
			var(--portal-service-color) 26%,
			transparent
		);

	transition:
		transform .22s ease,
		box-shadow .22s ease;
}


.page-portal .portal-service-card:hover .fa
{
	transform:
		translateY(-2px)
		scale(1.04);

	box-shadow:
		0 15px 26px
		color-mix(
			in srgb,
			var(--portal-service-color) 34%,
			transparent
		);
}


/* =========================================================
	TYPOGRAPHY
========================================================= */

.page-portal .portal-service-card .ss-card__title
{
	margin:0;

	color:#172033;

	font-size:18px;
	font-weight:600;
	line-height:1.45;

	text-align:center;
}


.page-portal .portal-service-card .ss-color-soft
{
	margin:0;

	color:#64748b;

	font-size:14px;
	line-height:1.65;

	text-align:center;
}


/* =========================================================
	COLOR VARIANTS
========================================================= */

.page-portal .portal-service-card--blue
{
	--portal-service-color:#3478f6;
	--portal-service-color-dark:#2862dc;
	--portal-service-soft:rgba(219,234,254,.54);
	--portal-service-glow:rgba(96,165,250,.20);
}


.page-portal .portal-service-card--teal
{
	--portal-service-color:#16b8a8;
	--portal-service-color-dark:#07988d;
	--portal-service-soft:rgba(204,251,241,.54);
	--portal-service-glow:rgba(45,212,191,.20);
}


.page-portal .portal-service-card--purple
{
	--portal-service-color:#8147f5;
	--portal-service-color-dark:#6825dd;
	--portal-service-soft:rgba(237,233,254,.58);
	--portal-service-glow:rgba(167,139,250,.22);
}


/* =========================================================
	TABLET / MOBILE
========================================================= */

@media (max-width:991.98px)
{
	.page-portal .portal-service-card
	{
		min-height:220px;
	}

	.page-portal .portal-service-card .ss-card__body
	{
		padding:30px 22px;
	}
}


@media (max-width:767.98px)
{
	.page-portal .portal-service-grid
	{
		gap:var(--cn-space-md);
	}

	.page-portal .portal-service-card
	{
		min-height:0;
	}

	.page-portal .portal-service-card .ss-card__body
	{
		padding:26px 20px;
	}

	.page-portal .portal-service-card .fa
	{
		width:60px;
		height:60px;

		font-size:23px;
	}

	.page-portal .portal-service-card .ss-card__title
	{
		font-size:17px;
	}
}

/* =========================================================
	PORTAL DOWNLOAD CARD
========================================================= */

.page-portal .portal-download-card
{
	overflow:hidden;

	border:1px solid rgba(148,163,184,.24);
	border-radius:14px;

	background:
		linear-gradient(
			135deg,
			#ffffff 0%,
			#fbfdff 55%,
			#eef5ff 100%
		);

	box-shadow:
		0 10px 28px rgba(51,65,85,.06);
}


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

.page-portal .portal-download-card__header
{
	padding:24px 30px 10px;

	border-bottom:0;
	background:transparent;
}

.page-portal .portal-download-card__header .ss-card__title
{
	display:flex;
	align-items:center;
	gap:10px;

	margin:0;

	color:#172033;

	font-size:20px;
	font-weight:600;
}

.page-portal .portal-download-card__header .ss-card__title .fa
{
	color:#111827;
	font-size:17px;
}


/* =========================================================
	BODY
========================================================= */

.page-portal .portal-download-card__body
{
	padding:12px 34px 30px;
}

.page-portal .portal-download-layout
{
	align-items:center;
	gap:var(--cn-space-lg);
}


/* =========================================================
	QR CODE
========================================================= */

.page-portal .portal-download-qr
{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:0;
}

.page-portal .portal-download-qr img,
.page-portal .portal-download-qr svg,
.page-portal .portal-download-qr canvas
{
	display:block;

	width:150px;
	max-width:100%;
	height:auto;

	object-fit:contain;
}


/* =========================================================
	CONTENT
========================================================= */

.page-portal .portal-download-content
{
	min-width:0;
}

.page-portal .portal-download-brand
{
	align-items:center;
	gap:16px;
}

.page-portal .portal-download-logo
{
	display:block;

	width:70px;
	height:70px;

	padding:8px;

	border-radius:14px;

	background:#ffffff;

	object-fit:contain;

	box-shadow:
		0 8px 20px rgba(51,65,85,.10);
}

.page-portal .portal-download-name
{
	color:#3478f6;

	font-size:15px;
	font-weight:500;
	line-height:1.55;
}


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

.page-portal .portal-download-list
{
	display:grid;
	gap:8px;

	margin:0;
	padding-inline-start:20px;

	color:#53657a;

	font-size:14px;
	line-height:1.55;
}

.page-portal .portal-download-list li
{
	padding-inline-start:4px;
}

.page-portal .portal-download-list li::marker
{
	color:#53657a;
}


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

.page-portal .portal-download-actions
{
	gap:10px;
	align-items:center;
}

.page-portal .portal-download-actions .ss-button
{
	min-height:42px;

	padding-inline:18px;

	border-radius:8px;

	font-weight:500;
}

.page-portal .portal-download-actions .ss-button.ss-primary
{
	background:
		linear-gradient(
			135deg,
			#2f6df4 0%,
			#376ff0 100%
		);

	border-color:#2f6df4;
	color:#ffffff;

	box-shadow:
		0 7px 16px rgba(47,109,244,.20);
}

.page-portal .portal-download-actions .ss-button.ss-primary:hover
{
	background:
		linear-gradient(
			135deg,
			#255fde 0%,
			#2e63dc 100%
		);

	border-color:#255fde;
}

.page-portal .portal-download-actions .ss-button.ss-light
{
	background:#ffffff;
	border-color:#7b8797;
	color:#59697d;
	box-shadow:none;
}

.page-portal .portal-download-actions .ss-button.ss-light:hover
{
	background:#f8fafc;
	border-color:#526173;
	color:#334155;
}

/* =========================================================
	DOWNLOAD DOCUMENT / VIDEO CARDS
========================================================= */

.page-portal .portal-download-subcard
{
	height:100%;

	border:1px solid rgba(148,163,184,.22);
	border-radius:14px;

	background:
		linear-gradient(
			135deg,
			#ffffff 0%,
			#fbfdff 100%
		);

	box-shadow:
		0 10px 26px rgba(51,65,85,.07);
}

.page-portal .portal-download-subcard .ss-card__header
{
	padding:24px 30px 14px;

	border-bottom:0;
	background:transparent;
}

.page-portal .portal-download-subcard .ss-card__title
{
	display:flex;
	align-items:center;
	gap:10px;

	margin:0;

	color:#172033;
	font-size:20px;
	font-weight:600;
}

.page-portal .portal-download-subcard .ss-card__body
{
	padding:8px 30px 28px;
}


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

.page-portal .portal-download-list
{
	display:grid;
	gap:0;
}


/* =========================================================
	DOWNLOAD ITEM
========================================================= */

.page-portal .portal-download-item
{
	display:grid;
	grid-template-columns:42px minmax(0,1fr) auto;
	align-items:center;
	gap:14px;

	min-height:66px;
	padding:10px 12px;

	border-bottom:1px solid rgba(148,163,184,.16);

	color:#283548;
	text-decoration:none;

	transition:
		background-color .18s ease,
		transform .18s ease;
}

.page-portal .portal-download-item:last-child
{
	border-bottom:0;
}

.page-portal .portal-download-item:hover
{
	background:rgba(248,250,252,.9);
	transform:translateX(2px);
	text-decoration:none;
}


/* =========================================================
	ITEM ICON
========================================================= */

.page-portal .portal-download-item__icon
{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	width:38px;
	height:38px;

	border-radius:11px;

	font-size:16px;
	line-height:1;
}

.page-portal .portal-download-item--document
	.portal-download-item__icon
{
	background:#dbeafe;
	color:#2f6df4;
}

.page-portal .portal-download-item--video
	.portal-download-item__icon
{
	background:#fee2e2;
	color:#dc2626;
}


/* =========================================================
	ITEM TEXT
========================================================= */

.page-portal .portal-download-item__title
{
	min-width:0;

	color:#344257;
	font-size:14px;
	font-weight:400;
	line-height:1.5;
}


/* =========================================================
	ITEM ACTION
========================================================= */

.page-portal .portal-download-item__action
{
	color:#315efb;

	font-size:13px;
	font-weight:500;
	white-space:nowrap;
}

.page-portal .portal-download-item:hover
	.portal-download-item__action
{
	text-decoration:underline;
}


/* =========================================================
	MOBILE
========================================================= */

@media (max-width:767.98px)
{
	.page-portal .portal-download-subcard .ss-card__header
	{
		padding:20px 18px 10px;
	}

	.page-portal .portal-download-subcard .ss-card__body
	{
		padding:6px 18px 20px;
	}

	.page-portal .portal-download-item
	{
		grid-template-columns:38px minmax(0,1fr);
		gap:12px;

		padding-inline:6px;
	}

	.page-portal .portal-download-item__action
	{
		grid-column:2;

		margin-top:-4px;
	}
}


/* =========================================================
	TABLET
========================================================= */

@media (max-width:991.98px)
{
	.page-portal .portal-download-card__header
	{
		padding-inline:24px;
	}

	.page-portal .portal-download-card__body
	{
		padding-inline:24px;
	}

	.page-portal .portal-download-qr img,
	.page-portal .portal-download-qr svg,
	.page-portal .portal-download-qr canvas
	{
		width:140px;
	}
}


/* =========================================================
	MOBILE
========================================================= */

@media (max-width:767.98px)
{
	.page-portal .portal-download-card__header
	{
		padding:20px 18px 8px;
	}

	.page-portal .portal-download-card__body
	{
		padding:12px 18px 22px;
	}

	.page-portal .portal-download-layout
	{
		gap:var(--cn-space-md);
	}

	.page-portal .portal-download-qr
	{
		padding-block:8px;
	}

	.page-portal .portal-download-brand
	{
		flex-direction:column;
		align-items:center;

		text-align:center;
	}

	.page-portal .portal-download-name
	{
		text-align:center;
	}

	.page-portal .portal-download-actions
	{
		flex-direction:column;
		align-items:stretch;
	}

	.page-portal .portal-download-actions .ss-button
	{
		width:100%;
	}
}

/* =========================================================
	PORTAL CONTACT
	ใช้ SS Container / Stack / Alignment เดิม
========================================================= */

.page-portal .portal-contact
{
	width:100vw;
	margin-inline:calc(50% - 50vw);

	border-top:1px solid rgba(148,163,184,.28);

	background:
		linear-gradient(
			180deg,
			#e5e8ed 0%,
			#d9dde3 100%
		);
}


/* =========================================================
	CONTACT CONTENT
========================================================= */

.page-portal .portal-contact__content
{
	padding-block:44px 54px;

	color:#172033;
	text-align:center;
}


/* =========================================================
	TITLE
========================================================= */

.page-portal .portal-contact__title
{
	margin:0;

	color:#172033;

	font-size:clamp(24px,2vw,32px);
	font-weight:600;
	line-height:1.3;
}


/* =========================================================
	CONTACT DETAILS
========================================================= */

.page-portal .portal-contact__details
{
	color:#283548;

	font-size:14px;
	line-height:1.65;
}

.page-portal .portal-contact__details p
{
	margin:0;
}

.page-portal .portal-contact__details .fa
{
	width:18px;

	color:#172033;

	text-align:center;
}

.page-portal .portal-contact__separator
{
	margin-inline:8px;

	color:#64748b;
}


/* =========================================================
	LINE CONTACT
========================================================= */

.page-portal .portal-contact__line
{
	margin-block-start:4px;

	color:#172033;

	font-size:14px;
	line-height:1.55;
}

.page-portal .portal-contact__line strong
{
	font-weight:600;
}

.page-portal .portal-contact__line .fa
{
	margin-inline-end:5px;
}


/* =========================================================
	QR CODE
========================================================= */

.page-portal .portal-contact__qr
{
	display:block;

	width:120px;
	height:120px;

	margin-block-start:2px;
	margin-inline:auto;

	background:#ffffff;
	object-fit:contain;
}

/* =========================================================
	MOBILE
========================================================= */

@media (max-width:767.98px)
{
	.page-portal .portal-contact__content
	{
		padding-block:34px 40px;
		padding-inline:8px;
	}

	.page-portal .portal-contact__title
	{
		font-size:24px;
	}

	.page-portal .portal-contact__details,
	.page-portal .portal-contact__line
	{
		font-size:13px;
	}

	.page-portal .portal-contact__separator
	{
		display:none;
	}

	.page-portal .portal-contact__details p:nth-child(2)
	{
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:center;
		gap:4px 6px;
	}
}

/* =========================================================
	PORTAL FOOTER
	ใช้โครงสร้าง SS เดิมและปรับเฉพาะหน้า Portal
========================================================= */

.page-portal .portal-footer
{
	width:100vw;
	margin:0;
	margin-inline:calc(50% - 50vw);
	padding:0;

	border:0;
	background:#20252a;
}

.page-portal .portal-footer > .ss-container
{
	margin:0 auto;
	padding-block:0;
}

.page-portal .portal-footer__content
{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:2px;

	min-height:54px;
	margin:0;
	padding:8px 0;

	text-align:center;
}

.page-portal .portal-footer .ss-color-soft
{
	display:block;

	margin:0;

	color:rgba(255,255,255,.92);
	font-size:12px;
	line-height:1.45;
	text-align:center;
}