/* ==========================================================================
   TOPONE CAR WASH & DETAILING — main.css
   Theme : Luxury Automotive Dark  |  Black / White / Red
   Font  : Kanit
   ========================================================================== */

/* ---------- 0. ฟอนต์ Kanit (โฮสต์เอง) ----------
   ย้ายมาจาก fonts.googleapis.com เพื่อตัดการต่อโดเมนภายนอกสองแห่ง
   (fonts.googleapis.com + fonts.gstatic.com) ออกจากเส้นทางวิกฤต
   ไฟล์เป็นชุดเดียวกับที่ Google ส่งให้ Chrome มือถือ รวม 86 KB เท่าเดิมทุกไบต์
   จึงไม่ได้แลกขนาดกับความเร็ว แต่ประหยัด DNS + TLS ของสองโดเมน

   Kanit ใช้สัญญาอนุญาต SIL Open Font License 1.1 นำมาโฮสต์เองได้ถูกต้อง

   unicode-range คือหัวใจ: บอกเบราว์เซอร์ว่าไฟล์ไหนครอบคลุมอักขระช่วงใด
   หน้าที่มีแต่ภาษาไทยจึงโหลดเฉพาะไฟล์ thai ไม่ต้องโหลด latin มาเปล่า ๆ
   ห้ามลบทิ้ง ไม่งั้นเบราว์เซอร์จะโหลดครบทั้ง 10 ไฟล์ทุกหน้า

   font-display:swap = โชว์ข้อความด้วยฟอนต์สำรองไปก่อน ไม่ปล่อยให้จอว่าง
   ========================================================================== */
