/* ============================================================
 * TNT Engineering — Design System
 * Modern International / Minimalist / Elegant
 * ========================================================== */

:root{
  /* Color — Classic & Restrained */
  --c-white:#FFFFFF;
  --c-off-white:#FAF9F7;
  --c-beige:#EFEAE3;
  --c-sand:#D8D0C5;
  --c-grey-100:#E5E5E5;
  --c-grey-300:#B8B8B8;
  --c-grey-500:#6E7276;
  --c-graphite:#2B2E31;
  --c-black:#0E0F11;
  --c-navy:#14213D;
  --c-navy-soft:#1E3057;
  --c-accent:#9B1C1C;              /* TNT red — ใช้ไม่เกิน 3% ของหน้าจอ */

  --line:1px solid rgba(14,15,17,.10);
  --line-dark:1px solid rgba(255,255,255,.12);
  --radius:2px;
  --radius-md:6px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-soft:0 1px 2px rgba(14,15,17,.04), 0 8px 24px rgba(14,15,17,.06);
  --container:1320px;
}

/* ---------- Typography: Bilingual Harmony ---------- */
html[lang="th"]{
  --font-body:'IBM Plex Sans Thai','Inter',sans-serif;
  --font-display:'Noto Serif Thai','Cormorant Garamond',serif;
}
html[lang="en"]{
  --font-body:'Inter','IBM Plex Sans Thai',sans-serif;
  --font-display:'Cormorant Garamond','Noto Serif Thai',serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  color:var(--c-graphite);
  background:var(--c-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[lang="th"] body{line-height:1.85;letter-spacing:0}
html[lang="en"] body{line-height:1.7}

.display{font-family:var(--font-display);font-weight:600}
html[lang="en"] .display{letter-spacing:-.02em}
/* ---------- เนื้อหาภาษาไทยที่ฝังอยู่ในหน้า EN (ชื่อผลงานจาก DB) ---------- */
[lang="th"]{
  font-family:'IBM Plex Sans Thai','Inter',sans-serif;
  line-height:1.85;
  letter-spacing:0;
}
[lang="th"] .display{
  font-family:'Noto Serif Thai','Cormorant Garamond',serif;
  letter-spacing:0;
}
/* กันไม่ให้ eyebrow ที่อยู่ในบล็อกไทยถูกบังคับเป็นตัวพิมพ์ใหญ่ */
[lang="th"] .eyebrow{text-transform:none;letter-spacing:.06em}
/* eyebrow — uppercase เฉพาะภาษาอังกฤษ */
.eyebrow{
  font-size:.75rem;font-weight:600;color:var(--c-grey-500); /* #6E7276 บนพื้นขาว ≈ 4.8:1 ผ่าน WCAG AA */
  text-transform:uppercase;letter-spacing:.18em;
}
html[lang="th"] .eyebrow{text-transform:none;letter-spacing:.06em}

.section-num{
  font-family:var(--font-display);font-size:.875rem;
  color:var(--c-accent);letter-spacing:.1em;
}

h1,h2,h3,h4{margin:0;font-weight:600;color:var(--c-black)}
p{margin:0 0 1.25em}
.prose{max-width:68ch}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.section{padding-block:clamp(72px,10vw,140px)}
.rule{height:1px;background:rgba(14,15,17,.10);border:0;margin:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:14px 30px;border-radius:var(--radius);
  font-size:.9375rem;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
/* ให้ utility ซ่อน/แสดงของ Tailwind ชนะ display ของ .btn (กันปุ่ม Company Profile ล้นจอมือถือ) */
.btn.hidden{display:none}
@media (min-width:640px){.btn.sm\:inline-flex{display:inline-flex}}
.btn-primary{background:var(--c-navy);color:#fff}
.btn-primary:hover{background:var(--c-black)}
.btn-outline{background:transparent;color:var(--c-navy);border-color:rgba(14,15,17,.22)}
.btn-outline:hover{border-color:var(--c-navy);background:var(--c-off-white)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost-light:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* text link + เส้นใต้วิ่งซ้าย→ขวา */
.link-underline{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  color:var(--c-navy);font-weight:600;text-decoration:none;
}
.link-underline::after{
  content:'';position:absolute;left:0;bottom:-4px;width:100%;height:1px;
  background:var(--c-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.link-underline:hover::after{transform:scaleX(1)}

/* ---------- Header ---------- */
.utility-bar{
  background:var(--c-navy);color:rgba(255,255,255,.8);
  font-size:.8125rem;letter-spacing:.02em;
}
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,0);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-bottom:var(--line);
}
.site-header.is-raised{box-shadow:0 6px 24px rgba(14,15,17,.07)}
.nav-link{
  position:relative;color:var(--c-graphite);text-decoration:none;
  font-size:.9375rem;font-weight:500;padding-block:6px;
  transition:color .4s var(--ease);
}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--c-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav-link:hover{color:var(--c-navy)}
.nav-link:hover::after{transform:scaleX(1)}

/* ---------- Language Switcher ---------- */
.lang-switch{display:inline-flex;align-items:center;gap:10px;font-size:.8125rem;letter-spacing:.12em;font-weight:600}
.lang-switch a{color:var(--c-grey-500);text-decoration:none;transition:color .35s var(--ease)}
.lang-switch a:hover{color:var(--c-navy)}
.lang-switch a.is-active{color:var(--c-navy);box-shadow:inset 0 -1px 0 var(--c-accent);padding-bottom:2px}
.lang-switch .sep{width:1px;height:12px;background:rgba(14,15,17,.2)}
.utility-bar .lang-switch a{color:rgba(255,255,255,.65)}
.utility-bar .lang-switch a:hover{color:#fff}
.utility-bar .lang-switch a.is-active{color:#fff;box-shadow:inset 0 -1px 0 var(--c-accent)}
.utility-bar .lang-switch .sep{background:rgba(255,255,255,.25)}

/* ---------- Cards ---------- */
.card{
  background:var(--c-white);border:var(--line);border-radius:var(--radius-md);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease);
}
.card:hover{border-color:rgba(14,15,17,.2);box-shadow:var(--shadow-soft);transform:translateY(-3px)}
.card-media{overflow:hidden;background:var(--c-beige)}
.card-media img{transition:transform .7s var(--ease)}
.card:hover .card-media img{transform:scale(1.04)}

/* ---------- Vision block ---------- */
.vision-band{background:var(--c-navy);color:#fff}
.vision-band .display{color:#fff}

/* ---------- Marquee ---------- */
@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-wrapper{overflow:hidden;position:relative;display:flex;align-items:center}
.marquee-track{display:flex;width:max-content;animation:scroll-left 40s linear infinite}
.marquee-track:hover{animation-play-state:paused}

/* ---------- Scroll reveal ---------- */
/* ซ่อนเฉพาะเมื่อ JS ทำงาน (header.php ใส่ class "js" ให้ <html>) — ถ้า JS โหลดไม่ได้ เนื้อหายังแสดงครบ */
.js .reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  /* กันเนื้อหาหาย: ถ้า main.js ไม่ทำงาน (โหลดไม่ได้/ถูกบล็อก/cache เก่า) จะค่อยๆ แสดงเองใน 1.2 วินาที */
  animation:reveal-failsafe .6s var(--ease) 1.2s forwards;
}
.reveal-on .reveal{animation:none}               /* main.js ทำงานปกติ → ใช้เอฟเฟกต์ตอนเลื่อนแทน */
.js .reveal.is-visible{opacity:1;transform:none}
@keyframes reveal-failsafe{to{opacity:1;transform:none}}

/* ---------- Scroll progress ---------- */
#scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:90;
  background:var(--c-accent);transition:width .1s linear;
}

/* ---------- Quick actions: ปุ่มติดต่อด่วน + กลับขึ้นด้านบน ---------- */
.quick-actions{
  position:fixed;right:20px;bottom:20px;z-index:70;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
.qa-btn{
  position:relative;width:52px;height:52px;border-radius:999px;border:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;cursor:pointer;
  box-shadow:0 10px 24px -8px rgba(14,15,17,.45),0 2px 6px rgba(14,15,17,.12);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),opacity .35s var(--ease),visibility .35s;
}
.qa-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(14,15,17,.5),0 2px 6px rgba(14,15,17,.14)}
.qa-call{background:var(--c-accent)}
.qa-call:hover{background:#7F1616}
.qa-line{background:#06C755}
.qa-line:hover{background:#05B34C}
.qa-top{width:44px;height:44px;background:var(--c-navy);opacity:0;visibility:hidden;transform:translateY(8px)}
.qa-top.is-visible{opacity:1;visibility:visible;transform:none}
.qa-top:hover{background:var(--c-black)}
/* คลื่นวงแหวนรอบปุ่มโทร (ครั้งละไม่นาน ไม่รบกวนสายตา) */
.qa-call::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(155,28,28,.55);animation:qa-pulse 2.6s var(--ease) 1.5s 3;
}
@keyframes qa-pulse{0%{box-shadow:0 0 0 0 rgba(155,28,28,.5)}70%{box-shadow:0 0 0 14px rgba(155,28,28,0)}100%{box-shadow:0 0 0 0 rgba(155,28,28,0)}}
/* ป้ายข้อความเลื่อนออกทางซ้ายเมื่อชี้ (เดสก์ท็อป) */
.qa-label{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translate(6px,-50%);
  white-space:nowrap;background:var(--c-black);color:#fff;
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;
  padding:7px 12px;border-radius:var(--radius);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.qa-btn:hover .qa-label,.qa-btn:focus-visible .qa-label{opacity:1;transform:translate(0,-50%)}
@media (max-width:640px){
  .quick-actions{right:14px;bottom:14px;gap:10px}
  .qa-btn{width:50px;height:50px}
  .qa-top{width:42px;height:42px}
}
body.menu-open .quick-actions{display:none}

/* ---------- Stats band: ตัวเลขนับขึ้น ---------- */
.stats-card{
  margin:0;background:var(--c-white);
  border:var(--line);border-radius:var(--radius-md);
  box-shadow:0 30px 60px -30px rgba(14,15,17,.35),0 2px 8px rgba(14,15,17,.04);
  overflow:hidden;
}
.stat{
  display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;
  padding:clamp(22px,2.6vw,36px) clamp(18px,2.4vw,34px);
  border-right:var(--line);border-bottom:var(--line);position:relative;
}
.stat::before{ /* เส้นแดงเล็กด้านบน */
  content:'';position:absolute;left:clamp(18px,2.4vw,34px);top:0;width:28px;height:2px;background:var(--c-accent);
}
.stat-label{font-size:.875rem;color:var(--c-grey-500);line-height:1.5}
.stat-value{
  margin:0;font-family:var(--font-display);font-weight:600;color:var(--c-navy);
  font-size:clamp(1.9rem,3.4vw,2.75rem);line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.stat-value--text{font-size:clamp(1.45rem,2.6vw,2.5rem);line-height:1.25}
@media (max-width:640px){
  .stat-value{font-size:1.9rem}
  .stat-value--text{font-size:1.35rem;padding-top:.35rem}
  .stat-label{font-size:.8125rem}
  footer{padding-bottom:84px}            /* เว้นที่ให้ปุ่มติดต่อลอย ไม่บังข้อความท้ายเว็บ */
}
.stats-card .stat:nth-child(2n){border-right:0}
.stats-card .stat:nth-last-child(-n+2){border-bottom:0}
@media (min-width:1024px){
  .stats-card .stat{border-bottom:0;border-right:var(--line)}
  .stats-card .stat:nth-child(2n){border-right:var(--line)}
  .stats-card .stat:last-child{border-right:0}
}

/* ---------- ตัวบอกชั้นลิฟต์ (Floor indicator) ---------- */
[data-floor]{scroll-margin-top:74px}
.floor-indicator{display:none}
@media (min-width:1400px) and (min-height:680px){
  .floor-indicator{
    display:flex;flex-direction:column;align-items:center;gap:14px;
    position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:55;
    padding:12px 8px 14px;border-radius:30px;
    background:linear-gradient(180deg,#F4F4F2,#DEDCD8);
    border:1px solid rgba(14,15,17,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 40px -18px rgba(14,15,17,.45);
    transition:opacity .4s var(--ease),transform .4s var(--ease);
  }
}
.floor-indicator.is-hidden{opacity:0;pointer-events:none;transform:translate(12px,-50%)}
/* จอแสดงชั้นแบบไฟ LED */
.floor-display{
  width:46px;height:54px;border-radius:10px;
  background:radial-gradient(120% 90% at 50% 0%,#23262B,#0B0C0E);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;overflow:hidden;
}
.floor-arrow{color:#FF4D3D;height:10px;line-height:0;opacity:0;transition:opacity .25s,transform .25s}
.floor-arrow[data-dir="up"]{opacity:1;animation:floor-blink .9s steps(2) infinite}
.floor-arrow[data-dir="down"]{opacity:1;transform:rotate(180deg);animation:floor-blink .9s steps(2) infinite}
@keyframes floor-blink{50%{opacity:.25}}
.floor-num{
  font-family:'Inter',ui-monospace,monospace;font-weight:600;font-size:1.35rem;line-height:1;
  color:#FF4D3D;text-shadow:0 0 8px rgba(255,77,61,.75),0 0 2px rgba(255,77,61,.9);
  font-variant-numeric:tabular-nums;display:inline-block;
}
.floor-num.roll-up{animation:floor-roll-up .35s var(--ease)}
.floor-num.roll-down{animation:floor-roll-down .35s var(--ease)}
@keyframes floor-roll-up{from{transform:translateY(70%);opacity:0}to{transform:none;opacity:1}}
@keyframes floor-roll-down{from{transform:translateY(-70%);opacity:0}to{transform:none;opacity:1}}
/* ปุ่มกดชั้น */
.floor-buttons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.floor-btn{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;text-decoration:none;
  background:linear-gradient(180deg,#FFFFFF,#E4E2DE);
  border:1px solid rgba(14,15,17,.18);
  box-shadow:0 2px 3px rgba(14,15,17,.18),inset 0 -2px 0 rgba(14,15,17,.06);
  color:var(--c-graphite);font:600 .8125rem/1 'Inter',sans-serif;
  transition:box-shadow .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .15s;
}
.floor-btn:hover{border-color:var(--c-navy);color:var(--c-navy)}
.floor-btn:active{transform:scale(.94)}
.floor-btn.is-active{
  color:var(--c-accent);border-color:rgba(155,28,28,.55);
  box-shadow:0 0 0 2px rgba(255,77,61,.35),0 0 12px rgba(255,77,61,.45),inset 0 -2px 0 rgba(14,15,17,.06);
}
.floor-btn-label{
  position:absolute;right:calc(100% + 14px);top:50%;transform:translate(6px,-50%);
  white-space:nowrap;background:var(--c-black);color:#fff;
  font:500 .8125rem/1 var(--font-body);padding:8px 12px;border-radius:var(--radius);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.floor-btn:hover .floor-btn-label,.floor-btn:focus-visible .floor-btn-label{opacity:1;transform:translate(0,-50%)}

/* ---------- Mobile menu ---------- */
#mobile-menu{
  position:fixed;inset:0;z-index:80;background:var(--c-white);
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;
}
#mobile-menu.is-open{opacity:1;visibility:visible;transform:none}
body.menu-open .floor-indicator{display:none}
#mobile-menu a{
  font-family:var(--font-display);font-size:1.75rem;color:var(--c-black);
  text-decoration:none;padding:14px 0;border-bottom:var(--line);
}

/* การ์ดผลงานที่กดได้ด้วยคีย์บอร์ด */
.card[data-gallery]:focus-visible{outline:2px solid var(--c-navy);outline-offset:4px}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--c-off-white)}
::-webkit-scrollbar-thumb{background:var(--c-sand);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--c-grey-300)}

/* ---------- Accessibility ---------- */
:focus-visible{outline:2px solid var(--c-navy);outline-offset:3px}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--c-navy);color:#fff;padding:12px 20px;
}
.skip-link:focus{left:12px;top:12px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
  .qa-call::after,.floor-arrow{animation:none!important}
  html{scroll-behavior:auto}
}