/* ============================================================
   NANOSOFT — รับเขียนโปรแกรมเชียงใหม่ (Landing Template)
   Stack: Bootstrap 5.3 (layout/components) + Custom CSS (identity)
   Font: Prompt (Google Fonts)
   ============================================================
   สารบัญ (Table of contents)
   1. Design Tokens (:root)
   2. Base / Reset
   3. Typography helpers
   4. Buttons
   5. Navbar
   6. Hero
   7. Section shell / Eyebrowless headers
   8. Services cards
   9. Why-us / stats
   10. Process steps
   11. Portfolio
   12. Testimonials
   13. CTA banner
   14. FAQ (accordion overrides)
   15. Contact page specific
   16. Footer
   17. Utilities & animation
   18. Responsive tweaks
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS — แก้สีธีมทั้งเว็บได้ที่นี่ที่เดียว
   ============================================================ */
:root{
  /* Brand colors — โทนป่าเขาสน (ดอยสุเทพ) + ดินเผา/ไม้สัก */
  --clr-primary:        #046BD2;
  --clr-primary-light:  #3688DA;
  --clr-primary-dark:   #045CB4;
  --clr-accent:         #ff9f1a;
  --clr-accent-dark:    #e08402;

  --clr-ink:            #21261F;
  --clr-ink-soft:       #192a56;
  --clr-ink-faint:      #7A8074;

  --clr-bg:             #FAF7F1;
  --clr-bg-alt:         #F1EAD9;
  --clr-surface:        #FFFFFF;

  --clr-line:           #DED2B8;
  --clr-line-strong:    #C6B78F;
  --white:              #FFFFFF;

  /* Navbar brand blue (โลโก้ Nanosoft) */
  --clr-navbar:         #046BD2;
  --clr-navbar-dark:    #0F4FB8;

  /* Type */
  --font-base: 'Prompt', -apple-system, sans-serif;
  --fs-h1: clamp(2.15rem, 1.4rem + 3vw, 3.35rem);
  --fs-h2: clamp(1.65rem, 1.2rem + 1.6vw, 2.35rem);
  --fs-h3: clamp(1.50rem, 1.20rem + 0.95vw, 1.8rem);
  --fs-lead: clamp(0.8rem, 0.85rem + 0.4vw, 0.95rem);
  --lh-tight: 1.2;
  --lh-body: 1.75;

  /* Layout */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-cricle: 999px;
  --section-pad-y: clamp(3.5rem, 3rem + 3vw, 6rem);
  --container-max: 1180px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .6s;
}

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

/* ============================================================
   2. BASE / RESET
   ============================================================ */
html{
  scroll-behavior: smooth;
  background: var(--clr-bg); /* สีสำรอง กันขาว/กันภาพยังโหลดไม่ทัน หรือตอนเลื่อนดีดขอบจอมือถือ */
}

/* ============================================================
   พื้นหลังภาพแบบติดนิ่งของทั้งเว็บไซต์ (ชั้นเดียว อยู่หลังสุด)
   - ไม่ต้องเติม class ให้ section ไหนเป็นพิเศษ
   - section ที่กำหนดสีพื้นหลังของตัวเองอยู่แล้ว (เช่น .alt, .cta-banner,
     .footer-cnx, การ์ดพื้นขาวต่าง ๆ) จะทับภาพนี้เอง เพราะสีของมันทึบอยู่แล้ว
   - section ที่ไม่ได้กำหนดสีพื้นหลัง จะเห็นภาพนี้โผล่ออกมาแทน
   - แก้ไฟล์ภาพได้ที่ url() บรรทัดล่าง ถ้ายังไม่มีภาพให้คอมเมนต์บล็อกนี้ทิ้งไว้ก่อนได้
   ============================================================ */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -100;
   background-image:
    linear-gradient(rgba(216, 220, 231, 0.5), rgba(216, 220, 231, 0.5)),
    url('../img/5134336.jpg');
  /* background-image: url('../img/5134336.jpg'); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body{
  font-family: var(--font-base);
  color: var(--clr-ink);
  background: transparent;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

body{ padding-top: 68px; }

img{ max-width: 100%; height: auto; }

a{ color: var(--clr-primary); text-decoration: none; }
a:hover{ color: var(--clr-accent-dark); }

::selection{ background: var(--clr-accent); color: #fff; }

:focus-visible{
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
}

.container-cnx{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ============================================================
   3. TYPOGRAPHY HELPERS
   ============================================================ */