@font-face{font-family:'Kanit';font-style:normal;font-weight:200;font-display:swap;src:url('/assets/fonts/kanit-latin-200.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Kanit';font-style:normal;font-weight:200;font-display:swap;src:url('/assets/fonts/kanit-thai-200.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Kanit';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/kanit-latin-300.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Kanit';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/kanit-thai-300.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/kanit-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/kanit-thai-400.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/kanit-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/kanit-thai-500.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/kanit-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/kanit-thai-600.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}

/* ---------- 1. Design Tokens ---------- */
:root{
  --black:#050506;
  --bg:#0a0a0b;
  --bg-alt:#0f0f11;
  --surface:#131316;
  --surface-2:#1a1a1e;
  --surface-3:#212126;
  --light:#f4f4f5;
  --light-2:#e9e9ec;

  --white:#ffffff;
  --text:#dcdce0;
  --muted:#8e8e97;
  --muted-2:#6a6a73;

  --red:#e10600;
  --red-hi:#ff2b1f;
  /* ดาวรีวิวใช้เหลืองทอง ไม่ใช่แดงของแบรนด์ เพราะคนอ่านจำสีนี้ว่าเป็น "ดาวให้คะแนน"
     ค่านี้คือสีดาวของ Google เอง ซึ่งตรงกับต้นทางที่รีวิวมา */
  --gold:#fbbc04;
  --red-dim:rgba(225,6,0,.14);
  --red-glow:rgba(225,6,0,.45);

  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --line-dark:rgba(0,0,0,.10);

  --metal:linear-gradient(180deg,#ffffff 0%,#cfcfd6 45%,#8d8d97 60%,#f0f0f4 100%);
  --red-grad:linear-gradient(180deg,#ff3a2d 0%,#e10600 55%,#9c0400 100%);

  --ff:'Kanit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --container:1280px;
  --gut:clamp(18px,4vw,40px);
  --sec:clamp(64px,9vw,120px);

  --r-sm:4px;
  --r:8px;
  --r-lg:14px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --header-h:78px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.85);
  --shadow-red:0 18px 50px -18px rgba(225,6,0,.55);
}

/* สีประจำแต่ละช่องทางโซเชียล — เก็บเป็น R,G,B ดิบ ไม่ใช่ #hex
   เพื่อให้เอาไปประกอบเป็น rgba() ทำพื้นจาง/เส้นขอบจางได้ในที่เดียวกัน
   ใช้ร่วมกันทั้งการ์ดหน้าติดต่อและไอคอนฟุตเตอร์ แก้สีที่นี่ที่เดียวเปลี่ยนทั้งเว็บ
   Facebook สว่างกว่า #1877f2 ตัวจริง เพราะสีเต็มจมไปกับพื้นเข้มของเว็บ
   TikTok เป็นธีมดำ จึงคุมพื้นและขอบเองด้วย --ic-bg / --ic-border
   พื้นต้อง "ดำอ่อนกว่าการ์ด" (#26262b บนการ์ด #131316) ตัวชิปจึงจะมองเห็น
   แล้วใช้ขอบดำเข้มกว่าการ์ดเป็นเส้นตัดให้ขอบคม — ถ้าทำกลับกันคือพื้นเข้มกว่าการ์ด
   ชิปจะจมหายไปทั้งใบ เพราะไม่เหลืออะไรที่สว่างกว่าพื้นหลังเลย
   (ช่องทางอื่นไม่ตั้งสองตัวนี้ จึงตกไปใช้ fallback = พื้นจางและขอบจางสีเดียวกับตัวเอง) */
.brand-line{--ic-rgb:6,199,85}
.brand-fb{--ic-rgb:74,155,255}
.brand-tiktok{--ic-rgb:255,255,255;--ic-bg:#26262b;--ic-border:#08080a}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
  color-scheme:dark; /* ให้ native control เช่น date picker เป็นธีมมืด */
}
body{
  font-family:var(--ff);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4,h5{font-weight:500;line-height:1.22;color:var(--white);letter-spacing:.01em}
strong,b{font-weight:600;color:var(--white)}
::selection{background:var(--red);color:#fff}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a0a0b}
::-webkit-scrollbar-thumb{background:#2a2a30;border-radius:20px;border:2px solid #0a0a0b}
::-webkit-scrollbar-thumb:hover{background:var(--red)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--red);color:#fff;padding:12px 22px;font-size:14px;
}
.skip-link:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px}

/* ---------- 3. Layout Helpers ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gut)}
.container-wide{width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec);position:relative}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.bg-black{background:var(--black)}
.bg-dark{background:var(--bg)}
.bg-alt{background:var(--bg-alt)}
.bg-light{background:var(--light);color:#3a3a40}
.bg-light h1,.bg-light h2,.bg-light h3,.bg-light h4{color:#0d0d10}
.bg-light strong{color:#0d0d10}
.text-center{text-align:center}
.grid{display:grid;gap:24px}
.hide{display:none !important}

/* ---------- 4. Typography Utilities ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  color:var(--red-hi);margin-bottom:18px;
}
.eyebrow::before,.eyebrow::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--red))}
.eyebrow--start::before{display:none}
.eyebrow--start::after{display:none}
.bg-light .eyebrow{color:var(--red)}

.sec-title{
  font-size:clamp(26px,3.6vw,46px);
  font-weight:400;
  letter-spacing:.06em;
  text-transform:none;
  line-height:1.25;
}
.sec-title strong{font-weight:600}
.sec-title .accent{color:var(--red-hi);font-weight:500}
.sec-head{max-width:720px;margin-inline:auto;text-align:center;margin-bottom:clamp(38px,5vw,64px)}
.sec-head--left{margin-inline:0;text-align:left}
.sec-lead{color:var(--muted);font-size:15.5px;margin-top:18px;font-weight:300}
.bg-light .sec-lead{color:#5c5c66}

.rule{
  display:flex;align-items:center;justify-content:center;gap:16px;
  font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted-2);
}
.rule::before,.rule::after{content:"";height:1px;flex:1;background:var(--line)}

/* ขีดแดงแนวตั้งหน้าป้ายการ์ดบริการ
   ใช้ scaleY แทนการเปลี่ยน height เพราะ height ทำให้เบราว์เซอร์คำนวณ layout ใหม่ทุกเฟรม
   ส่วน transform วิ่งบน GPU อย่างเดียว ขยับลื่นกว่าและไม่ดันข้อความข้าง ๆ */
.tick{
  width:3px;height:38px;flex:none;display:block;background:var(--red);
  transform:scaleY(.5);
  transition:transform .45s var(--ease),background .35s;
}

/* ---------- 5. Buttons ---------- */
.btn{
  --bh:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  height:var(--bh);padding-inline:30px;
  font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  border-radius:2px;position:relative;overflow:hidden;
  transition:color .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),transform .3s var(--ease),box-shadow .35s var(--ease);
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-sm,.btn--sm{--bh:42px;padding-inline:20px;font-size:11.5px;letter-spacing:.14em}
.btn-lg{--bh:58px;padding-inline:40px}
.btn-block{display:flex;width:100%}

.btn-primary,.btn--primary{background:var(--red);color:#fff;box-shadow:0 10px 30px -12px var(--red-glow)}
.btn-primary:hover,.btn--primary:hover{background:var(--red-hi);transform:translateY(-2px);box-shadow:var(--shadow-red)}

.btn-solid{background:var(--white);color:#0b0b0d}
.btn-solid:hover{background:var(--red);color:#fff;transform:translateY(-2px)}

.btn-dark{background:#111114;color:#fff;border:1px solid var(--line-2)}
.btn-dark:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}

.btn-ghost{border:1px solid var(--line-2);color:var(--white);background:rgba(255,255,255,.02)}
.btn-ghost:hover{background:var(--white);color:#0b0b0d;border-color:var(--white)}
.bg-light .btn-ghost{border-color:rgba(0,0,0,.18);color:#0d0d10}
.bg-light .btn-ghost:hover{background:#0d0d10;color:#fff;border-color:#0d0d10}

.btn-line{
  height:auto;padding:0 0 6px;border-bottom:1px solid var(--line-2);border-radius:0;
  font-size:12px;letter-spacing:.24em;color:var(--white);
}
.btn-line:hover{border-color:var(--red);color:var(--red-hi)}

/* ---------- 6. Header ---------- */
/* ตอนอยู่บนสุด header โปร่งใสสนิท ให้วิดีโอ Hero ทะลุขึ้นมาเต็มจอถึงขอบบน
   ใช้ ::before ไล่เฉดมืดบาง ๆ แทน เพื่อให้เมนูยังอ่านออกโดยไม่บังวิดีโอเป็นแถบทึบ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:900;
  height:var(--header-h);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),height .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease);
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,6,.88) 0%,rgba(5,5,6,.45) 58%,transparent 100%);
  transition:opacity .4s var(--ease);
}
.site-header.is-stuck{
  background:rgba(5,5,6,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);height:66px;
}
.site-header.is-stuck::before{opacity:0}
.site-header.is-open{background:rgba(5,5,6,.98)}
.site-header.is-open::before{opacity:0}
.site-header__inner{
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:1560px;margin-inline:auto;padding-inline:var(--gut);
}

/* Logo — ไฟล์ถูกครอปเหลือเฉพาะตัวอักษรแล้ว จึงไม่ต้องครอปด้วย CSS อีก
   mix-blend-mode:screen ทำให้พื้นดำของไฟล์กลืนไปกับพื้นหลังมืด */
.brand{display:flex;align-items:center;flex:none}
.brand__logo{
  --lw:190px;
  width:var(--lw);height:auto;
  mix-blend-mode:screen;transition:opacity .3s;
}
.brand:hover .brand__logo{opacity:.82}
.footer-brand .brand__logo{--lw:210px}

/* Nav */
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__item{position:relative;display:flex;align-items:center}
.nav__link{
  display:flex;align-items:center;gap:7px;
  padding:10px 16px;font-size:13px;font-weight:400;letter-spacing:.1em;
  color:rgba(255,255,255,.74);position:relative;transition:color .3s var(--ease);
  white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav__link:hover,.nav__link.is-active{color:#fff}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);transform-origin:left}
/* ปุ่มลูกศรกางเมนูย่อย — แยกออกจากลิงก์ "บริการ" เพื่อให้กดคนละความหมายกันได้
   เดสก์ท็อปแทบไม่ต้องใช้ (กางด้วย hover อยู่แล้ว) แต่ยังต้องกดได้ด้วยคีย์บอร์ด
   จึงไม่ซ่อนทิ้ง แค่ทำให้กลืนไปกับข้อความ */
.nav__toggle{
  display:flex;align-items:center;justify-content:center;
  padding:10px 8px 10px 0;margin-left:-9px;
  background:none;color:rgba(255,255,255,.74);transition:color .3s var(--ease);
}
.nav__toggle:hover{color:#fff}
/* บล็อกช่องทางติดต่อท้ายเมนู — มีเฉพาะจอมือถือ
   เดสก์ท็อปต้องซ่อน ไม่งั้นจะไปโผล่กลางแถบเมนูแนวนอน */
.nav__contact{display:none}
.nav__caret{width:11px;height:11px;transition:transform .3s var(--ease);opacity:.6}
.nav__item--sub:hover .nav__caret{transform:rotate(180deg)}

.nav__sub{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
  min-width:268px;background:rgba(12,12,14,.98);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);border-top:2px solid var(--red);
  padding:10px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),transform .35s var(--ease-out),visibility .3s;
}
.nav__item--sub:hover > .nav__sub,.nav__item--sub:focus-within > .nav__sub,
.nav__item--sub.open > .nav__sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
/* .open มาจากการกดปุ่มลูกศร — ใส่ไว้ให้เดสก์ท็อปด้วย ไม่ใช่เฉพาะมือถือ
   ไม่งั้นปุ่มลูกศรบนเดสก์ท็อปจะกลายเป็นปุ่มที่กดแล้วไม่มีอะไรเกิดขึ้น
   (คนใช้คีย์บอร์ดกด Enter ที่ปุ่มนี้ ต้องได้ผลเหมือนเอาเมาส์ไปชี้) */
.nav__item--sub.open .nav__caret{transform:rotate(180deg)}
.nav__sub a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  font-size:13.5px;font-weight:300;color:rgba(255,255,255,.72);
  border-left:2px solid transparent;transition:all .28s var(--ease);
}
.nav__sub .dot{
  width:17px;height:17px;flex:none;background:var(--muted-2);transition:background .28s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.nav__sub a:hover,.nav__sub a.is-active{color:#fff;background:rgba(225,6,0,.1);border-left-color:var(--red);padding-left:18px}
.nav__sub a:hover .dot,.nav__sub a.is-active .dot{background:var(--red)}

/* Header CTA cluster */
.header__cta{display:flex;align-items:center;gap:12px;flex:none}
.btn-arrow{transition:transform .35s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(4px)}

/* ใช้ flex + gap เพื่อคุมระยะห่างแท่งให้แน่นอน
   (ถ้าใช้ grid แถวจะถูกยืดเต็ม 42px ทำให้ระยะห่างกลายเป็น 14px
    แล้ว translateY(6px) จะปิดไม่สนิท ได้เป็นรูป > แทนที่จะเป็น X) */
.burger{
  display:none;width:42px;height:42px;
  flex-direction:column;align-items:center;justify-content:center;gap:4.5px;
  border:1px solid var(--line);border-radius:2px;
}
.burger span{display:block;width:19px;height:1.5px;background:#fff;transition:transform .35s var(--ease),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;min-height:min(84vh,740px);
  display:flex;align-items:center;
  padding-top:calc(var(--header-h) + 40px);padding-bottom:60px;
  overflow:hidden;isolation:isolate;
}
/* หน้าที่มีวิดีโอให้สูงขึ้น เพราะวิดีโอเติมพื้นที่เต็มอยู่แล้ว
   (ต่างจากตอนที่มีแค่ข้อความ ซึ่งถ้าสูงมากจะดูโล่ง) */
.hero--video{min-height:min(94vh,880px)}

/* ---- วิดีโอพื้นหลัง Hero ---- */
.hero-media{position:absolute;inset:0;z-index:-4;overflow:hidden;background:#08080a}
.hero-video{
  width:100%;height:100%;object-fit:cover;object-position:center;
  /* ต้นฉบับ 852x320 ต้องขยายเกิน 2 เท่าเวลาเต็มจอ ลด saturate นิดหน่อย
     ให้กลืนกับโทนเว็บ และช่วยกลบความไม่คมจากการขยาย */
  filter:saturate(.85) contrast(1.05);
}
/* ฉากบังให้ตัวหนังสืออ่านออก — ทึบทางซ้ายที่มีข้อความ จางไปทางขวา */
.hero-media__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,5,6,.92) 0%,rgba(5,5,6,.82) 32%,rgba(5,5,6,.48) 62%,rgba(5,5,6,.56) 100%),
    /* ด้านบนเบาลงมาก เพราะ .site-header::before ไล่เฉดให้เมนูอยู่แล้ว
       ถ้าทับสองชั้นจะกลายเป็นแถบดำทึบ ทำให้วิดีโอดูสั้นกว่าความเป็นจริง */
    linear-gradient(180deg,rgba(5,5,6,.3) 0%,transparent 20%,transparent 58%,rgba(5,5,6,.9) 100%);
}
/* ถ้า JS ไม่ทำงาน/มือถือ ให้ใช้ภาพนิ่งแทน จะได้ไม่เป็นกล่องดำ */
.hero--video .hero-media{background:#08080a url("/assets/images/hero-poster.jpg") center/cover no-repeat}

/* .hero-bg เดิมเป็นสีทึบและซ้อนอยู่เหนือวิดีโอ (z-index -3 vs -4)
   ถ้าไม่ล้างพื้นออก วิดีโอจะถูกบังจนมองไม่เห็นเลย
   เหลือไว้แค่แสงแดงจาง ๆ กับเส้นกริดเป็นพื้นผิว */
.hero--video .hero-bg{background:transparent}
.hero--video .hero-bg::before{
  background:radial-gradient(70% 60% at 18% 8%,rgba(225,6,0,.16) 0%,transparent 62%);
}
.hero--video .hero-bg::after{opacity:.22}

.hero-bg{position:absolute;inset:0;z-index:-3;background:#08080a}
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 42%,rgba(255,255,255,.10) 0%,transparent 58%),
    radial-gradient(70% 60% at 20% 10%,rgba(225,6,0,.16) 0%,transparent 65%),
    linear-gradient(180deg,#0b0b0d 0%,#0e0e11 45%,#070708 100%);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000 0%,transparent 100%);
  mask-image:radial-gradient(70% 60% at 50% 50%,#000 0%,transparent 100%);
}
.hero-car{
  position:absolute;right:-1%;bottom:9%;width:min(58%,840px);z-index:-2;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.7));
  animation:heroCar 1.4s var(--ease-out) .15s both;
}
@keyframes heroCar{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
.hero-streak{
  display:none;
  position:absolute;z-index:-1;pointer-events:none;
  width:140%;height:2px;left:-20%;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  opacity:.5;
}
.hero-streak--1{top:34%;transform:rotate(-8deg);opacity:.22}
.hero-streak--2{top:71%;transform:rotate(-8deg);opacity:.14;height:1px}

.hero-inner{position:relative;z-index:2;width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.hero-content{max-width:660px}
.hero-title{
  /* line-height ต้องเผื่อวรรณยุกต์และสระบน-ล่างของภาษาไทย ไม่ให้ถูก overflow:hidden ตัด */
  font-size:clamp(38px,7.2vw,86px);
  line-height:1.24;letter-spacing:.01em;font-weight:600;
  text-transform:uppercase;color:#fff;
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line > span{display:block;animation:riseIn 1s var(--ease-out) both}
.hero-title .line:nth-child(1) > span{animation-delay:.1s}
.hero-title .line:nth-child(2) > span{animation-delay:.24s}
.hero-title .thin{
  font-weight:200;
  background:var(--red-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes riseIn{from{transform:translateY(105%)}to{transform:none}}

.hero-sub{
  margin-top:28px;max-width:500px;font-size:17px;color:rgba(255,255,255,.68);
  font-weight:300;line-height:1.85;animation:fadeUp 1s var(--ease-out) .5s both;
}
/* ห้ามตัดบรรทัดกลางกลุ่มคำที่ครอบไว้ ใช้กับคำไทยที่ไม่อยากให้ถูกแยกจากกัน
   (ภาษาไทยไม่มีช่องว่างคั่นคำ เบราว์เซอร์จึงตัดเองตามพจนานุกรมโดยเราไม่ได้สั่ง) */
.nowrap{white-space:nowrap}
/* เส้นแดงสั้น ๆ ปิดท้ายบล็อกข้อความ ให้องค์ประกอบดูจบสมบูรณ์
   หลังเอาปุ่มกับตัวเลขสถิติออก */
.hero-rule{
  display:block;width:78px;height:2px;margin-top:38px;
  background:var(--red-grad);
  animation:fadeUp 1s var(--ease-out) .66s both;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;animation:fadeUp 1s var(--ease-out) .66s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.hero-stats{
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,54px);margin-top:clamp(38px,6vw,64px);
  padding-top:30px;border-top:1px solid var(--line);
  animation:fadeUp 1s var(--ease-out) .8s both;
}
.hero-stat .num{font-size:clamp(26px,3.4vw,38px);font-weight:500;color:#fff;line-height:1}
.hero-stat .num i{font-style:normal;color:var(--red-hi)}
.hero-stat .lbl{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:8px}

.hero-vert{
  position:absolute;right:calc(var(--gut) * .5);top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;font-size:10.5px;letter-spacing:.5em;text-transform:uppercase;
  color:rgba(255,255,255,.3);z-index:3;
}
.hero-vert span{display:flex;align-items:center;gap:16px}
.hero-vert span::before{content:"";width:1px;height:52px;background:linear-gradient(180deg,transparent,var(--red))}

/* Page hero (inner pages) */
.page-hero{
  position:relative;padding-top:calc(var(--header-h) + clamp(56px,9vw,110px));
  padding-bottom:clamp(48px,7vw,90px);overflow:hidden;isolation:isolate;
  border-bottom:1px solid var(--line);
}
.page-hero .hero-bg::after{opacity:.35}
.page-hero-inner{position:relative;z-index:2}

/* ---- รูปพื้นหลัง hero หน้าใน (.page-hero--photo) ----
   ชั้นซ้อนจากล่างขึ้นบน: __media(-4) → .hero-bg(-3) → __scrim(-2) → .hero-streak(-1) → -inner(2)
   .hero-bg เดิมพื้นทึบ ถ้าไม่ล้างออกจะบังรูปจนไม่เห็นเลย เหลือไว้แค่แสงแดงกับเส้นกริดจาง ๆ */
.page-hero__media{position:absolute;inset:0;z-index:-4;overflow:hidden;background:#08080a}
.page-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.page-hero__scrim{position:absolute;inset:0;z-index:-2}
.page-hero--photo .hero-bg{background:transparent}
.page-hero--photo .hero-bg::before{opacity:.55}
.page-hero--photo .hero-bg::after{opacity:.16}
/* จอกว้าง: ข้อความอยู่ชิดซ้าย จึงบังทึบทางซ้ายแล้วจางไปทางขวาให้เห็นรูป
   ค่าฝั่งซ้าย (0–30%) ต้องคงไว้ ≥.88 เพราะเป็นที่ยืนของหัวเรื่องและปุ่ม
   ฝั่งขวาลดจาก .46/.58 → .30/.14 ให้เห็นตัวรถชัด
   ชั้นแนวตั้งก็ลดขอบล่างจาก .92 → .74 และเลื่อนจุดเริ่มจาก 60% → 68%
   เพราะตัวรถอยู่ครึ่งล่างของภาพ ถ้าไม่ลดด้วยจะยังถูกกดมืดอยู่ */
.page-hero__scrim{
  background:
    linear-gradient(90deg,rgba(5,5,6,.95) 0%,rgba(5,5,6,.88) 30%,rgba(5,5,6,.55) 48%,rgba(5,5,6,.30) 66%,rgba(5,5,6,.14) 100%),
    linear-gradient(180deg,rgba(5,5,6,.5) 0%,transparent 22%,transparent 68%,rgba(5,5,6,.74) 100%);
}
/* ≤1024px ข้อความกินเต็มความกว้าง ฉากบังแนวนอนใช้ไม่ได้ ต้องไล่จากบนลงล่างแทน
   (จุดเดียวกับที่สลับไปใช้รูปแนวตั้งใน <picture>) */
@media (max-width:1024px){
  .page-hero__scrim{
    background:linear-gradient(180deg,rgba(5,5,6,.9) 0%,rgba(5,5,6,.74) 38%,rgba(5,5,6,.95) 100%);
  }
}
.page-title{
  font-size:clamp(30px,5.6vw,64px);font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.22;
}
.page-title .thin{font-weight:200;background:var(--red-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-lead{margin-top:20px;max-width:600px;color:rgba(255,255,255,.62);font-weight:300}

.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;color:var(--muted-2);margin-bottom:22px}
.breadcrumb a{transition:color .25s}
.breadcrumb a:hover{color:var(--red-hi)}
.breadcrumb li{display:flex;align-items:center;gap:10px}
.breadcrumb li+li::before{content:"/";color:var(--muted-2);opacity:.5}
.breadcrumb [aria-current]{color:#fff}

/* ---------- 8. Service Tiles (Featured grid) ---------- */
/* คอลัมน์เดียว รูปเป็นแถบแนวนอน 21:9 เรียงลงมา 5 ใบ
   เดิมเป็น mosaic 4 คอลัมน์ที่ใบแรกกิน 2x2 ซึ่งต้องกำหนดคอลัมน์ตายตัวทุก breakpoint
   เพราะ 5 ใบหารไม่ลงตัว พอเป็นคอลัมน์เดียวปัญหานั้นหมดไป ไม่ต้องมีกฎ responsive อีก
   gap:1px + พื้นหลัง .tiles เป็นสีเส้น = ได้เส้นคั่นบาง ๆ ระหว่างใบโดยไม่ต้องใส่ border */
/* คุมความกว้างไว้ 1100px แทนที่จะกินเต็ม .container-wide (1480px)
   นอกจากทำให้ไทล์เล็กลงแล้ว ยังพอดีกับต้นฉบับที่กว้าง 1214px
   ของเดิมกว้าง 1480 ทำให้รูปถูกขยายเกินความละเอียดจริงราว 22% */
.tiles{
  display:grid;grid-template-columns:1fr;
  gap:1px;background:var(--line);border-block:1px solid var(--line);
  max-width:1100px;margin-inline:auto;
}
.tile{
  position:relative;display:block;background:var(--surface);
  aspect-ratio:21/9;overflow:hidden;isolation:isolate;
  transition:background .4s var(--ease);
}
.tile-art{position:absolute;inset:0;z-index:-1;transition:transform .8s var(--ease-out),opacity .5s}
.tile-art::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 70% at 50% 35%,rgba(255,255,255,.14),transparent 70%);
}
.tile-art svg,.tile-art img{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:56%;height:auto;opacity:.92}
/* --photo = ใส่รูปถ่ายจริงเต็มกล่องแทนไอคอน SVG ที่ลอยกลาง
   ต้องรีเซ็ต left/top/transform ของกฎด้านบนทิ้ง ไม่งั้นรูปจะถูกดันไปครึ่งซ้าย
   ::before (แสงขาวตรงกลาง) ปิดไป เพราะทำให้รูปถ่ายดูหม่น */
.tile-art--photo picture{position:absolute;inset:0;display:block}
.tile-art--photo img{
  position:absolute;inset:0;left:0;top:0;transform:none;
  width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:1;
}
.tile-art--photo::before{display:none}
.tile:hover .tile-art{transform:scale(1.07)}
.tile::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 40%,rgba(5,5,6,.9) 100%);
}
.tile-label{
  position:absolute;left:0;right:0;bottom:0;padding:24px 22px;
  display:flex;align-items:center;gap:12px;
}
.tile:hover .tick{transform:scaleY(1);background:var(--red-hi)}
.tile-label h3{
  font-size:15.5px;font-weight:400;letter-spacing:.09em;color:#fff;
}
.tile-label .en{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:3px;font-weight:300}
.tile-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.tile:hover .tile-bar{transform:scaleX(1)}

/* ---------- 9. Split Section (Premium block) ---------- */
.split{display:grid;grid-template-columns:minmax(250px,330px) 1fr;gap:clamp(32px,4.6vw,72px);align-items:start}
/* คอลัมน์ซ้ายเนื้อหาสั้นกว่าขวามาก ทำ sticky ให้หัวเรื่องค้างไว้ระหว่างอ่านฝั่งขวา
   ต้องมี align-items:start ที่ .split ด้วย ไม่งั้นกล่องยืดเต็มแถวแล้ว sticky ไม่ทำงาน */
.split-aside{position:sticky;top:calc(var(--header-h) + 34px)}
/* ขยายจากเดิม clamp(22px,2.6vw,32px) แต่ยังต่ำกว่า .sec-title ที่สูงสุด 46px
   เพื่อให้ลำดับความสำคัญของหัวข้อไม่พัง — หัวเซกชันต้องยังใหญ่กว่าหัวบล็อกย่อย */
.split-aside h2{font-size:clamp(26px,3.2vw,40px);font-weight:400;letter-spacing:.05em;margin-bottom:20px;line-height:1.32}
.split-aside p{color:var(--muted);font-size:14.5px;line-height:1.9}
/* เส้นคั่นแนวตั้ง ให้อ่านเป็นสองก้อนแยกกัน ไม่ใช่ข้อความกองเดียว
   scope ด้วย > .prose เพราะหน้าแรกใช้ .split คู่กับ .cards ซึ่งไม่ต้องมีเส้นคั่น */
.split > .prose{padding-left:clamp(26px,3.4vw,52px);border-left:1px solid var(--line)}
/* เหลือคอลัมน์เดียว (ไม่มีเนื้อหาฝั่งขวาแล้ว) — ถ้าใช้กริดเดิมคอลัมน์ซ้ายจะถูกบีบไว้ที่ 330px
   แล้วเหลือพื้นที่ขวาว่างโบ๋ครึ่งหน้า จึงยุบเป็นคอลัมน์เดียวคุมความกว้างให้อ่านสบาย
   และปิด sticky ด้วย เพราะไม่มีเนื้อหายาว ๆ ข้าง ๆ ให้เลื่อนตามอีกแล้ว */
.split--solo{grid-template-columns:1fr;max-width:1100px;margin-inline:auto}
.split--solo .split-aside{position:static;top:auto}
/* พอเป็นคอลัมน์เดียว สองก้อนวางซ้อนกันแนวตั้งแล้ว เส้นคั่นแนวตั้งกับระยะเยื้องซ้าย
   ของ .prose จึงไม่มีความหมาย ต้องล้างทิ้ง ไม่งั้นจะเหลือเส้นลอยอยู่ชิดซ้าย
   (ระยะห่างระหว่างสองก้อนได้จาก gap ของ .split อยู่แล้ว ไม่ต้องใส่ margin เพิ่ม) */
.split--solo > .prose{padding-left:0;border-left:none}
/* คุมความยาวบรรทัดของคำโปรยไว้ต่างหาก ไม่ให้ยืดตามความกว้างบล็อกที่ขยายเพื่อรองรับ
   check-list แถวเดียว — ข้อความยาวเต็ม 1100px จะกวาดสายตาอ่านลำบาก */
.split--solo .split-aside > p{max-width:680px}

.check-list{margin-top:28px;display:grid;gap:14px}
.check-list li{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--text);font-weight:300}
.check-list .ic{
  width:22px;height:22px;flex:none;border:1px solid var(--line-2);border-radius:50%;
  display:grid;place-items:center;margin-top:3px;transition:all .3s;
}
.check-list .ic svg{width:10px;height:10px;color:var(--red-hi)}
.check-list li:hover .ic{border-color:var(--red);background:var(--red-dim)}
/* 2 คอลัมน์สำหรับรายการ 4 ข้อ — เลข 4 หารด้วย 2 ลงตัว ไม่เหลือช่องว่าง

   คอลัมน์เป็น max-content ไม่ใช่ 1fr: 1fr แบ่งความกว้างเท่ากันตายตัว 430px ต่อคอลัมน์
   แต่ข้อความจริงสั้นกว่านั้น เลยกองชิดซ้ายในช่องของตัวเอง มวลตัวอักษรที่ตาเห็น
   จึงเยื้องไปทางซ้ายเมื่อเทียบกับหัวข้อที่จัดกึ่งกลาง
   max-content + justify-content:center = คอลัมน์กว้างเท่าข้อความจริง แล้วยกทั้งคู่มากลาง
   ยังคง minmax(0,...) ไว้ กันข้อความไทยยาว ๆ ดันคอลัมน์ล้นกรอบ */
.check-list--2col{
  grid-template-columns:repeat(2,minmax(0,max-content));
  justify-content:center;
  gap:16px 44px;max-width:860px;margin-inline:auto;
}
/* 4 ข้อเรียงแถวเดียว ใช้ minmax(0,1fr) ด้วยเหตุผลเดียวกับ --2col
   ลดเหลือ 2 คอลัมน์ที่ 1024px และ 1 คอลัมน์ที่ 620px
   เพราะข้อความไทยที่ยาวที่สุด ("ผ้าไมโครไฟเบอร์แยกโซนล้อ–ตัวถัง")
   ต้องการความกว้างช่องราว 230px ถึงจะไม่ตัดคำเกิน 2 บรรทัด */
.check-list--row{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 26px}
@media (max-width:1024px){.check-list--row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.check-list--row{grid-template-columns:1fr}}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(32px,4vw,48px)}

/* ---------- 10. Product / Package Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
/* จำกัด 3 คอลัมน์ — ใช้กับกริดที่มี 5 การ์ด ให้เรียง 3+2 แทน 4+1 */
.cards--3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));max-width:1060px;margin-inline:auto}
.card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  overflow:hidden;transition:transform .45s var(--ease-out),border-color .35s,background .35s;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);border-color:rgba(225,6,0,.4);background:var(--surface-2)}
.card-media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:radial-gradient(70% 70% at 50% 40%,#26262c,#0d0d10 78%);
  display:grid;place-items:center;
}
.card-media svg,.card-media img{width:54%;height:auto;opacity:.92;transition:transform .7s var(--ease-out)}
.card:hover .card-media svg,.card:hover .card-media img{transform:scale(1.08) translateY(-4px)}
/* --photo = ใส่รูปถ่ายจริงเต็มกล่องแทนไอคอนที่ลอยกลาง
   ต้องล้าง width:54% ของกฎด้านบน และตัด translateY ตอน hover ออก
   ไม่งั้นรูปจะเลื่อนขึ้นแล้วเปิดช่องว่างที่ขอบล่างกล่อง */
.card-media--photo{background:#0d0d10}
.card-media--photo picture{position:absolute;inset:0;display:block}
.card-media--photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;opacity:1;
}
.card:hover .card-media--photo img{transform:scale(1.06)}
/* ฉากบังบาง ๆ บน-ล่าง ให้เครื่องหมายมุมยังเห็นชัด และไล่กลืนกับเนื้อการ์ดด้านล่าง */
.card-media--photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,6,.55) 0%,transparent 38%,transparent 64%,rgba(5,5,6,.5) 100%);
}
.card-body{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column}
.card-body h3{font-size:16px;font-weight:500;letter-spacing:.05em}
.card-body .en{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-2);margin-top:5px}
.card-body p{font-size:13.5px;color:var(--muted);margin-top:12px;flex:1;font-weight:300}
.card-price{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.card-price .from{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}
.card-price .val{font-size:20px;font-weight:500;color:#fff}
.card-price .val em{font-style:normal;color:var(--red-hi);font-size:13px;margin-left:2px}
.card-link{
  margin-top:16px;display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff;
}
.card-link svg{width:13px;height:13px;transition:transform .35s var(--ease);color:var(--red-hi)}
.card:hover .card-link svg{transform:translateX(5px)}
/* กดได้ทั้งใบ ไม่ใช่เฉพาะคำว่า "ดูรายละเอียด" — แผ่ ::after ของลิงก์คลุมทั้งการ์ด
   (.card เป็น position:relative อยู่แล้ว จึงเป็นกรอบอ้างอิงให้พอดีใบ)

   ทำแบบนี้แทนการเอา <a> ไปครอบทั้งใบ เพราะ
   - HTML ยังถูกต้อง ไม่เกิดลิงก์ซ้อนลิงก์ และ <h3> ไม่ถูกกลืนเข้าไปอยู่ในลิงก์
   - screen reader ยังเจอลิงก์เดียวต่อการ์ด ชื่อลิงก์คือ "ดูรายละเอียด" เหมือนเดิม
     ไม่ใช่อ่านข้อความทั้งการ์ดรวดเดียวเป็นชื่อลิงก์
   - ลำดับ Tab ของคีย์บอร์ดไม่เปลี่ยน

   z-index:4 ต้องสูงกว่าป้าย .badge (3) ไม่งั้นตรงป้ายจะกลายเป็นรูโหว่ที่กดแล้วไม่ไปไหน
   ซึ่งเป็นมุมที่คนเล็งกดพอดี
   ส่วนฉากบัง .card-media--photo::after ไม่กวน เพราะตั้ง pointer-events:none ไว้แล้ว */
.card-link::after{content:"";position:absolute;inset:0;z-index:4}

.badge{
  position:absolute;top:0;left:0;z-index:3;
  background:var(--red);color:#fff;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;padding:6px 14px;font-weight:500;
}

/* ---------- 11. Showcase band (2x2) ---------- */
/* minmax(0,1fr) ไม่ใช่ 1fr — 1fr มี min:auto คอลัมน์จะกว้างอย่างน้อยเท่าคำที่ยาวที่สุด
   ชื่อบริการภาษาไทยอย่าง "เคลือบเซรามิก" ที่มี letter-spacing .14em ยาวเกินครึ่งจอมือถือ
   ทำให้กริดดันตัวเองล้นจอ คอลัมน์ขวาถูกตัดหาย */
.band{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  background:linear-gradient(180deg,#0d0d10,#08080a);
}
.band-item{
  position:relative;padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,32px) clamp(30px,3.4vw,48px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;isolation:isolate;
  transition:background .4s var(--ease);
}
/* กริด 2x2 — ใบขวาสุดของแต่ละแถวไม่ต้องมีเส้นขวา และแถวล่างไม่ต้องมีเส้นล่าง
   ใช้ nth-child แทน :last-child เพราะตอนนี้ใบที่ชนขอบมี 2 ใบ ไม่ใช่ใบเดียว */
.band-item:nth-child(2n){border-right:none}
.band-item:nth-last-child(-n+2){border-bottom:none}
.band-item:hover{background:rgba(225,6,0,.05)}
.band-item .art{height:clamp(110px,13vw,170px);display:grid;place-items:center;margin-bottom:22px}
.band-item .art svg,.band-item .art img{max-height:100%;width:auto;transition:transform .7s var(--ease-out)}
.band-item:hover .art svg,.band-item:hover .art img{transform:scale(1.06) rotate(-2deg)}
.band-item h3{font-size:14.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.band-item .price{font-size:12.5px;color:var(--muted);margin-top:8px;font-weight:300}
.band-item .price b{color:var(--red-hi);font-weight:500}
.band-item .idx{
  position:absolute;top:16px;right:20px;font-size:44px;font-weight:600;
  color:rgba(255,255,255,.045);line-height:1;z-index:-1;
}

/* ---------- 12. Spec table ---------- */
.spec-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:420px}
.spec-left{padding:clamp(34px,4.4vw,64px);background:var(--bg-alt);display:flex;flex-direction:column;justify-content:center}
.spec-left h2{font-size:clamp(20px,2.4vw,28px);font-weight:400;letter-spacing:.16em;text-transform:uppercase;margin-bottom:30px}
.spec-table td{padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
.spec-table tr:last-child td{border-bottom:none}
.spec-table td:first-child{
  width:44%;color:var(--muted-2);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding-right:16px;font-weight:400;
}
.spec-table td:last-child{color:var(--text);font-weight:300}
.spec-right{
  position:relative;background:radial-gradient(75% 75% at 45% 40%,#2b2b32,#0a0a0c 76%);
  display:grid;place-items:center;overflow:hidden;padding:30px;
}
.spec-right svg,.spec-right img{width:min(78%,440px);height:auto;opacity:.95}
/* คอลัมน์รูปแคบกว่าครึ่ง ไม่ให้รูปแย่งน้ำหนักไปจากตารางซึ่งเป็นเนื้อหาหลัก
   (ค่าเริ่มต้น 1fr 1fr ยังใช้กับหน้าที่เป็นไอคอนเหมือนเดิม) */
.spec-wrap--photo{grid-template-columns:1.45fr .55fr}
/* แบบรูปถ่ายเต็มช่อง ต่างจากค่าเริ่มต้นที่เป็นไอคอนเล็กวางกลางบนพื้นไล่เฉด
   ต้องล้าง padding กับ place-items ของตัวแม่ ไม่งั้นรูปจะหดอยู่กลางช่องแทนที่จะเต็ม
   ส่วน ::after ของ .spec-right ยังคงไว้ ทำหน้าที่ไล่เงาขอบซ้ายให้รูปกลืนกับฝั่งตาราง */
.spec-right--photo{padding:0;background:#08080a}

/* ---------- 12b. แถบรูปคั่นเซกชัน ---------- */
/* ใช้ aspect-ratio คุมความสูงแทนการกำหนด height เป็น px
   ความสูงจะยืดหดตามความกว้างจอเอง และเบราว์เซอร์จองพื้นที่ไว้ตั้งแต่ก่อนรูปโหลดเสร็จ
   เลย์เอาต์จึงไม่กระตุก แม้รูปจะเป็น lazy */
.photo-band{position:relative;overflow:hidden;background:#08080a;aspect-ratio:24/7}
.photo-band picture{display:block;width:100%;height:100%}
.photo-band img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* ไล่เงาหัวท้ายให้แถบกลืนกับเซกชันสีเข้มที่ขนาบอยู่ ไม่ตัดขอบแข็งเป็นแผ่นแปะ */
.photo-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.78),rgba(8,8,10,.12) 38%,rgba(8,8,10,.12) 62%,rgba(8,8,10,.88));
}
/* จอแคบ 24/7 จะเตี้ยจนเหลือเป็นเส้น มองไม่ออกว่าเป็นรูปอะไร จึงเพิ่มความสูงให้ */
@media (max-width:760px){.photo-band{aspect-ratio:16/9}}
.spec-right--photo picture{display:block;width:100%;height:100%}
.spec-right--photo img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:1}
.spec-right::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,12,.9),transparent 42%);
}

/* ---------- 13. Trust bar ---------- */
.trust{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  background:var(--light);color:#43434a;
}
.trust-item{
  display:flex;align-items:center;gap:16px;
  padding:clamp(24px,3vw,34px) clamp(18px,2.4vw,30px);
  border-right:1px solid rgba(0,0,0,.09);
}
.trust-item:last-child{border-right:none}
.trust-item .ic{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(0,0,0,.14);border-radius:50%;color:var(--red);
  transition:all .35s var(--ease);
}
.trust-item .ic svg{width:20px;height:20px}
.trust-item:hover .ic{background:var(--red);color:#fff;border-color:var(--red);transform:rotate(-8deg)}
.trust-item h4{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#131316}
.trust-item p{font-size:12.5px;color:#6d6d76;margin-top:3px;font-weight:300}

/* ---------- 14. Process steps ---------- */
/* ไม่ใช้กรอบแล้ว — เดิมทำเส้นคั่นด้วย gap:1px บนพื้น --line แล้วให้ .step ทับด้วยสีพื้น
   ตอนนี้ตัดทั้งเส้นคั่นและพื้นของการ์ดออก ใช้ระยะห่างเป็นตัวแบ่งขั้นตอนแทน
   จึงต้องเพิ่ม gap จาก 1px เป็นระยะจริง ไม่งั้นข้อความ 4 ชุดจะไหลชนกัน */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(28px,3.4vw,46px)}
.step{text-align:center}
/* เลขขั้นตอนเป็นวงกลมวางเหนือหัวข้อ ใช้โทนเดียวกับชิปไอคอนหน้าติดต่อให้ทั้งเว็บดูเป็นชุดเดียวกัน
   ไม่ใส่ letter-spacing เพราะช่องไฟท้ายตัวอักษรจะดันเลขเยื้องออกจากกึ่งกลางวงกลม
   วงกลมกว้างตายตัว 48px จึงต้อง margin-inline:auto เอง text-align ของแม่จัดกึ่งกลางให้ไม่ได้ */
.step .no{
  width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  font-size:14px;font-weight:500;color:var(--red-hi);
  border:1px solid rgba(255,43,31,.38);background:rgba(255,43,31,.12);
  margin:0 auto 18px;transition:background .35s,border-color .35s;
}
.step:hover .no{background:rgba(255,43,31,.22);border-color:rgba(255,43,31,.6)}
.step h3{font-size:15.5px;font-weight:500;letter-spacing:.04em;margin-bottom:10px}
.step p{font-size:13.5px;color:var(--muted);font-weight:300}

/* ---- .steps--slider : สไลด์แนวนอนเฉพาะจอมือถือ ----
   เดสก์ท็อปยังเป็นกริดเหมือนเดิมทุกอย่าง ไม่แตะ
   ปุ่มจุดสร้างด้วย JS (initStepSlider) จึงไม่ต้องแก้ HTML ทีละหน้า
   base ซ่อนไว้ด้วย display:none — สำคัญกว่าที่คิด เพราะ display:none
   ดึงปุ่มออกจากลำดับ tab ด้วย ไม่งั้นคนใช้เดสก์ท็อปจะกด Tab ไปโดนปุ่มที่มองไม่เห็น */
.steps-nav{display:none}
@media (max-width:760px){
  /* ใช้ scroll-snap ของเบราว์เซอร์ ไม่เขียน JS ลากเอง จะได้แรงเฉื่อยและ
     ความรู้สึกตอนปัดนิ้วที่เป็นของระบบปฏิบัติการนั้น ๆ มาฟรี */
  .steps--slider{
    /* 78vw ทำให้เห็นขอบการ์ดถัดไปโผล่มานิดหนึ่ง เป็นสัญญาณว่ายังปัดต่อได้
       ใช้หน่วย vw ไม่ใช่ % เพราะ % คิดจากกล่องเนื้อในซึ่งหดตามค่า padding ด้านล่าง
       กลายเป็นสมการวนที่หาจุดกึ่งกลางไม่ได้ ส่วน vw อิงความกว้างจอตรง ๆ */
    --card:78vw;
    display:flex;flex-wrap:nowrap;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    gap:14px;
    /* ดึงขอบออกไปชนขอบจอ แล้วเว้นด้านในข้างละครึ่งของที่ว่างที่เหลือ
       ใบแรกกับใบสุดท้ายจึงเลื่อนมาอยู่กึ่งกลางจอได้พอดี
       ถ้าเว้นแค่ระยะขอบปกติ (var(--gut)) ใบแรกจะติดซ้ายเพราะเลื่อนต่อไม่ได้แล้ว */
    margin-inline:calc(var(--gut) * -1);
    padding-inline:calc((100vw - var(--card)) / 2);
    scrollbar-width:none;
  }
  .steps--slider::-webkit-scrollbar{display:none}
  .steps--slider .step{flex:0 0 var(--card);scroll-snap-align:center}

  /* แถวควบคุม: ลูกศรซ้าย — จุดบอกตำแหน่ง — ลูกศรขวา */
  .steps-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px}
  .steps-nav__btn{
    width:36px;height:36px;flex:none;display:grid;place-items:center;
    border-radius:50%;border:1px solid var(--line-2);color:#fff;background:none;
    transition:opacity .3s,border-color .3s,background .3s;
  }
  .steps-nav__btn svg{width:16px;height:16px}
  /* ใช้ path เดียวกันทั้งสองปุ่ม แล้วพลิกตัวขวาด้วย scaleX
     ประหยัดกว่าการเขียน path ที่สองและไม่มีทางวาดคนละความหนา */
  .steps-nav__btn--next svg{transform:scaleX(-1)}
  .steps-nav__btn:disabled{opacity:.28}
  .steps-nav__btn:not(:disabled):active{background:var(--red-dim);border-color:var(--red)}

  .steps-dots{display:flex;justify-content:center;gap:2px}
  /* ปุ่มกว้าง 24px ตามขนาดพื้นที่กดขั้นต่ำ ส่วนจุดที่มองเห็นเล็กแค่ 7px
     ถ้าทำปุ่มเล็กเท่าจุด จะกดพลาดตลอดบนมือถือ */
  .steps-dots button{
    width:24px;height:24px;display:grid;place-items:center;padding:0;background:none;
  }
  .steps-dots button::before{
    content:"";width:7px;height:7px;border-radius:50%;
    background:var(--line-2);transition:background .3s,transform .3s;
  }
  .steps-dots button[aria-current="true"]::before{background:var(--red);transform:scale(1.45)}
}

/* ---------- 14b. รายการบริการย่อย + แบรนด์ที่ให้บริการ ---------- */
/* การ์ดมุมมนแยกใบ แทนกริดเส้นคั่น 1px แบบเดิมที่ดูแบนเหมือนตาราง
   ให้เข้าชุดกับการ์ดข้อมูลติดต่อและวงกลมขั้นตอนการทำงาน
   3 คอลัมน์ตายตัว ไม่ใช้ auto-fit เพราะรายการมี 6 ช่อง — 6 หาร 3/2/1 ลงตัวทุก breakpoint
   ถ้าใช้ auto-fit ที่คอนเทนเนอร์ 1200px จะได้ 4 คอลัมน์ แล้วเหลือแถวล่างโหว่ 2 ช่อง */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.svc-item{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:clamp(24px,2.8vw,34px);
  transition:background .35s,border-color .35s,transform .35s var(--ease);
}
/* เส้นแดงด้านบนวิ่งเต็มความกว้างตอนชี้เมาส์
   ต้องมี overflow:hidden ที่การ์ด ไม่งั้นเส้นตรงจะโผล่พ้นมุมโค้งออกมา */
.svc-item::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;z-index:2;
  background:linear-gradient(90deg,var(--red),rgba(225,6,0,0));
  transition:width .5s var(--ease-out);
}
/* แสงแดงเรืองจากมุมขวาบน โผล่ตอน hover ให้การ์ดมีมิติ ไม่ใช่กล่องสีเรียบ */
.svc-item::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(72% 90% at 100% 0%,rgba(225,6,0,.18),transparent 62%);
  transition:opacity .4s;
}
.svc-item:hover{background:var(--surface-2);border-color:rgba(225,6,0,.35);transform:translateY(-3px)}
.svc-item:hover::before{width:100%}
.svc-item:hover::after{opacity:1}

/* เลขลำดับวางมุมขวาบน สีแดงทึบสีเดียว ไม่ไล่เฉดและไม่ใช้เส้นขอบโปร่ง
   ถอดออกจาก flow ด้วย absolute หัวข้อจึงขยับขึ้นไปอยู่บนสุดของการ์ด */
.svc-item .lbl{
  position:absolute;top:18px;right:20px;margin:0;z-index:1;pointer-events:none;
  font-size:clamp(22px,2.3vw,28px);line-height:1;font-weight:600;letter-spacing:-.01em;
  color:var(--red-hi);
}
/* ยกข้อความให้อยู่เหนือแสงเรืองของ ::after และเว้นขวาไม่ให้หัวข้อชนเลข */
.svc-item h3{
  position:relative;z-index:1;padding-right:40px;
  font-size:16px;font-weight:500;letter-spacing:.03em;margin-bottom:10px;color:#fff;
}
.svc-item p{position:relative;z-index:1;font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.8}

/* ชิปรายชื่อแบรนด์ — flex wrap เพราะชื่อแบรนด์ยาวไม่เท่ากัน
   ถ้าใช้ grid คอลัมน์เท่ากันจะเหลือช่องว่างท้ายชิปสั้นเยอะ */
.brands{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.brands--start{justify-content:flex-start}
.brands li{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;background:var(--surface);border:1px solid var(--line);
  font-size:13px;letter-spacing:.08em;color:#fff;font-weight:400;
  transition:border-color .3s,background .3s,transform .35s var(--ease);
}
.brands li::before{content:"";width:5px;height:5px;flex:none;background:var(--red);transform:rotate(45deg)}
.brands li:hover{border-color:rgba(225,6,0,.45);background:var(--surface-2);transform:translateY(-3px)}
.brands li span{color:var(--muted);font-weight:300;letter-spacing:.04em;font-size:12px}

/* ---- แถบโลโก้แบรนด์เลื่อนอัตโนมัติ ----
   track มีแถวโลโก้ชุดเดียวกันซ้ำ 2 ชุด แล้วเลื่อน -50%
   พอเลื่อนครบครึ่งทางภาพจะบรรจบกับจุดเริ่มพอดี วนต่อได้ไม่มีรอยกระตุก */
.logo-marquee{
  position:relative;overflow:hidden;
  /* ไล่โปร่งสองข้าง ให้โลโก้ค่อย ๆ จางตรงขอบ ไม่ถูกตัดกลางตัวอักษร */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
/* width:max-content จำเป็น ไม่งั้น flex จะบีบ track ให้พอดีจอ แล้ว translateX(-50%) จะเลื่อนผิดระยะ */
.logo-marquee__track{display:flex;width:max-content;animation:logoMarquee 42s linear infinite}
.logo-marquee:hover .logo-marquee__track{animation-play-state:paused}
/* padding-inline = ครึ่งหนึ่งของ gap เพื่อให้ระยะตรงรอยต่อสองแถวเท่ากับระยะระหว่างโลโก้ */
.logo-marquee__row{
  display:flex;align-items:center;flex:none;list-style:none;margin:0;
  gap:clamp(40px,5.5vw,86px);padding-inline:clamp(20px,2.75vw,43px);
}
/* แถวโลโก้แบบอยู่นิ่ง ใช้เมื่อมีโลโก้น้อยใบ
   marquee ต้องการแถวที่กว้างกว่าจอ ถ้ามี 2-3 ใบแถวจะสั้นกว่าจอ
   แล้วเกิดช่องโหว่ตอนวนรอบ กรณีนั้นจึงวางนิ่งกลางหน้าแทน */
.logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(40px,5.5vw,86px);list-style:none;margin:0;padding:0}
.logo-marquee__row li,.logo-row li{display:grid;place-items:center;height:56px;flex:none}
/* โลโก้เป็นสีจริงแล้ว จึงไม่หย่อน opacity เหมือนแถบโลโก้โมโนโครม
   เพราะสีแดง/น้ำเงินบนพื้นดำถ้าลดความทึบจะกลายเป็นสีหมองทันที
   ใช้ขยายเล็กน้อยตอน hover เป็นการตอบสนองแทน */
.logo-marquee__row img,.logo-row img{
  max-height:40px;max-width:180px;width:auto;height:auto;object-fit:contain;
  transition:transform .4s var(--ease);
}
.logo-marquee__row li:hover img,.logo-row li:hover img{transform:scale(1.07)}
@keyframes logoMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* กล่องเน้นข้อมูลสำคัญ เช่น การเป็นตัวแทนจำหน่าย */
.dealer-note{
  margin-top:clamp(24px,3vw,36px);padding:clamp(20px,2.4vw,30px);
  background:var(--red-dim);border:1px solid rgba(225,6,0,.3);border-left:3px solid var(--red);
}
.dealer-note h3{font-size:15.5px;font-weight:500;letter-spacing:.03em;margin-bottom:9px;color:#fff}
.dealer-note p{font-size:13.5px;color:var(--text);font-weight:300;line-height:1.8}

/* ---- รูปพื้นหลังของเซกชันธรรมดา (.section--photo) ----
   ใช้ <img> + object-fit:cover แทน background-image เพราะได้ srcset สลับไฟล์ตามขนาดจอ
   และสลับรูปแนวตั้ง/แนวนอนผ่าน <picture> ได้ ซึ่ง background-image ทำไม่ได้
   z-index ติดลบ ทำให้รูปกับฉากบังจมอยู่ใต้เนื้อหาโดยไม่ต้องยก z-index ให้ลูกทุกตัว
   isolation:isolate กันไม่ให้ค่าติดลบทะลุออกไปซ้อนกับเซกชันอื่น */
.section--photo{position:relative;overflow:hidden;isolation:isolate;background:#08080a}
.section--photo .section__media{position:absolute;inset:0;z-index:-2}
.section--photo .section__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* เข้มหัวท้าย อ่อนตรงกลาง — หัวเรื่องกับบรรทัดเครดิตลอยอยู่บนรูปตรง ๆ ต้องกดให้มืดพอ
   ส่วนตรงกลางเป็นการ์ดทึบแสงอยู่แล้ว จึงปล่อยให้เห็นรูปลอดช่องว่างระหว่างการ์ดได้ */
.section--photo .section__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.97) 0%,rgba(8,8,10,.86) 26%,rgba(8,8,10,.86) 74%,rgba(8,8,10,.97) 100%);
}
/* --scrim--text : สำหรับเซกชันที่ตัวหนังสือลอยบนรูปตรง ๆ ไม่มีการ์ดทึบรองอย่างหน้ารีวิว
   (เช่น "ทำไมลูกค้าถึงเลือกเรา") ต้องกดกลางรูปให้มืดกว่าเดิม เพราะรูปอู่มีเส้นไฟแดง
   กับพื้นสะท้อนสว่างเป็นจุด ๆ ที่ .86 จะโผล่มาตัดกับคำอธิบายสีจาง (var(--muted)) พอดี */
.section--photo .section__scrim--text{
  background:linear-gradient(180deg,rgba(8,8,10,.97) 0%,rgba(8,8,10,.93) 26%,rgba(8,8,10,.93) 74%,rgba(8,8,10,.97) 100%);
}

/* ---------- 15. Reviews ---------- */
/* คะแนนวางบนสุดกึ่งกลาง แล้วคำอธิบายกับปุ่มไล่ลงมาเป็นแกนเดียวกัน
   เดิมเป็นสองคอลัมน์ (คะแนนซ้าย ข้อความขวา) ซึ่งสายตาต้องกวาดข้ามไปมา
   แบบเรียงลงมาอ่านทีเดียวจบ และเลข 5.0 ได้เป็นจุดเด่นจริง ๆ ไม่ถูกข้อความข้าง ๆ แย่งความสนใจ */
.rating-hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(22px,3vw,32px);
  padding:clamp(30px,4vw,52px) clamp(24px,3.6vw,44px);
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
}
/* เส้นคั่นเป็นขีดสั้นใต้กลุ่มคะแนน แทนเส้นแบ่งคอลัมน์แนวตั้งของเลย์เอาต์เดิม
   ใช้ ::after เพื่อคุมความกว้างขีดได้ ไม่ต้องยาวเต็มความกว้างกล่อง */
/* เลข ดาว และป้ายกำกับ เรียงอยู่บรรทัดเดียวกัน
   flex-wrap ไว้เผื่อจอแคบ ไม่งั้นสามก้อนนี้จะอัดกันจนล้นกล่อง */
.rating-score{
  position:relative;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:clamp(10px,1.8vw,18px);
  padding-bottom:clamp(22px,3vw,30px);
}
/* ล้าง margin ที่ .stars ตั้งไว้สำหรับตอนวางซ้อนกันแนวตั้ง ไม่งั้นแถวจะเบี้ยว */
.rating-score .stars{margin:0}
.rating-score::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:56px;height:1px;background:var(--line-2);
}
/* .btns มี margin-top ของตัวเองไว้ใช้ตอนต่อท้ายข้อความยาว ๆ
   แต่ในกล่องนี้ระยะห่างมาจาก gap ของ .rating-hero แล้ว ถ้าไม่ล้างจะเว้นซ้อนสองชั้น */
.rating-hero .btns{margin-top:0}
/* คุมสัดส่วนสามก้อนในแถวให้อ่านเป็นหน่วยเดียวกัน — ป้าย 13 / ดาว 18 / เลข 42
   เดิมเลข 54px คู่ป้าย 12px ต่างกันกว่า 4 เท่า แถวเลยดูเป็นเลขยักษ์ที่มีเศษข้อความห้อยอยู่
   ลดช่วงห่างเหลือ ~3 เท่า เลขยังเด่นสุดตามลำดับความสำคัญ แต่ไม่กลืนอีกสองก้อน
   line-height:1.2 ที่ป้ายกำกับจำเป็น ไม่งั้นกล่องข้อความจะสูงตาม 1.75 ที่สืบจาก body
   แล้วจุดกึ่งกลางแนวตั้งจะเพี้ยนไปจากเลขที่ line-height:1 */
.rating-score .big{font-size:clamp(32px,4vw,42px);font-weight:600;color:#fff;line-height:1}
.rating-score .of{font-size:13px;color:#fff;letter-spacing:.14em;line-height:1.2}
.rating-score .stars svg{width:18px;height:18px}
.stars{display:flex;gap:4px;justify-content:center;margin:10px 0 8px}
.stars svg{width:16px;height:16px;color:var(--gold)}
/* ดาวที่ไม่ได้ให้คะแนน — ยังพิมพ์ออกมาแต่หรี่ลง แถบดาวทุกใบจะได้กว้างเท่ากัน
   ไม่กระโดดสั้นยาวตามคะแนน (รีวิว 4 ดาวกับ 5 ดาววางเรียงกันแล้วยังดูเป็นระเบียบ) */
.stars svg.off{color:rgba(255,255,255,.16)}
.bars{display:grid;gap:9px;flex:1}
.bar-row{display:grid;grid-template-columns:52px 1fr 42px;align-items:center;gap:14px;font-size:12px;color:var(--muted)}
.bar{height:5px;background:rgba(255,255,255,.07);overflow:hidden;border-radius:20px}
.bar i{display:block;height:100%;background:var(--red-grad);border-radius:20px;width:0;transition:width 1.2s var(--ease-out)}

/* ==========================================================================
   การ์ดรีวิว (.rcard) — รูปด้านบน / ดาว / หัวข้อ / ข้อความ / เครดิต / ลิงก์อ่านต่อ
   --------------------------------------------------------------------------
   grid-auto-rows:1fr บังคับให้ทุกใบสูงเท่ากันทั้งตาราง ไม่ใช่แค่เท่ากันในแถวเดียวกัน
   ซึ่งจำเป็นมากกับการ์ดที่มีรูป เพราะรูปเป็นสัดส่วนคงที่ ถ้าการ์ดสูงไม่เท่ากัน
   ขอบล่างของรูปในแต่ละใบจะไม่อยู่ระดับเดียวกันจนดูรก
   ========================================================================== */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:20px}
/* บล็อกรีวิวหน้าแรกเลือกจำนวนการ์ดได้จากหลังบ้าน (1–6 ใบ)
   ถ้าใช้ 3 คอลัมน์ตายตัว พอเหลือ 2 ใบจะมีช่องว่างค้างข้างขวาหนึ่งช่อง
   auto-fit + minmax จึงยืดการ์ดให้เต็มแถวเองตามจำนวนที่ตั้งไว้ */
.review-grid--fluid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

.rcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .35s,transform .4s var(--ease-out),background .35s,box-shadow .4s;
}
.rcard:hover{
  border-color:rgba(225,6,0,.35);transform:translateY(-5px);
  background:var(--surface-2);box-shadow:var(--shadow);
}

/* รูปสัดส่วน 16:9 ตายตัว — ลูกค้าอัปรูปมาสัดส่วนไหนก็ได้ แล้ว object-fit:cover
   ครอปให้เอง ถ้าปล่อยความสูงตามรูปจริง การ์ดแต่ละใบจะสูงไม่เท่ากันทันที
   aspect-ratio กันหน้ากระตุกตอนรูปโหลดเสร็จด้วย (จองที่ไว้ล่วงหน้า) */
.rcard__media{position:relative;aspect-ratio:16/9;background:var(--surface-3);overflow:hidden}
.rcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out)}
.rcard:hover .rcard__media img{transform:scale(1.04)}

