/* PASSAWARN - additions loaded after style.css (style.css itself is not edited). */

/* Images: fill their frames without distortion */
.bxslider-index img, #services-box > img { object-fit: cover; object-position: center; }
.bxslider-partner img { object-fit: contain; }

/* Floating LINE consultation button (markup: psw_line_button.php) */
.psw-line-btn {
	position: fixed;
	right: 16px;
	bottom: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 10000;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0 20px 0 16px;
	border: 2px solid #06C755;
	border-radius: 0;
	background-color: #06C755;
	color: #fff;
	font-family: 'ubuntu-content', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: normal;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
html[lang="th"] .psw-line-btn { font-family: 'thai-bold-content', Arial, Helvetica, sans-serif; }
.psw-line-btn:hover,
.psw-line-btn:focus-visible,
.psw-line-btn:active {
	border-color: #06C755;
	background-color: #fff;
	color: #06C755;
	text-decoration: none;
}
.psw-line-btn:focus { outline: none; }
.psw-line-btn:focus-visible { outline: 3px solid #003056; outline-offset: 2px; }
.psw-line-btn-icon path,
.psw-menu-line-icon path { fill: currentColor; }
.psw-line-btn-icon { flex: 0 0 auto; margin-right: 8px; }

/* Keep the footer text clear of the floating button */
.info-page-footer { padding-bottom: 0; }
@media (min-width: 768px) {
	.info-page-footer .container-fluid { padding-right: 240px; }
}
@media (max-width: 767.98px) {
	.info-page-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* Mobile fixes */
html, body { max-width: 100%; }
img { max-width: 100%; }
.psw-line-btn-icon { max-width: none; }


@media (max-width: 767.98px) {
	/* hamburger and flags in the mobile menu: >= 44px touch targets */
	.about-us-header-box .navbar-toggle { min-width: 48px; min-height: 48px; }
	#header-navbar-collapse-menu-second .navbar-nav > li > a { display: block; min-height: 44px; line-height: 24px; padding-top: 10px; padding-bottom: 10px; font-size: 16px; }
	#header-navbar-collapse-menu-second .navbar-flag-pic a { padding-top: 8px; padding-bottom: 8px; }
	/* services drop-down menu */
	.services-toggle-menu-box button { min-width: 48px; height: 44px; font-size: 16px; }
	.services-toggle-menu-box > ul li a { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
}

@media (max-width: 767.98px) {
	/* form inputs 16px or larger: stops iOS Safari from zooming on focus */
	.contact-send-information .contact-send-form input,
	.contact-send-information .contact-send-form textarea { font-size: 16px; min-height: 44px; }
	.contact-send-information .contact-send-form .submit-bt { min-height: 48px; }
	/* readable footer text */
	.info-page-footer p, .copyright-footer { font-size: 14px; }
}

/* ==========================================================================
   Navigation: EN | TH pills (desktop) and full-screen menu panel (mobile)
   Markup: index.php / service_header.php. Open/close: Bootstrap collapse on
   #header-navbar-collapse-menu-second; js/psw-nav.js sets html.psw-menu-open.
   The hamburger (and so the panel) is used on phones only (below 768px; 767.98px leaves no gap at fractional widths from browser zoom); from 768px the original top menu is used.
   ========================================================================== */

/* Language pills (shared) */
.psw-lang-group { display: flex; align-items: center; }
.psw-lang-pill,
#header-navbar-collapse-menu .psw-lang a.psw-lang-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 2px solid #fff;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-weight: 700;
	letter-spacing: 1px;
	text-decoration: none;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.psw-lang-pill:hover,
.psw-lang-pill:focus,
#header-navbar-collapse-menu .psw-lang a.psw-lang-pill:hover,
#header-navbar-collapse-menu .psw-lang a.psw-lang-pill:focus {
	border-color: #fff;
	background-color: #fff;
	color: #003056;
	text-decoration: none;
}
.psw-lang-pill.is-current,
.psw-lang-pill.is-current:hover,
.psw-lang-pill.is-current:focus,
#header-navbar-collapse-menu .psw-lang a.psw-lang-pill.is-current,
#header-navbar-collapse-menu .psw-lang a.psw-lang-pill.is-current:hover {
	border-color: #fff;
	background-color: #fff;
	color: #003056;
}
.psw-lang-pill.is-current:hover,
.psw-lang-pill.is-current:focus-visible,
#header-navbar-collapse-menu .psw-lang a.psw-lang-pill.is-current:hover,
#header-navbar-collapse-menu .psw-lang a.psw-lang-pill.is-current:focus-visible {
	border-color: #fff;
	background-color: #003056;
	color: #fff;
}
.psw-lang-pill:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Desktop top menu: pills sit on the menu line */
#header-navbar-collapse-menu .navbar-nav > li.psw-lang { display: flex; align-items: center; height: 100px; padding-left: 12px; }
#header-navbar-collapse-menu .psw-lang-pill { min-width: 44px; height: 32px; padding: 0 12px; margin-left: 6px; font-size: 14px; line-height: 1; }
#header-navbar-collapse-menu .psw-lang-pill:first-child { margin-left: 0; }

/* Phones: hamburger + full-screen panel */
@media (max-width: 767.98px) {
	/* the logo link and the hamburger stay above the panel */
	header.about-us-header-box .info-header-content-box > a { position: relative; z-index: 3; }
	header.about-us-header-box .navbar-toggle {
		position: relative;
		z-index: 3;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		min-width: 48px;
		min-height: 48px;
		margin-top: 28px;
		margin-right: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}
	header.about-us-header-box .navbar-toggle:hover,
	header.about-us-header-box .navbar-toggle:focus { background: transparent; }
	header.about-us-header-box .navbar-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 0; }
	header.about-us-header-box .navbar-toggle .icon-bar {
		width: 28px;
		height: 3px;
		border-radius: 2px;
		background-color: #fff;
		-webkit-transition: transform 0.2s ease, opacity 0.2s ease;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}
	header.about-us-header-box .navbar-toggle .icon-bar + .icon-bar { margin-top: 6px; }
	/* open state: Bootstrap removes .collapsed from the button -> X */
	header.about-us-header-box .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) { -webkit-transform: translateY(9px) rotate(45deg); transform: translateY(9px) rotate(45deg); }
	header.about-us-header-box .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) { opacity: 0; }
	header.about-us-header-box .navbar-toggle:not(.collapsed) .icon-bar:nth-child(4) { -webkit-transform: translateY(-9px) rotate(-45deg); transform: translateY(-9px) rotate(-45deg); }

	/* while open: header pinned to the top of the screen, page does not scroll, floating LINE button hidden */
	html.psw-menu-open header.about-us-header-box { position: fixed; top: 0; left: 0; right: 0; z-index: 10001; }
	html.psw-menu-open,
	html.psw-menu-open body { overflow: hidden; }
	html.psw-menu-open .psw-line-btn { display: none; }

	/* the panel */
	header.about-us-header-box #header-navbar-collapse-menu-second {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		box-sizing: border-box;
		width: auto;
		height: auto !important;
		margin: 0;
		padding: 112px 24px 32px;
		padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
		border: 0;
		box-shadow: none;
		background-color: #003056;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		-webkit-transition: opacity 0.2s ease;
		transition: opacity 0.2s ease;
	}
	header.about-us-header-box #header-navbar-collapse-menu-second.in { -webkit-animation: psw-menu-fade 0.2s ease; animation: psw-menu-fade 0.2s ease; }
	html:not(.psw-menu-open) header.about-us-header-box #header-navbar-collapse-menu-second.collapsing { opacity: 0; }
	@-webkit-keyframes psw-menu-fade { from { opacity: 0; } to { opacity: 1; } }
	@keyframes psw-menu-fade { from { opacity: 0; } to { opacity: 1; } }

	header.about-us-header-box #header-navbar-collapse-menu-second .navbar-nav { margin: 0; max-width: 560px; }
	header.about-us-header-box #header-navbar-collapse-menu-second .navbar-nav > li { float: none; }
	header.about-us-header-box #header-navbar-collapse-menu-second .navbar-nav > li > a {
		display: block;
		min-height: 56px;
		padding: 12px 4px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
		background: transparent;
		color: #fff;
		font-size: 20px;
		line-height: 32px;
		letter-spacing: 0.3px;
		text-transform: lowercase; /* labels are typed in capitals in the markup -> "About us" */
	}
	header.about-us-header-box #header-navbar-collapse-menu-second .navbar-nav > li > a::first-letter { text-transform: uppercase; }
	header.about-us-header-box #header-navbar-collapse-menu-second .navbar-nav > li > a:hover,
	header.about-us-header-box #header-navbar-collapse-menu-second .navbar-nav > li > a:focus,
	header.about-us-header-box #header-navbar-collapse-menu-second .navbar-nav > li > a:active {
		background-color: rgba(255, 255, 255, 0.08);
		color: #fff;
		text-decoration: none;
	}

	/* language switch + LINE button under the items */
	.psw-menu-extra { max-width: 560px; margin-top: 28px; }
	.psw-menu-extra .psw-lang-group { justify-content: flex-start; }
	.psw-menu-extra .psw-lang-pill { min-width: 72px; min-height: 44px; padding: 0 22px; margin-right: 10px; font-size: 16px; }
	.psw-menu-line {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		min-height: 52px;
		margin-top: 20px;
		padding: 0 20px;
		border: 2px solid #06C755;
		border-radius: 0;
		background-color: #06C755;
		color: #fff;
		font-family: 'ubuntu-content', Arial, Helvetica, sans-serif;
		font-size: 18px;
		font-weight: 400;
		line-height: 1.2;
		text-decoration: none;
		-webkit-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}
	html[lang="th"] .psw-menu-line { font-family: 'thai-bold-content', Arial, Helvetica, sans-serif; }
	.psw-menu-line:hover,
	.psw-menu-line:focus-visible,
	.psw-menu-line:active { border-color: #06C755; background-color: #fff; color: #06C755; text-decoration: none; }
	.psw-menu-line:focus { outline: none; }
	.psw-menu-line:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
	.psw-menu-line-icon { flex: 0 0 auto; max-width: none; margin-right: 8px; }
}
@media (min-width: 768px) {
	.psw-menu-extra { display: none; }
}

