/* =========================================================
   MUIT WHITE THEME – NON-DESTRUCTIVE OVERRIDE
   - Keep original layout & components
   - Switch to modern white background
   - Mahidol IT / MUIT tone
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+Thai:wght@100..900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root {
  /* Brand (Mahidol / MUIT) */
  --brand: #2A3373;
  /* Mahidol Navy */
  --brand2: #D09B2C;
  /* Mahidol Gold */

  /* Backgrounds */
  --bg: #FFFFFF;
  /* main background */
  --bg2: #F5F7FA;
  /* section alternate */
  --card: #FFFFFF;

  /* Text */
  --text: #111827;
  /* main text */
  --muted: #4B5563;
  /* secondary text */

  /* Lines & borders */
  --line: rgba(17, 24, 39, .12);

  /* States */
  --warn: #D09B2C;
  --danger: #DC2626;
  --ok: #16A34A;

  /* Effects */
  --shadow: 0 10px 24px rgba(17, 24, 39, .08);

  /* Radius & layout (unchanged) */
  --radius: 16px;
  --radius2: 20px;
}

main {
  flex: 1;
}

/* ---------------------------------------------------------
   Header & Navigation (MUIT-style)
--------------------------------------------------------- */
.header {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.brand-title strong {
  color: var(--brand);
}

.nav a {
  color: var(--muted);
}

.nav a.active,
.nav a:hover {
  color: var(--brand);
  background: rgba(42, 51, 115, .06);
}

/* CTA button */
.nav .cta {
  background: var(--brand);
  color: #ffffff;
}

.nav .cta:hover {
  background: #1F275F;
}

/* ---------------------------------------------------------
   Hero section
--------------------------------------------------------- */
.hero {
  background:
    linear-gradient(180deg,
      rgba(42, 51, 115, .06),
      rgba(255, 255, 255, 1) 55%);
}

.h1 {
  color: var(--brand);
}

.lead {
  color: var(--muted);
}

/* ---------------------------------------------------------
   Cards
--------------------------------------------------------- */
.card {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.card h3 {
  color: var(--brand);
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
.btn {
  background: #ffffff;
  color: var(--brand);
  border: 1px solid var(--brand);
}

.btn:hover {
  background: rgba(42, 51, 115, .06);
}

.btn.primary {
  background: var(--brand);
  color: #ffffff;
  border: none;
}

.btn.primary:hover {
  background: #1F275F;
}

/* ---------------------------------------------------------
   Badges / tags
--------------------------------------------------------- */
.badge {
  background: rgba(42, 51, 115, .06);
  border-color: rgba(42, 51, 115, .25);
  color: var(--brand);
}

.tag {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--muted);
}

.tag.active {
  background: var(--brand);
  color: #ffffff;
  border: none;
}

/* ---------------------------------------------------------
   News items
--------------------------------------------------------- */
.news-item {
  background: #ffffff;
  border: 1px solid var(--line);
}

.news-item h3 {
  color: var(--brand);
}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.footer {
  background: #ffc122;
  color: var(--muted);
}

.footer strong {
  color: var(--brand);
}