/* ==========================================================================
   Ariya – design tokens + base. Every rule is scoped to our widget roots,
   so nothing reaches the theme or other plugins. Rules use two classes
   (root + part) so theme / Elementor kit styles (e.g. ".elementor-kit-6 h2",
   "button:hover") never win over the design.
   ========================================================================== */

:root {
	--ar-red: #e50019;
	--ar-ink: #222222;
	--ar-text: #777777;
	--ar-muted: #8e8e8e;
	--ar-pill: #ededed;
	--ar-dark: #333333;
	--ar-black: #0d0d0d;
	--ar-white: #ffffff;
	--ar-font: 'Kanit', sans-serif;
	--ar-wide: 1440px;  /* cards, company block, service centers */
	--ar-box: 1140px;   /* header, numbers, red bar */
	--ar-foot: 1280px;  /* footer columns */
	--ar-gutter: 20px;
}

.ar-header, .ar-footer, .ar-hero, .ar-stitle, .ar-brands, .ar-company,
.ar-stats, .ar-services, .ar-branches, .ar-band,
.ar-phero, .ar-pintro, .ar-mlist, .ar-mtop, .ar-mrows,
.ar-fbox, .ar-spares, .ar-spop, .ar-tvid, .ar-ifeat, .ar-mrow, .ar-tline, .ar-contact {
	font-family: var(--ar-font);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}