/* --------------------------------------------------------------------------
   Mobile panel: SERVICES row with the service pages as a nested list
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	header.about-us-header-box #header-navbar-collapse-menu-second .psw-sub-toggle {
		position: relative;
		display: block;
		width: 100%;
		min-height: 56px;
		margin: 0;
		padding: 12px 40px 12px 4px;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: 0;
		background: transparent;
		color: #fff;
		font-family: inherit;
		font-size: 20px;
		line-height: 32px;
		letter-spacing: 0.3px;
		text-align: left;
		cursor: pointer;
	}
	header.about-us-header-box #header-navbar-collapse-menu-second .psw-sub-toggle:hover,
	header.about-us-header-box #header-navbar-collapse-menu-second .psw-sub-toggle:focus { background-color: rgba(255, 255, 255, 0.08); }
	.psw-sub-toggle:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
	.psw-sub-label { display: block; text-transform: lowercase; }
	.psw-sub-label::first-letter { text-transform: uppercase; }
	.psw-sub-toggle::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 14px;
		width: 9px;
		height: 9px;
		margin-top: -7px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-transition: transform 0.2s ease, margin-top 0.2s ease;
		transition: transform 0.2s ease, margin-top 0.2s ease;
	}
	.psw-has-sub.is-open > .psw-sub-toggle::after { margin-top: -3px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }

	.psw-sub-list { display: none; margin: 0; padding: 0 0 0 16px; list-style: none; }
	.psw-has-sub.is-open > .psw-sub-list { display: block; }
	.psw-sub-list li { float: none; margin: 0; padding: 0; }
	.psw-sub-list a {
		display: block;
		min-height: 48px;
		padding: 12px 8px 12px 14px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		color: rgba(255, 255, 255, 0.85);
		font-size: 17px;
		line-height: 24px;
		text-decoration: none;
	}
	.psw-sub-list a:hover,
	.psw-sub-list a:focus,
	.psw-sub-list a:active { background-color: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }
	.psw-sub-list li.is-current > a { border-left: 3px solid #fff; padding-left: 11px; background-color: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 700; }

	/* the service pages are in the hamburger now: hide the separate MENU on the service pages */
	.services-toggle-menu-box { display: none; }
}

