/* ================================================================
   THEME / BASE
================================================================ */
:root{
  --glass   : rgba(255,255,255,.60);
  --blur    : blur(12px);
  --nav-h   : 64px;

  --bg-dark : #0b0b0b;      /* พื้นหลังธีมเข้มสำหรับ Projects */
  --panel   : #111;          /* กล่อง/แถบ */
  --text    : #e9e9e9;       /* ตัวอักษรหลักบนพื้นเข้ม */

  --fg-dark : #222;
  --brand   : #B65B3A;       /* Terracotta */
  --brand-2 : #9E4D31;       /* hover/darken */

  /* CONTACT hero – รูปพื้นหลัง (ตั้งค่าเริ่มต้นไว้ที่นี่) */
  --contact-hero-img: url("/about.jpg");
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Arial,"Helvetica Neue",sans-serif;
  background:#000;color:#fff;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ================================================================
   NAVBAR
================================================================ */
.navbar{
  position:fixed; top:0; left:0; right:0;
  height:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
  z-index:1600;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}
.nav-inner{
  position:relative;
  max-width:1200px;height:var(--nav-h);margin:0 auto;
  padding:0 max(16px, env(safe-area-inset-right,0px)) 0 max(16px, env(safe-area-inset-left,0px));
  display:flex;align-items:center;justify-content:center;
}

/* Hamburger – LEFT (safe‑area) */
.hamburger{
  position: absolute;
  left:  max(16px, env(safe-area-inset-left, 0px));
  top:   50%;
  transform: translateY(-50%);
  display:flex; flex-direction:column; gap:6px;
  width:44px; height:44px; padding:10px;
  background:rgba(0,0,0,.45);
  border:1.5px solid rgba(255,255,255,.75);
  border-radius:10px; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  color:#fff; z-index:1602;
}
.hamburger span{ display:block; width:100%; height:3px; border-radius:2px; background:#fff;
  transition:transform .25s,opacity .2s; }
.hamburger:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:2px}
.hamburger:hover{background:rgba(0,0,0,.58)}

/* โลโก้กลาง */
.brand{position:absolute; left:50%; transform:translateX(-50%); line-height:0; z-index:1601}
.brand img{height:40px; display:block}

/* มือถือ: ทำพื้นหลัง navbar เข้มขึ้นเล็กน้อยให้ปุ่มชัด */
@media (max-width:680px){
  :root{ --nav-h:56px; }
  .navbar{
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }
  .caption{ pointer-events:none; } /* กันสไลด์บังการคลิกปุ่ม */
}

