:root {
    --bg: #e9f4ff;
    --blue: #1a477f;
    --teal: #00a0a9;
    --red: #ea0c42;
    --pink: #da558d;
    --s-color-1: #1a477f;
    --s-color-2: #00a0a9;
    --s-color-noti: #ea0c42;
    --s-text-1: #191e23;
    --s-text-2: #828897;
    --s-bg-1: #fff;
    --s-bg-2: #f5f5f7;
    --s-border-1: #d2d2d7;
    --s-border-2: #e2e2e7;
    --s-nav-bg: #ffffffbb;
    --s-foot-bg: #1a477f;
    --s-foot-text: #ffffffcc;
    --s-link-1: var(--s-color-1);
    --s-link-2: var(--s-color-2);
    --s-rounded-1: 3px;
    --s-rounded-2: 5px;
    --s-body: kvl, sans-serif;
    --s-heading: kvl, sans-serif;
    --s-heading-weight: 400;
    --s-shadow-1: 0 .5px 2px rgba(0, 0, 0, .16);
    --s-shadow-2: 0 4px 12px rgba(0, 0, 0, .08);
    --s-gap: 1rem;
    --s-space: 1rem;
    --s-content-width: 100%;
    --s-container-width: 100%;
}

body, *, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    font-family: "Bai Jamjuree", serif !important;
}

header{
  background: #000;
  color: #fff;
}
header {
  background-color: #000; /* พื้นหลังสีดำ */
  color: #fff; /* สีข้อความ */
    z-index: 999;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

header nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

header .logo img {
  max-height: 50px; /* ปรับขนาดโลโก้ */
}

header .flex ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

header .flex ul > li {
  position: relative;
}

header .flex ul li a {
  text-decoration: none;
  color: #fff; /* สีลิงก์ */
  padding: 15px;
  display: inline-block;
  transition: color 0.3s;
  font-size: 16px;
}

header .flex ul li a:hover {
  color: #f0a500; /* สีลิงก์เมื่อ hover */
}

header .flex ul ul {
  display: none; 
  position: absolute;
  background-color: #800000; 
  padding: 10px;
  list-style-type: none;
}

header .flex ul ul li a {
  padding: 5px 10px;
  color: #fff;
  display: block;
  white-space: nowrap; 
}

header .flex ul ul li a:hover {
  color: #f0a500;
}

header .flex ul > li:hover > ul {
  display: block;
}

.search {
  width: 100px;
  height: 30px;
}

.flex{
    display: flex;
}
.between{
    justify-content: space-between;
}
.items-center {
    align-items: center;
}

.flex ul li {
  cursor: pointer;
}

.flex ul li.open > ul {
  display: block; 
}

.search {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 25px;
  padding: 5px 10px;
  width: 250px;
}

.search input {
  border: none;
  outline: none;
  flex-grow: 1;
  padding: 5px;
  font-size: 16px;
}

.search button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.search button img {
  width: 20px;
  height: 20px;
}

.search:hover {
  border-color: #666;
}

.status.green{
    background-color: #baffc6;
}

.status.red{
    background-color: #ffbaba;
}

span.status {
    border: 0;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.33333;
    letter-spacing: .32px;
    display: inline-flex;
    min-width: 2rem;
    max-width: 100%;
    min-height: 1.5rem;
    align-items: center;
    justify-content: center;
    padding: .25rem .5rem;
    margin: .25rem;
    border-radius: .9375rem;
    cursor: default;
    vertical-align: middle;
    word-break: break-word;
}


p.status-date {
    margin-left: 8px;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.42857;
    letter-spacing: .16px;
}

.fluid-heading-05 {
    font-size: 2rem;
    line-height: 1.25;
    letter-spacing: 0;
    font-size: calc(2rem + .25*(100vw - 20rem)/22);
    font-weight: 700!important
}

@media (min-width: 42rem) {
    .fluid-heading-05 {
        font-size:2.25rem;
        font-weight: 300;
        line-height: 1.22;
        letter-spacing: 0;
        font-size: calc(2.25rem + .375*(100vw - 42rem)/24)
    }
}

@media (min-width: 66rem) {
    .fluid-heading-05 {
        font-size:2.625rem;
        line-height: 1.19;
        letter-spacing: 0;
        font-size: calc(2.625rem + .375*(100vw - 66rem)/16);
    }
}

@media (min-width: 82rem) {
    .fluid-heading-05 {
        font-size:3rem;
        line-height: 1.17;
        letter-spacing: 0;
        font-size: calc(3rem + .75*(100vw - 82rem)/17)
    }
}

@media (min-width: 99rem) {
    .fluid-heading-05 {
        letter-spacing:0;
        font-size: 3.75rem
    }
}

.dropdown select {
  width: 100%;
  max-width: 300px;
  padding: 10px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  appearance: none; /* ซ่อนลูกศรเริ่มต้นของเบราว์เซอร์ */
  -webkit-appearance: none; /* สำหรับเบราว์เซอร์ Webkit */
  -moz-appearance: none; /* สำหรับเบราว์เซอร์ Firefox */
}

.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 300px;
}

.dropdown::after {
  content: "▼";
  position: absolute;
  top: 22px;
  right: 15px;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12px;
  color: #666;
}

.dropdown select:hover {
  border-color: #666;
}

.dropdown select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.circle-party {
    width: 20px;
    height: 20px;
    border-radius: 100%;
}
.dp {
    background: #00B2FF;
}
.ptp {
    background: #F41724;
}
.ffp {
    background: #FF5C00;
}
.pdp{
    background: #1a477f;
}
.no{
    background: #828897;
}


.color-dp {
    color: #00B2FF;
}
.color-ptp {
    color: #F41724;
}
.color-ffp {
    color: #FF5C00;
}
.color-pdp{
    color: #1a477f;
}
.color-no{
    color: #828897;
}
.members-box{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.name {
    position: absolute;
    margin-top: -40px;
    display: none;
}

.circle-party:hover + .name{
    display: block;
}

.bars{
	width:100%;
    height: 20px;
    display: flex;
}
.bars > div{
    height: 20px;
}
.party-list{
	display:flex;
}
.circle{
	width: 10px;
    height: 10px;
    border-radius: 100%;
}
h1,h2,h3,h4,h5,h6{margin:0;}
.gr{width: 33.3333%;}
.party{
	display: flex;
    align-items: center;
}
.name-party {
    margin-left: 5px;
}
h4 span{
	color: #999;
}

@media (max-width: 960px) {
  .data-box {
    flex-direction: column; 
  }
  .box-data{width:100% !important;}
}

.name-special_set ,.name-set1{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 auto;
    justify-content: center;
}
.member-q {
    width: 30%;
    align-items: center;
}

span.all-name {
    line-height: 1.28572;
    letter-spacing: 0;
    font-size: calc(1.75rem + 0*(100vw - 20rem));
    font-weight: 700 !important;
}

.member-q div:first-child:not(.color-dp):not(.color-ptp):not(.color-ffp):not(.color-pdp):not(.color-no)
{
    width: 30px;
}