:root{
  --brand-start:#0a0a0c; /* near-black */
  --brand-mid:#101014;   /* deep red */
  --brand-end:#15151b;   /* bright red */
  --text:#f3f4f6;
  --muted:#9ca3af;       /* <- ใส่ : ให้ครบ */
  --glass-bg:rgba(255,255,255,0.07);
  --glass-bd:rgba(255,255,255,0.16);
  --shadow:0 10px 30px rgba(0,0,0,0.35); /* 0.35 แทน .35 */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  font-family:'Prompt',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,"Noto Sans Thai",sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 70% 10%, rgba(239,68,68,0.12), transparent 60%), /* 0.12 แทน .12 */
    linear-gradient(135deg, var(--brand-start), var(--brand-mid) 55%, var(--brand-end));
  overflow-x:hidden;
  display:flex; flex-direction:column;
  min-height:100vh;   /* fallback สำหรับ IDE/เบราว์เซอร์เก่า */
  min-height:100dvh;  /* ค่าหลักบนเบราว์เซอร์ใหม่ */
}

#fog-canvas{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.navbar{
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.12);
  z-index:1031;
}
.navbar .nav-link{ color:#cbd5e1cc; font-weight:600; }
.navbar .nav-link.active, .navbar .nav-link:hover{ color:#ef4444; }
.navbar-brand img{ width:36px;height:36px; }
.navbar .navbar-brand strong{ color:#fff !important; }
.navbar .navbar-brand:hover strong{ color:#ffe0e0 !important; }

.section{ position:relative; z-index:1; padding:64px 0; }
main{ flex:1 0 auto; display:block; }
.glass{ background:var(--glass-bg); border:1px solid var(--glass-bd); box-shadow:var(--shadow); border-radius:24px; }

.hero{ padding:96px 0 64px; }
.hero h1{ font-size: clamp(32px, 4vw, 64px); font-weight:700; line-height:1.1; text-shadow: 0 6px 20px rgba(0,0,0,.45); }
.hero p.lead{ font-size: clamp(16px, 2vw, 22px); color:#fff; opacity:.95; }
.hero .tag{ display:inline-block; padding:8px 14px; border-radius:999px; border:1px solid var(--glass-bd); background:rgba(0,0,0,.35); font-size:14px; }
.h-section{ font-size: clamp(24px, 2.6vw, 36px); font-weight:700; margin-bottom:24px; }

.filter-btns .btn{ border-radius:999px; border:1px solid var(--glass-bd); color:#fff; background:rgba(0,0,0,.25); }
.filter-btns .btn.active{ background:#ffffff20; }
.portfolio-item{ transition:transform .25s ease, opacity .25s ease; }
.portfolio-item.hidden{ opacity:0; transform:scale(.98); pointer-events:none }

.gallery .thumb{ border-radius:18px; overflow:hidden; border:1px solid var(--glass-bd); box-shadow: var(--shadow); cursor:pointer; }
.gallery .thumb img{ display:block; width:100%; height:auto }

footer{ padding:28px 0; text-align:center; color:#ffecec; opacity:.9; font-size:14px; border-top:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.2)); z-index:1; }

a, a:visited{ color:#ef4444; }
.card.bg-glass{ background:var(--glass-bg); border:1px solid var(--glass-bd); box-shadow:var(--shadow); color:#fff; }
@media (max-width:991px){ .hero{ padding-top:72px; } }

/* CTA & ghost buttons normalized */
.btn-cta, .btn-ghost{ font-weight:700; font-size:1rem; line-height:1; padding:.8rem 1.25rem; border-width:1px; display:inline-flex; align-items:center; justify-content:center; }
.btn-cta{
  background: linear-gradient(135deg, #7a1212, #ef4444);
  color:#fff !important; border:1px solid transparent; border-radius: 999px;
  letter-spacing:.2px; box-shadow: 0 10px 20px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.1) inset;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-cta:hover{ transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 14px 28px rgba(0,0,0,.45); }
.btn-ghost{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color:#fff; border-radius:999px; }
.btn-ghost:hover{ background: rgba(255,255,255,.18); }
.hero .btn{ margin-right:.5rem; vertical-align:middle; }

/* Slots for images in Interesting/Education */
.card-icon{ width:44px;height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); border:1px solid var(--glass-bd); box-shadow: var(--shadow); }
.interest-img, .education-logo{ width:100%; aspect-ratio: 16/9; border-radius:16px; overflow:hidden; border:1px solid var(--glass-bd); background: linear-gradient(135deg, #2b0a0a, #7a1212); margin-bottom:.75rem; }

/* Contact layout (centered & even) */
.contact-card{ padding:2rem !important; }
@media (min-width: 992px){ .contact-card{ padding:2.25rem !important; } }
.card-icon-lg{ width:56px; height:56px; border-radius:14px; }
.contact-list{
  display:flex; flex-direction:column; align-items:center; text-align:left;
}
.contact-list li{
  width:min(560px, 100%);
  display:flex; align-items:center; justify-content:flex-start !important; gap:16px;
}
.contact-list li > a{ display:inline-block; line-height:1.35; }
.card-icon-lg{ flex:0 0 56px; }


/* === Contact: bigger content === */
.contact-card{ padding: clamp(2rem, 2vw + 1.5rem, 3rem) !important; }
.contact-list{ font-size: clamp(1.1rem, 0.8vw + 0.95rem, 1.5rem); }
.contact-list a{ font-weight:700; letter-spacing:.2px; }

.contact-list .card-icon-lg{
  width:  clamp(96px, 12vw, 160px);
  height: clamp(56px, 6vw, 72px);
  flex:   0 0 clamp(96px, 12vw, 160px);
  border-radius: 999px;
  display: grid; place-items: center;
}
.contact-list .card-icon-lg svg{
  width: clamp(28px, 2.4vw, 40px);
  height: clamp(28px, 2.4vw, 40px);
}

.contact-list li{ gap: clamp(24px, 1vw + 12px, 28px); }

/* กรอบไอคอนแบบกว้าง (ทรงเม็ดยา) */
.contact-list .card-icon-lg{
  width: 120px;          /* ← ปรับเลขนี้เพื่อ “กว้างขึ้น” ตามใจ */
  height: 64px;          /* สูงคงเดิม (ปรับได้) */
  flex: 0 0 120px;       /* ให้ flex จองพื้นที่เท่ากับ width */
  border-radius: 999px;  /* มุมมนแบบ Pill; จะเอา 20px ก็ได้ */
  display: grid; place-items: center; /* จัด svg ให้อยู่กลาง */
}

/* ขนาดไอคอนด้านใน (ปรับตามสัดส่วน) */
.contact-list .card-icon-lg svg{
  width: 34px;
  height: 34px;
}

/* ระยะห่างระหว่างกรอบกับข้อความ */
.contact-list li{ gap: 20px; }  /* เพิ่ม/ลดได้ */
/* Contact icon size (wide pill) – final */
.contact-list .card-icon-lg{
  width: 120px;          /* ปรับเลขนี้ให้กว้างตามใจ */
  height: 64px;
  flex: 0 0 120px;       /* จองพื้นที่เท่ากับ width */
  border-radius: 999px;  /* ทรงเม็ดยา */
  display: grid; place-items: center; /* จัด svg ให้อยู่กลาง */
}
.contact-list .card-icon-lg svg{
  width: 34px;
  height: 34px;
}
.contact-list li{ gap: 20px; }  /* ระยะห่างกรอบกับข้อความ */

/* เอากลุ่ม contact-list มาไว้กลางการ์ด */
/* ===== Contact: จัดให้อยู่กลาง + ตำแหน่งเริ่มข้อความเท่ากันทุกแถว ===== */
:root{
  --icon-w: 140px;  /* ความกว้างกรอบไอคอน (ปรับได้) */
  --icon-h: 64px;   /* ความสูงกรอบไอคอน   (ปรับได้) */
  --icon-gap: 24px; /* ระยะห่างไอคอน-ข้อความ */
  --fb: #60A5FA;    /* Facebook ฟ้าให้สว่างขึ้น (#3B82F6 ก็ได้) */
}

/* การ์ดเป็น flex เพื่อดันกลุ่มให้อยู่กลาง */
.contact-card{
  display:flex;
  justify-content:center;
}

/* จำกัดความกว้างกลุ่ม แล้วให้อยู่กึ่งกลาง */
.contact-card .contact-list{
  max-width: 760px;   /* ปรับเป็น 680 / 800 ได้ตามใจ */
  width: 100%;
  margin: 0 auto;
}

/* แต่ละแถว = 2 คอลัมน์: [กรอบไอคอนคงที่] [ข้อความ] */
.contact-list li{
  display:grid;
  grid-template-columns: var(--icon-w) 1fr;
  align-items:center;
  column-gap: var(--icon-gap);
}

/* กรอบไอคอนให้กว้างเท่าคอลัมน์ซ้าย และจัดไอคอนให้อยู่กลาง */
.contact-list .card-icon-lg{
  width: var(--icon-w);
  height: var(--icon-h);
  border-radius: 999px;
  display:grid; place-items:center;
  flex: initial; /* ปิดค่าที่เคยกำหนด flex-basis เก่า */
}

/* ขนาดไอคอนด้านใน */
.contact-list .card-icon-lg svg{
  width: 36px;
  height: 36px;
}

/* ทำให้ Facebook สว่างขึ้น */
.contact-list li:first-child .card-icon-lg{
  color: var(--fb) !important;             /* SVG ใช้ currentColor */
}
.contact-list li:first-child .card-icon-lg svg{
  filter: drop-shadow(0 0 6px rgba(96,165,250,.45)); /* (ไม่ชอบ glow ลบทิ้งได้) */
}