html {
  --red: #fe1427;
  --line: #06c755;
  --CI-Midnight-Blue: #00073c;
  --CI-Light-Blue: #2e6693;
  --Primary-Blue: #0d66d0;
  --System-Semi-Black: #151515;
}
body {
  height: 100vh;
  font-family: "Noto Sans Thai" !important;
  font-size: normal;
  font-style: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Noto Sans Thai" !important;
}
p {
  font-family: "Noto Sans Thai" !important;
  margin-bottom: 0;
}
main {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  background: var(--Primay-Knorr-Green, #00863f);
  /* background-image: url("./../images/background/bg.png"); */
  /* background-repeat: no-repeat; */
  /* background-position: center top; */
  /* background-size: cover; */
  color: #fff;
}
.nav-block {
  display: flex;
  flex-direction: row;
  /* margin-top: 12px;
  margin-bottom: 12px; */
  height: 70px;
  background: var(--Primay-Knorr-Yellow, #fec000);
}
.nav-section {
  padding-left: 24px;
}
.profile-section {
  padding-right: 24px;
}
.profile-image,
.profile-image:hover {
  background: var(--Primay-Knorr-Green, #00863f);
  border-radius: 50px;
  display: flex;
  height: 31px;
  width: 31px;
  justify-content: center;
  text-decoration: none;
  align-items: center;
  color: #fff;
}
.content-block {
  width: 100%;
  padding-bottom: 150px;
  /* flex: 1 1 auto; */
}
.btn-outline {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  height: 48px;
  color: var(--System-White, #fff);
  text-align: center;
  width: 100%;
  /* CLEAR/Button 16-25 Semibold */
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px; /* 100% */
  border-radius: 109px;
  border: 1px solid var(--Primay-Knorr-Yellow, #fec000);
}
.btn-outline:hover {
  color: var(--System-White, #fff);
}
.btn-outline-section {
  padding: 16px 0;
}
.btn-outline-section > div {
  padding: 0 10px;
}
/* Line Button */
.btn-clear-red {
  color: #fff;
  border-radius: 109px;
  border: 2px solid var(--Gradient-LightSilver, #79797a);
  background: radial-gradient(
      107.08% 85.59% at 86.3% 87.5%,
      rgba(0, 0, 0, 0.23) 0%,
      rgba(0, 0, 0, 0) 86.18%
    ),
    radial-gradient(
      83.94% 83.94% at 26.39% 20.83%,
      rgba(255, 255, 255, 0.59) 0%,
      rgba(255, 255, 255, 0) 69.79%,
      rgba(255, 255, 255, 0) 100%
    ),
    var(--red);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25),
    -3px -4px 7px 0px rgba(255, 255, 255, 0.15) inset;
}
.btn-clear-red:hover {
  color: #fff;
}
.line-icon {
  height: 24px;
}
.btn-line {
  font-size: 16px;
  line-height: 25px;
  font-weight: bold;
  background-color: var(--line);
  color: #fff;
  border-radius: 73px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center !important;
  align-items: center;
}
.btn-line:hover {
  color: #fff;
}
.btn-main {
  padding: 16px;
  color: var(--Primary-Knorr-Green, #00863f);
  border-radius: 109px;
  background: var(--Primary-Knorr-Yellow, #fec000);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-main:hover {
  color: var(--Primary-Knorr-Green, #00863f);
}
/* sidebar menu */
.sidebar-menu {
  background: var(--Primay-Knorr-Green, #00863f);
  color: #fff;
  /* CLEAR/Button 16-25 Semibold */
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px; /* 100% */
}
.menu-detail {
  margin-top: 57px;
  width: 100%;
}
.menu-items {
  /* padding: 0 24px; */
}
.menu-item {
  height: 56px;
  border-bottom: 0.5px solid #fff;
  display: flex;
  align-items: center;
}
.menu-link {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  color: #fff;
  /* CLEAR/Button 16-25 Semibold */
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px; /* 100% */
  text-decoration: none;
}
.menu-link:hover {
  color: #fff;
}
.lang,
.signout {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px; /* 100% */
  text-decoration: none;
  margin-left: 15px;
  margin-bottom: 32px;
  display: inline-block;
}
.lang:hover,
.signout:hover {
  color: #fff;
}
.lang.active {
  background-color: var(--red);
  padding: 8px 10px;
  border-radius: 40px;
}
/* member menu */
.menu-section {
  padding: 0 24px;
}
.member-menu {
  margin-bottom: 25px;
  background-color: #fff;
  border-radius: 16px;
  height: 80px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.menu-icon {
  margin-bottom: 3px;
}
.menu-items > a {
  width: 100%;
  color: var(--Primary-Knorr-Green, #00863f);
  text-align: center;
  /* CLEAR/Label Regular 12-12 */
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 12px; /* 100% */
  text-decoration: none;
}
.menu-items:first-child > a {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
.menu-items:last-child > a {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.menu-items > a.active {
  background: var(--Primary-Knorr-Yellow, #fec000);
  /* Button Dropshadow */
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.25);
}
.logo {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}
.btn-secondary,
.btn-secondary:hover {
  border-radius: 109px;
  background: var(--Primay-Knorr-Yellow, #fec000);
  display: flex;
  padding: 16px 0;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  color: #00863f;
  border-color: #fec000;
}
.btn-secondary-section {
  padding: 16px 10px 40px 10px;
}
.btn-show-more,
.btn-show-more:hover {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fec000;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  text-decoration: underline;
}
@media only screen and (max-width: 768px) {
}