/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
html {
  scroll-behavior: smooth;
}
body {
	line-height: 1;
	background-color: #191919;
	 scrollbar-face-color: #414340;

}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #1393CA #191919;
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  width: 10px;
  width: 10px;
}
*::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #191919;
}

*::-webkit-scrollbar-track:hover {
  background-color: #B8C0C2;
}

*::-webkit-scrollbar-track:active {
  background-color: #B8C0C2;
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #1393CA;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #C5127D;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #D6C212;
}





blockquote, q {
	quotes: none;
}
@font-face {
    font-family: 'KimberleyBl-Regular';
    src: url('KimberleyBl-Regular.eot');
    src: url('KimberleyBl-Regular.eot?#iefix') format('embedded-opentype'),
url('KimberleyBl-Regular.woff2') format('woff2'),
url('KimberleyBl-Regular.woff') format('woff'),
url('KimberleyBl-Regular.ttf') format('truetype'),
url('KimberleyBl-Regular.svg#arial_blackregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'promptregular';
    src: url('prompt_regular-webfont.eot');
    src: url('prompt_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('prompt_regular-webfont.woff2') format('woff2'),
url('prompt_regular-webfont.woff') format('woff'),
url('prompt_regular-webfont.ttf') format('truetype'),
url('prompt_regular-webfont.svg#promptregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('glyphicons-halflings-regular.ttf') format('truetype'),

}
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('NotoSansThai-Regular.eot');
    src: url('NotoSansThai-Regular.eot?#iefix') format('embedded-opentype'),
         url('NotoSansThai-Regular.woff2') format('woff2'),
         url('NotoSansThai-Regular.woff') format('woff'),
         url('NotoSansThai-Regular.ttf')  format('truetype'),
         url('NotoSansThai-Regular.svg#Noto Sans Thai') format('svg');
}


    
@font-face {
    font-family: 'serithairegular';
    src: url('serithai_regular-webfont.eot');
    src: url('serithai_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('serithai_regular-webfont.woff2') format('woff2'),
url('serithai_regular-webfont.woff') format('woff'),
url('serithai_regular-webfont.ttf') format('truetype'),
url('serithai_regular-webfont.svg#serithairegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


ol, ul {
	list-style: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.br {
	float: left;
	height: auto;
	width: 1400px;
}
.p-text {
	float: left;
	width: 100%;
	margin-bottom: 20px;
}
.p-picture {
	float: left;
	height: auto;
	width: 100%;
	margin-bottom: 20px;
}
.h01 {
	float: left;
	height: auto;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}




.box-main {
	height: auto;
	width: 1400px;
	margin-right: auto;
	margin-left: auto;
}

.left-01 {
	float: left;
	width: 100%;
	height: auto;
	background-color: #f8f6f5;

}

.left-02 {
	float: left;
	width: 100%;
	background-color: #FFF;
	height: auto;

}

#topBtn {
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	border: none;
	outline: none;
	background-color: #e7e8e9;
	color: #191919;
	cursor: pointer;
	
	/* --- ปรับรูปทรงเป็นสี่เหลี่ยมขอบมน --- */
	width: 49px;
	height: 47px;
	border-radius: 10px; /* 👈 ปรับความมนของขอบสี่เหลี่ยมที่นี่ (เช่น 8px, 10px, 12px) */
	font-size: 22px;     /* ขนาดลูกศร */
	font-weight: 900;    /* เพิ่มความหนาของตัวลูกศร */
	
	/* จัดลูกศรให้อยู่กึ่งกลาง */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;

	/* --- เอฟเฟกต์แสดงผลแบบนุ่มนวล (Smooth Fade & Slide) --- */
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: all 0.3s ease-in-out;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* เงาเบาๆ */
}

/* แสดงปุ่มเมื่อเลื่อนหน้าจอลงมา */
#topBtn.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* เอฟเฟกต์เมื่อเอาเมาส์ชี้ */
#topBtn:hover {
	background-color: #666666;
	color: #e7e8e9;
	transform: translateY(-3px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 767px){
	.box-main {
	height: auto;
	width: 96%;
	margin-right: 0%;
	margin-left: 2%;
	float: left;
}
.left-01 {
	float: left;
	width: 100%;
	height: auto;
	background-color: #f8f6f5;
	margin-left: 0%;
}

.left-02 {
	float: left;
	width: 100%;
	background-color: #FFF;
	height: auto;
	margin-left: 0%;
}

}
@media screen and (min-width: 768px) and (max-width: 1023px){

	.box-main {
	height: auto;
	width: 96%;
	margin-right: auto;
	margin-left: 2%;
}

}
@media screen and (min-width: 1024px) {
	.box-main {
	height: auto;
	width: 96%;
	margin-right: auto;
	margin-left: 2%;
}


}

.icon-bar {
	position: fixed;
	float: right;
	text-align: right;
	z-index: 9999;
	right: 30px;
	bottom: 80px;

	/* จัดตำแหน่งให้รองรับวงคลื่นด้านหลัง */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* วงคลื่นกระเพื่อมทรงสี่เหลี่ยมขอบมน */
.icon-bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	/* สีของวงคลื่น (ปรับสีตามต้องการ) */
	background-color: rgba(96, 165, 250, 0.6); 
	
	/* 🟢 กำหนดความมนของขอบสี่เหลี่ยม (ให้เท่ากับ หรือใกล้เคียงกับปุ่มจริง) */
	border-radius: 12px; 
	
	z-index: -1; /* ส่งคลื่นไปไว้ด้านหลัง */
	
	/* เรียกใช้อนิเมชั่นกระเพื่อม */
	animation: squareRipple 2s infinite ease-out;
}

/* กำหนดการขยายตัวของสี่เหลี่ยมขอบมน */
@keyframes squareRipple {
	0% {
		transform: scale(1);
		opacity: 0.8;
	}
	100% {
		transform: scale(1.4); /* ขยายสี่เหลี่ยมออกไป 1.4 เท่า */
		opacity: 0;            /* ค่อยๆ จางหายไป */
	}
}
.ani01
{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #1e1e24; /* สีดำเทาเข้ม */
    color: #e0e0e0;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);
    z-index: 99999;
    padding: 16px 24px;
    box-sizing: border-box;

    /* ซ่อนแถบไว้เริ่มต้นสำหรับทำอนิเมชั่น */
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: all 0.4s ease-in-out;
  }

  /* แสดงแถบคุกกี้ขึ้นมาพร้อมอนิเมชั่น */
  .cookie-banner.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* จัดระเบียบเนื้อหาให้อยู่ตรงกลางและกระจายตัวสมดุล */
  .cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap; /* รองรับหน้าจอโทรศัพท์ */
  }

  .cookie-text {
	font-family: "Noto Sans Thai";
	font-size: 15px;
	line-height: 1.5;
	color: #e0e0e0;
  }

  /* กลุ่มปุ่มกด */
  .cookie-buttons {
	display: flex;
	gap: 12px;
	font-family: "Noto Sans Thai";
  }

  .cookie-btn {
	border: none;
	padding: 10px 22px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: "Noto Sans Thai";
  }

  /* ปุ่มยกเลิก (โทนสีเทาโปร่ง) */
  .btn-cancel {
    background-color: #383842;
    color: #cccccc;
  }

  .btn-cancel:hover {
    background-color: #4a4a56;
    color: #ffffff;
  }

  /* ปุ่มตกลง (โทนสีสว่างโดดเด่น) */
  .btn-accept {
    background-color: #e0e0e0;
    color: #121212;
  }

  .btn-accept:hover {
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  }

  /* ปรับแต่งการแสดงผลในมือถือ */
  @media (max-width: 600px) {
    .cookie-content {
      flex-direction: column;
      align-items: flex-start;
    }

    .cookie-buttons {
      width: 100%;
      justify-content: flex-end;
    }

    .cookie-btn {
      flex: 1; /* ปุ่มกว้างเท่ากันในมือถือ */
      text-align: center;
    }
  }
/* --- 1. ?????????????????? (??????????????????????) --- */
.image,
.image-left,
.image-right {
	opacity: 0;
}

/* --- 2. Keyframes ?????????????? --- */

/* ????????????????? (???????) */
@keyframes enter-animation {
	0% {
		transform: translateY(200px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/* ?????????????????? */
@keyframes slideFromLeft {
	0% {
		transform: translateX(-200px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

/* ?????????????????? */
@keyframes slideFromRight {
	0% {
		transform: translateX(200px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

/* --- 3. ????????????????????? (?????? prefers-reduced-motion) --- */
@media (prefers-reduced-motion: no-preference) {
	/* ??????? (.image) ??????????????? */
	.image.image-animation {
		animation: enter-animation 1.5s ease-out forwards;
	}

	/* ????????????? */
	.image-left.image-animation {
		animation: slideFromLeft 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	}

	/* ???????????? */
	.image-right.image-animation {
		animation: slideFromRight 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	}
}