/* ไม่รองรับ backdrop-filter → ใช้พื้นหลังทึบ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .navbar{ background:rgba(20,20,20,.9); }
}

/* เดสก์ท็อป: ใสและคมขึ้นเล็กน้อย */
@media (min-width: 821px){
  .navbar{
    background: rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
    backdrop-filter: blur(10px) saturate(135%);
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .brand img{ filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
}

/* ================================================================
   SIDE-DRAWER
================================================================ */
.side-drawer{
  position:fixed; top:0; left:-280px; width:280px; height:100dvh; z-index:1700;
  background:#fff;color:#111; box-shadow:2px 0 16px rgba(0,0,0,.15);
  padding:calc(var(--nav-h) + env(safe-area-inset-top,0px)) 0 24px;
  display:flex; flex-direction:column; gap:6px; transition:left .28s ease;
  -webkit-overflow-scrolling:touch;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.side-drawer.open{ left:0; }
.close-btn{ position:absolute; top:10px; right:12px; font-size:1.8rem; background:none; border:none; cursor:pointer; color:#666; }
.menu-list{ list-style:none; margin:0; padding:0; }
.menu-list li{ border-bottom:1px solid #eee; }
.menu-list a{ display:block; padding:18px 24px; font-weight:700; letter-spacing:.5px; text-decoration:none; color:#111; }
.menu-list a:hover{ background:#f5f5f5 }

.contact-block{ margin-top:auto; margin-left:16px; margin-bottom:24px; display:flex; flex-direction:column; gap:10px; font-size:1rem }
.contact-block a{ color:#0a0a0a; text-decoration:none; font-weight:500; display:flex; align-items:center; gap:8px; border-radius:4px; transition:background .18s,color .18s }
.contact-block a:hover,.contact-block a:focus{ color:#050505; background:rgba(21,101,192,0.06) }
.contact-block i{ font-size:1.18em; color:#8e8e8e; min-width:20px; transition:color .15s }
.contact-block a:hover i{ color:#1565c0 }

.backdrop{ position:fixed; inset:0; z-index:1650; background:rgba(0,0,0,.4); opacity:0; visibility:hidden; transition:opacity .28s,visibility .28s }
.backdrop.show{ opacity:1; visibility:visible }

/* บล็อก Contact ในเมนู: เพิ่มระยะรอบ ๆ ให้กดง่ายและไม่โดนตัด */
.side-drawer .contact-block{
  padding: 12px 16px;
  margin: 12px 0 0;
  font-size: 1rem;
}
.side-drawer .contact-block a{
  display: block;           /* ให้แต่ละบรรทัดเป็นบล็อกกว้างทั้งแถว */
  line-height: 1.6;
}

/* ================================================================
   HOME – HERO SLIDER
================================================================ */
.slider{ position:relative; width:100%; height:100vh; overflow:hidden; }
.slide{
  position:absolute; inset:0; opacity:0;
  transition: opacity .5s;  /* ปรับเป็น 0.5s เพื่อลดช่วงมืดก่อนภาพถัดไป */
}
.slide.active{ opacity:1; }
.slide img{ width:100%; height:100%; object-fit:cover; }
.caption{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.center-title{ width:clamp(320px, 80vw, 1100px); height:auto; display:block }

/* Slider controls/dots */
.slider .arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border:none; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff; font-size:2rem; cursor:pointer; z-index:2;
}
.slider .arrow:hover{ background:rgba(0,0,0,.6) }
.slider .slider-prev{ left:16px }
.slider .slider-next{ right:16px }
.slider .dots{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:2;
}
.slider .dots button{
  width:12px; height:12px; border-radius:50%; border:none; background:rgba(255,255,255,.45); cursor:pointer; transition:background .3s;
}
.slider .dots button[aria-selected="true"], .slider .dots button:hover{ background:#fff }

/* ================================================================
   PROJECTS PAGE: THEME (แก้พื้นหลังขาว → ธีมเข้ม)
================================================================ */
.projects-page{
  background: var(--bg-dark);
  color: var(--text);
}

/* HERO (Projects) */
.hero-carousel{
  position:relative; height:50vh; min-height:360px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:#000;
  margin-top:var(--nav-h);
}
.hero-carousel img{ width:100%; height:100%; object-fit:cover; opacity:1; transition:opacity .5s ease; }


/* Shine effect for Projects hero */
.hero-carousel{ position:relative; overflow:hidden; }

.hero-shine{
  position:absolute; z-index:5; pointer-events:none;
  top:-40%; left:-20%; width:140%; height:180%;
  background: linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%);
  mix-blend-mode:screen;
  filter:blur(10px);
  transform: translateX(-120%) rotate(8deg);
  opacity:0;
}
.hero-shine.play{
  animation: heroShineSweep .9s ease;
}
@keyframes heroShineSweep{
  0%   { opacity:0;  transform:translateX(-120%) rotate(8deg); }
  20%  { opacity:.55;}
  100% { opacity:0;  transform:translateX(120%)  rotate(8deg); }
}


.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border:none; border-radius:50%;
  background:rgba(0,0,0,.45); color:#fff; font-size:2rem; cursor:pointer; z-index:10; opacity:.95;
}
.hero-nav:hover{ background:rgba(0,0,0,.6); }
.hero-nav.prev{ left:20px; } .hero-nav.next{ right:20px; }

.hero-dots{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:10;
}
.hero-dots button{
  width:12px; height:12px; border-radius:50%; border:none;
  background:rgba(255,255,255,.5); cursor:pointer; transition:.3s; opacity:.95;
}
.hero-dots button[aria-selected="true"], .hero-dots button:hover{ background:#fff; transform:scale(1.12); }

@media (max-width:680px){
  .hero-carousel{ min-height:320px; }
}

/* CATEGORIES */
.project-cats{
  max-width:1200px; margin:20px auto 0; padding:8px 0 10px;
  text-align:center; font-size:1rem;
  border-top:1px solid #333; border-bottom:1px solid #333;
  box-shadow:none; color:#cfcfcf;
}
.project-cats a{
  position:relative; display:inline-block; padding:0 12px 6px;
  font-weight:600; color:#cfcfcf; text-decoration:none; transition:color .2s;
}
.project-cats a:hover{ color:#fff; }
.project-cats a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--brand);
  transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.project-cats a:hover::after,.project-cats a.active::after{ transform:scaleX(1) }
.project-cats a.active{ color:#fff; }

/* GRID / CARD */
.project-grid{
  width:90%; max-width:1200px; margin:32px auto 80px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px;
}
.project-link{ display:block; text-decoration:none; color:inherit }
.project-card{
  position:relative; overflow:hidden; height:280px; cursor:pointer;
  border-radius:8px; background:#0f0f0f; box-shadow:0 4px 18px rgba(0,0,0,.28);
  transition: transform .18s ease;
}
.project-card:hover{ transform: translateY(-3px); }
.project-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.02) saturate(1.02); }
.project-card .overlay{
  position:absolute; inset:0; background:rgba(182,91,58,.86); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  opacity:0; transition:opacity .22s ease;
  text-align:center; padding:8px;
}
.project-card:hover .overlay{ opacity:1 }
.project-card .index{ font-size:.9rem; opacity:.95 }
.project-card h3{ font-size:1.05rem; margin:0 }

/* ================================================================
   PROJECT DETAIL – GALLERY
================================================================ */
.proj-page{background:#fff;color:#111;}
.proj-hero{margin-top:var(--nav-h);padding:20px;background:#fff}
.gallery{max-width:1200px;margin:auto;}
.g-slider{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.g-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s} /* ปรับเป็น 0.5s */
.g-slide.active{opacity:1}
.g-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;background:rgba(0,0,0,.35);border:none;border-radius:50%;color:#fff;font-size:1.6rem;cursor:pointer}
.g-nav:hover{background:rgba(0,0,0,.55)}
.g-prev{left:10px}.g-next{right:10px}
.g-thumbs{margin-top:14px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.g-thumb{width:120px;height:80px;object-fit:cover;opacity:.6;cursor:pointer;border:2px solid transparent;border-radius:6px;transition:.2s}
.g-thumb.active,.g-thumb:hover{opacity:1;border-color:#ff5959}

.proj-info{max-width:900px;margin:40px auto 90px;padding:0 20px;text-align:center}
.proj-info h1{font-size:2rem;color:#222;margin-bottom:12px}
.proj-info p{color:#555}

/* ===== Shine effect for Project Detail Gallery ===== */
#gSlider{ position:relative; overflow:hidden; } /* เผื่อยังไม่ได้ตั้ง */

.g-shine{
  position:absolute; z-index:5; pointer-events:none;
  /* ให้แถบวาวใหญ่กว่ากรอบเล็กน้อยเพื่อเนียน */
  top:-40%; left:-20%; width:140%; height:180%;
  background: linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%);
  mix-blend-mode: screen;
  filter: blur(10px);
  transform: translateX(-120%) rotate(8deg);
  opacity: 0;
}
.g-shine.play{
  animation: gShineSweep .6s ease; /* ปรับความเร็ว/โทนได้ */
}
@keyframes gShineSweep{
  0%   { opacity:0;  transform: translateX(-120%) rotate(8deg); }
  20%  { opacity:.55; }
  100% { opacity:0;  transform: translateX(120%)  rotate(8deg); }
}


/* ================================================================
   TEAM
================================================================ */
.team-page{background:#fff;color:#111}
.team-hero{margin-top:calc(var(--nav-h) + 10px);text-align:center;padding:40px 20px}
.team-hero h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;letter-spacing:.5px}
.team-grid{width:90%;max-width:1200px;margin:0 auto 100px;display:grid;gap:36px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.member-card{display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .25s}
.member-card .photo{width:100%;aspect-ratio:1/1;border-radius:8px;background-size:cover;background-position:center;filter:grayscale(.1);transition:.3s}
.member-card h3{margin:14px 0 2px;font-size:1rem;font-weight:700;color:#111}
.member-card .position{margin:0;font-size:.9rem;color:#666}
.member-card:hover{transform:translateY(-6px)} .member-card:hover .photo{filter:none}

/* ================================================================
   CONTACT
================================================================ */
.contact-page{background:#fff;color:#222}
.contact-hero{position:relative;width:100%;min-height:38vh;padding:64px 16px 48px;background:url("about.jpg") center/cover no-repeat fixed;display:flex;align-items:center;justify-content:center;overflow:hidden}
.contact-hero::before{content:"";position:absolute;inset:0;background:rgba(20,20,20,.4);backdrop-filter:blur(1px);z-index:1}
.contact-hero h1{position:relative;z-index:2;font-size:clamp(2rem,5vw,3rem);color:#fff;font-weight:700;letter-spacing:.5px;margin:0;text-align:center;text-shadow:0 4px 24px rgba(0,0,0,.2),0 2px 0 #000}

.contact-grid{max-width:1200px;margin:0 auto;padding:60px 24px;display:grid;grid-template-columns:1fr 380px;gap:60px}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr;gap:40px}}

.contact-form h2{margin:0 0 12px;font-size:1.6rem;color:#222}
.contact-form .lead{margin:0 0 24px;color:#555}
.contact-form form{display:flex;flex-direction:column;gap:18px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.two-col{grid-template-columns:1fr}}
.contact-form input,.contact-form textarea{width:100%;padding:12px 14px;font:inherit;border:1px solid #ccc;border-radius:4px;transition:border-color .2s}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--brand);outline:0}
.btn-primary{align-self:start;margin-top:6px;background:var(--brand);color:#fff;font-weight:600;padding:12px 32px;border:0;border-radius:4px;cursor:pointer;transition:background .25s}
.btn-primary:hover{background:var(--brand-2)}
.form-status{margin-top:12px;font-weight:600}
.gmap{width:100%;height:320px;border:0;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.12)}

/* ================================================================
   FOOTER — SLIM & RESPONSIVE (single source of truth)
================================================================ */
.site-footer{
  background: var(--brand); color:#fff;
  margin-top: 16px; padding: 20px 16px 12px;
}
.footer-inner{
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1.6fr 1fr;
  gap: 20px; align-items: start; padding: 0;
}
.f-logo{ height: 28px; margin-bottom: 6px; }
.f-col h4{ font-size: 0.95rem; margin: 0 0 6px; }
.f-col p, .f-col address{ margin: 4px 0 0; line-height: 1.45; font-size: 0.95rem; }
.site-footer a{color:#fff;text-decoration:none;opacity:.95}
.site-footer a:hover{opacity:1;text-decoration:underline}
.f-col.links ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.soc-wrap{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.soc-btn{ width:30px; height:30px; border-radius:50%; border:1.2px solid rgba(255,255,255,.7);
          display:inline-flex;align-items:center;justify-content:center; color:#fff; transition:.25s }
.soc-btn svg{ width:16px; height:16px }
.soc-btn:hover{ background:#fff; color:var(--brand); border-color:#fff }
.copyright{
  text-align:center; font-size:.8rem; color:rgba(255,255,255,.9);
  border-top:1px solid rgba(255,255,255,.25);
  padding:8px 0 10px; margin-top:10px;
}

/* Breakpoints */
@media (max-width:1024px){
  .footer-inner{ grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width:600px){
  .site-footer{ padding: 12px 12px 10px; margin-top: 12px; }
  .footer-inner{ grid-template-columns:1fr; gap:8px; }
  .f-logo{ height:24px; margin-bottom:4px; }
  .f-col h4{ font-size:.92rem; margin-bottom:4px; }
  .f-col p, .f-col address{ font-size:.9rem; line-height:1.35; }
  .copyright{ font-size:.76rem; padding:6px 0 8px; margin-top:6px; }
}

/* ================================================================
   ACCESSIBILITY
================================================================ */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* === OVERRIDE: Projects -> Light theme (พื้นหลังสีขาว) === */
body.projects-page{
  background:#fff !important;
  color:#111 !important;
}

/* ปรับสไตล์แถบหมวดหมู่ให้เข้ากับพื้นขาว */
.projects-page .project-cats{
  padding:10px 0 16px;
  border-top:2px solid #eee;
  border-bottom:2px solid #eee;
  box-shadow:0 3px 6px rgba(0,0,0,.05);
  color:#555;
}
.projects-page .project-cats a{ color:#555; }
.projects-page .project-cats a:hover,
.projects-page .project-cats a.active{ color:#000; }
.projects-page .project-cats a::after{ background:var(--brand); }

/* การ์ดโปรเจ็กต์ให้สว่างขึ้น */
.projects-page .project-card{
  background:#f5f5f5;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}

/* ====================== CONTACT PAGE (moved to style.css) ====================== */
/* หน้า Contact: พื้นขาว + Navbar ขาว */
body.contact-page{ background:#fff; color:#111; }

/* CONTACT PAGE: hero พร้อมรูป + fallback ครบ */
/* ใช้ image-set ถ้ามีไฟล์ webp จริง */
@supports (image-set(url("x") type("image/jpeg") 1x)) {
  :root{
    --contact-hero-img: image-set(
      url("/contact-hero.webp") type("image/webp") 1x,
      url("/about.jpg") type("image/jpeg") 1x
    );
  }
}

.contact-page .navbar{
  background:#fff !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 1px 6px rgba(0,0,0,.05); z-index:1600;
}
.contact-page .hamburger{
  background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.12); color:#111;
}
.contact-page .hamburger:hover{ background:rgba(0,0,0,.12); }
.contact-page .hamburger span{ background:#111; }

/* HERO พร้อมรูป + gloss */
.contact-page .contact-hero{
  position:relative; width:100%; min-height:42vh;
  margin-top:var(--nav-h); padding:72px 16px 48px;
  display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;

  /* รูป + overlay */
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.55) 100%),
    var(--contact-hero-img);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  /* เดสก์ท็อปค่อย fixed */
  background-attachment: fixed;
}

/* iOS/มือถือ: ปิด fixed กันรูปหาย/กระตุก */
@media (max-width: 900px){
  .contact-page .contact-hero{ background-attachment: scroll; }
}

/* สะท้อนเงาวาว */
.contact-page .contact-hero::before{
  content:""; position:absolute; inset:-60% -20% auto -20%; height:140%;
  background:linear-gradient(120deg,rgba(255,255,255,.6),rgba(255,255,255,0) 45%);
  transform:translateY(-90%) rotate(8deg); mix-blend-mode:screen; opacity:.5; filter:blur(12px);
  pointer-events:none; animation:heroShine 9s linear infinite;
}
@keyframes heroShine{ 0%{transform:translateY(-95%) rotate(8deg)} 100%{transform:translateY(40%) rotate(8deg)} }

.contact-page .contact-hero h1{
  position:relative; z-index:1; margin:0;
  font-size:clamp(2rem,5vw,3rem); color:#fff; letter-spacing:.5px;
  text-shadow:0 1px 0 #000, 0 8px 30px rgba(0,0,0,.35);
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* -------------------- MAIN GRID + การ์ดกระจก -------------------- */
.contact-page .contact-grid{
  max-width:1200px; margin:0 auto; padding:36px 24px 64px;
  display:grid; grid-template-columns:1fr 380px; gap:28px 60px;
}
@media (max-width:960px){
  .contact-page .contact-grid{ grid-template-columns:1fr; gap:24px; }
}

/* ใช้กับ .contact-form และ .contact-info โดยตรง เพื่อไม่ต้องแก้ HTML */
.contact-page .contact-form,
.contact-page .contact-info{
  position:relative; border-radius:14px; background:rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%);
  box-shadow:0 18px 44px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.55);
  overflow:hidden;
}
.contact-page .contact-form{ padding:24px; }
.contact-page .contact-info{ padding:20px; }

/* แถบเงาวาวด้านบนการ์ด */
.contact-page .contact-form::before,
.contact-page .contact-info::before{
  content:""; position:absolute; left:-20%; right:-20%; top:-60px; height:120px;
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0));
  filter:blur(6px); pointer-events:none;
}

/* ฟอร์ม */
.contact-page .contact-form h2{ margin:0 0 10px; font-size:1.6rem; }
.contact-page .contact-form .lead{ margin:0 0 18px; color:#555; }
.contact-page .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px){ .contact-page .two-col{ grid-template-columns:1fr; } }

.contact-page .contact-form label{
  font-weight:600; font-size:.92rem; color:#333;
  display:flex; flex-direction:column; gap:6px;
}
.contact-page .contact-form input,
.contact-page .contact-form textarea{
  width:100%; padding:12px 14px; font:inherit; border-radius:10px;
  border:1px solid rgba(0,0,0,.14); background:rgba(255,255,255,.9);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.contact-page .contact-form input:focus,
.contact-page .contact-form textarea:focus{
  outline:0; border-color:#B65B3A; background:#fff;
  box-shadow:0 0 0 3px rgba(182,91,58,.18);
}

/* ปุ่มหลัก (วาว) */
.contact-page .btn-primary{
  align-self:start; margin-top:8px; cursor:pointer; border:0;
  padding:12px 32px; border-radius:999px; font-weight:700; color:#fff;
  background:linear-gradient(180deg,#C56A49,#B65B3A 60%, #9E4D31);
  box-shadow:0 10px 20px rgba(182,91,58,.28), inset 0 0 0 1px rgba(255,255,255,.4);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.contact-page .btn-primary:hover{
  transform:translateY(-1px); filter:saturate(1.05);
  box-shadow:0 14px 26px rgba(182,91,58,.36), inset 0 0 0 1px rgba(255,255,255,.55);
}

/* กล่องข้อมูลด้านขวา */
.contact-page .contact-info h2{ margin:0 0 12px; font-size:1.2rem; color:#222; }
.contact-page .contact-info .address{ color:#444; line-height:1.6; margin-bottom:10px; }
.contact-page .contact-info .contact-links a{ color:#B65B3A; text-decoration:none; font-weight:600; }
.contact-page .contact-info .contact-links a:hover{ text-decoration:underline; }

/* แผนที่ */
.contact-page .gmap{
  width:100%; height:320px; border:0; border-radius:12px; margin-top:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.5);
}


/* ================================================================
   TEAM PAGE — Clean & Simple (Vertical Grid, 4 per row)
   ใช้กับ .team-page เท่านั้น
================================================================ */

/* พื้นขาว + navbar โทนขาว */
body.team-page{ background:#fff; color:#111; }
.team-page .navbar{
  background:#fff;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 1px 6px rgba(0,0,0,.05);
  z-index:1600;
}
.team-page .hamburger{
  background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.12); color:#111;
}
.team-page .hamburger:hover{ background:rgba(0,0,0,.12); }
.team-page .hamburger span{ background:#111; }

/* ================= HERO (glass + shine + pan) ================== */
.team-page .team-hero{
  position:relative; margin-top:var(--nav-h);
  min-height:44vh; display:flex; align-items:center; justify-content:center;
  padding:64px 16px 56px; text-align:center; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.45) 100%),
    url("about.jpg") center/cover no-repeat;
}
@media (prefers-reduced-motion:no-preference){
  .team-page .team-hero{ animation:bgPan 18s ease-in-out infinite alternate; }
}
.team-page .team-hero::before{
  content:""; position:absolute; inset:-60% -20% auto -20%; height:140%;
  background:linear-gradient(120deg,rgba(255,255,255,.6),rgba(255,255,255,0) 45%);
  transform:translateY(-90%) rotate(8deg); mix-blend-mode:screen; opacity:.55; filter:blur(12px);
  pointer-events:none; animation:heroShine 9s linear infinite;
}
.team-page .team-hero h1{
  position:relative; z-index:1;
  font-size:clamp(2rem,5vw,3rem); letter-spacing:.5px; color:#fff; margin:0;
  text-shadow:0 1px 0 #000, 0 14px 36px rgba(0,0,0,.35);
  backdrop-filter:saturate(120%); animation:fadeUp .7s ease both;
}

/* ================= TEAM — Vertical Grid (4 per row) ============ */
.team-page .org-chart{
  max-width:1200px;
  margin:24px auto 80px;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:28px;
  overflow:visible;                 /* ไม่มีสกรอลล์แนวนอน */
}
/* flatten .level ให้การ์ดขึ้นกริดโดยตรง และตัดเส้นเชื่อมเก่า */
.team-page .org-chart > .level{ display:contents; }
.team-page .org-chart > .level::before{ display:none; }

/* ================= TEAM CARD (glass + hover) ==================== */
.team-page .org-chart .card{
  border-radius:16px; position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.62));
  box-shadow:0 10px 24px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(10px) saturate(135%);
  backdrop-filter:blur(10px) saturate(135%);
  padding:14px 16px 16px;
  transition:transform .25s ease, box-shadow .28s ease, filter .28s ease;
}
.team-page .org-chart .card img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px;
  filter:grayscale(.15) contrast(1.02) saturate(.96);
  transition:transform .3s ease, filter .3s ease;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}
.team-page .org-chart .card h3{
  margin:12px 0 2px; font-size:1.05rem; font-weight:800; color:#111;
}
.team-page .org-chart .card .role{
  margin:0; font-size:.95rem; color:#666; font-weight:600;
}

/* hover (desktop) — ยก/วาว */
@media (hover:hover){
  .team-page .org-chart .card::after{
    content:""; position:absolute; left:-20%; top:-40%; width:140%; height:160%;
    background:linear-gradient(120deg, rgba(255,255,255,.32), rgba(255,255,255,0) 46%);
    mix-blend-mode:screen; filter:blur(10px);
    transform:translateX(-120%) rotate(8deg);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .team-page .org-chart .card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.65);
    filter:saturate(1.05);
  }
  .team-page .org-chart .card:hover img{ transform:scale(1.02); filter:none; }
  .team-page .org-chart .card:hover::after{
    opacity:.8; animation:teamCardShine .8s ease forwards;
  }
}

/* Responsive: 3 / 2 / 1 คอลัมน์ */
@media (max-width:1100px){
  .team-page .org-chart{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
}
@media (max-width:780px){
  .team-page .org-chart{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
}
@media (max-width:480px){
  .team-page .org-chart{ grid-template-columns:1fr; gap:16px; }
}

/* Reveal on scroll */
.team-page .reveal{ opacity:0; transform:translateY(16px); }
.team-page .reveal.show{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }

/* ================= Animations (ประกาศครั้งเดียว) ============= */
@keyframes bgPan{
  from{ background-position:50% 40%, 50% 40%; }
  to  { background-position:50% 28%, 50% 28%; }
}
@keyframes heroShine{
  0%{ transform:translateY(-95%) rotate(8deg); }
  100%{ transform:translateY(40%)  rotate(8deg); }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:none; }
}
@keyframes teamCardShine{
  0%   { transform:translateX(-120%) rotate(8deg); opacity:0; }
  20%  { opacity:.8; }
  100% { transform:translateX(120%)  rotate(8deg); opacity:0; }
}


/* ===============================
   HERO CENTER LOGO/TITLE (center.png)
   ขยายให้ใหญ่ขึ้นทั้ง Desktop & Mobile
   =============================== */

/* ฐาน (Desktop) — กว้างสุด 1400px หรือ 92vw */
.slider .caption .center-title{
  /* จากเดิม clamp(320px, 80vw, 1100px) → ขยาย */
  width: clamp(520px, 92vw, 1400px) !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.25)); /* ช่วยให้อ่านชัดบนภาพสว่าง */
}

/* จอใหญ่พิเศษ (เช่น 2K/4K) — ให้ไปได้ถึง 1600px */
@media (min-width: 1600px){
  .slider .caption .center-title{
    width: clamp(720px, 90vw, 1600px) !important;
  }
}

/* จอ Laptop กลาง–เล็ก */
@media (max-width: 1200px){
  .slider .caption .center-title{
    width: clamp(480px, 94vw, 1300px) !important;
  }
}

/* มือถือ — เต็มความกว้าง ลบระยะขอบและ safe‑area อัตโนมัติ */
@media (max-width: 680px){
  .slider .caption{
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding-left:  max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }
  .slider .caption .center-title{
    width: calc(
      100vw
      - max(28px, env(safe-area-inset-left, 0px))
      - max(28px, env(safe-area-inset-right, 0px))
    ) !important;
    max-width: none !important;
  }
}

/* ===== Hide all slide arrows (desktop + mobile) ===== */
/* Home hero slider */
.slider .arrow,
#prevBtn, #nextBtn,
/* Projects hero carousel */
.hero-carousel .hero-nav,
#heroPrev, #heroNext,
/* Project detail gallery */
.g-nav, .g-prev, .g-next {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}