.rcard__body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.rcard .stars{justify-content:flex-start;margin:0 0 10px;gap:3px}
.rcard .stars svg{width:14px;height:14px}

.rcard__title{
  font-size:16px;font-weight:500;color:#fff;line-height:1.45;
  letter-spacing:-.01em;margin-bottom:8px;overflow-wrap:anywhere;
}

/* ตัดข้อความเหลือ 3 บรรทัดแล้วจบด้วยลิงก์ "อ่านรายละเอียดเพิ่มเติม"
   เลิกใช้ปุ่มกางข้อความในหน้าแล้ว เพราะการ์ดที่มีรูปพอกางออกจะดันการ์ดใบอื่น
   ในแถวเดียวกันสูงตามจนตารางเสียรูป — ให้ไปอ่านเต็มที่ต้นทางแทน
   -webkit-line-clamp ยังต้องมี prefix เพราะ line-clamp มาตรฐานรองรับไม่ครบทุกเบราว์เซอร์ */
.rcard__text{
  font-size:13.5px;color:var(--text);font-weight:300;line-height:1.75;margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}

/* margin-top:auto ดันสองบรรทัดล่างไปชิดก้นการ์ดเสมอ
   ลิงก์ "อ่านรายละเอียดเพิ่มเติม" ของทุกใบจึงอยู่ระดับเดียวกันแม้ข้อความสั้นยาวไม่เท่ากัน */