h1, h2, h3, h4{
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--clr-primary-dark);
  margin: 0;
}
h1{ font-size: var(--fs-h1); font-weight: 700; }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }

.lead-cnx{
  font-size: var(--fs-lead);
  color: var(--clr-ink-soft);
  font-weight: 400;
}

.text-accent{ color: var(--clr-accent-dark); }
.text-red{ color: #D32F2F; }
/* หัวข้อ section: ไม่ใช้ eyebrow ตัวพิมพ์ใหญ่แบบ template ทั่วไป
   ใช้เส้นสั้นข้างหน้าหัวข้อแทน เพื่อบอกจุดเริ่มเนื้อหา */
.section-head{
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.6rem + 1.6vw, 3rem);
}
.section-head::before{
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--clr-accent);
  margin-bottom: 1.1rem;
  border-radius: 2px;
}
.section-head.mx-auto{ text-align: center; }
.section-head.mx-auto::before{ margin-inline: auto; }

/* ============================================================
   4. BUTTONS — override Bootstrap เพื่อความเป็นเอกลักษณ์
   ============================================================ */
.btn-cnx-primary{
  background: var(--clr-primary);
  border: 1px solid var(--clr-primary);
  color: #fff;
  font-weight: 500;
  padding: .75rem 1.6rem;
  border-radius: var(--radius-cricle);
  transition: background var(--dur) var(--ease), transform .25s var(--ease);
}
.btn-cnx-primary:hover{
  background: var(--clr-primary-light);
  border-color: var(--clr-primary-light);
  color: #fff;
  transform: translateY(-2px);
}

.btn-cnx-outline{
  background: transparent;
  border: 1px solid var(--clr-line-strong);
  color: var(--clr-ink);
  font-weight: 500;
  padding: .75rem 1.6rem;
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-cnx-outline:hover{
  border-color: var(--clr-primary);
  background: var(--clr-surface);
  color: var(--clr-primary-dark);
}

.btn-cnx-accent{
  background: var(--clr-accent);
  border: 1px solid var(--clr-accent);
  color: #fff;
  font-weight: 500;
  padding: .75rem 1.6rem;
  border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease), transform .25s var(--ease);
}
.btn-cnx-accent:hover{
  background: var(--clr-accent-dark);
  border-color: var(--clr-accent-dark);
  color: #fff;
  transform: translateY(-2px);
}

/* ============================================================
   5. NAVBAR
   ============================================================ */
/* .container-cnx เป็น class เอง ไม่ใช่ .container ของ Bootstrap
   จึงต้องกำหนด flex ให้ตัวที่อยู่ใน .navbar เอง ไม่งั้น brand/เมนู จะตกบรรทัด */