:is(.ar-header, .ar-footer, .ar-hero, .ar-stitle, .ar-brands, .ar-company, .ar-stats, .ar-services, .ar-branches, .ar-band, .ar-phero, .ar-pintro, .ar-mlist, .ar-mtop, .ar-mrows, .ar-fbox, .ar-spares, .ar-spop, .ar-tvid, .ar-ifeat, .ar-mrow, .ar-tline, .ar-contact) *,
:is(.ar-header, .ar-footer, .ar-hero, .ar-stitle, .ar-brands, .ar-company, .ar-stats, .ar-services, .ar-branches, .ar-band, .ar-phero, .ar-pintro, .ar-mlist, .ar-mtop, .ar-mrows, .ar-fbox, .ar-spares, .ar-spop, .ar-tvid, .ar-ifeat, .ar-mrow, .ar-tline, .ar-contact) *::before,
:is(.ar-header, .ar-footer, .ar-hero, .ar-stitle, .ar-brands, .ar-company, .ar-stats, .ar-services, .ar-branches, .ar-band, .ar-phero, .ar-pintro, .ar-mlist, .ar-mtop, .ar-mrows, .ar-fbox, .ar-spares, .ar-spop, .ar-tvid, .ar-ifeat, .ar-mrow, .ar-tline, .ar-contact) *::after {
	box-sizing: inherit;
}
:is(.ar-header, .ar-footer, .ar-hero, .ar-stitle, .ar-brands, .ar-company, .ar-stats, .ar-services, .ar-branches, .ar-band, .ar-phero, .ar-pintro, .ar-mlist, .ar-mtop, .ar-mrows, .ar-fbox, .ar-spares, .ar-spop, .ar-tvid, .ar-ifeat, .ar-mrow, .ar-tline, .ar-contact) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, figure) {
	margin: 0;
	padding: 0;
	font-family: var(--ar-font);
	letter-spacing: normal;
	text-transform: none;
}
:is(.ar-header, .ar-footer, .ar-hero, .ar-stitle, .ar-brands, .ar-company, .ar-stats, .ar-services, .ar-branches, .ar-band, .ar-phero, .ar-pintro, .ar-mlist, .ar-mtop, .ar-mrows, .ar-fbox, .ar-spares, .ar-spop, .ar-tvid, .ar-ifeat, .ar-mrow, .ar-tline, .ar-contact) :is(ul, ol) {
	list-style: none;
}
:is(.ar-header, .ar-footer, .ar-hero, .ar-stitle, .ar-brands, .ar-company, .ar-stats, .ar-services, .ar-branches, .ar-band, .ar-phero, .ar-pintro, .ar-mlist, .ar-mtop, .ar-mrows, .ar-fbox, .ar-spares, .ar-spop, .ar-tvid, .ar-ifeat, .ar-mrow, .ar-tline, .ar-contact) a {
	color: inherit;
	text-decoration: none;
	transition: color .2s, background-color .2s, border-color .2s;
}
:is(.ar-header, .ar-footer, .ar-hero, .ar-stitle, .ar-brands, .ar-company, .ar-stats, .ar-services, .ar-branches, .ar-band, .ar-phero, .ar-pintro, .ar-mlist, .ar-mtop, .ar-mrows, .ar-fbox, .ar-spares, .ar-spop, .ar-tvid, .ar-ifeat, .ar-mrow, .ar-tline, .ar-contact) img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
/* Theme button styles off (Hello: border + pink hover). */
:is(.ar-header, .ar-footer, .ar-hero, .ar-stitle, .ar-brands, .ar-company, .ar-stats, .ar-services, .ar-branches, .ar-band, .ar-phero, .ar-pintro, .ar-mlist, .ar-mtop, .ar-mrows, .ar-fbox, .ar-spares, .ar-spop, .ar-tvid, .ar-ifeat, .ar-mrow, .ar-tline, .ar-contact) button,
:is(.ar-header, .ar-footer, .ar-hero, .ar-stitle, .ar-brands, .ar-company, .ar-stats, .ar-services, .ar-branches, .ar-band, .ar-phero, .ar-pintro, .ar-mlist, .ar-mtop, .ar-mrows, .ar-fbox, .ar-spares, .ar-spop, .ar-tvid, .ar-ifeat, .ar-mrow, .ar-tline, .ar-contact) button:hover,
:is(.ar-header, .ar-footer, .ar-hero, .ar-stitle, .ar-brands, .ar-company, .ar-stats, .ar-services, .ar-branches, .ar-band, .ar-phero, .ar-pintro, .ar-mlist, .ar-mtop, .ar-mrows, .ar-fbox, .ar-spares, .ar-spop, .ar-tvid, .ar-ifeat, .ar-mrow, .ar-tline, .ar-contact) button:focus {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
:is(.ar-header, .ar-footer, .ar-hero, .ar-stitle, .ar-brands, .ar-company, .ar-stats, .ar-services, .ar-branches, .ar-band, .ar-phero, .ar-pintro, .ar-mlist, .ar-mtop, .ar-mrows, .ar-fbox, .ar-spares, .ar-spop, .ar-tvid, .ar-ifeat, .ar-mrow, .ar-tline, .ar-contact) :focus-visible {
	outline: 2px solid var(--ar-red);
	outline-offset: 2px;
}

.ar-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: none;
	vertical-align: -0.125em;
	fill: currentColor;
}

/* Red pill button (old site: "ดูเพิ่มเติม"). */
:is(.ar-brands, .ar-company) .ar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	padding: 6px 30px;
	border: 1px solid var(--ar-red);
	border-radius: 30px;
	background: var(--ar-red);
	color: var(--ar-white);
	font-family: var(--ar-font);
	font-size: 17px;
	font-weight: 500;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
}
:is(.ar-brands, .ar-company) .ar-btn:hover,
:is(.ar-brands, .ar-company) .ar-btn:focus-visible {
	background: var(--ar-white);
	color: var(--ar-red);
}

p.ar-editor-notice.ar-editor-notice {
	position: relative;
	z-index: 5;
	margin: 8px;
	padding: 8px 12px;
	border-radius: 4px;
	background: #fff3cd;
	color: #664d03;
	font: 13px/1.4 sans-serif;
}

@media (prefers-reduced-motion: reduce) {
	:is(.ar-hero, .ar-services, .ar-brands, .ar-header, .ar-stats, .ar-company, .ar-stitle, .ar-fbox, .ar-spares, .ar-spop, .ar-tvid, .ar-ifeat, .ar-mrow, .ar-tline, .ar-contact) * {
		transition-duration: 0s !important;
		animation-duration: 0s !important;
	}
}
