@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/*02.10.2023*/
:root{
	--c-black: #1F1F1F;
	--c-white:	#FFFFFF;
	--c-purple:	#4B49AC;
	--c-blue: #0C2B4B;
	--c-red: #F3797E;
	--c-light: #F8F9FD;

/*Color
________________________________*/
--c-primary:#F3BD00;
--c-secondary:#0C2B4B;
--c-tertiary:#757575;

/*BG Color
________________________________*/
--c-bg-primary:#F3BD00 ;
--c-bg-secondary:#0C2B4B;
--c-bg-tertiary:#757575;

/*Text Color
________________________________*/
--c-text-primary:#F3BD00 ;
--c-text-secondary:#0C2B4B;
--c-text-tertiary:#757575;

/*Font Size
________________________________*/
--font-h3: 1.3rem;
--font-h4: 1.1rem;
--font-h5: 1rem;
--font-h6: 0.8rem;
--font-p: 0.9rem;

/*Font Weight
________________________________*/
--font-weight-primary: 300;
--font-weight-secondary: 400;
--font-weight-tertiary: 500;

/*Border
________________________________*/
--border-radius: 0x;
}

.c-primary{
	color: var(--c-primary);
}
.c-secondary{
	color: var(--c-secondary);
}
.c-tertiary{
	color: var(--c-tertiary);
}

.c-bg-primary, .btn-primary {
	background-color: var(--c-bg-primary);
	border: 1px solid;
}

.c-bg-primary:hover, .btn-primary:hover {
	color: var(--c-primary);
	background-color: transparent;
	border: 1px solid var(--c-primary);
}

.c-bg-secondary, .btn-secondary{
	background-color: var(--c-bg-secondary);
}

/*Btn
________________________________*/
.btn {
	display: inline-block;
	font-weight: var(--font-weight-secondary);
	line-height: 1.5;
	color: var(--c-white);
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	border-radius: var(--border-radius);
	transition: .5s!important;
}

.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
	color: var(--c-white);
	background-color: var(--c-blue);
	border-color: var(--c-blue);
}

.btn-outline-primary {
	color: var(--c-white);
	border-color: var(--c-bg-primary);
}

.btn-outline-primary:hover{
	color: var(--c-white);
	background-color: var(--c-primary);
	border-color: var(--c-primary);
}

.btn-square {
	width: 38px;
	height: 38px;
}

body {
	margin: 0;
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: var(--font-p);
	font-weight: var(--font-weight-primary);
	line-height: var(--bs-body-line-height);
	color: var(--c-text-secondary);
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  	font-weight: var(--font-weight-primary);
}*/

h3, .h3{
	font-size: var(--font-h3);
}

h4, .h4{
	font-size: var(--font-h4);
}

h5, .h5{
	font-size: var(--font-h5);
}

h6, .h6{
	font-size: var(--font-h6);
}

p{
	font-size: var(--font-p);
	margin-bottom: 15px;
}

a {
	-webkit-transition: .3s all ease;
	-o-transition: .3s all ease;
	transition: .3s all ease;
	text-decoration: none;
}



/*.section{
padding-top: 130px;
}*/

.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}