.navbar-cnx > .container-cnx{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.navbar-cnx{
  background: var(--clr-navbar);
  border-bottom: 1px solid transparent;
  padding-block: .65rem;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.navbar-cnx.is-scrolled{
  background: var(--clr-navbar);
  box-shadow: 0 8px 24px -14px rgba(15,42,30,.5);
  padding-block: .45rem;
}

.brand-logo-img{
  height: 40px;
  width: auto;
}

/* โลโก้: กรอบสี่เหลี่ยม 4 สี + ตัวอักษร NS ทับตรงกลาง */
.navbar-brand-cnx{
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #fff !important;
}
.brand-mark{
  position: relative;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 7px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.brand-mark-cell:nth-child(1){ background: #EA4335; }
.brand-mark-cell:nth-child(2){ background: #4285F4; }
.brand-mark-cell:nth-child(3){ background: #FBBC05; }
.brand-mark-cell:nth-child(4){ background: #34A853; }
.brand-mark-letters{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.brand-text{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: .01em;
}
.brand-text small{
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: rgba(255,255,255,.75);
}

.navbar-cnx .nav-link{
  color: rgba(255,255,255,.88);
  font-weight: 400;
  padding-inline: 1rem !important;
  position: relative;
}
.navbar-cnx .nav-link::after{
  content:"";
  position: absolute;
  left: 1rem; right: 1rem; bottom: .1rem;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.navbar-cnx .nav-link:hover,
.navbar-cnx .nav-link.active{ color: #fff; }
.navbar-cnx .nav-link:hover::after,
.navbar-cnx .nav-link.active::after{ transform: scaleX(1); }

/* ============================================================
   6. HERO
   ============================================================ */
.hero-cnx{
  position: relative;
  padding-top: clamp(3rem, 2.4rem + 3vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 2.8rem + 3vw, 6rem);
  overflow: hidden;
}
.hero-cnx .badge-trust{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: 999px;
  padding: .4rem .9rem;
  font-size: .82rem;
  color: var(--clr-ink-soft);
  margin-bottom: 1.4rem;
}
.hero-cnx .badge-trust .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--clr-accent);
  flex: none;
}
.hero-cnx h1{ margin-bottom: 1.2rem; }
.hero-cnx .lead-cnx{ margin-bottom: 2rem; max-width: 34rem; }

.hero-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--clr-line);
}
.hero-stats .stat-num{
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--clr-primary-dark);
  line-height: 1;
}
.hero-stats .stat-label{
  font-size: .82rem;
  color: var(--clr-ink-soft);
  margin-top: .3rem;
}

.hero-wave{
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  line-height: 0;
  pointer-events: none;
}
.hero-wave svg{
  display: block;
  width: 100%;
  height: clamp(48px, 8vw, 110px);
}
.hero-wave path{ fill: var(--white, #FFFFFF); } 
/* ภาพทางด้าวขวา */
.my-image {
  display: block;
  width: 140%;
  max-width: none;
  height: auto;
}

/* ============================================================
   7. SECTION SHELL
   ============================================================ */
.section-cnx{
  padding-block: var(--section-pad-y);
  background: var(--white);
}
.section-cnx.alt{ background: var(--white); }
.section-head.wide{ max-width: 62rem;}
.section-head.wide .lead-cnx{
  text-align: left;
  max-width: none;
}
/* ============================================================
   8. SERVICES CARDS
   ============================================================ */
.svc-card{
  background: var(--clr-surface);
  border: 0px solid var(--clr-line);
  border-top: 0px solid var(--clr-primary);
  border-radius: var(--radius-sm);
  padding: 1.9rem 1.6rem;
  height: 100%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.svc-card:hover{
  transform: translateY(-4px);
  border-top-color: var(--clr-accent);
  /* box-shadow: 0 22px 40px -30px rgba(15,42,30,.45); */
}
.svc-card .svc-icon{
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  background: var(--clr-surface);
  border: 3px solid #D32F2F;
  border-radius: 50%;
  color: #D32F2F;
  font-size: 2rem;
  margin-bottom: 1.1rem;
  margin-inline: auto;   /* ← เพิ่มบรรทัดนี้ */
}
.svc-card h3{ font-size: 1.15rem; margin-bottom: .55rem; }
.svc-card p{ color: var(--clr-ink-soft); font-size: .93rem; margin: 0; }

/* ══════════════════════════════════════
   IMAGE TICKER (4 ภาพ smooth loop)
══════════════════════════════════════ */

.img-ticker {
   padding: 16px 0 48px;
}
.img-ticker-wrap {
  overflow: hidden;
  border-radius: 10px;
  padding: 12px 0;
}

.img-ticker-track {
  display: flex;
  align-items: center;
  width: 200%;
  animation: img-loop 16s linear infinite;
}

.img-ticker-wrap:hover .img-ticker-track {
  animation-play-state: paused;
}

.img-ticker-item {
  width: 12.5%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  box-sizing: border-box;
}

.img-ticker-item img {
  max-height: 80px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}

@keyframes img-loop {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ============================================================
   10. PROCESS STEPS (แบบ 6 ขั้นตอน + ไอคอนวงกลมสีพาสเทล)
   ============================================================ */
.section-process-v2{
  position: relative;
  padding-block: var(--section-pad-y);
  overflow: hidden;
}

.process-v2-title{
  color: var(--clr-primary);
  font-weight: 700;
  padding-bottom: 48px;
}
/*.section-process-v2 .section-head::before{ display: none; }  ไม่ใช้ขีดเส้นเหนือหัวข้อในเวอร์ชันนี้ */

.process-step-v2{
  position: relative;
  background: var(--clr-surface);
  border: 0px solid var(--clr-line);
  border-radius: var(--radius-md);
  padding: 3.4rem 1.6rem 1.9rem;
  text-align: center;
  height: 100%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.process-step-v2:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 36px -26px rgba(15,42,30,.35);
}
.process-step-v2 h3{ font-size: 1.05rem; margin-bottom: .6rem; }
.process-step-v2 p{ color: var(--clr-ink-soft); font-size: .9rem; margin: 0; }

.step-icon-v2{
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 66px; height: 66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  color: #fff;
  box-shadow: 0 10px 18px -8px rgba(0,0,0,.25);
}

.step-icon-v2.icon-peach{    background: linear-gradient(145deg,#FFC98A,#F5A15A); }
.step-icon-v2.icon-mint{     background: linear-gradient(145deg,#7CE0BE,#3FBF8D); }
.step-icon-v2.icon-coral{    background: linear-gradient(145deg,#FF9E9E,#F16B6B); }
.step-icon-v2.icon-blue{     background: linear-gradient(145deg,#8FD6F5,#4FB3E8); }
.step-icon-v2.icon-lavender{ background: linear-gradient(145deg,#CBB8F2,#A582E8); }
.step-icon-v2.icon-pink{     background: linear-gradient(145deg,#F5A0CE,#E869AE); }

.process-v2-wave{
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  line-height: 0;
  pointer-events: none;
}
.process-v2-wave svg{ display: block; width: 100%; height: clamp(40px, 7vw, 90px); }
.process-v2-wave path{ fill: var(--white, #FFFFFF); }

@media (max-width: 767.98px){
  .process-step-v2{ padding-top: 3.6rem; }
}

/* ============================================================
   11.1 CLIENT LOGO GRID — โลโก้/รูปลูกค้า 4 คอลัมน์ x 3 แถว
   ============================================================ */
.client-logo-card{
  background: var(--clr-surface);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-sm);
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.client-logo-card:hover{
  transform: translateY(-3px);
  border-color: var(--clr-line-strong);
  box-shadow: 0 16px 28px -22px rgba(15,42,30,.4);
}

.client-logo-card img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* filter: grayscale(100%);
  opacity: .72; */
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.client-logo-card:hover img{
  filter: grayscale(0%);
  opacity: 1;
}

@media (max-width: 575.98px){
  .client-logo-card{ height: 84px; }
}

/* ============================================================
   15. CONTACT PAGE
   ============================================================ */
.contact-info-section{
  position: relative;
  padding-top: calc(68px + clamp(2.5rem, 2rem + 2vw, 4rem));
  padding-bottom: clamp(3rem, 2.4rem + 3vw, 5rem);
  overflow: hidden;
}

.contact-intro-title{
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--clr-ink);
  width: 100%;
  margin-bottom: 2.6rem;
}

.contact-block{ margin-bottom: 2.8rem; }
.contact-block:last-child{ margin-bottom: 0; }

.contact-map{ width: 100%; }

.map-frame-wrap{
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 0px solid var(--clr-line);
  line-height: 0;
}
.map-frame-wrap iframe{ width: 100%; height: 100%; min-height: 320px; border: 0; }

/* ============================================================
   16. FOOTER
   ============================================================ */
.footer-cnx{
  color: var(--clr-ink);
}

.footer-main{
  position: relative;
  padding-block: clamp(3rem, 2.4rem + 3vw, 5rem) clamp(2.5rem, 2rem + 2vw, 3.5rem);
  overflow: hidden;
}

.footer-h{
  color: var(--clr-primary);
  font-size: 1.3rem;
  font-weight: 700;
  position: relative;
  padding-bottom: .9rem;
  margin-bottom: 1.3rem;
}
.footer-h::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--clr-primary);
}

.footer-company{
  font-weight: 600;
  color: var(--clr-ink);
  margin-bottom: 1.1rem;
  font-size: 1.02rem;
}

.footer-contact-list{
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.footer-contact-list li{
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .93rem;
  color: var(--clr-ink);
}
.footer-contact-list i{
  color: var(--clr-primary);
  font-size: 1rem;
  margin-top: .2rem;
  flex: none;
}

.footer-follow{
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1rem;
}
.footer-follow span{
  font-size: .9rem;
  color: var(--clr-ink-soft);
  white-space: nowrap;
}
.footer-follow-line{
  flex: 1;
  height: 1px;
  background: var(--clr-ink-soft);
}

.footer-social-v2{
  display: flex;
  gap: .7rem;
}
.footer-social-v2 a{
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.footer-social-v2 a:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 18px -10px rgba(0,0,0,.35);
  color: #fff;
}
.footer-social-v2 .fs-facebook{ background: #3B5998; }
.footer-social-v2 .fs-youtube{  background: #E23744; }
.footer-social-v2 .fs-line{     background: #06C755; }
.footer-social-v2 .fs-link{     background: #2196F3; }

.footer-hours-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.footer-hours-text{
  margin: 0;
  font-weight: 600;
  color: var(--clr-ink);
  font-size: .98rem;
}
.footer-hours-note{
  font-weight: 400;
  color: var(--clr-ink-soft);
  font-size: .9rem;
}
.footer-hours-badge{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--clr-accent);
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.footer-tagline{
  color: var(--clr-ink);
  font-size: .93rem;
  margin: 0;
}

.footer-bottom-v2{
  background: var(--clr-navbar);
}
.footer-bottom-v2-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-block: 1.1rem;
}
.footer-bottom-v2-inner span{
  color: rgba(255,255,255,.9);
  font-size: .88rem;
  text-align: center;
}
.footer-back-top{
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease);
}
.footer-back-top:hover{
  background: rgba(255,255,255,.3);
  color: #fff;
}

@media (max-width: 767.98px){
  .footer-hours-row{ flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   17. UTILITIES / ANIMATION (จุดเดียวที่มี motion เข้าจังหวะ)
   ============================================================ */
[data-reveal]{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

.skip-link{
  position: absolute;
  left: -999px; top: 0;
  background: var(--clr-primary);
  color: #fff;
  padding: .6rem 1rem;
  z-index: 2000;
  border-radius: 0 0 6px 0;
}
.skip-link:focus{ left: 0; }

/* ============================================================
   BACK TO TOP — ปุ่มลอย
   ============================================================ */
.back-to-top{
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1200;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--clr-navbar);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease), visibility var(--dur);
}
.back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover{
  background: var(--clr-navbar-dark);
  color: #fff;
}

@media (max-width: 575.98px){
  .back-to-top{
    right: 1rem;
    bottom: 1rem;
    width: 40px; height: 40px;
    font-size: 1.05rem;
  }
}

/* ============================================================
   18. RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 991.98px){
  .code-window{ margin-top: 2.5rem; transform: none; }
  .stat-block{ border-left: none; border-top: 1px solid var(--clr-line); }
  .stat-block:first-child{ border-top: none; }
}