.rcard__by{
  margin-top:auto;padding-top:14px;font-size:11px;color:var(--muted-2);
  letter-spacing:.04em;line-height:1.6;overflow-wrap:anywhere;
}
/* ไม่มีบรรทัดเครดิต ก็ต้องมีตัวดันก้นการ์ดแทน ไม่งั้นลิงก์จะลอยตามข้อความ */
.rcard__text:last-of-type{margin-bottom:auto}

.rcard__link{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-top:14px;
  font-size:12.5px;font-weight:400;color:#fff;letter-spacing:.02em;
  padding-bottom:3px;border-bottom:1px solid var(--line-2);
  transition:color .25s,border-color .25s,gap .25s;
}
.rcard__link svg{width:14px;height:14px}
.rcard__link:hover{color:var(--red-hi);border-color:var(--red);gap:11px}
/* แผ่ ::after คลุมทั้งการ์ด กดตรงไหนก็ไปต้นทางได้ โดย HTML ยังถูกต้อง
   (ไม่ต้องเอา <a> ไปครอบทั้งใบซึ่งจะกลายเป็นลิงก์ซ้อนลิงก์) */
.rcard__link::after{content:"";position:absolute;inset:0}
/* ==========================================================================
   สไลด์การ์ดรีวิว (.carousel) — ปัดซ้ายขวา พร้อมจุดบอกตำแหน่งและลูกศร
   --------------------------------------------------------------------------
   ใช้ scroll-snap ของเบราว์เซอร์ ไม่เขียน JS ลากเอง จะได้แรงเฉื่อยและความรู้สึก
   ตอนปัดนิ้วที่เป็นของระบบปฏิบัติการนั้น ๆ มาฟรี และยังปัดได้ตามปกติแม้ JS พัง

   จำนวนการ์ดต่อหน้าจอคุมด้วยตัวแปร --per ที่เดียว ไม่ต้องเขียนสูตรความกว้างซ้ำ
   ========================================================================== */