/* --------------------------------------------------------------------------
   Desktop: "Services" menu on the service pages (service_menu.php)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.services-toggle-menu-box { height: auto; min-height: 48px; margin-bottom: 16px; }
	.services-toggle-menu-box > button.hidetide-bold-content {
		float: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		min-height: 48px;
		height: auto;
		padding: 0 18px;
		border: 0;
		border-radius: 8px;
		background-color: #003056;
		color: #fff;
		font-size: 16px;
		line-height: 1.2;
		letter-spacing: normal;
		text-align: left;
		cursor: pointer;
	}
	.services-toggle-menu-box > button.hidetide-bold-content:hover,
	.services-toggle-menu-box > button.hidetide-bold-content:focus { border: 0; background-color: #2d4153; color: #fff; }
	.services-toggle-menu-box > button.hidetide-bold-content:focus-visible { outline: 3px solid #00a1da; outline-offset: 2px; }
	.services-toggle-menu-box > button.hidetide-bold-content::after {
		content: "";
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		margin: -4px 2px 0 12px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-transition: transform 0.2s ease, margin 0.2s ease;
		transition: transform 0.2s ease, margin 0.2s ease;
	}
	.services-toggle-menu-box.is-open > button.hidetide-bold-content::after { margin-top: 4px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }

	.services-toggle-menu-box > ul.services-toggle-menu-slide {
		top: 54px;
		left: 0;
		right: 0;
		margin: 0;
		overflow: hidden;
		border: 1px solid #d5dde4;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
	}
	.services-toggle-menu-box > ul.services-toggle-menu-slide > li { border-bottom: 1px solid #e5eaee; background: transparent; }
	.services-toggle-menu-box > ul.services-toggle-menu-slide > li:last-child { border-bottom: 0; }
	.services-toggle-menu-box > ul.services-toggle-menu-slide > li:hover { background-color: transparent; }
	.services-toggle-menu-box > ul.services-toggle-menu-slide > li > a {
		position: relative;
		display: block;
		min-height: 48px;
		padding: 12px 44px 12px 18px;
		color: #003056;
		font-size: 16px;
		line-height: 24px;
		text-decoration: none;
	}
	.services-toggle-menu-box > ul.services-toggle-menu-slide > li > a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 20px;
		width: 8px;
		height: 8px;
		margin-top: -5px;
		border-right: 2px solid #8a9aa8;
		border-top: 2px solid #8a9aa8;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.services-toggle-menu-box > ul.services-toggle-menu-slide > li > a:hover,
	.services-toggle-menu-box > ul.services-toggle-menu-slide > li > a:focus { background-color: #f1f5f8; color: #003056; text-decoration: none; }
	.services-toggle-menu-box > ul.services-toggle-menu-slide > li.is-current > a { background-color: #e6eef5; box-shadow: inset 4px 0 0 #003056; font-weight: 700; }
	.services-toggle-menu-box > ul.services-toggle-menu-slide > li.is-current > a::after { border-color: #003056; }
}

/* hide slider arrows while the mobile menu panel is open (they sat above it during the open animation) */
html.psw-menu-open .bx-controls-direction,
html.psw-menu-open .bx-pager { visibility: hidden; }

