:root{--yellow:#EBC301;--gold-text:#7A5C00;--ink:#111;--muted:#666;--line:#deded8;--soft:#f7f7f4;--max:1180px}
*{box-sizing:border-box}body{margin:0;font-family:"Kanit",-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);line-height:1.58;background:#fff}a{text-decoration:none;color:inherit}.wrap{width:min(var(--max),calc(100% - 44px));margin:auto}.kicker,.topbar,.btn,.crumb,.send-message-button,.challenge-question,.logo,.header-btn{font-family:"Montserrat","Kanit",-apple-system,"Segoe UI",Arial,sans-serif}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #0073aa;outline-offset:2px}
.message-form input:focus,.message-form select:focus,.message-form textarea:focus{border-color:#0073aa;outline-offset:0}

/* shared chrome — ตรงกับหน้าอื่นในธีม */
.topbar{background:#111;color:#ddd;font-size:12px}.topbar .wrap{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:14px}
header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-size:23px;font-weight:800;letter-spacing:.09em;white-space:nowrap}.logo b{color:#b28d00}
.navlinks{display:flex;gap:21px;font-size:14px;font-weight:600;align-items:center}.navlinks a{padding:6px 0}.navlinks a:hover{color:#9f7a00}
.header-btn{padding:12px 16px;background:#111;color:#fff;font-weight:700;font-size:13px;white-space:nowrap}.header-btn:hover{background:#333}

/* hero */
.contact-hero{background:#181818;color:#fff;padding:58px 0}.contact-hero .kicker{color:var(--yellow)}
.kicker{font-size:12px;letter-spacing:.16em;font-weight:800;color:var(--gold-text);text-transform:uppercase}
.contact-hero h1{font-size:48px;line-height:1.1;margin:8px 0 10px}.contact-hero p{max-width:760px;color:#ddd;margin:0}
.crumb{font-size:12px;color:#6f6f6f;padding:15px 0}.crumb a{color:#555;display:inline-block;padding:5px 0}.crumb a:hover{color:var(--gold-text)}

/* ช่องทางด่วน */
.quick-contact{padding:6px 0 8px}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.quick{display:flex;align-items:center;gap:13px;border:1px solid var(--line);padding:16px 18px;background:#fff;min-height:64px;transition:border-color 180ms ease,transform 180ms var(--ease-out)}
.quick:hover{border-color:#b28d00;transform:translateY(-2px)}
.quick .qi{width:38px;height:38px;flex:none;display:grid;place-items:center;font-family:"Montserrat",Arial,sans-serif;font-weight:800;font-size:13px;color:#111;background:var(--yellow)}
/* สีแบรนด์ LINE/Facebook อ่อนเกินกว่าจะใช้ตัวอักษรขาว จึงใช้ตัวเข้มบนเขียว และเข้มสีน้ำเงินลงให้ตัวขาวผ่าน 4.5:1 */
.quick .qi.line{background:#06C755;color:#0A2E17}.quick .qi.fb{background:#0B5ED7;color:#fff}
.quick b{display:block;font-size:15px;font-weight:700;line-height:1.3}
.quick span{display:block;font-size:12.5px;color:var(--muted);line-height:1.45}

/* layout ฟอร์ม + ข้อมูลบริษัท */
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;padding:26px 0 60px;align-items:start}
.message-card{border:1px solid var(--line);background:#fff;padding:24px;box-shadow:0 16px 38px rgba(0,0,0,.05)}
.card-head{margin:0 0 18px}.card-head h2{font-size:27px;margin:6px 0 6px;line-height:1.25}
.card-head p{margin:0;color:var(--muted);font-size:14.5px}
.message-form{display:grid;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.message-form label{display:grid;gap:7px}
.message-form label span:not(.challenge-question){font-weight:700;color:#333;font-size:14.5px}
.message-form label span .opt{font-weight:400;color:#999;font-size:12.5px}
.message-form input,.message-form textarea,.message-form select{width:100%;border:1px solid #cfcfca;background:#fff;padding:14px 16px;font:inherit;font-size:16.5px;color:#111;border-radius:0}
.message-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#666 50%),linear-gradient(135deg,#666 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.message-form textarea{resize:vertical;min-height:140px}
.message-form input::placeholder,.message-form textarea::placeholder{color:#9b9b9b}
.challenge-row{display:grid;grid-template-columns:1fr 52px;gap:0;align-items:end}
.challenge-row label input{border-right:0}
.challenge-question{font-size:18px;font-weight:800;color:#111}
.challenge-refresh{height:52px;border:1px solid #cfcfca;background:#e4e4e0;color:#111;font-size:22px;font-weight:800;cursor:pointer}
.challenge-refresh:hover{background:var(--yellow)}
.message-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.message-status{color:#8a6b00;font-weight:700;font-size:14.5px}
.send-message-button{border:0;background:#0073aa;color:#fff;font-size:15px;font-weight:800;padding:14px 22px;cursor:pointer;min-height:48px}
.send-message-button:hover{background:#005f8d}
/* ปุ่มตอนยังกดไม่ได้ ต้องยังอ่านออกว่าเขียนว่าอะไร ไม่ใช่เทาจางจนหาย */
.send-message-button:disabled{background:#ddddd8;color:#4f4f49;cursor:not-allowed}
.form-note{font-size:12.5px;color:#6a6a6a;margin:0}.form-note a{color:#0073aa;font-weight:600}.form-note a:hover{text-decoration:underline}

/* คอลัมน์ขวา */
.contact-side{background:#111;color:#fff;padding:28px;align-self:start}
.contact-side .kicker{color:var(--yellow)}
.contact-side h2{font-size:28px;margin:8px 0 10px;line-height:1.25}
.contact-side p{color:#ddd;margin:0 0 18px;font-size:14.5px}
.side-info{border-top:1px solid #333;padding:14px 0}
.side-info b{display:block;color:var(--yellow);font-family:"Montserrat",Arial,sans-serif;font-size:11.5px;letter-spacing:.08em;margin-bottom:2px}
.side-info span,.side-info a{color:#f1f1f1;display:block}
.side-info a:hover{color:var(--yellow)}
.side-hours{border-top:1px solid #333;padding:14px 0 0;font-size:13.5px;color:#bbb}

/* ติดต่อตามเรื่อง */
.dept{background:var(--soft);padding:52px 0}
.dept .section-title{font-size:30px;margin:8px 0 6px;line-height:1.25}
.dept .lead{color:var(--muted);margin:0 0 24px;max-width:70ch}
.dept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.dept-card{background:#fff;border:1px solid var(--line);padding:20px}
.dept-card h3{font-size:17px;margin:0 0 8px;line-height:1.35}
.dept-card p{margin:0 0 6px;font-size:14px;color:#444}
.dept-card a{color:#0073aa;font-weight:600}.dept-card a:hover{text-decoration:underline}

/* ศูนย์บริการ */
.branches{padding:52px 0 60px}
.branches .section-title{font-size:30px;margin:8px 0 6px;line-height:1.25}
.branches .lead{color:var(--muted);margin:0 0 24px;max-width:70ch}
.branch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.branch-card{border:1px solid var(--line);padding:18px;background:#fff}
.branch-card .region{font-family:"Montserrat",Arial,sans-serif;font-size:11px;letter-spacing:.1em;font-weight:800;color:var(--gold-text);text-transform:uppercase}
.branch-card h3{font-size:19px;margin:5px 0 10px}
.branch-card p{margin:0 0 4px;font-size:14px;color:#444}
.branch-card a{color:#0073aa}.branch-card a:hover{text-decoration:underline}

/* แถบปิดท้าย — ตัวอักษรดำบนเหลือง คอนทราสต์ 12:1 */
.cta{background:var(--yellow);color:#111;padding:44px 0}
.cta-grid{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta h2{font-size:29px;margin:0 0 6px;line-height:1.25;max-width:22ch}
.cta p{margin:0;color:#3a3100}
.cta .btn{background:#111;color:#fff;padding:15px 24px;font-weight:800;font-size:14px;white-space:nowrap;min-height:48px;display:inline-flex;align-items:center}
.cta .btn:hover{background:#333}

/* modal */
.message-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.58);display:flex;align-items:center;justify-content:center;padding:22px}
.message-modal[hidden]{display:none}
.message-modal-box{width:min(520px,100%);background:#fff;border-top:6px solid var(--yellow);padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.28);text-align:center}
.message-modal-box h2{font-size:29px;margin:0 0 10px}
.message-modal-box p{color:#444;margin:0 0 22px}
.modal-button{display:inline-flex;align-items:center;background:#111;color:#fff;padding:13px 20px;font-weight:800;min-height:48px}
.modal-button:hover{background:#333}

footer{background:#151515;color:#bbb;padding:35px 0 18px}
.bottom{border-top:1px solid #383838;margin-top:18px;padding-top:12px;font-size:12px;color:#888;display:flex;justify-content:space-between;gap:12px}

@media(max-width:980px){
  /* เมนูยังอยู่บนมือถือ เลื่อนแนวนอนได้ ไม่ซ่อนทิ้งเหมือนหน้าอื่น */
  .nav{height:auto;padding:14px 0;flex-wrap:wrap;row-gap:10px}
  .navlinks{order:3;width:100%;gap:18px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .navlinks a{white-space:nowrap}
  .contact-layout{grid-template-columns:1fr}
  .contact-side{order:-1}
  .contact-hero h1{font-size:38px}
}
@media(max-width:620px){
  .wrap{width:min(var(--max),calc(100% - 28px))}
  /* หน้าจอแคบ ข้อความสองก้อนต้องขึ้นบรรทัดแยกกัน ไม่ใช่ต่อกันจนอ่านไม่ออก */
  .topbar .wrap{display:block;padding:8px 0}
  .topbar .wrap span{display:block}
  .message-card{padding:16px}
  .form-row{grid-template-columns:1fr}
  .message-actions{display:grid;justify-content:stretch}
  .send-message-button{width:100%}
  .cta .btn{width:100%;justify-content:center}
  .bottom{display:block}
}

/* --- ปรับตามหลักการออกแบบของ Apple (v14.8.24) --- */
/* Familiarity: โลโก้และเมนูหน้าตาเดียวกันทุกหน้า ต้องอยู่ท้ายไฟล์เพื่อให้ชนะกฎ .logo เดิม */
.logo{display:inline-flex!important;align-items:center;line-height:0;flex:none;font-size:0}
.logo img{height:52px;width:auto;max-width:100%;display:block}
.navlinks a[aria-current="page"]{color:#7A5C00;position:relative}
.navlinks a[aria-current="page"]:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#EBC301}
/* Craft: เคลื่อนไหวต้องนุ่มและสม่ำเสมอ แต่ Flexibility บอกว่าต้องเคารพคนที่ปิดแอนิเมชัน */
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media(max-width:980px){.logo img{height:44px}}

/* --- เมนูมือถือ: ปุ่มเปิด/ปิดจริง ใช้แบบเดียวกับหน้าแรก (v14.8.26) --- */
.nav-actions{display:flex;align-items:center;gap:10px}
.menu-toggle{display:none;align-items:center;justify-content:center;width:48px;height:48px;border:0;background:#111;color:#fff;font-size:22px;line-height:1;cursor:pointer;flex:none}
.menu-toggle:hover{background:#333}
header{position:sticky;top:0;z-index:30}
body.kht-menu-open{overflow:hidden}
@media(max-width:980px){
  .nav{position:relative}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;padding:8px 24px 14px;border-top:1px solid var(--line);box-shadow:0 14px 26px rgba(0,0,0,.12);flex-direction:column;align-items:stretch;gap:0;z-index:20}.navlinks.open{display:flex}.navlinks a{padding:14px 0;min-height:48px;display:flex;align-items:center;border-bottom:1px solid #f0f0ec;font-size:16px}.navlinks a:last-child{border-bottom:0}.navlinks a[aria-current="page"]:after{display:none}.menu-toggle{display:inline-flex}
}
@media(max-width:620px){.header-btn{padding:12px 14px;font-size:12.5px}}

@media(max-width:620px){
  /* แถบบนสุดมีข้อความสองก้อน ถ้าไม่แยกบรรทัดจะอ่านเป็น "SolutionsTel." ติดกัน */
  .topbar .wrap{display:block;padding:8px 0}
  .topbar .wrap span,.topbar .wrap>div{display:block}
  .topbar .wrap .topbar-right{display:block}
}

/* --- ข้อความยืนยันหลังส่งฟอร์ม (v14.8.28) --- */
.message-modal-box{text-align:left}
.message-modal-box h2{font-size:26px;margin:0 0 12px}
.modal-lead{color:#333;font-size:15.5px;margin:0 0 14px;line-height:1.65}
.modal-lead strong{color:#111}
.modal-note{color:#5a5a5a;font-size:13.5px;line-height:1.7;margin:0 0 22px;padding-top:14px;border-top:1px solid var(--line)}
.modal-note a{color:#0073aa;font-weight:700}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.modal-actions .modal-button{flex:1;justify-content:center;min-width:140px}
.modal-button.ghost{background:transparent;color:#111;border:2px solid #111}
.modal-button.ghost:hover{background:#111;color:#fff}
@media(max-width:620px){.modal-actions{flex-direction:column}.modal-actions .modal-button{width:100%}}

/* --- ความประณีตของ interaction (v14.8.31) ---
   1) เส้นโค้ง easing ของ CSS มาตรฐานอ่อนเกินไป ใช้ตัวที่มีน้ำหนักกว่าแทน
   2) ปุ่มต้องยุบลงเล็กน้อยตอนกด เพื่อให้รู้สึกว่าเว็บรับรู้การกดจริง ๆ
      ทำเฉพาะ :active ซึ่งเกิดตอนกดค้างเท่านั้น ไม่กระทบการใช้งานปกติ */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1)}
.btn,.header-btn,.menu-toggle,.send-message-button,.modal-button,.pdf-btn,.parts-list-btn,
.challenge-refresh,.cta .btn,.nf-actions .btn,.search-box button,.nf-search button,
.add-job-button,.apply-btn,.sync-pdf-btn{transition:transform 160ms var(--ease-out),background-color 160ms ease,color 160ms ease}
.btn:active,.header-btn:active,.menu-toggle:active,.send-message-button:active:not(:disabled),
.modal-button:active,.pdf-btn:active,.parts-list-btn:active,.challenge-refresh:active,
.cta .btn:active,.nf-actions .btn:active,.search-box button:active,.nf-search button:active,
.add-job-button:active,.apply-btn:active,.sync-pdf-btn:active{transform:scale(0.97)}
/* การ์ดที่กดได้ทั้งใบก็ควรตอบสนองตอนกดเหมือนกัน */
.product-card:active,.news-card:active,.project-card:active,.cat-card:active,
.part-card:active,.path:active,.quick:active,.branch-card-link:active{transform:scale(0.99)}

/* --- สเกลตัวอักษรกลางของทั้งเว็บ (kht-type-scale v14.8.34) ---
   เดิมแต่ละหน้าตั้งขนาดกันเอง hero มี 9 ขนาด section มี 15 card มี 11
   รวมเป็นสามระดับ: hero 48 / section 36 / card 20
   หน้าแรกยังใช้ hero 60px เป็นข้อยกเว้นที่ตั้งใจ เพราะเป็นประโยคเปิดของเว็บ */
.contact-hero h1{font-size:48px;line-height:1.15}
.card-head h2,.contact-side h2,.dept .section-title,.branches .section-title,.cta h2{font-size:36px;line-height:1.25}
.dept-card h3,.branch-card h3{font-size:20px;line-height:1.4}
@media(max-width:820px){.contact-hero h1{font-size:34px}.card-head h2,.contact-side h2,.dept .section-title,.branches .section-title,.cta h2{font-size:28px}.dept-card h3,.branch-card h3{font-size:18px}}
.kicker{font-size:12px;font-weight:800}


/* --- ขนาดปุ่มมาตรฐาน (kht-btn-size v14.8.38) ---
   คลาส .btn ตัวเดียวกันเคยเรนเดอร์สูง 47 50 52 56px แล้วแต่หน้า
   เพราะแต่ละไฟล์ตั้ง padding เองคนละค่าและมีแค่ 4 ไฟล์ที่ตั้ง min-height
   บล็อกนี้กำหนดความสูงอย่างเดียว ไม่แตะสี ไม่แตะ padding ซ้ายขวา
   ความกว้างของปุ่มจึงไม่เปลี่ยน ข้อความไม่ตกบรรทัด
   ระบุ .nf-actions .btn กับ .cta .btn ไว้ด้วย เพราะสองตัวนั้นจำเพาะ (0,2,0)
   ถ้าเขียนแค่ .btn เปล่าจะแพ้และหน้า 404 กับแถบ CTA จะไม่โดน */
.btn,.nf-actions .btn,.cta .btn{
  min-height:48px;
  padding-top:13px;
  padding-bottom:13px;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* --- ข้อความบอกข้อผิดพลาดในฟอร์ม (kht-field-error v14.8.42) ---
   เดิมปุ่มส่งถูก disabled จนกว่าจะกรอกครบ แต่ไม่มีอะไรบอกว่าขาดอะไร
   ลูกค้าเห็นแค่ปุ่มกดไม่ได้แล้วปิดหน้าไป ซึ่งเป็นหน้าที่เงินเข้าบริษัทโดยตรง */
.kht-field-error{display:none;margin-top:5px;color:#B3261E;font-size:13px;line-height:1.5}
.kht-field-error.is-shown{display:block}
.message-form [aria-invalid="true"],.contact-form [aria-invalid="true"]{border-color:#B3261E;outline:0;box-shadow:0 0 0 2px rgba(179,38,30,.14)}
.message-status[role="alert"]{color:#B3261E;font-weight:600}

/* --- สัมผัสตอนเอาเมาส์วางให้นุ่มขึ้น (kht-soft-hover v14.9.1) ---
   ตรวจพบว่า 34 จาก 56 selector ที่มี :hover ไม่มี transition เลย
   สีจึงกระโดดในเฟรมเดียว ซึ่งคือความ "แข็ง" ที่เจ้าของเว็บรู้สึก

   หลักที่ใช้
   1) เข้าเร็ว ออกช้า  เข้า 140ms ให้รู้สึกตอบสนองทันที
      ออก 320ms ให้ทิ้งหางนุ่ม ไม่ตัดจบห้วน ความไม่เท่ากันนี้คือหัวใจ
   2) ระบุ property ที่จะเปลี่ยนให้ชัด ไม่ใช้ transition:all
      เพราะ all จะไปจับ property ที่ทำให้ต้องคำนวณเลย์เอาต์ใหม่ด้วย
   3) ไม่แตะ property ที่ทำให้เลย์เอาต์ขยับ เช่น font-weight
   4) ใช้ชั้นโปร่งแสงแทนการสลับสีทึบไปอีกสีทึบ
   5) เคารพการตั้งค่าลดการเคลื่อนไหวและลดความโปร่งแสงของเครื่องผู้ใช้ */
:root{
  --kht-in:140ms;
  --kht-out:320ms;
  --kht-ease-soft:cubic-bezier(0.22,0.61,0.36,1);
}

/* ชั้นที่ 1 ครอบทุกลิงก์และปุ่ม จับ 34 จุดที่ไม่เคยมี transition */
a,button{
  transition-property:background-color,color,border-color,box-shadow,opacity,transform;
  transition-duration:var(--kht-out);
  transition-timing-function:var(--kht-ease-soft);
}
a:hover,button:hover{transition-duration:var(--kht-in)}

/* ชั้นที่ 2 ตัวที่มี transition อยู่แล้ว ต้องระบุชื่อให้ชนะกฎเดิม
   ไม่งั้นจะยังเป็นจังหวะเท่ากันทั้งเข้าและออก */
.btn,.header-btn,.menu-toggle,.pdf-btn,.source-btn,.parts-list-btn,.modal-button,
.send-message-button,.challenge-refresh,.cta .btn,.nf-actions .btn,.apply-btn,
.add-job-button,.edit-job-button,.delete-job-button,.pdf-sync-btn,.sync-pdf-btn,
.product-text-edit-btn,.kht-product-admin-link,.spare-visibility-toggle,
.product-card,.news-card,.project-card,.cat-card,.part-card,.branch-card,
.branch-card-link,.path,.quick,.cat-link,.detail-link,.mosaic .tile,
.kht-spec-table tbody tr,.fb,.kht-lang-link{
  transition-property:background-color,color,border-color,box-shadow,opacity,transform;
  transition-duration:var(--kht-out);
  transition-timing-function:var(--kht-ease-soft);
}
.btn:hover,.header-btn:hover,.menu-toggle:hover,.pdf-btn:hover,.source-btn:hover,
.parts-list-btn:hover,.modal-button:hover,.send-message-button:hover,.challenge-refresh:hover,
.cta .btn:hover,.nf-actions .btn:hover,.apply-btn:hover,.add-job-button:hover,
.edit-job-button:hover,.delete-job-button:hover,.pdf-sync-btn:hover,.sync-pdf-btn:hover,
.product-text-edit-btn:hover,.kht-product-admin-link:hover,.spare-visibility-toggle:hover,
.product-card:hover,.news-card:hover,.project-card:hover,.cat-card:hover,.part-card:hover,
.branch-card:hover,.branch-card-link:hover,.path:hover,.quick:hover,.cat-link:hover,
.detail-link:hover,.mosaic .tile:hover,.kht-spec-table tbody tr:hover,.fb:hover,
.kht-lang-link:hover{transition-duration:var(--kht-in)}

/* หมวดสินค้า เดิมเปลี่ยน font-weight ตอน hover ทำให้ตัวอักษรขยับความกว้างจริง
   เป็นจุดที่รู้สึกกระด้างที่สุด เปลี่ยนเป็นแถบสีด้านซ้ายที่ยืดออกแทน
   ให้ความรู้สึกว่าถูกเลือกโดยเลย์เอาต์ไม่ขยับสักพิกเซล */
.cat-link{position:relative}
.cat-link::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--yellow,#EBC301);transform:scaleY(0);
  transition:transform var(--kht-out) var(--kht-ease-soft);
}
.cat-link:hover{background:rgba(235,195,1,.16);color:#111;font-weight:inherit}
.cat-link:hover::before{transform:scaleY(1);transition-duration:var(--kht-in)}
.cat-link.active{font-weight:700}
.cat-link.active::before{transform:scaleY(1)}

/* ปุ่มพื้นดำ เดิมสลับ #111 เป็น #333 ทันที
   ใช้ชั้นสีขาวโปร่งแสงค่อยปรากฏทับแทน เหมือนแสงตกกระทบวัสดุ
   เลี่ยง .navlinks a เพราะใช้ ::after ทำเส้นใต้อยู่แล้ว
   และเลี่ยง ::before ของ .send-message-button ที่เป็นไอคอนซองจดหมาย */
.header-btn,.menu-toggle,.modal-button,.parts-list-btn,.source-btn,
.pdf-sync-btn,.product-text-edit-btn,.cta .btn,.nf-actions .btn{
  position:relative;overflow:hidden;
}
.header-btn::after,.menu-toggle::after,.modal-button::after,.parts-list-btn::after,
.source-btn::after,.pdf-sync-btn::after,.product-text-edit-btn::after,
.cta .btn::after,.nf-actions .btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(255,255,255,.16);opacity:0;
  transition:opacity var(--kht-out) var(--kht-ease-soft);
}
.header-btn:hover::after,.menu-toggle:hover::after,.modal-button:hover::after,
.parts-list-btn:hover::after,.source-btn:hover::after,.pdf-sync-btn:hover::after,
.product-text-edit-btn:hover::after,.cta .btn:hover::after,.nf-actions .btn:hover::after{
  opacity:1;transition-duration:var(--kht-in);
}

/* แถวตารางสเปกและลิงก์ในเมนู ใช้พื้นเหลืองจางแทนสีเทาทึบ */
.kht-spec-table tbody tr:hover td{background:rgba(235,195,1,.10)}
.navlinks a{border-radius:3px}
.navlinks a:hover{background:rgba(235,195,1,.14)}

/* เคารพการตั้งค่าของเครื่องผู้ใช้ */
@media (prefers-reduced-motion: reduce){
  a,button,.cat-link::before,[class*="-card"],.kht-spec-table tbody tr{
    transition-duration:.01ms !important;
  }
}
@media (prefers-reduced-transparency: reduce){
  .cat-link:hover{background:#FBF3D0}
  .navlinks a:hover{background:#FBF3D0}
  .kht-spec-table tbody tr:hover td{background:#FBF7E4}
  .header-btn:hover::after,.menu-toggle:hover::after,.modal-button:hover::after,
  .parts-list-btn:hover::after,.source-btn:hover::after,.pdf-sync-btn:hover::after,
  .product-text-edit-btn:hover::after,.cta .btn:hover::after,.nf-actions .btn:hover::after{
    background:#333;opacity:1;
  }
}