.carousel{
  --gap:20px;
  --per:3;
  display:flex;gap:var(--gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* เผื่อที่บนล่างให้เงาและการยกตัวตอน hover ไม่โดน overflow ตัดหัวตัดท้าย */
  padding:8px 0 14px;
  -ms-overflow-style:none;scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none}
.carousel > *{
  flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  scroll-snap-align:start;
}
@media (max-width:1024px){ .carousel{--per:2} }
/* จอมือถือโชว์ 1 ใบเต็ม ๆ แล้วให้ขอบใบถัดไปโผล่มานิดหนึ่ง
   เป็นสัญญาณบอกผู้ใช้ว่ายังปัดต่อได้ ไม่ใช่จบแค่ใบเดียว */
@media (max-width:700px){ .carousel{--per:1.12;--gap:14px} }

/* แถวควบคุม: ลูกศรซ้าย — จุดบอกตำแหน่ง — ลูกศรขวา
   หน้าตาชุดเดียวกับ .steps-nav ที่ใช้กับสไลด์ขั้นตอนในหน้าเดียวกัน
   แต่ต้องเขียนคลาสของตัวเองแยก เพราะกฎของ .steps-nav อยู่ใน @media (max-width:760px)
   และตัวฐานเป็น display:none — เอามาใช้ซ้ำตรง ๆ แล้วเดสก์ท็อปจะไม่มีสไตล์เลย */
.carousel-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:26px}
/* ต้องเขียนกฎนี้ไว้ด้วย — display:flex ข้างบนมีความจำเพาะสูงกว่ากฎ [hidden] ของเบราว์เซอร์
   ถ้าไม่มี การสั่ง nav.hidden = true ใน main.js จะไม่มีผลอะไรเลย */
