:root {
  /*-------- font size  --------*/
  --txt-h1: 48px;
  --txt-h2: 32px;
  --txt-h3: 24px;
  --body-large: 20px;
  --txt-body-title: 16px;
  --txt-detail: 14px;
  --txt-small: 12px;
  --txt-btn: 16px;
  --txt-special: 40px;
  /*-------- font size  --------*/

  /* Font Weight */
  --large: 700;
  --normal: 400;

  /* other font family  */
  --risque: "Risque", cursive;

  /* color  */
  /*-------- Halloween Primary --------*/
  --primary: #ed7935;
  --primary-50: #fef7e4;
  --primary-100: #fcedba;
  --primary-200: #fae091;
  --primary-300: #f8d66a;
  --primary-400: #f7cb53;
  --primary-500: #f6c349;
  --primary-600: #f4b544;
  --primary-700: #f2a340;
  --primary-800: #f1953c;
  /*-------- Grayscale  Secondary --------*/
  /* txt-disabled  */
  --secondary: #9ca3af;
  --secondary-50: #f9fafb;
  --secondary-100: #f3f4f6;
  --secondary-200: #e5e7eb;
  /* bg-disabled  , text Secondary  */
  --secondary-300: #d1d5db;
  /* text gudie  */
  --secondary-500: #6b7280;
  --secondary-600: #4b5563;
  --secondary-700: #374151;
  /* hover  */
  --secondary-800: #1f2937;
  --secondary-900: #111827;

  /*-------- background --------*/
  --default: #242745;
  --bg-input: #1f2337;
  --bg-warning: #d32f2f;

  /*-------- box shadow  --------*/
  --default-shadow: 0px 2px 4px 0px #1a1f2c;

  /*-------- Color Gradient  --------*/
  --primary-gradient: linear-gradient(153deg, #efa820 1.7%, #d94718 114.52%);
  --secondary-gradient: linear-gradient(180deg, #5f6f8f 1.7%, #5f6f8f 114.52%)
      padding-box,
    linear-gradient(to top, #ffffff5c 11.34%, #0000003c) border-box;
  --secondary-gradient-hover: linear-gradient(
        180deg,
        #546380 1.7%,
        #546483 114.52%
      )
      padding-box,
    linear-gradient(to top, #ffffff5c 11.34%, #0000003c) border-box;
}

body {
  font-family: "Poppins", "Noto Sans Thai", sans-serif;
  font-weight: var(--normal);
  font-size: var(--txt-detail);
  color: #fff;
  background: #000;
}

.font-risque {
  font-family: var(--risque);
  letter-spacing: 3px;
}

/* //////////////// Ci Color ////////////////  */
/* txt  */
.ci-primary {
  color: var(--primary);
}
.ci-primary-50 {
  color: var(--primary-50);
}
.ci-primary-100 {
  color: var(--primary-100);
}
.ci-primary-200 {
  color: var(--primary-200);
}
.ci-primary-300 {
  color: var(--primary-300);
}
.ci-primary-400 {
  color: var(--primary-400);
}
.ci-primary-500 {
  color: var(--primary-500);
}
.ci-primary-600 {
  color: var(--primary-600);
}
.ci-primary-700 {
  color: var(--primary-700);
}
.ci-primary-800 {
  color: var(--primary-800);
}
.ci-secondary {
  color: var(--secondary);
}
.ci-secondary-50 {
  color: var(--secondary-50);
}
.ci-secondary-100 {
  color: var(--secondary-100);
}
.ci-secondary-200 {
  color: var(--secondary-200);
}
.ci-secondary-300 {
  color: var(--secondary-300);
}
.ci-secondary-500 {
  color: var(--secondary-500);
}
.ci-secondary-600 {
  color: var(--secondary-600);
}
.ci-secondary-700 {
  color: var(--secondary-700);
}
.ci-secondary-800 {
  color: var(--secondary-800);
}
.ci-secondary-900 {
  color: var(--secondary-900);
}
/* txt  */

/* background */
.bg-primary {
  background: var(--primary);
}
.bg-primary-50 {
  background: var(--primary-50);
}
.bg-primary-100 {
  background: var(--primary-100);
}
.bg-primary-200 {
  background: var(--primary-200);
}
.bg-primary-300 {
  background: var(--primary-300);
}
.bg-primary-400 {
  background: var(--primary-400);
}
.bg-primary-500 {
  background: var(--primary-500);
}
.bg-primary-600 {
  background: var(--primary-600);
}
.bg-primary-700 {
  background: var(--primary-700);
}
.bg-primary-800 {
  background: var(--primary-800);
}
.bg-secondary {
  background: var(--secondary);
}
.bg-secondary-50 {
  background: var(--secondary-50);
}
.bg-secondary-100 {
  background: var(--secondary-100);
}
.bg-secondary-200 {
  background: var(--secondary-200);
}
.bg-secondary-300 {
  background: var(--secondary-300);
}
.bg-secondary-500 {
  background: var(--secondary-500);
}
.bg-secondary-600 {
  background: var(--secondary-600);
}
.bg-secondary-700 {
  background: var(--secondary-700);
}
.bg-secondary-800 {
  background: var(--secondary-800);
}
.bg-secondary-900 {
  background: var(--secondary-900);
}

.bg-default {
  background: var(--default);
}
.bg-input {
  background: var(--bg-input);
}
.bg-warning {
  background: var(--bg-warning);
}
/* background */

/* //////////////// Ci Color ////////////////  */

/* //////////////// Font Size ////////////////  */
h1 {
  font-size: var(--txt-h1);
  font-weight: var(--normal);
}

h2 {
  font-size: var(--txt-h2);
  font-weight: var(--normal);
}

h3 {
  font-size: var(--txt-h3);
  font-weight: var(--normal);
}

h4 {
  font-size: var(--body-large);
  font-weight: var(--normal);
}

h5 {
  font-size: var(--txt-body-title);
  font-weight: var(--normal);
}

p {
  font-size: var(--txt-detail);
  font-weight: var(--normal);
  margin-top: 0;
}

small {
  font-size: var(--txt-small);
  font-weight: var(--normal);
}

/* Ci font size  */
.ci-txt-h1 {
  font-size: var(--txt-h1);
}
.ci-txt-h2 {
  font-size: var(--txt-h2);
}
.ci-txt-h3 {
  font-size: var(--txt-h3);
}
.ci-txt-body-large {
  font-size: var(--body-large);
}
.ci-txt-body-title {
  font-size: var(--txt-body-title);
}
.ci-txt-detail {
  font-size: var(--txt-detail);
}
.ci-txt-small {
  font-size: var(--txt-small);
}
.ci-txt-btn {
  font-size: var(--txt-small);
}
.ci-txt-special {
  font-size: var(--txt-special);
}
/* //////////////// Font Size ////////////////  */

/* //////////////// Cut line text slide style //////////////// */
.cut-line-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cut-line-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* number of lines to show */
  line-clamp: 4;
  -webkit-box-orient: vertical;
}
/* //////////////// Cut line text slide style //////////////// */

/* //////////////// Other //////////////// */
.line-height-30 {
  line-height: 30px;
}

.weight-large {
  font-weight: var(--large);
}

.w-custom {
  width: 60%;
}

.txt-primary-gradient {
  background: -webkit-linear-gradient(153deg, #efa820 1.7%, #d94718 114.52%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mainlayout-bg {
  background: url(/assets/images/bg-hide-seek.png) no-repeat center center fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 100vh;
  -o-object-fit: cover;
  object-fit: cover;
  padding: 100px 20px;
  position: relative;
}