/* ส่วนเพิ่มสำหรับเว็บแบบ static (ไม่เปลี่ยนหน้าตาเดิม) */

/* เมนูและปุ่มภายในที่เปลี่ยนเป็น <a href>: คงหน้าตาเดิม ไม่ขีดเส้นใต้ */
a.acp-link, a.acp-link:hover { text-decoration: none; }

/* เมนูหลัก: สถานะปกติ / หน้าปัจจุบัน (เดิมคำนวณด้วย JavaScript) */
a.acp-navlink { color: #4A3F35; background: transparent; }
a.acp-navlink[aria-current="page"] { color: #8B5C2A; background: #F5F3EE; }
a.acp-navlink:hover { color: #4A3F35; }
a.acp-navlink[aria-current="page"]:hover { color: #8B5C2A; }

/* ใช้คีย์บอร์ดได้: เห็นกรอบโฟกัสชัดเจน */
a.acp-link:focus-visible, .acp-burger:focus-visible { outline: 2px solid #8B5C2A; outline-offset: 2px; }

/* ===== Header (ขั้นที่ 3): เมนู dropdown + ปุ่มลูกค้าปัจจุบัน / ขอใบเสนอราคา ===== */
.acp-hd { position: sticky; top: 0; z-index: 20; background: #FFFFFF; border-bottom: 1px solid #E5E0D5; }
.acp-hd-in { max-width: 1240px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 16px; position: relative; }
.acp-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.acp-panel { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.acp-mainnav { display: flex; align-items: center; gap: 2px; }
.acp-ni { position: relative; display: flex; align-items: center; }
.acp-nl { font-family: 'IBM Plex Sans', sans-serif; font-size: 13.5px; font-weight: 600; color: #4A3F35; background: transparent;
  padding: 8px 10px; border-radius: 4px; white-space: nowrap; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; line-height: normal; }
a.acp-nl:hover, .acp-nl:hover { background: #F5F3EE; color: #4A3F35; }
.acp-nl[aria-current="page"], a.acp-nl[aria-current="page"]:hover { color: #8B5C2A; background: #F5F3EE; }
.acp-caret { border: 0; background: transparent; color: #4A3F35; cursor: pointer; padding: 8px 4px 8px 0; margin-left: -6px; border-radius: 4px; display: inline-flex; align-items: center; }
.acp-dd .acp-nl svg, .acp-caret svg { transition: transform .15s; }
.acp-ddm { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; background: #FFFFFF; border: 1px solid #E5E0D5; border-radius: 8px;
  box-shadow: 0 10px 28px rgba(28, 20, 16, 0.10); padding: 8px; z-index: 30; }
.acp-ddm a { display: block; padding: 9px 12px; border-radius: 4px; font-size: 14.5px; line-height: 1.45; color: #1C1410; white-space: nowrap; }
.acp-ddm a:hover { background: #F5F3EE; color: #8B5C2A; }
.acp-dd.open .acp-ddm { display: block; }
.acp-dd.open .acp-caret svg, .acp-dd.open .acp-ddtoggle svg { transform: rotate(180deg); }
.acp-actions { display: flex; align-items: center; gap: 8px; }
.acp-hbtn { font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; font-weight: 600; border-radius: 4px; padding: 8px 13px; white-space: nowrap; line-height: normal; display: inline-block; text-align: center; }
.acp-hbtn-ghost, .acp-hbtn-lang { color: #8B5C2A; background: #F5F3EE; border: 1px solid #E5E0D5; }
.acp-hbtn-ghost:hover, .acp-hbtn-lang:hover { background: #E8DEC8; color: #8B5C2A; }
.acp-hbtn-ghost[aria-current="page"] { border-color: #C8A876; }
.acp-hbtn-primary { color: #FFFFFF; background: #8B5C2A; border: 1px solid #8B5C2A; }
.acp-hbtn-primary:hover { background: #6B4419; border-color: #6B4419; color: #FFFFFF; }
.acp-menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: #F5F3EE; border: 1px solid #E5E0D5; border-radius: 4px; cursor: pointer; color: #4A3F35; flex-shrink: 0; }
.acp-quote-m { display: none; }
.acp-nl:focus-visible, .acp-caret:focus-visible, .acp-menu-btn:focus-visible, .acp-ddm a:focus-visible { outline: 2px solid #8B5C2A; outline-offset: 2px; }

/* desktop: เปิดเมนูย่อยเมื่อชี้เมาส์หรือโฟกัสด้วยคีย์บอร์ด */
@media (min-width: 1181px) {
  .acp-dd:hover .acp-ddm, .acp-dd:focus-within .acp-ddm { display: block; }
}
/* tablet / mobile */
@media (max-width: 1180px) {
  .acp-menu-btn { display: inline-flex; }
  .acp-quote-m { display: inline-block; margin-left: auto; }
  .acp-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; border-bottom: 1px solid #E5E0D5;
    box-shadow: 0 12px 24px rgba(28, 20, 16, 0.08); padding: 8px 20px 20px; flex-direction: column; align-items: stretch; gap: 14px;
    max-height: calc(100vh - 72px); overflow-y: auto; margin-left: 0; }
  .acp-panel.acp-open { display: flex; }
  .acp-mainnav { flex-direction: column; align-items: stretch; gap: 0; }
  .acp-ni { flex-wrap: wrap; border-bottom: 1px solid #F0EBE1; }
  .acp-nl { font-size: 15px; padding: 13px 4px; flex: 1; }
  .acp-caret { padding: 12px; margin-left: 0; }
  .acp-ddtoggle { justify-content: space-between; }
  .acp-ddm { position: static; box-shadow: none; border: 0; padding: 0 0 10px 12px; min-width: 0; width: 100%; }
  .acp-ddm a { white-space: normal; font-size: 14.5px; }
  .acp-actions { flex-direction: column; align-items: stretch; }
  .acp-actions .acp-hbtn { font-size: 14.5px; padding: 12px; }
  .acp-actions .acp-hbtn-primary { display: none; } /* มีปุ่มขอใบเสนอราคาบนแถบหัวแล้ว */
}
@media (max-width: 380px) {
  .acp-quote-m { padding: 7px 9px; font-size: 12px; }
  .acp-hd-in { padding: 12px 16px; gap: 10px; }
}

/* ลิงก์หัวการ์ดบริการ / breadcrumb / anchor ใต้ header แบบ sticky */
a.acp-titlelink { color: inherit; }
a.acp-titlelink:hover { color: #8B5C2A; }
.acp-bc { font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; color: #A89880; margin: 0 0 14px; }
.acp-bc a { color: #8B5C2A; }
[id] { scroll-margin-top: 96px; }