.carousel-nav[hidden]{display:none}

.carousel-nav__btn{
  width:36px;height:36px;flex:none;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--line-2);color:#fff;background:none;
  transition:opacity .3s,border-color .3s,background .3s;
}
.carousel-nav__btn svg{width:16px;height:16px}
/* ใช้ path เดียวกันทั้งสองปุ่ม แล้วพลิกตัวขวาด้วย scaleX
   ประหยัดกว่าการเขียน path ที่สองและไม่มีทางวาดคนละความหนา */
.carousel-nav__btn--next svg{transform:scaleX(-1)}
/* ปิดปุ่มที่หัวและท้ายสไลด์ — กดแล้วต้องมีอะไรเกิดขึ้นจริงเสมอ
   disabled ยังดึงปุ่มออกจากลำดับ tab ให้ด้วย */
.carousel-nav__btn:disabled{opacity:.28;cursor:not-allowed}
.carousel-nav__btn:not(:disabled):hover{border-color:#fff}
.carousel-nav__btn:not(:disabled):active{background:var(--red-dim);border-color:var(--red)}

.carousel-dots{display:flex;justify-content:center;gap:2px}
/* ปุ่มกว้าง 24px ตามขนาดพื้นที่กดขั้นต่ำ ส่วนจุดที่มองเห็นเล็กแค่ 7px
   ถ้าทำปุ่มเล็กเท่าจุด จะกดพลาดตลอดบนมือถือ */
.carousel-dots button{width:24px;height:24px;display:grid;place-items:center;padding:0;background:none}
.carousel-dots button::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--line-2);transition:background .3s,transform .3s;
}
.carousel-dots button[aria-current="true"]::before{background:var(--red);transform:scale(1.45)}

