/* --- กำหนดสีหลักของเว็บไซต์ --- */
:root {
    --color-primary: #8b0000;   /* แดงเลือดหมู */
    --color-dark: #5c0000;      /* แดงเข้ม */
    --color-light: #ffcccc;     /* แดงอ่อน */
    --color-accent: #facc15;    /* เหลืองทอง */
}

body {
    font-family: "Kanit", sans-serif;
}

/* --- Kanit Font Classes --- */
.kanit-thin { font-weight: 100; font-style: normal; }
.kanit-extralight { font-weight: 200; font-style: normal; }
.kanit-light { font-weight: 300; font-style: normal; }
.kanit-regular { font-weight: 400; font-style: normal; }
.kanit-medium { font-weight: 500; font-style: normal; }
.kanit-semibold { font-weight: 600; font-style: normal; }
.kanit-bold { font-weight: 700; font-style: normal; }
.kanit-extrabold { font-weight: 800; font-style: normal; }
.kanit-black { font-weight: 900; font-style: normal; }

/* Backgrounds */
.bg-theme-primary { background-color: var(--color-primary); }
.bg-theme-dark { background-color: var(--color-dark); }
.bg-theme-light { background-color: var(--color-light); }
.bg-theme-accent { background-color: var(--color-accent); }

/* Text Colors */
.text-theme-primary { color: var(--color-primary); }
.text-theme-dark { color: var(--color-dark); }
.text-theme-light { color: var(--color-light); }
.text-theme-accent { color: var(--color-accent); }

/* Borders */
.border-theme-primary { border-color: var(--color-primary); }
.border-theme-dark { border-color: var(--color-dark); }
.border-theme-accent { border-color: var(--color-accent); }
.border-theme-light { border-color: var(--color-light); }

/* Hovers */
.hover-text-theme-accent:hover { color: var(--color-accent); }
.hover-bg-theme-dark:hover { background-color: var(--color-dark); }

/* Gradients */
.bg-theme-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);
}

/* --- Black Ribbon (ริบบิ้นไว้อาลัย) --- */
.black-ribbon {
    position: fixed;
    z-index: 9999;
    width: 70px;
}
@media only all and (min-width: 768px) {
    .black-ribbon { width: auto; }
}
.stick-left { left: 0; }
.stick-right { right: 0; }
.stick-top { top: 0; }
.stick-bottom { bottom: 0; }

/* --- Social Media Icons (Contact Page) --- */
.social-wrapper {
  display: inline-flex;
  list-style: none;
  width: 100%;
  padding-top: 15px;
  justify-content: center;
  margin: 0;
}

.social-wrapper .icon {
  position: relative;
  background: #fff;
  color: var(--color-primary); /* สีเริ่มต้นให้เป็นสีแดงเลือดหมูของเว็บ */
  border-radius: 50%;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  text-decoration: none;
}

.social-wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: var(--color-dark);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  white-space: nowrap;
}

.social-wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: var(--color-dark);
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.social-wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.social-wrapper .icon:hover span,
.social-wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

/* คุมโทนสีเวลา Hover ให้เป็นสีของเว็บไซต์ทั้งหมด */
.social-wrapper .icon:hover {
  background: var(--color-primary);
  color: var(--color-accent);
}
.social-wrapper .icon:hover .tooltip,
.social-wrapper .icon:hover .tooltip::before {
  background: var(--color-primary);
  color: var(--color-accent);
}