/* contact form: hidden field for bots (people never see it) */
.psw-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Home page hero slider (index.php, .bxslider-index)
   -------------------------------------------------------------------------- */

/* Arrows: navy square, white chevron drawn in CSS (replaces the bxSlider sprite) */
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-prev,
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-next {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border: 2px solid #003056;
	border-radius: 0;
	background: #003056 none;
	color: #fff;
	text-indent: -9999px;
	overflow: hidden;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-prev { left: 12px; }
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-next { right: 12px; }
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-prev:hover,
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-next:hover,
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-prev:focus-visible,
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-next:focus-visible {
	border-color: #003056;
	background: #fff none;
	color: #003056;
}
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-prev:focus,
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-next:focus { outline: none; }
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-prev:focus-visible,
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-next:focus-visible { outline: 3px solid #00a1da; outline-offset: 2px; }
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-prev::before,
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-next::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border-top: 3px solid currentColor;
	border-left: 3px solid currentColor;
	text-indent: 0;
}
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-prev::before { margin: -6px 0 0 -3px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.wrapper-index .bx-wrapper .bx-controls-direction a.bx-next::before { margin: -6px 0 0 -9px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }

/* Caption on phones: style.css hides .banner-container below 768px; show it left, scaled down, positioned from the top by the SMALL viewport height (svh) so it is in the first screen even while the browser bars are shown */
@media (max-width: 767.98px) {
	.wrapper-index .banner-container {
		display: block;
		left: 0;
		right: 0;
		top: 58vh;
		top: 58svh;
		bottom: auto;
		box-sizing: border-box;
		width: auto;
		max-width: calc(100% - 96px);
		padding-left: 16px;
		padding-right: 0;
		pointer-events: none;
	}
	.wrapper-index .ref-place-details-box { display: block; }
	.wrapper-index .ref-place-details-box br { display: none; }
	.wrapper-index .ref-place-details-box h4 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: 1px; }
	.wrapper-index .ref-place-details-box p { font-size: 15px; line-height: 1.3; letter-spacing: 0.8px; }
	.wrapper-index .ref-place-details-box .title-banner-box { display: table; max-width: 100%; box-sizing: border-box; padding: 8px 12px; }
	.wrapper-index .ref-place-details-box .place-banner-box { display: table; max-width: 100%; box-sizing: border-box; padding: 6px 12px; margin-top: 6px; }
	.wrapper-index .bx-wrapper .bx-controls-direction a.bx-prev { left: 8px; }
	.wrapper-index .bx-wrapper .bx-controls-direction a.bx-next { right: 8px; }
}

/* phones: slider dots to the left so the floating LINE button never covers them */
@media (max-width: 767.98px) {
  .wrapper-index .bx-wrapper .bx-pager { text-align: left; padding-left: 16px; }
}

/* phones (hamburger widths): simple solid navy top bar = logo + company name + hamburger.
   The dim overlay is removed; !important beats the inline colour the scroll script sets. */
@media (max-width: 767.98px) {
  header.about-us-header-box { background-color: #003056 !important; }
  header.about-us-header-box .info-header-content-box { height: 60px; padding-left: 14px; padding-right: 6px; display: flex; align-items: center; justify-content: flex-start; }
  header.about-us-header-box .info-header-content-box > a { flex: 0 1 auto; min-width: 0; }
  header.about-us-header-box .info-header-content-box > nav.navbar { flex: 0 0 auto; float: none; margin: 0; min-height: 0; border: 0; }
  header.about-us-header-box .info-header-content-box > nav.navbar,
  header.about-us-header-box .info-header-content-box > .navbar-header { margin-left: auto; }
  header.about-us-header-box .info-header-content-box .navbar-header { margin-right: 0 !important; }
  header.about-us-header-box .navbar-toggle { margin-right: 0 !important; }
  #header-navbar-collapse-menu-second { padding-top: 72px !important; }
  header.about-us-header-box .info-logo-container { display: flex; align-items: center; height: 60px; }
  header.about-us-header-box .info-logo-container > div { float: none; }
  header.about-us-header-box .info-logo-container .info-logo-box { width: auto; margin-top: 0; padding-right: 10px; border: none; }
  header.about-us-header-box .info-logo-box img { height: 40px; width: auto; max-width: none; }
  header.about-us-header-box .logo-name-box.header-company-name-hidden { display: block; padding-left: 0; color: #fff; line-height: 1.1; }
  header.about-us-header-box .info-logo-container .logo-name-box h3 { font-size: 17px; margin: 0 0 2px; letter-spacing: 1.25px; }
  header.about-us-header-box .info-logo-container .logo-name-box h4 { font-size: 10px; margin: 0; letter-spacing: 1.6px; }
  header.about-us-header-box .info-header-content-box .navbar-header { height: 60px; display: flex; align-items: center; }
  header.about-us-header-box .navbar-toggle { margin-top: 0; margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Tablet and desktop (768px and up): the ORIGINAL header from style.css with the
   top menu (6 items + EN|TH pills). style.css hides the top menu below 960px and
   shows the toggle; undo that here. No navy / transparent / shadow / position rules.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  header.about-us-header-box { overflow: hidden; }
  header.about-us-header-box .info-header-menu-box { display: block; }
  header.about-us-header-box .navbar-toggle { display: none; }
  /* bootstrap.min.css (customised) floats the menu only from 960px: do it from 768px */
  header.about-us-header-box #header-navbar-collapse-menu .navbar-nav { float: left; margin: 0; }
  header.about-us-header-box #header-navbar-collapse-menu .navbar-nav > li { float: left; }
  header.about-us-header-box #header-navbar-collapse-menu-second,
  header.about-us-header-box #header-navbar-collapse-menu-second.collapse.in,
  header.about-us-header-box #header-navbar-collapse-menu-second.collapsing { display: none !important; }
}

/* One row at every width from 768px: compress progressively, only where the original would wrap.
   (The header side padding is 10% in style.css, which is what runs out of room first.) */
@media (min-width: 768px) and (max-width: 1299.98px) {
  /* company name next to the logo: hidden below 1300px (style.css: below 1191px) */
  header.about-us-header-box .logo-name-box.header-company-name-hidden { display: none; }
  header.about-us-header-box .info-logo-container .info-logo-box { border: none; }
}
@media (min-width: 768px) and (max-width: 1059.98px) {
  header.about-us-header-box .info-header-content-box { padding-left: 3%; padding-right: 3%; }
}
@media (min-width: 768px) and (max-width: 899.98px) {
  header.about-us-header-box .info-header-content-box { padding-left: 16px; padding-right: 16px; }
  #header-navbar-collapse-menu .navbar-nav > li > a { padding: 0 7px; letter-spacing: 0.6px; }
  #header-navbar-collapse-menu .navbar-nav > li.psw-lang { padding-left: 8px; }
  #header-navbar-collapse-menu .psw-lang-pill { min-width: 40px; height: 40px; padding: 0 6px; margin-left: 4px; font-size: 13px; letter-spacing: 0.5px; }
}
@media (min-width: 768px) and (max-width: 799.98px) {
  #header-navbar-collapse-menu .navbar-nav > li > a { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   Home page on phones: no bar over the photo at the top of the page;
   solid navy once scrolled (html.psw-scrolled is set by js/psw-nav.js, > 60px; phones only).
   Service pages (header.services-header-box) keep the solid navy bar.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  header.about-us-header-box:not(.services-header-box) { background-color: transparent !important; }
  html.psw-scrolled header.about-us-header-box:not(.services-header-box) { background-color: #003056 !important; }
  header.about-us-header-box:not(.services-header-box) .logo-name-box { text-shadow: 0 0 2px rgba(0, 0, 0, 0.85), 0 1px 6px rgba(0, 0, 0, 0.6); }
  header.about-us-header-box:not(.services-header-box) .info-logo-box img { -webkit-filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.95)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55)); filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.95)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55)); }
  header.about-us-header-box:not(.services-header-box) .navbar-toggle { -webkit-filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6)); }
  /* keep the bar at the top while scrolling (transparent over the photo, navy once scrolled) */
  header.about-us-header-box:not(.services-header-box) { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1030; }
}