/* แถบเครดิต Google — ข้อกำหนด Places API บังคับขนาด 12-16px ห้ามเล็กกว่านี้ */
.gm-attrib{
  margin-top:34px;text-align:center;font-size:12.5px;line-height:1.9;
  color:var(--muted-2);font-weight:300;
}
.gm-attrib a{color:var(--muted);border-bottom:1px solid var(--line-2);transition:color .25s}
.gm-attrib a:hover{color:#fff}

.filter-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}
.filter-btn{
  padding:9px 20px;font-size:12px;letter-spacing:.12em;border:1px solid var(--line);
  color:var(--muted);transition:all .3s var(--ease);
}
.filter-btn:hover{color:#fff;border-color:var(--line-2)}
.filter-btn.is-active{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- 16. FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;text-align:left;font-size:15px;font-weight:400;color:#fff;
  transition:color .3s;
}
.faq-q:hover{color:var(--red-hi)}
.faq-q .pm{position:relative;width:16px;height:16px;flex:none}
.faq-q .pm::before,.faq-q .pm::after{
  content:"";position:absolute;background:var(--red);transition:transform .35s var(--ease);
}
.faq-q .pm::before{left:0;top:7.5px;width:16px;height:1.5px}
.faq-q .pm::after{top:0;left:7.5px;width:1.5px;height:16px}
.faq-item.is-open .pm::after{transform:rotate(90deg) scaleX(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease-out)}
.faq-a p{padding:0 0 24px;font-size:14px;color:var(--muted);font-weight:300;max-width:92%}

/* ---------- 17. Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,4vw,60px);align-items:start}
/* ไม่มีฟอร์มจองคิวแล้ว เหลือคอลัมน์ข้อมูลติดต่อเดียว — ถ้าใช้ 2 คอลัมน์เดิมฝั่งขวาจะว่าง
   จึงบีบความกว้างแล้วให้การ์ดติดต่อไหลเป็น 2 ใบต่อแถวเอง */
.contact-grid--solo{grid-template-columns:1fr;max-width:900px;margin-inline:auto}
/* ไม่ใส่ align-items:start — ปล่อยให้ stretch ตามค่าเริ่มต้นของ grid
   การ์ดในแถวเดียวกันจะสูงเท่ากัน (ใบ "ที่อยู่" 2 บรรทัดจะไม่ทำให้แถวล่างเหลื่อม) */
.contact-grid--solo .info-list{grid-template-columns:repeat(2,minmax(0,1fr))}
/* การ์ดมุมมนแล้วต้องถ่างช่องไฟด้วย ถ้าคงไว้ที่ 2px มุมโค้งของการ์ดที่ติดกัน
   จะเกิดเป็นรอยบากแหลม ๆ ตรงรอยต่อ แทนที่จะดูเป็นการ์ดแยกใบ */
.info-list{display:grid;gap:12px}
.info-item{
  display:flex;gap:16px;align-items:center;
  padding:20px 22px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;
  transition:border-color .35s,background .35s,transform .35s var(--ease);
}
/* จัดกึ่งกลางแนวตั้ง เพื่อให้ไอคอนอยู่กลางการ์ดเสมอ
   ไม่ว่าการ์ดจะถูกยืดให้สูงตามใบข้าง ๆ หรือข้อความจะยาว 1 หรือ 2 บรรทัด */
.info-item:hover{border-color:rgba(225,6,0,.35);background:var(--surface-2);transform:translateY(-2px)}
/* กรอบไอคอนสี่เหลี่ยมมุมมน สีประจำแต่ละช่องทาง
   เก็บสีเป็นค่า R,G,B ดิบไว้ในตัวแปร เพื่อให้ประกอบเป็น rgba() ได้ทั้งเส้นขอบและพื้นจาง
   ค่าเริ่มต้นแดงแบรนด์ประกาศไว้ที่ "ตัวแม่" ไม่ใช่ที่ .ic เอง
   เพราะค่าที่ประกาศบนตัวลูกเองจะชนะค่าที่สืบทอดมาเสมอ
   คลาสสีแบรนด์ (.brand-*) จึงทำงานได้โดยไม่ต้องไล่เพิ่ม specificity */
.info-item{--ic-rgb:255,43,31}
.info-item .ic{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  border-radius:12px;
  color:var(--ic-fg,rgb(var(--ic-rgb)));
  border:1px solid var(--ic-border,rgba(var(--ic-rgb),.38));
  background:var(--ic-bg,rgba(var(--ic-rgb),.12));
  transition:background .35s,border-color .35s;
}
.info-item:hover .ic{background:rgba(var(--ic-rgb),.2);border-color:rgba(var(--ic-rgb),.6)}
/* TikTok คุมทั้งพื้นและขอบเองตอน hover ให้ยังเป็นโทนดำล้วน (4 คลาส ชนะกฎ hover ข้างบนที่มี 3)
   ไม่งั้นจะโดนกฎทั่วไปเปลี่ยนขอบเป็นขาวจาง แล้วเส้นตัดสีดำหายไป */
.info-item:hover .ic.brand-tiktok{background:#303036;border-color:#08080a}
.info-item .ic svg{width:19px;height:19px}
/* ที่อยู่ / เวลาทำการ ไม่ใช่ช่องทางของแอพ จึงเลือกสีเองได้ ขอแค่ไม่ซ้ำกับ 4 ใบบน
   ประกาศบน .ic เองได้เลย เพราะค่าเริ่มต้นอยู่ที่ .info-item (ตัวแม่) จึงชนะการสืบทอด
   ที่อยู่ใช้ทองอำพัน — เป็นโทนอุ่นตัวเดียวในชุด ไม่ชนกับแดง/เขียว/น้ำเงิน/ชมพู
   และไม่ตั้ง --ic-bg ทับ จึงกลับมาใช้กฎเดียวกับใบอื่น คือพื้นจางสีเดียวกับไอคอน */
.ic--address{--ic-rgb:233,176,80}
.ic--hours{--ic-rgb:255,255,255}
/* ป้ายกำกับเดิมใช้ --muted-2 (#6a6a73) บนพื้นการ์ด #131316 ได้คอนทราสต์ราว 3:1
   ต่ำเกินไปสำหรับตัวอักษร 11px ตัวพิมพ์ใหญ่ จึงขยับเป็น --muted ให้อ่านง่ายขึ้น */
.info-item h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:5px}
.info-item p,.info-item a{font-size:15px;color:var(--white);font-weight:300;line-height:1.55}
.info-item a:hover{color:var(--red-hi)}

.form{background:var(--surface);border:1px solid var(--line);padding:clamp(24px,3.4vw,40px)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px;position:relative}
.field label{
  display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:9px;
}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;background:#0c0c0e;border:1px solid var(--line);
  font-size:14.5px;font-weight:300;color:#fff;border-radius:2px;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.field textarea{resize:vertical;min-height:120px}
.field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e97' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--red);background:#0f0f11;box-shadow:0 0 0 3px rgba(225,6,0,.12);
}
.field input::placeholder,.field textarea::placeholder{color:#4d4d55}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--red-hi)}
.err{display:none;font-size:11.5px;color:var(--red-hi);margin-top:7px;letter-spacing:.04em}
.field.has-error .err{display:block}
.form-note{font-size:12px;color:var(--muted-2);margin-top:16px;font-weight:300}
.form-ok{
  display:none;align-items:flex-start;gap:12px;margin-bottom:20px;padding:16px 18px;
  background:rgba(225,6,0,.08);border:1px solid rgba(225,6,0,.35);font-size:13.5px;color:#fff;
}
.form-ok.show{display:flex}
.form-ok svg{width:18px;height:18px;flex:none;color:var(--red-hi);margin-top:3px}

.map-wrap{position:relative;border:1px solid var(--line);background:var(--surface);aspect-ratio:16/7;overflow:hidden}
/* ไม่ใส่ filter ทับ iframe — ให้แผนที่แสดงสีจริงของ Google Maps
   (เดิมใช้ grayscale+invert เพื่อให้เข้าธีมมืด แต่ทำให้สีเพี้ยนเป็นขาวดำ) */
.map-wrap iframe{width:100%;height:100%;border:0}

.hours{width:100%}
.hours td{padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:300;white-space:nowrap}
.hours tr:last-child td{border-bottom:none}
.hours td:first-child{padding-right:18px}
.hours td:last-child{text-align:right;color:#fff;width:1%}
.hours .today td{color:var(--red-hi)}
.hours .today td:last-child{color:var(--red-hi)}

/* ---------- 19. Footer ---------- */
.site-footer{background:#070708;border-top:1px solid var(--line);padding-top:clamp(48px,6vw,78px)}
/* ฟุตเตอร์เหลือคอลัมน์เดียว (โลโก้ + คำอธิบาย + ไอคอนติดต่อ) จัดกลางทั้งบล็อก
   text-align อย่างเดียวไม่พอ เพราะ .brand กับ .socials เป็น flex ที่ไม่สนใจ text-align
   จึงต้อง justify-content:center และ p ที่มี max-width ต้อง margin-inline:auto */
.footer-grid{
  display:grid;justify-items:center;text-align:center;
  padding-bottom:clamp(38px,5vw,58px);
}
.footer-brand p{
  font-size:13.5px;color:var(--muted);margin:20px auto 0;
  max-width:520px;font-weight:300;line-height:1.75;
}
.footer-brand .brand{justify-content:center}

.socials{display:flex;gap:10px;margin-top:22px;--ic-rgb:255,43,31}
.footer-brand .socials{justify-content:center}
.socials a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  color:var(--ic-fg,rgb(var(--ic-rgb)));
  border:1px solid var(--ic-border,rgba(var(--ic-rgb),.38));
  background:var(--ic-bg,rgba(var(--ic-rgb),.12));
  transition:all .32s var(--ease);
}
.socials a svg{width:16px;height:16px}
/* hover = ทึบเต็มสีแบรนด์ ไอคอนเป็นสีขาว ให้ต่างจากสถานะปกติที่เป็นพื้นจางชัดเจน */
.socials a:hover{background:rgb(var(--ic-rgb));border-color:rgb(var(--ic-rgb));color:#fff;transform:translateY(-3px)}
/* TikTok ไม่ทึบขาว แต่พื้นดำสว่างขึ้นนิดเดียว คงเส้นตัดดำเข้มไว้ ให้ยังเป็นชิปโทนดำ */
.socials a.brand-tiktok:hover{background:#303036;border-color:#08080a}

.footer-bottom{
  border-top:1px solid var(--line);padding-block:22px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  font-size:12px;color:var(--muted-2);
}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:22px}
.footer-bottom a:hover{color:var(--red-hi)}

/* ---------- 20. Floating actions ---------- */
/* ขนาดปุ่มคุมด้วยตัวแปร เพื่อให้ media query จอเล็กปรับที่เดียวจบ */
.fab-stack{
  --fab-size:52px;
  --fab-mini:46px;
  position:fixed;z-index:800;display:grid;gap:10px;
  /* env(safe-area-inset-*) กันปุ่มไปโดนแถบ home indicator / ขอบจอโค้งบนมือถือ
     ถ้าเบราว์เซอร์ไม่รู้จัก env() ทั้งบรรทัดจะถูกทิ้ง จึงต้องมีบรรทัด fallback ก่อนเสมอ */
  right:16px;bottom:16px;
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
}
/* ปุ่มลอยใช้เฉพาะมือถือกับแท็บเล็ต บนเดสก์ท็อปมีเมนูกับ footer ให้กดอยู่แล้ว
   ปุ่มลอยเลยเป็นแค่สิ่งบังเนื้อหา

   เกณฑ์ตัดสินใช้ "มีเมาส์ไหม" ไม่ใช่ความกว้างจออย่างเดียว เพราะ iPad แนวนอน
   กว้าง 1080-1366px ซึ่งทับช่วงโน้ตบุ๊กพอดี ใช้ความกว้างล้วนจึงแยกสองอย่างนี้ไม่ออก
     hover:hover + pointer:fine = มีอุปกรณ์ชี้ที่แม่นยำและ hover ได้จริง = เมาส์
     iPad/มือถือรายงาน hover:none + pointer:coarse จึงไม่เข้าเงื่อนไข เห็นปุ่มทุกความกว้าง
   ยังคง min-width ไว้ด้วย เผื่อเดสก์ท็อปย่อหน้าต่างให้แคบ ก็ให้ปุ่มกลับมาเหมือนมือถือ

   ข้อยกเว้นที่ยอมรับ: iPad ที่ต่อ Magic Keyboard จะรายงานตัวเป็น pointer:fine
   แล้วถูกนับเป็นเดสก์ท็อป ซึ่งกรณีนั้นก็ใช้งานแบบเดสก์ท็อปอยู่แล้ว

   ซ่อนด้วย display:none ไม่ใช่ opacity เพื่อให้หลุดจากลำดับ tab ของคีย์บอร์ดไปด้วย
   ไม่งั้นคนใช้เดสก์ท็อปกด Tab แล้วโฟกัสจะไปโดนปุ่มที่มองไม่เห็น 6 ปุ่ม */
@media (min-width:1025px) and (hover:hover) and (pointer:fine){
  .fab-stack{display:none}
}
.fab{
  width:var(--fab-size);height:var(--fab-size);
  display:grid;place-items:center;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line-2);color:#fff;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.9);
  transition:all .32s var(--ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.fab svg{width:20px;height:20px}
.fab--top{opacity:0;visibility:hidden;transform:translateY(12px)}
.fab--top.show{opacity:1;visibility:visible;transform:none}

/* ปุ่มติดต่อรวม (speed dial) */
.fab-contact{position:relative}

.fab--contact{background:var(--red);border-color:var(--red);position:relative}
/* วงคลื่นกระเพื่อมรอบปุ่ม เรียกสายตาให้รู้ว่ากดได้
   ::after เป็น absolute จึงหลุดออกจาก grid ของ .fab ไม่ไปเบียดช่องไอคอน
   หยุดกระเพื่อมตอนเปิดเมนู เพราะผู้ใช้เจอปุ่มแล้ว ไม่ต้องเรียกสายตาซ้ำ */
.fab--contact::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:2px solid var(--red);pointer-events:none;
  animation:fabPulse 2.6s var(--ease-out) infinite;
}
.fab-contact.is-open .fab--contact::after{animation:none;opacity:0}
@keyframes fabPulse{
  0%{opacity:.65;transform:scale(1)}
  70%,100%{opacity:0;transform:scale(1.6)}
}
/* .fab เป็น grid อยู่แล้ว — ซ้อนไอคอนสองอันไว้ช่องเดียวกันเพื่อสลับกันแสดง */
.fab__ico{grid-area:1/1;transition:opacity .28s var(--ease),transform .28s var(--ease)}
.fab__ico--close{opacity:0;transform:rotate(-90deg) scale(.5)}
.fab-contact.is-open .fab__ico--open{opacity:0;transform:rotate(90deg) scale(.5)}
.fab-contact.is-open .fab__ico--close{opacity:1;transform:none}

/* เมนูวางลอยเหนือปุ่ม ไม่ดันปุ่มอื่นในสแตก
   left/right:0 + justify-items:center = ไอคอนย่อยอยู่กึ่งกลางแนวเดียวกับปุ่มหลัก
   (ปุ่มย่อยเล็กกว่าปุ่มหลัก ถ้าชิดขวาจะเยื้องกันเล็กน้อย) */
.fab-contact__menu{
  position:absolute;left:0;right:0;bottom:calc(100% + 12px);
  display:grid;gap:10px;justify-items:center;
}
/* ใช้ translate/scale (คุณสมบัติแยก) ไม่ใช่ transform
   เพื่อกันชนกับ transform ของ :hover (ยกขึ้น) และ :active (กดยุบ) */
.fab-contact__menu .fab{
  width:var(--fab-mini);height:var(--fab-mini);
  opacity:0;visibility:hidden;pointer-events:none;
  translate:0 14px;scale:.7;
  transition:opacity .3s var(--ease),translate .3s var(--ease),scale .3s var(--ease),
             visibility .3s,background .32s var(--ease),
             border-color .32s var(--ease),transform .32s var(--ease);
}
.fab-contact.is-open .fab-contact__menu .fab{
  opacity:1;visibility:visible;pointer-events:auto;translate:none;scale:1;
}
.fab-contact__menu .fab svg{width:19px;height:19px}

/* ไล่จังหวะจากล่างขึ้นบน (ตัวสุดท้ายในเมนู = ใกล้ปุ่มที่สุด จึงเด้งก่อน) */
.fab-contact.is-open .fab-contact__menu .fab:nth-child(4){transition-delay:.02s}
.fab-contact.is-open .fab-contact__menu .fab:nth-child(3){transition-delay:.07s}
.fab-contact.is-open .fab-contact__menu .fab:nth-child(2){transition-delay:.12s}
.fab-contact.is-open .fab-contact__menu .fab:nth-child(1){transition-delay:.17s}

/* สีแบรนด์ประจำแต่ละช่องทาง — เป็นสีตั้งต้น ไม่ต้องรอ hover */
.fab--tel{background:var(--red);border-color:var(--red);color:#fff}
.fab--line{background:#06c755;border-color:#06c755;color:#fff}
.fab--fb{background:#1877f2;border-color:#1877f2;color:#fff}
/* TikTok เป็นโลโก้พื้นดำ แต่หน้าเว็บพื้นดำอยู่แล้ว จึงต้องมีขอบชมพูช่วยให้เห็นขอบปุ่ม */
.fab--tiktok{background:#0b0b0d;border-color:#fe2c55;color:#fff}

/* จำกัด :hover ไว้เฉพาะเครื่องที่ชี้เมาส์ได้จริง
   บนมือถือ :hover จะค้างหลังแตะ ทำให้ปุ่มติดสีไว้จนกว่าจะแตะที่อื่น */
@media (hover:hover){
  .fab:hover{transform:translateY(-3px)}
  .fab--top:hover,.fab--contact:hover{background:var(--red-hi);border-color:var(--red-hi)}
  .fab--tel:hover{background:var(--red-hi);border-color:var(--red-hi)}
  .fab--line:hover{background:#00c95c;border-color:#00c95c}
  .fab--fb:hover{background:#3b8bff;border-color:#3b8bff}
  .fab--tiktok:hover{background:#000;border-color:#ff4d70;color:#ff4d70}
}
/* จอสัมผัสใช้ :active แทน ให้มีฟีดแบ็กตอนกดแต่ไม่ค้าง */
.fab:active{transform:scale(.93)}

/* มือถือ: ย่อลงเล็กน้อยไม่ให้กินพื้นที่จอ แต่ยังไม่ต่ำกว่า 44px ตามเกณฑ์ขนาดปุ่มแตะ */
@media (max-width:520px){
  .fab-stack{--fab-size:50px;--fab-mini:44px;right:12px;bottom:12px;gap:9px;
    right:calc(12px + env(safe-area-inset-right));
    bottom:calc(12px + env(safe-area-inset-bottom));
  }
  .fab svg{width:19px;height:19px}
  .fab-contact__menu{gap:9px;bottom:calc(100% + 10px)}
  .fab-contact__menu .fab svg{width:18px;height:18px}
}
/* จอเตี้ยมาก (มือถือแนวนอน) เมนู 4 รายการจะสูงเกินจอ — ย่ออีกขั้น */
@media (max-height:520px){
  .fab-stack{--fab-size:46px;--fab-mini:40px;gap:8px}
  .fab-contact__menu{gap:8px}
  .fab svg{width:18px;height:18px}
  .fab-contact__menu .fab svg{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){
  .fab-contact__menu .fab,.fab__ico{transition-duration:.01ms}
  .fab-contact.is-open .fab-contact__menu .fab{transition-delay:0s}
}

/* ---------- 21. Reveal animation ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.09s}
[data-reveal][data-d="2"]{transition-delay:.18s}
[data-reveal][data-d="3"]{transition-delay:.27s}
[data-reveal][data-d="4"]{transition-delay:.36s}
[data-reveal][data-d="5"]{transition-delay:.45s}

/* ---------- 22. Article / prose ---------- */
/* 760px กว้างเกินไปสำหรับอ่านต่อเนื่อง ลดเหลือ 660 ให้ตายืนทันไม่หลงบรรทัด */
.prose{max-width:660px}
.prose h2{font-size:clamp(21px,2.5vw,28px);font-weight:500;margin:46px 0 18px;letter-spacing:.03em;line-height:1.38}
/* h3 คือหัวข้อย่อย ใส่เส้นคั่นด้านบน + ระยะห่างเยอะ
   ไม่งั้นหัวข้อย่อยหลายก้อนจะไหลติดกันเป็นพืดเดียว แยกไม่ออกว่าจบก้อนไหน */
.prose h3{
  font-size:16.5px;font-weight:500;line-height:1.5;
  margin:44px 0 16px;padding-top:30px;border-top:1px solid var(--line);
}
.prose > h3:first-child{margin-top:0;padding-top:0;border-top:none}
/* line-height 1.75 ที่สืบจาก body แน่นเกินไปสำหรับไทย เพราะมีสระบน-ล่างและวรรณยุกต์ซ้อน */
.prose p{font-size:15px;color:var(--text);font-weight:300;line-height:1.95;margin-bottom:18px}
.prose ul{display:grid;gap:14px;margin:20px 0 28px}
.prose ul li{display:flex;gap:14px;font-size:14.5px;color:var(--text);font-weight:300;line-height:1.85}
.prose ul li::before{content:"";width:6px;height:6px;flex:none;margin-top:11px;background:var(--red);transform:rotate(45deg)}

/* ---- .def-list : รายการแบบ "หัวข้อ — คำอธิบาย" ที่ขีดคั่นตรงกันทุกบรรทัด ----
   แบบ inline ปกติ ขีดคั่นจะเยื้องไปตามความยาวหัวข้อของแต่ละบรรทัด สายตาไล่ไม่ติด
   จึงย้ายรางคอลัมน์ขึ้นไปไว้ที่ <ul> — max-content วัดจากหัวข้อที่ยาวที่สุดในก้อน
   แล้วให้ <li> ยืมรางชุดเดียวกันผ่าน subgrid ทุกใบจึงได้ความกว้างเท่ากัน
   ใช้ subgrid ไม่ใช่ display:contents เพราะ display:contents บน <li>
   ทำให้ screen reader บางตัวเลิกนับก้อนนี้เป็นรายการ เสียความหมายของ <ul> ไปเปล่า ๆ
   ขีดคั่นเป็น ::before ของคอลัมน์คำอธิบาย ไม่ใช่ตัวอักษรใน HTML — วางลอยด้วย absolute
   เพื่อให้บรรทัดที่ 2 ของคำอธิบายย่อหน้าตรงกับบรรทัดแรก ไม่ไหลไปใต้ขีด */
.prose .def-list{grid-template-columns:auto max-content 1fr}
.prose .def-list li{grid-column:1/-1;display:grid;grid-template-columns:subgrid}
.prose .def-list li > span{position:relative;padding-left:24px}
.prose .def-list li > span::before{content:"—";position:absolute;left:0;color:var(--muted-2)}
.prose > *:first-child{margin-top:0}
.prose > *:last-child{margin-bottom:0}

.pricing-table{border:1px solid var(--line);background:var(--surface)}
.pricing-table thead th{
  text-align:left;padding:16px 20px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);font-weight:400;border-bottom:1px solid var(--line);background:#0d0d10;
}
.pricing-table td{padding:16px 20px;border-bottom:1px solid var(--line);font-size:14px;font-weight:300}
.pricing-table tbody tr:last-child td{border-bottom:none}
.pricing-table tbody tr{transition:background .3s}
.pricing-table tbody tr:hover{background:var(--surface-2)}
.pricing-table td:first-child{color:#fff;font-weight:400}
.pricing-table td.price{color:var(--red-hi);font-weight:500;white-space:nowrap}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 22b. Art backgrounds (ต้องอยู่หลัง .tile-art / .card-media) ---------- */
.art-1{background:radial-gradient(85% 75% at 50% 32%,#2f2f38 0%,#101014 62%,#08080a 100%)}
.art-2{background:radial-gradient(85% 75% at 50% 32%,#33232a 0%,#131013 62%,#08080a 100%)}
.art-3{background:radial-gradient(85% 75% at 50% 32%,#26303a 0%,#0e1114 62%,#08080a 100%)}
.art-4{background:radial-gradient(85% 75% at 50% 32%,#3a2422 0%,#150e0e 62%,#08080a 100%)}
.art-5{background:radial-gradient(85% 75% at 50% 32%,#2a2f38 0%,#0f1114 62%,#08080a 100%)}

/* ---------- 23. Responsive ---------- */
@media (max-width:1100px){
  .review-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  /* คอลัมน์เดียวแล้ว เส้นคั่นแนวตั้งกับ sticky ใช้ไม่ได้ ต้องล้างทิ้ง
     ไม่งั้นจะเหลือเส้นลอยชิดซ้ายและหัวเรื่องค้างทับเนื้อหา */
  .split-aside{position:static;top:auto}
  .split > .prose{padding-left:0;border-left:none}
}
@media (max-width:980px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  :root{--header-h:68px}
  /* ล็อกความสูง header บนมือถือ เพื่อให้ตำแหน่งเมนู (top:100%) ตรงเสมอ */
  .site-header,.site-header.is-stuck{height:var(--header-h)}
  /* ใช้ absolute ไม่ใช่ fixed — .site-header เป็น position:fixed อยู่แล้ว
     จึงเป็น containing block ให้ลูกที่ absolute ทำให้ top:100% = ใต้ header พอดี
     (ถ้าใช้ fixed จะไปอ้างอิง viewport แล้วคำนวณตำแหน่งยาก) */
  .nav{
    position:absolute;top:100%;left:0;right:0;
    height:calc(100dvh - var(--header-h));
    /* ทึบสนิท — ห้ามใช้ alpha หรือ backdrop-filter ตรงนี้
       เพราะ header แม่มี backdrop-filter อยู่แล้ว ซ้อนกันแล้วเนื้อหาหน้าจะทะลุขึ้นมา */
    background:var(--black);
    padding:26px var(--gut) 60px;overflow-y:auto;margin:0;
    transform:translateX(100%);transition:transform .45s var(--ease-out);
    border-top:1px solid var(--line);
  }
  .nav.is-open{transform:none}
  .nav{flex-direction:column;align-items:stretch;gap:0}
  .nav > .nav__link,.nav__item--sub{border-bottom:1px solid var(--line)}
  /* แถวบน = ลิงก์ "บริการ" + ปุ่มลูกศร วางเคียงกัน
     แถวล่าง = เมนูย่อย ตกลงมาเต็มความกว้างด้วย flex-basis:100%
     ใช้ wrap แทนการทำ <div> ครอบเพิ่ม จะได้ไม่ต้องแก้โครงสร้างฝั่งเดสก์ท็อป */
  .nav__item--sub{flex-direction:row;flex-wrap:wrap;align-items:center}
  .nav__item--sub > .nav__link{flex:1}
  .nav__item--sub > .nav__sub{flex-basis:100%}
  /* พื้นที่กดของปุ่มลูกศรต้องใหญ่พอสำหรับนิ้ว (สูงราว 47px) และเว้นจากตัวอักษรพอสมควร
     ไม่งั้นคนตั้งใจกดลูกศรแล้วไปโดนลิงก์จนเด้งออกจากหน้า */
  .nav__toggle{padding:18px 6px 18px 20px;margin-left:0}
  .nav__link{padding:18px 4px;font-size:16px;justify-content:space-between;letter-spacing:.06em}
  .nav__link::after{display:none}

  /* ---- ช่องทางติดต่อท้ายเมนูมือถือ ----
     margin-top:auto ดันลงไปชิดก้นลิ้นชักเสมอ ไม่ลอยตามท้ายรายการเมนู
     (ลิ้นชักสูงเต็มจอ ถ้าไม่ดัน จะมีที่ว่างดำ ๆ ค้างอยู่ข้างใต้เป็นพืด) */
  .nav__contact{display:block;margin-top:auto;padding-top:30px}

  /* ไอคอนโทรใช้สีแดงตั้งต้นของ .socials (--ic-rgb) เหมือนในฟุตเตอร์
     ไม่ต้องมีคลาสสีของตัวเอง — ช่องทางที่มีสีประจำแบรนด์เท่านั้นที่ต้องระบุ */
  .nav__contact .socials{justify-content:center;margin-top:0;gap:12px}
  .nav__contact .socials a{width:44px;height:44px}   /* ขนาดขั้นต่ำที่นิ้วกดไม่พลาด */
  .nav__contact .socials a svg{width:18px;height:18px}

  .nav__hours{
    margin-top:16px;text-align:center;font-size:11.5px;
    color:var(--muted-2);letter-spacing:.06em;
  }
  /* ⚠ ต้องล้างกฎ hover/focus ของเดสก์ท็อป (บรรทัด ~270) ที่นี่ด้วย
     กฎนั้นสั่ง transform:translate(-50%,0) ไว้จัดกล่อง dropdown ให้อยู่กึ่งกลาง
     ซึ่งใช้ได้เฉพาะตอนที่กล่องเป็น position:absolute + left:50% แบบเดสก์ท็อป

     บนมือถือกล่องเป็น position:static แล้ว ถ้า transform ตัวนั้นยังทำงานอยู่
     เมนูย่อยจะถูกดันไปทางซ้ายครึ่งหนึ่งของความกว้างตัวเองจนหลุดออกนอกจอ
     และเกิดขึ้นทันทีที่ "แตะ" หัวเมนู เพราะลิงก์ได้โฟกัส → :focus-within เป็นจริง

     เขียน transform:none ใน .nav__sub ข้างล่างอย่างเดียวไม่พอ เพราะแพ้ความจำเพาะ
     (.nav__item--sub:focus-within > .nav__sub = 3 คลาส ส่วน .nav__sub = 1 คลาส)
     จึงต้องเขียน selector ให้เท่ากันเป๊ะ แล้วอาศัยว่ากฎนี้อยู่ทีหลังในไฟล์ */
  .nav__item--sub:hover > .nav__sub,
  .nav__item--sub:focus-within > .nav__sub,
  .nav__item--sub.open > .nav__sub{transform:none}

  .nav__sub{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;background:transparent;border:none;border-left:1px solid var(--line);
    box-shadow:none;padding:0 0 0 16px;margin:0 0 14px;
    max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out),margin .3s;
  }
  .nav__item--sub.open .nav__sub{max-height:420px}
  .nav__item--sub.open .nav__caret{transform:rotate(180deg)}
  .nav__sub a{padding:11px 12px;font-size:14px}
  .burger{display:flex}
  .hero-vert{display:none}
  .spec-wrap{grid-template-columns:1fr}
  .spec-right{min-height:300px}
  .contact-grid{grid-template-columns:1fr}
  body.nav-lock{overflow:hidden}
}
@media (max-width:760px){
  /* คอลัมน์เดียว — 2 คอลัมน์ที่จอต่ำกว่านี้เหลือกว้างช่องละ ~170px ข้อความอัดกันเกินไป */
  .svc-grid{grid-template-columns:1fr}
  .check-list--2col{grid-template-columns:1fr}
  .brands{justify-content:flex-start}
  /* โลโก้ 2 ใบ ใบละไม่เกิน 180px + gap 40px = กว้างกว่าเนื้อในของจอมือถือ เดิมจึงตกไปคนละบรรทัด
     บังคับ nowrap แล้วปล่อยให้ย่อลงมาแทน: li ต้องเปลี่ยนจาก flex:none เป็นย่อได้ พร้อม min-width:0
     ปลดขนาดต่ำสุดอัตโนมัติของ flex item ส่วน min() ทำให้รูปยังไม่โตเกิน 180px บนจอกว้าง
     ปรับมาสำหรับ 2 ใบ ถ้าเพิ่มโลโก้ใบที่ 3 ต้องมาทบทวนใหม่ */
  /* หัวข้อที่ยาวสุดกิน ~145px จากเนื้อในจอ ~324px พอหักหัวข้อกับขีดคั่นแล้ว
     เหลือให้คำอธิบายราว 120px คือแตกบรรทัดถี่จนอ่านไม่รู้เรื่อง
     จอแคบจึงเลิกจัดคอลัมน์ ตัดคำอธิบายลงบรรทัดใหม่ใต้หัวข้อแทน
     แล้วปิดขีดคั่นทิ้งด้วย เพราะการขึ้นบรรทัดทำหน้าที่แบ่งให้อยู่แล้ว */
  .prose .def-list{grid-template-columns:auto 1fr}
  .prose .def-list li{row-gap:2px}
  .prose .def-list li > strong,
  .prose .def-list li > span{grid-column:2}
  .prose .def-list li > span{padding-left:0}
  .prose .def-list li > span::before{content:none}
  .logo-row{flex-wrap:nowrap;gap:clamp(16px,5vw,40px)}
  .logo-row li{flex:0 1 auto;min-width:0}
  .logo-row img{max-width:min(180px,100%)}
  /* เหลือคอลัมน์เดียว แต่ยังคง grid-auto-rows:1fr จากค่าตั้งต้นไว้ ทุกใบจึงสูงเท่ากัน
     ที่ว่างส่วนเกินของใบสั้นไปกองอยู่เหนือบรรทัดเครดิต เพราะ .rcard__by มี margin-top:auto
     ลิงก์ "อ่านรายละเอียดเพิ่มเติม" จึงยังชิดก้นการ์ดทุกใบ ไม่ลอยค้างกลางกรอบ */
  .review-grid{grid-template-columns:1fr}
  .contact-grid--solo .info-list{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr;gap:0}
  /* .hero เป็น flex row — บนมือถือต้องสลับเป็นคอลัมน์ ไม่งั้นรูปรถจะไปอยู่ข้างข้อความ */
  .hero{
    min-height:auto;flex-direction:column;align-items:stretch;
    padding-top:calc(var(--header-h) + 70px);padding-bottom:80px;
  }
  .hero-inner{order:1}
  /* ย่อขนาดข้อความใต้หัวเรื่องลงเล็กน้อยบนมือถือ เพื่อไม่ให้คำท้ายย่อหน้าตกไปอยู่บรรทัดเดียวโดด ๆ
     text-wrap:balance ให้เบราว์เซอร์เกลี่ยความยาวแต่ละบรรทัดให้ใกล้เคียงกันเอง
     ซึ่งกันคำโดดได้ทุกความกว้างจอ ไม่ใช่แค่รุ่นที่นั่งทดสอบอยู่
     (เบราว์เซอร์เก่าที่ไม่รู้จักจะข้ามบรรทัดนี้ไปเฉย ๆ ไม่พัง) */
  .hero-sub{font-size:15.5px;line-height:1.8;text-wrap:balance}
  .hero-car{
    order:2;position:relative;right:auto;bottom:auto;
    width:116%;max-width:none;margin:30px 0 -10px -8%;opacity:.85;
  }
  /* บนมือถือข้อความกินเต็มความกว้าง ฉากบังแนวนอนแบบจอกว้างจึงใช้ไม่ได้
     เปลี่ยนเป็นไล่จากบนลงล่างให้เข้มสม่ำเสมอทั้งแถบ */
  .hero-media__scrim{
    background:linear-gradient(180deg,rgba(5,5,6,.9) 0%,rgba(5,5,6,.78) 42%,rgba(5,5,6,.94) 100%);
  }
  /* 21:9 บนจอกว้าง 390px จะเหลือสูงแค่ ~167px ป้ายกำกับกินไปเกือบครึ่ง
     ขยับเป็น 16:9 ให้รูปมีที่หายใจ (object-fit:cover ครอปซ้ายขวานิดหน่อย) */
  .tile{aspect-ratio:16/9}
  .tile-label{padding:15px 14px;gap:9px}
  .tile-label h3{font-size:13.5px}
  .tile-label .en{font-size:8.5px;letter-spacing:.14em;margin-top:2px}
  .tick{width:2px;height:30px}
  .tile-art svg,.tile-art img{width:38%}
  .tile-art--photo img{width:100%}
  .trust-item{border-right:none;border-bottom:1px solid rgba(0,0,0,.09)}
  /* .band-item ไม่ต้องล้างเส้นที่นี่แล้ว — แต่ก่อนกริดยุบเหลือคอลัมน์เดียวบนมือถือ
     ตอนนี้เป็น 2x2 ทุกขนาดจอ กฎ nth-child ที่ base จัดการเส้นขอบให้ถูกอยู่แล้ว
     แต่ช่องเหลือกว้างแค่ ~195px ต้องย่อไอคอนกับชื่อบริการลงให้พอดี */
  .band-item{padding:24px 14px 26px}
  .band-item .art{height:88px;margin-bottom:16px}
  /* ต้องกำหนดเป็น px ไม่ใช่ max-height:100% ของกฎ base — เปอร์เซ็นต์ไม่คุมความสูงรูป
     ในบริบทนี้ รูปเลยล้นกล่อง 88px ออกมาเป็น 118px แล้วไปทับชื่อบริการด้านล่าง
     max-width:100% กันรูปดันคอลัมน์กว้างเกินช่องด้วย */
  .band-item .art img,.band-item .art svg{max-height:88px;max-width:100%}
  .band-item h3{font-size:12px;letter-spacing:.06em;line-height:1.5}
  .band-item .idx{font-size:30px;top:12px;right:12px}
  .footer-bottom{flex-direction:column;text-align:center}
  .brand__logo{--lw:150px}
}
@media (max-width:430px){
  /* จอเล็กสุด: ย่อปุ่ม "จองคิว" ไม่ให้ดัน burger ตกขอบ */
  .header__cta{gap:8px}
  .header__cta .btn--primary{--bh:38px;padding-inline:14px;font-size:11px;letter-spacing:.08em}
  .header__cta .btn--primary .btn-arrow{display:none}
}
@media (max-width:480px){
  .btn{--bh:48px;padding-inline:22px;font-size:11.5px}
  .hero-stats{gap:22px}
  .hero-stat{min-width:calc(50% - 11px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
}

/* ---------- 24. Print ---------- */
@media print{
  .site-header,.fab-stack,.site-footer{display:none}
  body{background:#fff;color:#000}
}