/* =========================
   GLOBAL TYPE & BASE
   ========================= */

/* ให้ตัวอักษรทั้งเว็บใหญ่ขึ้นอ่านง่าย */
html {
  font-size: 17px;
}

@media (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

/* ฟอนต์หลัก: Prompt (TH) + Alexandria (EN) */
body {
 font-family: "Mitr", "Prompt", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  line-height: 1.8;
  color: #111827;
  background: #f5f7fc; /* soft sky very light */
}

/* หัวข้อ / EN heading ใช้ Alexandria ให้ฟีล modern */
h1,
h2,
h3,
h4,
h5,
h6,
.heading-en {
  font-family: "Alexandria", "Prompt", system-ui, sans-serif;
  letter-spacing: 0.03em;
}

/* ตัวเนื้อหาภาษาไทย */
.body-th {
  font-family: "Prompt", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* โลโก้ (เวลาใช้เป็นข้อความ) – แต่ตอนนี้คุณใช้รูปโลโก้อยู่แล้ว */
.header-logo {
  font-family: "Alexandria", "Prompt", sans-serif;
  font-weight: 700;
  color: #1d2746;
}

/* =========================
   BRAND COLORS (VARIABLES)
   ========================= */

:root {
  --kaida-blue: #2c509a;
  --kaida-blue-deep: #1d2746;
  --kaida-soft-sky: #c9d8ea;
  --kaida-soft-sky-bg: #eef3fb;
  --kaida-soft-sky-bg-2: #f5f7fc;
  --kaida-lime: #fceea7;
  --kaida-champagne: #e7d2b0;
  --kaida-text-main: #1d2746;
}

/* =========================
   HERO / PRODUCT IMAGE
   ========================= */

.product-image,
.product-image-banner {
  object-fit: contain;
  margin: 0 auto;
  display: block;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.product-image:hover,
.product-image-banner:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

/* =========================
   BADGE & BUTTONS
   ========================= */

/* แท็กเล็กบน Hero / Banner */
.badge-lux {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: rgba(44, 80, 154, 0.06); /* KAIDA Blue 10% */
  color: var(--kaida-blue);
  border: 1px solid rgba(44, 80, 154, 0.2);
}

/* ปุ่มหลัก – gradient น้ำเงิน KAIDA + soft sky */
.btn-primary-lux {
  display: inline-flex;
  align-items: center;
  width: 10rem;
  justify-content: center;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  background-image: linear-gradient(
    135deg,
    var(--kaida-blue-deep) 0%,
    var(--kaida-blue) 45%,
    var(--kaida-soft-sky) 100%
  );
  color: #ffffff;
  font-family: "Alexandria", "Prompt", sans-serif;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    filter 0.25s ease, transform 0.15s ease-out;
}

.btn-primary-lux:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 11px rgba(15, 23, 42, 0.5);
  filter: brightness(1.05);
}

/* ปุ่มแบบเส้น (ถ้ามีใช้ทีหลัง) */
.btn-outline-custom {
  border: 1px solid var(--kaida-blue);
  color: var(--kaida-blue-deep);
  background: rgba(255, 255, 255, 0.85);
  padding: 0.55rem 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

.btn-outline-custom:hover {
  background: var(--kaida-blue);
  color: #ffffff;
}

/* =========================
   SWIPER ARROWS
   ========================= */

.swiper-button-next,
.swiper-button-prev {
  color: var(--kaida-blue-deep) !important;
  top: 50%;
  --swiper-navigation-size: 26px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  /* background: rgba(255, 255, 255, 0.92); */
  /* box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22); */
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 16px !important;
}

/* mobile ซ่อนปุ่ม */
@media (max-width: 767px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}

/* =========================
   CARDS / BOXES (กล่องพื้นหลัง)
   ========================= */

/* กล่องพื้นเทาอ่อนที่ใช้ซ้ำหลายจุด */
.bg-card-soft {
  background: #f9fafb;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
}

/* กล่องโทนเหลือง Lime Bright (เช่น “ใครเหมาะกับครีมนี้”) */
.bg-kaida-lime-soft {
  background: linear-gradient(
    135deg,
    rgba(252, 238, 167, 0.4),
    #fffef7
  );
  border-radius: 1rem;
  border: 1px solid #fceea7;
}

/* กล่อง certificate / พื้นหลังฟ้าอ่อนใช้ทั้งหน้า */
.section-soft-sky {
  background: var(--kaida-soft-sky-bg);
}

/* =========================
   FOOTER
   ========================= */

.footer-kaida {
  /* gradient ตามโทน KAIDA Blue + silver หน่อย ๆ */
  background: radial-gradient(
      circle at top left,
      rgba(201, 216, 234, 0.9) 0,
      rgba(44, 80, 154, 1) 40%,
      #050816 100%
    );
  color: #e5e7eb;
}

.footer-kaida a {
  text-decoration: none;
  color: #e5e7eb;
}

.footer-kaida a:hover {
  color: #ffffff;
}

.footer-kaida small {
  letter-spacing: 0.08em;
}

/* ปรับสีตัวหนังสือใน footer ให้ไม่ดรอปเกินไป */
.footer-kaida h5 {
  color: #e5e7eb;
}

.footer-kaida p,
.footer-kaida li,
.footer-kaida span {
  color: #c7d2fe;
}

/* ให้โลโก้ใน footer ไม่ใหญ่เกิน */
.footer-kaida .header-logo {
  max-width: 180px;
}

/* =========================
   MISC
   ========================= */

/* ปรับ label ตัวเล็ก ๆ ให้ดูเนี๊ยบ (แทน text-2xs ของ Tailwind) */
.text-2xs {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}