/* --------------------------------------------------------------------------
   Service pages: never scroll sideways. The .row inside the grey content box has -15px side margins
   and the box has no right padding (style.css, desktop rules; also in the 767.0-767.98px gap
   between style.css's 767px/768px queries at fractional zoom), so it ran 15px past the page.
   -------------------------------------------------------------------------- */
.services-type-content-box { overflow: hidden; }

/* --------------------------------------------------------------------------
   Social links (markup: psw_social.php; footer of every page + mobile menu panel)
   -------------------------------------------------------------------------- */
.psw-social { display: flex; align-items: center; }
.psw-social .psw-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	background-color: transparent;
	color: #fff;
	text-decoration: none;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.psw-social .psw-social-link svg { display: block; flex: 0 0 auto; width: 22px; height: 22px; max-width: none; }
.psw-social .psw-social-link:hover,
.psw-social .psw-social-link:focus-visible,
.psw-social .psw-social-link:active { background-color: #fff; color: #2A2C2B; text-decoration: none; }
.psw-social .psw-social-link:focus { outline: none; }
.psw-social .psw-social-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* footer: tablet/desktop = copyright left, developer credit and icons right (clear of the floating LINE button) */
@media (min-width: 768px) {
	.info-page-footer { height: auto; min-height: 44px; }
	.info-page-footer .container-fluid { display: flex; flex-wrap: wrap; align-items: center; }
	.info-page-footer .container-fluid::before,
	.info-page-footer .container-fluid::after { display: none; }
	.info-page-footer .footer-copyright-box { float: none; margin-right: auto; }
	.info-page-footer .footer-developer-name { float: none; }
	.info-page-footer .psw-social-footer { margin-left: 8px; margin-right: -11px; }
}
/* footer, tablet widths: copyright on its own row, then credit left and icons right */
@media (min-width: 768px) and (max-width: 1099.98px) {
	.info-page-footer .footer-copyright-box { flex: 0 0 100%; margin-right: 0; }
	.info-page-footer .footer-developer-name { margin-right: auto; }
}
/* footer: phones = a row under the credit, first icon lined up with the text */
@media (max-width: 767.98px) {
	.info-page-footer .psw-social-footer { margin: 4px 0 0 -11px; }
	/* mobile menu panel: centred row under the LINE button */
	.psw-social-menu { justify-content: center; margin-top: 20px; }
	.psw-social-menu .psw-social-link:hover,
	.psw-social-menu .psw-social-link:focus-visible,
	.psw-social-menu .psw-social-link:active { color: #003056; }
}

/* Contact section: address links inherit the text colour (markup: index.php .address-box) */
.address-box a { color: inherit; }
.address-box a:hover,
.address-box a:focus-visible { color: inherit; text-decoration: underline; }

/* Contact block: LINE, photo, phone, e-mail, optional Google Form (markup: psw_contact.php) */
.psw-contact { max-width: 760px; margin: 0 auto; text-align: center; }
.psw-contact-lead { margin: 0 0 18px; color: #fff; font-size: 17px; line-height: 1.5; text-align: center; }
.psw-contact-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.psw-contact .psw-contact-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	min-height: 48px;
	padding: 10px 18px;
	border: 1px solid #fff;
	border-radius: 0;
	background-color: transparent;
	color: #fff;
	font-family: 'ubuntu-content', Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.3;
	text-decoration: none;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
html[lang="th"] .psw-contact .psw-contact-btn,
html[lang="th"] .psw-contact-lead,
html[lang="th"] .psw-contact-chem { font-family: 'thai-bold-content', Arial, Helvetica, sans-serif; }
.psw-contact .psw-contact-btn svg { flex: 0 0 auto; max-width: none; }
.psw-contact .psw-contact-btn:hover,
.psw-contact .psw-contact-btn:focus-visible,
.psw-contact .psw-contact-btn:active {
	background-color: #fff;
	color: #2A2C2B;
	text-decoration: none;
}
.psw-contact .psw-contact-line { background-color: #06C755; border-color: #06C755; color: #fff; }
.psw-contact .psw-contact-line:hover,
.psw-contact .psw-contact-line:focus-visible,
.psw-contact .psw-contact-line:active {
	background-color: #fff;
	border-color: #06C755;
	color: #06C755;
}
.psw-contact .psw-contact-btn:focus { outline: none; }
.psw-contact .psw-contact-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.psw-gform { margin-top: 20px; background-color: #fff; }
.psw-gform iframe { display: block; width: 100%; }
.psw-contact-chem { margin: 16px 0 0; font-size: 15px; text-align: center; }
.psw-contact-chem a { color: #fff; text-decoration: none; }
.psw-contact-chem a:hover,
.psw-contact-chem a:focus-visible { color: #fff; text-decoration: underline; }
/* tablet/desktop: 2x2 grid (LINE + photo, then phone + e-mail) */
@media (min-width: 768px) {
	.psw-contact-actions { grid-template-columns: 1fr 1fr; gap: 12px; }
}