/* ===== 8-BIT PROGRAMMER THEME (Integrated Sarabun for inner content) ===== */
:root{
  --bg:#050505; --card:#0b0f18; --text:#e0e0e0; --muted:#8aa0b6;
  --accent:#00ffff; --accent2:#ff00ff; --pixel:#00ff90; --border:#1a2233;
  --shadow:0 12px 28px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--text);
  font-family:"Press Start 2P","VT323",monospace;
  background: var(--bg);
  overflow:hidden;
}

/* Neon grid */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background-image:
    linear-gradient(rgba(0,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,255,.05) 1px, transparent 1px);
  background-size:40px 40px;
  animation:moveGrid 18s linear infinite;
}
@keyframes moveGrid{ to{ background-position:40px 40px,40px 40px; } }

/* Scanline overlay */
.scanline{ position:fixed; inset:0; pointer-events:none; z-index:-1;
  background: repeating-linear-gradient(transparent, transparent 3px, rgba(0,0,0,.2) 4px);
  mix-blend-mode: overlay; opacity:.35;
}

/* Swiper */
.swiper{ width:100%; height:100%; }
.swiper-slide{ display:grid; place-items:center; padding:110px 24px 28px; }
.slide-content{ width:100%; max-width:1100px; height:100%; max-height:100%; }
.slide-content.center{ display:grid; place-items:center; }
.slide-content.scrollable{ overflow:auto; scrollbar-width:thin; scrollbar-color:var(--border) var(--card); }
.slide-content.scrollable::-webkit-scrollbar{ width:8px; }
.slide-content.scrollable::-webkit-scrollbar-thumb{ background:var(--border); border-radius:20px; }
.swiper-pagination-bullet{ background:#3dd6d6; opacity:.5; }
.swiper-pagination-bullet-active{ background:var(--accent); opacity:1; box-shadow:0 0 8px var(--accent); }

/* Navbar */
.nav{ position:fixed; top:0; left:0; width:100%; z-index:10;
  border-bottom:2px solid var(--accent);
  background:linear-gradient(180deg, rgba(0,255,255,.08), transparent);
  padding:12px 0; box-shadow:0 0 12px rgba(0,255,255,.25);
}
.container{ max-width:1200px; padding:0 24px; margin:0 auto; }
.nav__inner{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.nav-brand{ color:var(--accent); text-shadow:0 0 8px var(--accent2); letter-spacing:1px; }
.nav-links{ list-style:none; display:flex; gap:10px; margin:0; padding:0; flex-wrap:wrap; }
.nav-link{ display:inline-block; padding:10px 14px; text-decoration:none; color:var(--accent2);
  border:2px solid var(--accent2); background:#000; box-shadow:0 0 6px var(--accent2);
}
.nav-link:hover{ background:var(--accent2); color:#000; transform:translateY(-2px); transition:.12s; }
.nav-link.active{ outline:3px solid var(--accent); }

/* Section system */
.section{ width:100%; }
.section-head{ margin-bottom:18px; }
.heading{ margin:0; color:var(--accent); text-shadow:0 0 8px var(--accent2); font-family:'Press Start 2P', cursive; }
.section-sub{ margin:8px 0 0; color:#9be8ff; font-family:'VT323', monospace; }

/* Cards */
.card{ background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--card);
  border:2px solid var(--accent); border-radius:12px; padding:22px; box-shadow:var(--shadow); }
.pixel{ box-shadow:0 0 0 4px #000, 0 0 0 6px var(--accent); }
.pixel-plate{ border:2px solid var(--accent2); box-shadow:0 0 0 4px #000, 0 0 0 6px var(--accent2); }
.card.tight{ padding:18px; }

/* ---------- ABOUT / INTEREST LAYOUT + FONT FIX ---------- */

/* ระยะห่างระหว่างกรอบ */
.about-full {
  margin-bottom: 40px;
}

/* ใช้ Sarabun เฉพาะเนื้อหา และไม่ทับ sub-header */
.about-full p:not(.section-sub),
.about-full li,
.about-full ul,
.interest-full p:not(.section-sub),
.interest-full li,
.interest-full ul {
  font-family: 'Sarabun', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.9;
  color: #e9f6ff;
}

/* ตัวหนาในเนื้อหา */
.about-full strong,
.interest-full strong {
  font-family: 'Sarabun', sans-serif;
  font-weight: 600;
}

/* บังคับ sub-header ให้เป็น VT323 (8-bit) */
.about-full .section-sub,
.interest-full .section-sub,
.section-sub {
  font-family: 'VT323', monospace !important;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
}

/* Interest list */
.interest-full{ border-color: var(--accent2); }
.interest-list{ list-style:none; padding-left:22px; }
.interest-list li{ margin-bottom:10px; position:relative; }
.interest-list li::before{
  content: ">";
  position:absolute; left:-14px; top:0; color:var(--accent);
  font-family:'VT323', monospace;
}

/* ---------- WORK PAGE ---------- */
.work-full {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* จัดให้กลางจอแนวตั้ง */
  text-align: left;
  gap: 2rem;
  padding: 2rem 1rem;
}

.work-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 800px;
}

.job.card.pixel {
  background-color: rgba(10, 20, 35, 0.7);
  border: 2px solid #1a2e46;
  box-shadow: 0 0 25px rgba(0, 150, 255, 0.2);
  padding: 1.5rem 2rem;
  border-radius: 1.5rem;
  backdrop-filter: blur(5px);
}

.job-header h3 {
  font-family: 'VT323', monospace;
  font-size: 1.6rem;
  color: #a8e4ff;
  margin-bottom: 0.25rem;
}

.job-header .duration {
  font-family: 'Sarabun', sans-serif;
  font-size: 0.95rem;
  color: #b5c6d3;
}

.cli-list li {
  font-family: 'Sarabun', sans-serif;
  font-size: 1rem;
  line-height: 1.9;
  color: #e9f6ff;
}

.cli-list .prompt {
  color: #70d6ff;
  margin-right: 0.5rem;
}


/* Grid helpers */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); gap:18px; }
.grid-3{ grid-template-columns:repeat(3,1fr); gap:18px; }

/* Hero */
.hero{ display:grid; grid-template-columns:240px 1fr; gap:28px; align-items:center; }
.avatar{ width:240px; height:240px; border-radius:12px; object-fit:cover;
  border:2px solid var(--accent2); background:#111; box-shadow:0 0 0 4px #000, 0 0 0 6px var(--accent2); }
.title{ font-size:1.8rem; margin:0 0 6px; position:relative; }
.role{ color:#85e3ff; margin:0 0 10px; }
.tagline{ color:var(--text); font-size:.9rem; }
.tagline::after{ content:"█"; color:var(--accent); animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{opacity:0} }
.badges{ display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:12px 0 0; list-style:none; }
.badge{ background:#000; border:2px solid var(--accent); padding:6px 10px; }
.cta{ margin-top:16px; display:flex; gap:10px; }
.btn{ background:#000; border:2px solid var(--accent); color:var(--accent); padding:10px 14px; text-decoration:none; display:inline-block; }
.btn:hover{ background:var(--accent); color:#000; box-shadow:0 0 10px var(--accent); }
.btn.alt{ border-color:var(--accent2); color:var(--accent2); }
.btn.alt:hover{ background:var(--accent2); color:#000; box-shadow:0 0 10px var(--accent2); }
.btn.tiny{ padding:6px 10px; font-size:.8rem; }

/* Projects */
.projects{ display:grid; gap:18px; }
.projects.grid-3{ grid-template-columns:repeat(3,1fr); }
.projects.grid-2{ grid-template-columns:repeat(2,1fr); }
.project{ padding:16px; display:flex; flex-direction:column; gap:10px; background:#051018; }
.project h3{ margin:0; color:#fff; }
.project .thumb{ width:100%; aspect-ratio:16/9; overflow:hidden; border:2px solid var(--border); background:#0c1a30; }
.project .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.project:hover .thumb img{ transform:scale(1.02); }
.tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tags span{ border:2px solid var(--accent); padding:2px 6px; background:#000; }

/* Skills */
.subhead{ margin:10px 0; color:#9be8ff; }
.skill{ margin:12px 0 16px; }
.skill .head{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.bar{ position:relative; height:16px; background:#000; border:2px solid var(--accent); box-shadow:0 0 8px var(--accent); overflow:hidden; }
.bar>span{ display:block; height:100%; width:0; background:
  repeating-linear-gradient(90deg, var(--pixel) 0 8px, transparent 8px 12px);
  transition: width 1s steps(12, end);
}

/* Work / Contact */
.cli-list{ list-style:none; padding:0; margin:0; }
.cli-list li{ position:relative; margin:8px 0; }
.prompt{ color:var(--accent); margin-right:8px; }
.contact-list{ list-style:none; padding:0; font-size:.9rem; }
.contact-list li{ margin-bottom:12px; }
.site-footer{ color:#9bb3c7; text-align:left; padding-top:20px; font-size:.8rem; }

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;padding:24px;z-index:9999}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:90vh;width:auto;height:auto;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.lightbox-close{position:absolute;top:16px;right:20px;font-size:32px;line-height:1;background:transparent;border:0;color:#fff;cursor:pointer}

/* Glitch */
.glitch::before, .glitch::after{ content: attr(data-text); position:absolute; left:0; top:0; }
.glitch::before{ animation:gl1 2s infinite; color:var(--accent); clip-path: polygon(0 0,100% 0,100% 45%,0 45%); }
.glitch::after{ animation:gl2 2s infinite; color:var(--accent2); clip-path: polygon(0 55%,100% 55%,100% 100%,0 100%); }
@keyframes gl1{ 0%{transform:translate(0,0)} 20%{transform:translate(-2px,-1px)} 40%{transform:translate(1px,1px)} 60%{transform:translate(-1px,2px)} 80%{transform:translate(2px,-1px)} 100%{transform:translate(0,0)} }
@keyframes gl2{ 0%{transform:translate(0,0)} 20%{transform:translate(1px,-1px)} 40%{transform:translate(-1px,1px)} 60%{transform:translate(2px,0)} 80%{transform:translate(-2px,1px)} 100%{transform:translate(0,0)} }

/* Responsive */
@media (max-width: 1100px){
  .projects.grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 900px){
  .nav-links{ display:none; }
  .hero{ grid-template-columns:1fr; text-align:center; }
  .avatar{ margin:0 auto; }
  .projects.grid-2{ grid-template-columns:1fr; }
  .projects.grid-3{ grid-template-columns:1fr; }
}

/* ====== Layout เหมือนหน้า About ====== */
.section-like-about{
  padding: clamp(2rem, 3.5vw, 3rem) 1rem 4rem; /* ยกไม่ให้ต่ำเกินไป */
}
.section-head-like-about{
  max-width: 1040px;
  margin: 0 auto 1.25rem;
  text-align: left;               /* หัวข้อชิดซ้ายแบบ About */
}
.card-stack-like-about{
  max-width: 1040px;
  margin: 0 auto;                 /* การ์ดกึ่งกลางแนวนอน */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ====== Card แบบ About (กรอบ 2 ชั้น + เงา) ====== */
.about-card-like{
  position: relative;
  background: linear-gradient(180deg, #0c1623 0%, #0b1522 100%);
  border-radius: 18px;
  padding: 1.5rem 1.75rem;
  border: 3px solid #00d2ff;                     /* outer cyan */
  box-shadow:
    0 0 0 3px #ff00d4 inset,                     /* inner magenta */
    0 0 24px rgba(0, 214, 255, .35);             /* glow */
}

/* ====== Typography ให้เหมือน About ====== */
.work-title h3{
  font-family: 'VT323', monospace;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  letter-spacing: .5px;
  color: #a8e4ff;
  margin: 0 0 .35rem 0;
  text-transform: uppercase;
}
.work-title .at{ color:#70d6ff; }
.duration{
  font-family:'Sarabun', sans-serif;
  font-size: .95rem;
  color: #b5c6d3;
  margin: 0 0 .5rem 0;
}
.cli-list{ list-style: none; margin: .25rem 0 0; padding: 0; }
.cli-list li{
  display: flex; gap: .6rem;
  font-family: 'Sarabun', sans-serif;
  font-size: 1rem; line-height: 1.9;
  color:#e9f6ff;
}
.cli-list .prompt{
  font-family:'VT323', monospace;
  flex: 0 0 auto;
  transform: translateY(.05rem);
  color:#70d6ff;
}

/* ====== ปรับเฉพาะหน้า WORK ให้ตรงธีม ====== */
.work-like-about .heading{ letter-spacing: 2px; }
.work-card {
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 0 0 4px #000, 0 0 0 6px var(--accent);
}

/* ยกเลิก min-height:100vh ที่เคยใช้กึ่งกลางแนวตั้ง (ไม่ให้ section ต่ำ) */
.work-full, .work-section{ min-height: auto !important; justify-content: flex-start !important; }

/* ระยะบนจอกว้าง */
@media (min-width: 992px){
  .section-like-about{ padding-top: 3rem; }
}
/* ========== CONTACT PAGE (8-bit glow style) ========== */
.contact-section {
  padding: clamp(2rem, 4vw, 3rem) 1rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
}

.contact-card {
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 0 0 4px #000, 0 0 0 6px var(--accent);
  margin-top: 3rem;  /* เว้นระยะจากหัวข้อ */
  max-width: 640px;
  width: 100%;
  text-align: left;
  font-family: 'Sarabun', sans-serif;
  color: #e9f6ff;
  position: relative;
  animation: fadeInUp .8s ease;
  margin-top: 10rem;
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 2px dashed rgba(255,0,212,.25);
  pointer-events: none;
}

.contact-info p {
  margin: 0.75rem 0;
  font-size: 1.05rem;
}
.contact-info a {
  color: #70d6ff;
  text-decoration: none;
  transition: color .2s;
}
.contact-info a:hover {
  color: #ff00d4;
}
.label {
  font-family: 'VT323', monospace;
  color: #a8e4ff;
  margin-right: .5rem;
}

.social {
  margin-top: 1rem;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  letter-spacing: .5px;
}

.contact-footer {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 1.5rem;
  padding-top: .75rem;
  font-size: .9rem;
  color: #b5c6d3;
  text-align: center;
}
.contact-footer .signature {
  font-family: 'VT323', monospace;
  font-size: .95rem;
  color: #70d6ff;
  margin-top: .25rem;
}

/* Simple fade-in animation */
@keyframes fadeInUp {
  0% {opacity:0; transform:translateY(20px);}
  100% {opacity:1; transform:translateY(0);}
}

/* ปิด scrollbar เฉพาะหน้า contact */
[data-hash="contact"] .scrollable {
  overflow-y: hidden !important; /* ปิดการเลื่อนแนวตั้ง */
}

/* ถ้าอยากซ่อน scrollbar ทุกหน้าที่ใช้ slide-content */
.scrollable::-webkit-scrollbar {
  display: none;
}
.scrollable {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===== 8-BIT NEON ANIMATION PACK (inline) ===== */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Neon flicker heading + underline scan */
.heading.neon-flicker{
  position: relative;
  text-shadow: 0 0 6px var(--accent2), 0 0 14px var(--accent);
  animation: neonFlicker 6s linear infinite;
}
.heading.neon-flicker::after{
  content:""; position:absolute; left:0; bottom:-10px; height:3px; width:100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: underlineScan 3.5s linear infinite;
}
@keyframes neonFlicker{
  0%, 7%, 9%, 11%, 100%{ opacity: 1; filter: drop-shadow(0 0 12px var(--accent)); }
  8%, 10%{ opacity:.65; filter:none; }
}
@keyframes underlineScan{
  0%{ transform: translateX(-100%); opacity:.3; }
  50%{ opacity:1; }
  100%{ transform: translateX(100%); opacity:.3; }
}

/* Cards: float, pulse border, shimmer, scanline overlay, reveal */
.card.floaty { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
}
.card.neon-pulse{ position: relative; }
.card.neon-pulse::after{
  content:""; position:absolute; inset:-2px; border-radius: inherit; pointer-events:none;
  box-shadow: 0 0 0 0 var(--accent);
  animation: borderPulse 2.6s ease-in-out infinite;
}
@keyframes borderPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(0,255,255,.0), 0 0 18px rgba(0,255,255,.15); }
  50%{ box-shadow: 0 0 0 4px rgba(0,255,255,.15), 0 0 26px rgba(0,255,255,.35); }
}
.card.shimmer{ position: relative; overflow: hidden; }
.card.shimmer::before{
  content:""; position:absolute; top:-20%; left:-40%; width:40%; height:140%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.12) 45%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.12) 55%, transparent 100%);
  transform: skewX(-15deg);
  animation: cardShimmer 5s linear infinite;
}
@keyframes cardShimmer{ 
  0%{ transform: translateX(0) skewX(-15deg); }
  100%{ transform: translateX(350%) skewX(-15deg); }
}
.card.scanline-overlay{ position:relative; }
.card.scanline-overlay::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(transparent, transparent 3px, rgba(0,0,0,.18) 4px);
  mix-blend-mode: overlay; opacity:.35;
}
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-visible{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }

/* Buttons/links spark + press */
.btn.sparkle, .nav-link.sparkle{ position:relative; overflow:hidden; }
.btn.sparkle::after, .nav-link.sparkle::after{
  content:""; position:absolute; top:0; left:-120%; width:120%; height:100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.3) 45%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.3) 55%, transparent 100%);
  transform: skewX(-18deg);
}
.btn.sparkle:hover::after, .nav-link.sparkle:hover::after{ left:120%; transition: left .55s ease; }
.btn.press, .nav-link.press{ transition: transform .08s ease; }
.btn.press:active, .nav-link.press:active{ transform: translateY(2px) scale(.99); }

/* Glitch hover for anchors */
.a-glitch { position:relative; display:inline-block; }
.a-glitch::before, .a-glitch::after{
  content: attr(data-text); position:absolute; left:0; top:0; pointer-events:none;
  opacity:0; transition: opacity .12s;
}
.a-glitch::before{ clip-path: inset(0 0 48% 0); color: var(--accent2); transform: translate(0); }
.a-glitch::after{ clip-path: inset(52% 0 0 0); color: var(--accent); transform: translate(0); }
.a-glitch:hover::before{ opacity:1; transform: translate(-1px,-1px); }
.a-glitch:hover::after{ opacity:1; transform: translate(1px,1px); }

/* Parallax option on grid background when body has class */
body.parallax-grid::before{ animation: moveGrid 18s linear infinite alternate; }

/* Pixel particles background */
.pixels-layer{ position: fixed; inset:0; pointer-events:none; z-index: -1; }
.pixel-dot{
  position:absolute; width:2px; height:2px; background:var(--accent); opacity:.5;
  box-shadow: 0 0 6px var(--accent);
  animation: pixelFloat linear infinite;
}
@keyframes pixelFloat{
  from{ transform: translateY(0); opacity:.2; }
  to{ transform: translateY(-60vh); opacity:.8; }
}


/* ======= MOBILE COMPATIBILITY ======= */
@media (max-width: 900px){
  body{ overflow:auto; }
  .swiper{ height:auto; }
  .swiper-slide{ min-height: 100dvh; padding: 86px 16px 24px; place-items: start; }
  .slide-content{ width:100%; max-width: 100%; height:auto; max-height:none; }
  .container{ padding: 0 16px; }

  /* Navbar: show hamburger, hide links into drawer */
  .nav__inner{ position: relative; }
  .nav-toggle{
    display:block;
    background:#000; color: var(--accent2);
    border:2px solid var(--accent2);
    padding:8px 12px; font-family:"Press Start 2P","VT323",monospace;
    box-shadow:0 0 6px var(--accent2);
  }
  .nav-links{
    position: fixed;
    top:64px; right:16px;
    display:none; /* hidden default */
    flex-direction: column;
    gap:8px;
    background: #050a12;
    border:2px solid var(--accent2);
    box-shadow:0 0 12px var(--accent2);
    padding:12px;
    z-index: 999;
  }
  .nav.open .nav-links{ display:flex; }

  /* Make links full width for easier taps */
  .nav-link{ padding:12px 14px; min-width: 180px; text-align:center; }

  /* Hero adjustments */
  .hero{ grid-template-columns:1fr; gap:18px; }
  .avatar{ width:140px; height:140px; }

  /* Cards spacing / readable paddings */
  .card{ padding:16px; border-radius:12px; }
  .about-full p:not(.section-sub),
  .interest-full p:not(.section-sub),
  .cli-list li{ font-size: .98rem; line-height: 1.7; }

  /* Projects grid single column already handled; ensure fit */
  .projects.grid-3, .projects.grid-2{ grid-template-columns:1fr; }

  /* Reduce animation heaviness */
  .card.shimmer::before{ display:none; }
  .card.scanline-overlay::after{ opacity:.22; }
  .heading.neon-flicker::after{ bottom:-6px; }

  /* Prevent horizontal scroll from effects */
  .card.neon-pulse::after{ inset:0; }
}

/* Even smaller phones */
@media (max-width: 600px){
  .nav-links{ right:12px; top:60px; }
  .nav-link{ min-width: 160px; }
  .heading{ font-size: clamp(1.1rem, 7vw, 1.4rem); }
  .work-title h3{ font-size: clamp(1rem, 5.5vw, 1.25rem); }
  .contact-card{ margin-top: 2rem; }
}


/* ===== MOBILE FIX: enable native vertical scroll & prevent overflow issues ===== */
@media (max-width: 900px){
  html, body{ height:auto !important; overflow-y:auto !important; }
  body{ overflow-x:hidden !important; }

  /* Allow native scroll instead of locked swiper viewport */
  .swiper, .swiper-wrapper, .swiper-slide{
    height:auto !important;
    overflow:visible !important;
  }
  .swiper{ height:auto !important; overflow: visible !important; }
  .slide-content{
    height:auto !important; max-height:none !important;
    touch-action: pan-y; /* allow vertical panning */
  }
  .slide-content.scrollable{
    overflow: visible !important; /* let page handle scrolling */
  }

  /* Undo Contact-page scrollbar hide on mobile */
  [data-hash="contact"] .scrollable{
    overflow-y: visible !important;
  }

  /* Safer padding for top nav */
  .swiper-slide{ padding: 86px 16px 24px !important; display:block !important; }

  /* Prevent huge headings from overflow */
  .heading{ font-size: clamp(1.1rem, 6.5vw, 1.5rem); }
  .title{ font-size: clamp(1.2rem, 7vw, 1.6rem); }

  /* Hero adjustments */
  .hero{ grid-template-columns:1fr !important; gap:16px; text-align:center; }
  .avatar{ width:140px; height:140px; margin:0 auto; }

  /* Tighten badges/buttons */
  .badges{ justify-content:center; }
  .btn{ padding:10px 12px; }
}


/* ===== MOBILE REWORK: keep Swiper paging, scroll INSIDE each slide ===== */
@media (max-width: 900px){
  /* Lock page height to viewport; avoid long blank space */
  html, body{ height:100%; overflow:hidden; }

  /* Swiper keeps full viewport height */
  .swiper{ height: 100dvh !important; }
  .swiper-wrapper{ height: 100% !important; }
  .swiper-slide{ height: 100% !important; padding: 86px 16px 18px !important; display:block !important; place-items: initial !important; }

  /* Inner content gets its own scroll area */
  .slide-content{
    height: calc(100dvh - 86px - 18px) !important; /* nav + bottom padding */
    max-height: calc(100dvh - 86px - 18px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .slide-content.scrollable{ overflow-y: auto !important; }

  /* Headings/hero sizing */
  .heading{ font-size: clamp(1.1rem, 6.2vw, 1.4rem); }
  .title{ font-size: clamp(1.2rem, 6.5vw, 1.6rem); }
  .hero{ grid-template-columns:1fr !important; gap:16px; text-align:center; }
  .avatar{ width:140px; height:140px; margin:0 auto; }
  .badges{ justify-content:center; }
  .btn{ padding:10px 12px; }

  /* Drawer nav (from earlier rules) remains */
}

/* Tiny phones */
@media (max-width: 420px){
  .heading{ font-size: clamp(1rem, 6.5vw, 1.25rem); }
  .work-title h3{ font-size: clamp(0.95rem, 5.2vw, 1.15rem); }
}

/* ===== WORK: Mobile polish (fix broken wraps & bullet alignment) ===== */
@media (max-width: 600px){
  .work-card{ padding: 14px 14px; border-radius: 12px; }
  .work-title h3{ font-size: clamp(1rem, 5.2vw, 1.2rem); letter-spacing: .3px; }
  .duration{ font-size: .9rem; }

  /* List readability */
  .cli-list{ margin-top: .35rem; }
  .cli-list li{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.7;
    /* ทำให้ภาษาอังกฤษ/คำยาวไม่แตกแปลก ๆ */
    word-break: normal;
    overflow-wrap: anywhere; /* ตัดได้เมื่อคอลัมน์แคบ */
    hyphens: auto;          /* ช่วยคำอังกฤษ */
  }
  .cli-list .prompt{
    flex: 0 0 14px;         /* ล็อกความกว้างสัญลักษณ์ › */
    transform: none;
    line-height: 1.6;
    margin-top: .1rem;
  }
}

.hero-copy {
  align-self: center;
  margin: 0;
}

/* จอเล็กมาก */
@media (max-width: 420px){
  .work-card{ padding: 12px; }
  .work-title h3{ font-size: clamp(.95rem, 5vw, 1.1rem); }
  .cli-list li{ font-size: .95rem; gap: 6px; }
  .cli-list .prompt{ flex-basis: 12px; }
}

/* ===== HOME (Hero) — Mobile compact ===== */
@media (max-width: 600px){
  /* การ์ดฮีโร่ให้เล็กลงและอ่านง่าย */
  .hero.card{
    padding: 14px !important;
    border-radius: 12px;
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
  }

  /* รูปโปรไฟล์ */
  .hero .avatar{
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto 6px;
  }

  /* ชื่อ (รองรับทั้งแบบใช่ .title และแบบแยกชื่อ-นามสกุล .name-line) */
  .hero .title{
    font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
    line-height: 1.05;
    margin: 6px 0 4px;
  }
  .hero .name-line:first-child{      /* PROMPONG */
    font-size: clamp(1.2rem, 7.2vw, 1.6rem) !important;
  }
  .hero .name-line:last-child{       /* นามสกุลยาว */
    font-size: clamp(1rem, 6.2vw, 1.35rem) !important;
    margin-top: 2px;
  }

  /* กันเอฟเฟกต์ glitch ดันกรอบบนจอเล็ก */
  .hero .glitch::before,
  .hero .glitch::after{ transform: translate(0,0); }

  /* บทบาท/แท็กไลน์ */
  .hero .role{ font-size: .95rem; margin: 2px 0 4px; }
  .hero .tagline{ font-size: .85rem; }

  /* แถบ badges ใต้ชื่อ (มหาลัย/เกรด/ที่อยู่) */
  .hero .badges{
    justify-content: center;
    gap: 8px;
  }
  .hero .badge{
    padding: 4px 8px;
    font-size: .85rem;
  }

  /* ปุ่ม CTA ให้ซ้อนแนวตั้งและกว้างพอดีนิ้ว */
  .hero .cta{
    margin-top: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .hero .btn{
    font-size: .95rem;
    padding: 10px 12px;
  }

  /* เว้นขอบบนล่างของสไลด์ให้พอดี ไม่ให้ชน navbar/ขอบล่าง */
  .swiper-slide[data-hash="home"]{
    padding: 86px 16px 18px !important;
  }
  .swiper-slide[data-hash="home"] .slide-content{
    height: calc(100dvh - 86px - 18px) !important;
    max-height: calc(100dvh - 86px - 18px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

@media (max-width: 600px){
  .hero .title{
    font-size: clamp(1.1rem, 5.8vw, 1.35rem);
    letter-spacing: 0px;
    transform: scaleX(0.95);  /* บีบแนวนอนเล็กน้อย */
  }
}