/* ═══════════════════════════════════════════════════════════════════════════
   ADMIRE UI — ระบบปุ่ม · ไอคอน · สี (ชุดกลาง)
   เจ้าของอนุมัติ mockup 13 ก.ย. 2569 · สเปกเต็ม: https://claude.ai/code/artifact/443079c5-c0fe-44f3-8a43-97f7f8f1d62c
   ไฟล์นี้โหลด "หลังสุด" (ต่อจาก _custom.css) จึงชนะกฎเก่าที่ระดับความจำเพาะเท่ากัน

   ★ กติกาที่ตกลง — ห้ามแก้เองตอนเขียนโค้ด
     ปุ่ม 3 แบบ: หลัก น้ำเงิน · รอง ขาว · ไลน์ เขียว LINE — สีไม่เปลี่ยนทุกสถานะ
     สูง 44 · โค้ง 22 · ไม่มีเส้นขอบ · กว้างตามข้อความ + ขอบข้าง 24 · ตัวอักษร 15px
     ชี้เมาส์ = แสงหายใจ · โฟกัสคีย์บอร์ด = วงแหวน 0.5px ขยายจากขอบ · ไม่มีสถานะกดค้าง
     สีหน้าเว็บทั่วไป (หัวข้อ ย่อหน้า ลิงก์ พื้นหลัง) คงเดิม — ตัวแปรสีข้างล่างใช้เฉพาะ
     ปุ่ม · ไอคอน · ข้อความยินยอม PDPA · ป้ายโปรโมชัน
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. ฟอนต์ตัวหนังสือ (W8ข · เจ้าของสั่ง "ทำ" 13 ก.ย. 2569 13:00) ────────────────
   ตระกูลเดียวของเว็บคือ FC Iconic — ประกาศชื่อถูก "FC Iconic" + น้ำหนัก 300/400/500/600/700 ไว้กลาง
   (ไฟล์เดียวกับที่ style.css ประกาศเป็นชื่อแยก FCIconic-Regular/Bold/… จึงไม่โหลดซ้ำ · 600 ใช้ไฟล์ Medium)
   ชุด subset = ไทย+อังกฤษพื้นฐาน (~25 KB ตัวที่โหลดจริง) · ชุดเต็มโหลดเฉพาะเมื่อเจออักขระละตินขยาย
   ทำไมต้องมี: body ไม่เคยตั้ง font-family → ข้อความ 180 ก้อนที่ไม่อยู่ในคลาสของธีม (ตาราง/ลิสต์ในนโยบาย ·
   เลขหน้า · ข้อความช่วยใต้ปุ่มไลน์) ตกไปใช้ฟอนต์ระบบ (วัด 13 ก.ย. 12:11) · ใช้ชื่อถูกเพื่อให้ <strong> ได้ไฟล์ Bold จริง ไม่ใช่หนาสังเคราะห์
   งานใหม่ให้เรียก font-family: "FC Iconic" + font-weight แทนชื่อแยกตามไฟล์
   ★ path ฟอนต์ต้องเป็น ../fonts/ (สัมพัทธ์กับไฟล์นี้ที่ public/css/) ห้ามใช้ /fonts/ จากราก — บนเว็บจริง
   public/ เป็นโฟลเดอร์ย่อย (asset อยู่ที่ admire.co.th/public/…) /fonts/ จึงไม่ใช่ไฟล์ ได้ HTML ว่างกลับมา
   ฟอนต์ทุกน้ำหนักในไฟล์นี้โหลดไม่ได้ ทั้งเว็บตกไปฟอนต์ระบบ (มีหัว) — เจ้าของจับได้ 20 ก.ย. 2569 หลัง v1.2.10 ขึ้น
   local ไม่เห็นเพราะ artisan serve เสิร์ฟจาก public/ ตรง ๆ · style.css ใช้ fonts/ สัมพัทธ์อยู่แล้วจึงไม่พัง */
@font-face { font-family: "FC Iconic"; font-weight: 300; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Light/FCIconic-Light-subset.woff2) format("woff2"); unicode-range: U+0020-007E,U+00A0-00BF,U+00D7,U+00F7,U+0E00-0E7F,U+2000-206F,U+20A0-20BF,U+2100-214F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-27BF; }
@font-face { font-family: "FC Iconic"; font-weight: 300; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Light/FCIconic-Light.woff2) format("woff2"), url(../fonts/FCIconic-Light/FCIconic-Light.ttf) format("truetype"); unicode-range: U+00C0-00D6,U+00D8-00F6,U+00F8-00FF,U+0110-0111,U+0131,U+0141-0142,U+0152-0153,U+0160-0161,U+0178,U+017D-017E,U+0192,U+02C6-02C7,U+02D8-02DA,U+02DC-02DD,U+03BC; }
@font-face { font-family: "FC Iconic"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Regular/FCIconic-Regular-subset.woff2) format("woff2"); unicode-range: U+0020-007E,U+00A0-00BF,U+00D7,U+00F7,U+0E00-0E7F,U+2000-206F,U+20A0-20BF,U+2100-214F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-27BF; }
@font-face { font-family: "FC Iconic"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Regular/FCIconic-Regular.woff2) format("woff2"), url(../fonts/FCIconic-Regular/FCIconic-Regular.ttf) format("truetype"); unicode-range: U+00C0-00D6,U+00D8-00F6,U+00F8-00FF,U+0110-0111,U+0131,U+0141-0142,U+0152-0153,U+0160-0161,U+0178,U+017D-017E,U+0192,U+02C6-02C7,U+02D8-02DA,U+02DC-02DD,U+03BC; }
@font-face { font-family: "FC Iconic"; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Medium/FCIconic-Medium-subset.woff2) format("woff2"); unicode-range: U+0020-007E,U+00A0-00BF,U+00D7,U+00F7,U+0E00-0E7F,U+2000-206F,U+20A0-20BF,U+2100-214F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-27BF; }
@font-face { font-family: "FC Iconic"; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Medium/FCIconic-Medium.woff2) format("woff2"), url(../fonts/FCIconic-Medium/FCIconic-Medium.ttf) format("truetype"); unicode-range: U+00C0-00D6,U+00D8-00F6,U+00F8-00FF,U+0110-0111,U+0131,U+0141-0142,U+0152-0153,U+0160-0161,U+0178,U+017D-017E,U+0192,U+02C6-02C7,U+02D8-02DA,U+02DC-02DD,U+03BC; }
@font-face { font-family: "FC Iconic"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Medium/FCIconic-Medium-subset.woff2) format("woff2"); unicode-range: U+0020-007E,U+00A0-00BF,U+00D7,U+00F7,U+0E00-0E7F,U+2000-206F,U+20A0-20BF,U+2100-214F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-27BF; }
@font-face { font-family: "FC Iconic"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Medium/FCIconic-Medium.woff2) format("woff2"), url(../fonts/FCIconic-Medium/FCIconic-Medium.ttf) format("truetype"); unicode-range: U+00C0-00D6,U+00D8-00F6,U+00F8-00FF,U+0110-0111,U+0131,U+0141-0142,U+0152-0153,U+0160-0161,U+0178,U+017D-017E,U+0192,U+02C6-02C7,U+02D8-02DA,U+02DC-02DD,U+03BC; }
@font-face { font-family: "FC Iconic"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Bold/FCIconic-Bold-subset.woff2) format("woff2"); unicode-range: U+0020-007E,U+00A0-00BF,U+00D7,U+00F7,U+0E00-0E7F,U+2000-206F,U+20A0-20BF,U+2100-214F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-27BF; }
@font-face { font-family: "FC Iconic"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Bold/FCIconic-Bold.woff2) format("woff2"), url(../fonts/FCIconic-Bold/FCIconic-Bold.ttf) format("truetype"); unicode-range: U+00C0-00D6,U+00D8-00F6,U+00F8-00FF,U+0110-0111,U+0131,U+0141-0142,U+0152-0153,U+0160-0161,U+0178,U+017D-017E,U+0192,U+02C6-02C7,U+02D8-02DA,U+02DC-02DD,U+03BC; }

/* ตัวหนาสังเคราะห์ (W8ค · 13 ก.ย. 2569): ชื่อเก่า Regular/Medium/Light ถูกสั่ง font-weight 600–700 อยู่ 122 ก้อน
   (ผลงาน 32 · บทความ 32 · นโยบาย 38 · ผลงานรายละเอียด 10) — ธีมประกาศชื่อพวกนี้ไว้แค่น้ำหนัก normal
   เบราว์เซอร์จึงปั้นตัวหนาจากไฟล์บางเอง (ตัวแคบ ขอบไม่คม) → ประกาศน้ำหนัก 600/700 ให้ชี้ไฟล์ Bold จริง
   ชื่อ FCIconic-Bold ไม่ต้อง: ไฟล์เป็นตัวหนาอยู่แล้ว Chrome ไม่สังเคราะห์ซ้ำ (พิสูจน์ด้วยภาพซูม 3× · scratchpad faux/compare2.png) */
@font-face { font-family: "FCIconic-Regular"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Bold/FCIconic-Bold-subset.woff2) format("woff2"), url(../fonts/FCIconic-Bold/FCIconic-Bold.woff2) format("woff2"); }
@font-face { font-family: "FCIconic-Regular"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Bold/FCIconic-Bold-subset.woff2) format("woff2"), url(../fonts/FCIconic-Bold/FCIconic-Bold.woff2) format("woff2"); }
@font-face { font-family: "FCIconic-Medium"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Bold/FCIconic-Bold-subset.woff2) format("woff2"), url(../fonts/FCIconic-Bold/FCIconic-Bold.woff2) format("woff2"); }
@font-face { font-family: "FCIconic-Medium"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Bold/FCIconic-Bold-subset.woff2) format("woff2"), url(../fonts/FCIconic-Bold/FCIconic-Bold.woff2) format("woff2"); }
@font-face { font-family: "FCIconic-Light"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Bold/FCIconic-Bold-subset.woff2) format("woff2"), url(../fonts/FCIconic-Bold/FCIconic-Bold.woff2) format("woff2"); }
@font-face { font-family: "FCIconic-Light"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/FCIconic-Bold/FCIconic-Bold-subset.woff2) format("woff2"), url(../fonts/FCIconic-Bold/FCIconic-Bold.woff2) format("woff2"); }

body {
    font-family: "FC Iconic", "FCIconic-Regular", sans-serif;
}
/* ช่องกรอกไม่รับฟอนต์จากแม่โดยปริยาย (เบราว์เซอร์ตั้งฟอนต์ระบบให้เอง) — ปุ่มมีกฎของตัวเองในหัวข้อ 2 แล้ว */
input, select, textarea {
    font-family: inherit;
}

/* ── 1. ชุดสี 12 สี (ประกาศไว้กลาง งานถัดไปเรียกใช้ได้) ───────────────────── */
:root {
    --ad-navy:      #002E6C;   /* น้ำเงินแบรนด์ · ปุ่มหลัก · ไอคอน */
    --ad-navy-link: #1B4F91;   /* ลิงก์ในเนื้อความ · วงแหวนโฟกัส */
    --ad-navy-100:  #E2E9F4;   /* พื้นกล่องเน้น */
    --ad-navy-50:   #F2F6FB;   /* พื้นอ่อนสุด */
    --ad-ink:       #14181F;   /* ตัวอักษรหลัก */
    --ad-ink-2:     #3A4250;   /* ตัวอักษรรอง · ข้อความยินยอม PDPA */
    --ad-ink-3:     #5B6676;   /* ข้อความประกอบ (วันที่ ยอดดู) */
    --ad-line:      #D7DDE6;   /* เส้นคั่น · ขอบช่องกรอก */
    --ad-bg:        #F5F7FA;   /* พื้นอ่อน */
    --ad-white:     #FFFFFF;
    --ad-green:     #06C755;   /* เขียว LINE ทางการ — ปุ่มไลน์เท่านั้น */
    --ad-red:       #C8102E;   /* ป้ายโปรโมชันเท่านั้น */

    /* เงาของปุ่ม — สีเดียวกับปุ่ม อยู่กลาง กระจายรอบด้าน */
    --ad-shadow-navy:  0 0 16px rgba(0, 46, 108, .28);
    --ad-shadow-soft:  0 0 16px rgba(0, 46, 108, .18);
    --ad-shadow-green: 0 0 16px rgba(6, 199, 85, .36);
}

/* ── 1ข. สเกลตัวอักษร 10 ขั้น (W8 · เจ้าของอนุมัติ 13 ก.ย. 2569 · mockup b3eca94a) ─────
   ค่าตายตัวทุกจอ — กฎมือถือเดิมของแต่ละหน้ายังทำงาน แค่ค่าที่ย่อไปตกบนกริดเดียวกัน
   ทุก font-size ในโค้ดหน้าเว็บชี้ตัวแปรชุดนี้ (ยกเว้น ปุ่ม 15 · ป้ายโปร 13 · เลข "7" ประดับ)
   5 ขั้นเนื้อหา: xs ป้ายเล็ก · sm ข้อความประกอบ · md เนื้อหา · lg เนื้อหาเน้น/ฟุตเตอร์ · xl เมนู/ชื่อ
   5 ขั้นหัวข้อ: 2xl หัวข้อการ์ด · 3xl หัวข้อย่อย · 4xl หัวข้อรอง · 5xl หัวข้อส่วน/ราคา · display ฮีโร่ */
:root {
    --ad-fs-xs:      12px;
    --ad-fs-sm:      14px;
    --ad-fs-md:      16px;
    --ad-fs-lg:      18px;
    --ad-fs-xl:      20px;
    --ad-fs-2xl:     24px;
    --ad-fs-3xl:     32px;
    --ad-fs-4xl:     40px;
    --ad-fs-5xl:     48px;
    --ad-fs-display: 72px;
}

/* ── 2. ปุ่ม — กฎกลางทุกปุ่ม ─────────────────────────────────────────────────
   ทรงเดียวกันหมด ไม่ว่าคลาสเดิมจะชื่ออะไร (คลาสเก่า 30 กว่าตัวถูกถอด "หน้าตา" ออกแล้ว
   เหลือแต่ตำแหน่ง/ระยะ — ดู style.css และ _custom.css)

   สีของแต่ละบทบาทเก็บในตัวแปร --ad-btn-bg / --ad-btn-fg / --ad-btn-glow
   แล้วป้อนให้ทั้งกฎของเราและตัวแปร --bs-btn-* ของ Bootstrap ทุกสถานะ
   → Bootstrap จะไม่มีทางทำพื้นหายตอน :active/:focus อีก (ต้นเหตุปุ่มขาวบนขาว)

   padding-top 2px / bottom 0 = ดันตัวอักษรลง 1px
   mockup เคยดันลง 2.75px (padding-top 5.5) เพราะวัดกับฟอนต์ IBM Plex Sans Thai ที่เผื่อที่ใต้บรรทัดไว้มาก
   แต่ฟอนต์จริงของเว็บคือ FCIconic-Bold ซึ่งกล่องบรรทัดเกือบสมมาตรอยู่แล้ว — ดัน 2.75 แล้วตัวอักษรต่ำชัด (เจ้าของทัก 13 ก.ย.)
   วัดจริง 13 ก.ย. 4x หน้าแรก (ช่องไฟหมึกบน/ล่าง): ดัน 0 → "โปรโมชั่น" 11.5/17 · "แชทผ่านไลน์" 14.25/17 · "084 392 5577" 16.5/17
   คำที่มีสระบน+วรรณยุกต์ซ้อนจะดูลอย ตัวเลขล้วนดูพอดี → เลือก 2px เป็นจุดกลาง: 12.5/16 · 15.25/16 · 17.5/16 ทุกคำต่างไม่เกิน 3.5px
   (ทดลอง 0 / 2 / 3 แล้วดูด้วยตา 2px สมดุลสุด — scratchpad pad-abc.png)
   ★ ถ้าเปลี่ยนฟอนต์ปุ่ม ต้องวัดใหม่ด้วย scratchpad ink.mjs — ค่านี้ผูกกับ FCIconic
   ★ ห้ามใช้ transform เลื่อนตัวอักษรแทน — จะพาวงแหวนโฟกัส (::after) เลื่อนตามไปด้วย */
.btn,
.ad-btn,
.cta-line-btn,
.line-button,
.proc-btn,
.warranty-btn,
.hdv2-pillbtn,
.hdv2-appt-btn {
    /* ค่าตั้งต้น = ปุ่มหลัก */
    --ad-btn-bg:   var(--ad-navy);
    --ad-btn-fg:   var(--ad-white);
    --ad-btn-glow: 0 0 16px rgba(0, 46, 108, .28);
    --ad-btn-glow-max: 0 0 34px 10px rgba(27, 79, 145, .45);

    --bs-btn-bg: var(--ad-btn-bg);        --bs-btn-color: var(--ad-btn-fg);        --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--ad-btn-bg);  --bs-btn-hover-color: var(--ad-btn-fg);  --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--ad-btn-bg); --bs-btn-active-color: var(--ad-btn-fg); --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: var(--ad-btn-bg); --bs-btn-disabled-color: var(--ad-btn-fg);
    --bs-btn-focus-box-shadow: none; --bs-btn-active-shadow: none;

    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 2px 24px 0;
    border: 0;
    border-radius: 22px;
    background: var(--ad-btn-bg);
    color: var(--ad-btn-fg) !important;   /* !important เพราะกฎแม่ style.css บังคับ a{color:…!important} */
    font-family: "FCIconic-Bold", "IBM Plex Sans Thai", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    box-shadow: var(--ad-btn-glow);
    transition: box-shadow .25s ease;
    -webkit-tap-highlight-color: transparent;
}

/* ── 3. บทบาท 3 แบบ — คลาสใหม่ + คลาสเก่าที่ยังใช้ใน blade ───────────────────
   ตั้งแค่ตัวแปร ไม่ตั้งสีตรง ๆ → กฎข้อ 2 หยิบไปใช้เอง ทุกสถานะจึงได้สีเดียวกัน
   ลำดับในไฟล์ = ลำดับความสำคัญ (ทุกตัวความจำเพาะเท่ากัน 0,1,0): รอง > หลัก · ไลน์ > รอง */

/* หลัก — น้ำเงิน ตัวขาว (ค่าตั้งต้นอยู่แล้ว ประกาศไว้ให้เรียกชื่อได้) */
.ad-btn--primary,
.btn-d,
.btn-home-all, .btn-blog-all, .btn-port-all, .btn-activity-all,
.btn-banner, .btn-contact-style, .btn-send-now-style,
.proc-btn, .warranty-btn,
.hdv2-pillbtn.is-primary {
    --ad-btn-bg: var(--ad-navy);
    --ad-btn-fg: var(--ad-white);
    --ad-btn-glow: 0 0 16px rgba(0, 46, 108, .28);
    --ad-btn-glow-max: 0 0 34px 10px rgba(27, 79, 145, .45);
}

/* รอง — ขาว ตัวน้ำเงิน */
.ad-btn--secondary,
.btn-readmore-style, .btn-button-style,
.btn-contact-submit, .btn-promotion, .btn-type-port, .btn-load-map,
.btn-3-style, .btn-2-style,
.hdv2-pillbtn.is-secondary {
    --ad-btn-bg: var(--ad-white);
    --ad-btn-fg: var(--ad-navy);
    --ad-btn-glow: 0 0 16px rgba(0, 46, 108, .18);
    --ad-btn-glow-max: 0 0 34px 10px rgba(0, 46, 108, .30);
}

/* ไลน์ — เขียว LINE ตัวขาว · ทุกปุ่มที่พาไปไลน์ (รวมปุ่มที่ href ชี้ไป lin.ee/line.me) */
.ad-btn--line,
.btn-line-style, .cta-line-btn, .line-button,
.hdv2-appt-btn.is-line,
.btn[href^="https://lin.ee"], .btn[href*="line.me"] {
    --ad-btn-bg: var(--ad-green);
    --ad-btn-fg: var(--ad-white);
    --ad-btn-glow: 0 0 16px rgba(6, 199, 85, .36);
    --ad-btn-glow-max: 0 0 34px 10px rgba(5, 177, 76, .50);
}

/* ปุ่มแบนเนอร์หน้าแรก — เจ้าของเลือกจาก mockup 13 ก.ย. 2569 (https://claude.ai/code/artifact/fe1fb705-6cdb-4997-8aec-7524b504ae6f)
   "ปรึกษาสร้างบ้าน" = ขาว ตัวน้ำเงิน แม้ลิงก์ไปไลน์ (ตอบคำถามที่ค้างไว้ 00:37 ว่าไม่เอาเขียว)
   → ความจำเพาะ 0,3,0 ชนะกฎ .btn[href^="https://lin.ee"] (0,2,0) ข้างบน
   "ดูแบบบ้านทั้งหมด" = ไม่มีพื้น ขอบขาว 1px · ชี้เมาส์แล้วพื้นน้ำเงินค่อยมา (ยกเว้นกฎ "สีไม่เปลี่ยนทุกสถานะ" เฉพาะปุ่มนี้ ตามที่เจ้าของสั่ง)
   ★ ระบบปุ่มไม่มีปุ่มแบบมีขอบ จึงไม่มีมาตรฐานความหนาขอบปุ่ม — ใช้ 1px ตามเส้นคั่น/ขอบช่องกรอก (--ad-line) ซึ่งเป็นเส้นบางสุดที่ระบบใช้
     (เจ้าของทัก 2px หนาไป 13 ก.ย. 03:0x) · ขอบกินที่ในกล่อง 44 อยู่แล้ว (box-sizing border-box) ความสูงรวมไม่เปลี่ยน */
.hero-cta .btn-hero, .hero-cta .btn-hero[href] {
    --ad-btn-bg: var(--ad-white);
    --ad-btn-fg: var(--ad-navy);
    --ad-btn-glow: 0 0 16px rgba(0, 46, 108, .18);
    --ad-btn-glow-max: 0 0 34px 10px rgba(0, 46, 108, .30);
}
.hero-cta .btn-hero--ghost, .hero-cta .btn-hero--ghost[href] {
    --ad-btn-bg: rgba(255, 255, 255, .14);   /* 13 ก.ย. รอบ 2: เดิม transparent — ขอบเปล่า 1px จมหายบนรูปสว่าง (โรงรถ/ผนังกระจก) · พื้นขาวโปร่ง 14% เห็นบนทุกรูป (mockup ร่าง ข ข้อ 4) */
    --ad-btn-fg: var(--ad-white);
    --ad-btn-glow: 0 0 0 rgba(0, 46, 108, 0);
    --ad-btn-glow-max: 0 0 16px rgba(0, 46, 108, .28);
    border: 1px solid rgba(255, 255, 255, .8);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hero-cta .btn-hero--ghost:active, .hero-cta .btn-hero--ghost:focus {
    border: 1px solid rgba(255, 255, 255, .8);   /* กฎกลางข้อ 4 ล้าง border ตอนกด/โฟกัส — ปุ่มนี้ต้องคงขอบ */
}
.hero-cta .btn-hero--ghost:hover {
    background: var(--ad-navy);
    border-color: var(--ad-navy);
}

/* ── 4. สถานะ — สีไม่เปลี่ยน มีแต่แสง ──────────────────────────────────────── */

/* ชี้เมาส์: แสงหายใจเข้า–ออก (alternate = วิ่งออกแล้ววิ่งกลับ ไม่ตัดจบ จึงไม่กระตุก)
   คีย์เฟรมอ่านจากตัวแปร จึงได้สีตามบทบาทเองโดยไม่ต้องแยกกฎ */
.btn:hover, .ad-btn:hover, .cta-line-btn:hover, .line-button:hover, .proc-btn:hover, .warranty-btn:hover, .hdv2-pillbtn:hover, .hdv2-appt-btn:hover {
    animation: ad-breathe 2.6s ease-in-out infinite alternate;
}
@keyframes ad-breathe { from { box-shadow: var(--ad-btn-glow) } to { box-shadow: var(--ad-btn-glow-max) } }

/* กดค้าง / โฟกัส: ไม่มีสถานะแยก — พื้นและตัวหนังสือคงเดิม (ล้างของ Bootstrap และธีมเก่า) */
.btn:active, .btn:focus, .btn.active, .btn.show,
.btn:first-child:active, :not(.btn-check) + .btn:active,
.ad-btn:active, .ad-btn:focus, .cta-line-btn:active, .line-button:active, .proc-btn:active, .warranty-btn:active, .hdv2-pillbtn:active, .hdv2-appt-btn:active {
    background: var(--ad-btn-bg);
    color: var(--ad-btn-fg) !important;
    border: 0;
    outline: none;
}

/* โฟกัสคีย์บอร์ด: วงแหวนบาง 0.5px เกิดที่ขอบปุ่ม ขยายออก 6px จางหาย วนซ้ำ
   ใช้ ::after จึงขยายเท่ากันทุกด้าน ความหนาเส้นคงที่ ความโค้งโตตามให้ยังเป็นแคปซูล */
.btn:focus-visible::after, .ad-btn:focus-visible::after, .cta-line-btn:focus-visible::after, .line-button:focus-visible::after,
.proc-btn:focus-visible::after, .warranty-btn:focus-visible::after, .hdv2-pillbtn:focus-visible::after, .hdv2-appt-btn:focus-visible::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    border: .5px solid var(--ad-navy-link);
    pointer-events: none;
    animation: ad-ring-out 2s ease-out infinite;
}
@keyframes ad-ring-out {
    0%   { inset: 0;    border-radius: 22px; opacity: 0 }
    14%  { opacity: .9 }
    100% { inset: -6px; border-radius: 28px; opacity: 0 }
}

/* ── 5. ไอคอนในปุ่ม ──────────────────────────────────────────────────────────
   18px สีตามตัวหนังสือ (currentColor) ห่างข้อความ 8px (gap ของปุ่ม)
   margin-top ติดลบเท่า padding-top ของปุ่ม → ดึงไอคอนกลับมากลางปุ่ม (ตัวอักษรถูกดันลง ไอคอนไม่ต้อง) */
.btn .ad-ic, .ad-btn .ad-ic, .cta-line-btn .ad-ic, .line-button .ad-ic, .hdv2-pillbtn .ad-ic, .hdv2-appt-btn .ad-ic {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: -2px;   /* = -padding-top ของปุ่ม → ไอคอนกลับมากลางปุ่มพอดี (ตัวอักษรถูกดันลง ไอคอนไม่ต้อง) */
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ad-ic.is-solid { fill: currentColor; stroke: none; }
.ad-btn--icon-left  { padding-left: 20px; }
/* แถวปุ่มที่วางคู่กัน 2–3 ปุ่ม: ห่างกัน 12px ตามสเปก (กันกดผิดปุ่มบนมือถือ · เดิมหน้าแรกใช้ gap-5 = 48px)
   ใช้แทน d-flex gap-N ของ Bootstrap เพราะ .gap-N ติด !important แก้ทับไม่ได้ · flex-wrap ให้ตกบรรทัดเองเมื่อจอแคบ */
.ad-btn-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }

/* เอฟเฟกต์ "เด้งครั้งเดียว" (เจ้าของเลือก 13 ก.ย. 2569 สำหรับปุ่มลอยเหนือรูป: แถบล่างจอ · ลูกศรแบนเนอร์)
   ขึ้น 3px ลง .5px แล้วนิ่ง .45s — 3px เพราะขอบแถบ 5px ต้องไม่หลุดกรอบ (เจ้าของย้ำ) · ใช้: animation: ad-bounce .45s cubic-bezier(.3,.7,.4,1) 1 */
@keyframes ad-bounce { 0% { transform: translateY(0) } 35% { transform: translateY(-3px) } 70% { transform: translateY(.5px) } 100% { transform: translateY(0) } }
.ad-btn--icon-right { padding-right: 20px; }

/* ปุ่ม "ติดต่อเรา" บนเมนู: โชว์เฉพาะจอ ≥ 992 (เดิมใช้ d-none d-lg-inline-block ของ Bootstrap — inline-block ทับ inline-flex ของระบบ
   ตัวหนังสือเลยลอยติดขอบบน · เขียนเองที่นี่แทนคลาส d-lg-inline-flex เพราะ bootstrap.slim.css ที่ตัดแล้วไม่มีคลาสนั้น) */
.btn-contact-style { display: none; }
@media (min-width: 992px) { .btn-contact-style { display: inline-flex; } }

/* ปุ่มไอคอนอย่างเดียว: วงกลม 44 ไอคอน 20 อยู่กลาง — ต้องมี aria-label */
.ad-btn--icon-only, .mbar-btn, .hdv2-mobico, .scrollToTop {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
}
.scrollToTop {
    position: fixed;
    right: 20px;
    left: auto;
}
.ad-btn--icon-only .ad-ic, .mbar-btn .ad-ic, .hdv2-mobico .ad-ic, .scrollToTop .ad-ic { width: 20px; height: 20px; margin-top: 0; }

/* ── 6. ไอคอนลอยเดี่ยว (นอกปุ่ม) — คลังไอคอน 37 ตัว ─────────────────────────
   24px เส้น 2px สีตามตัวหนังสือ · ในบรรทัดข้อความใช้ 16px */
.ad-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex: none; }
.ad-icon.is-solid { fill: currentColor; stroke: none; }
.ad-icon--sm { width: 16px; height: 16px; }
.ad-icon--rot-90  { transform: rotate(90deg); }    /* ลูกศร: ขวา → ลง */
.ad-icon--rot-180 { transform: rotate(180deg); }   /* ลูกศร: ขวา → ซ้าย */
.ad-icon--rot-270 { transform: rotate(-90deg); }   /* ลูกศร: ขวา → ขึ้น */

/* ── 7. ข้อความยินยอม PDPA — ไม่แตะ ────────────────────────────────────────
   วัดจริง 13 ก.ย.: ทุกจุด (หน้าแรก · ติดต่อเรา · หน้าแบบบ้าน) วางบนแผงไล่สีน้ำเงิน
   #003a9b→#001f6c ตัวอักษร #e5e7eb ≈ 9.7:1 อ่านออกอยู่แล้ว — ตัวเลข "1.19 มองไม่เห็น"
   ใน mockup มาจากเครื่องวัดรุ่นเก่าที่ไม่ดูพื้นไล่สี (R2 ข้อ 1.2 พิสูจน์แล้วว่าผิด)
   ถ้าเอาสีเข้ม #3A4250 ตามหัวข้อ 4 ของ mockup มาใส่ จะกลายเป็นเข้มบนเข้ม อ่านไม่ออกจริง
   → รายงานเจ้าของแล้ว ไม่ใส่กฎ */

/* ── 8. ป้ายโปรโมชัน — แดง สีเดียวในเว็บที่ไม่ใช่น้ำเงิน/เขียว ──────────────── */
.ad-promo-badge, .hdv2-badge, .promo-badge, .promotion-badge {
    display: inline-block;
    background: var(--ad-red);
    color: var(--ad-white) !important;          /* 5.89:1 */
    padding: 3px 12px;
    border-radius: 999px;
    font-family: "FCIconic-Bold", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* ── 9. เครื่องที่ตั้ง "ลดการเคลื่อนไหว" — ทุกสถานะเป็นค่านิ่ง ──────────────── */
@media (prefers-reduced-motion: reduce) {
    .btn:hover, .ad-btn:hover, .cta-line-btn:hover, .line-button:hover, .proc-btn:hover, .warranty-btn:hover, .hdv2-pillbtn:hover, .hdv2-appt-btn:hover {
        animation: none;
        box-shadow: var(--ad-btn-glow-max);
    }
    .btn:focus-visible::after, .ad-btn:focus-visible::after, .cta-line-btn:focus-visible::after, .line-button:focus-visible::after,
    .proc-btn:focus-visible::after, .warranty-btn:focus-visible::after, .hdv2-pillbtn:focus-visible::after, .hdv2-appt-btn:focus-visible::after {
        animation: none; inset: -2px; border-radius: 24px; opacity: .9;
    }
}

/* ── 10. ปุ่มในฟอร์มบนมือถือ ยืดเต็มความกว้าง (ปุ่มเดียวในบรรทัด) ─────────── */
@media (max-width: 575.98px) {
    form .btn[type="submit"], form button.btn, .btn-contact-submit, .btn-send-now-style { width: 100%; }
}
.search-dropdown .dropdown-item.is-keyboard-active,
.search-dropdown .dropdown-item[aria-selected="true"] {
  background: var(--ad-navy-50, #eef5ff);
  color: var(--ad-navy, #002e6c) !important;
  outline: 2px solid rgba(0, 46, 108, .28);
  outline-offset: -2px;
}

.search-dropdown {
  max-height: min(440px, calc(100vh - 180px));
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 44px rgba(20, 24, 31, .16) !important;
}

.search-dropdown #searchResults .dropdown-header {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--ad-line, #d7dde6);
  color: var(--ad-ink-2, #3a4250) !important;
  font-family: "FC Iconic", sans-serif !important;
  font-size: var(--ad-fs-lg, 18px) !important;
  font-weight: 600;
  line-height: 1.35;
}

.search-dropdown #searchResultsList {
  margin: 0 !important;
  padding: 8px !important;
}

.search-dropdown .home-search-result-item + .home-search-result-item {
  margin-top: 4px;
}

.search-dropdown .dropdown-item.home-search-result {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  font-family: "FC Iconic", sans-serif !important;
  line-height: 1.25;
}

.home-search-result__media {
  display: block;
  width: 72px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 9px;
  background: var(--ad-bg, #f5f7fa);
}

.home-search-result__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-search-result__body {
  display: block;
  min-width: 0;
}

.home-search-result__title,
.home-search-result__meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-search-result__title {
  color: var(--ad-ink, #14181f);
  font-size: var(--ad-fs-lg, 18px);
  font-weight: 600;
}

.home-search-result__meta {
  margin-top: 4px;
  color: var(--ad-ink-3, #5b6676);
  font-size: var(--ad-fs-sm, 14px);
  font-weight: 400;
}

.home-search-result__price {
  color: var(--ad-navy, #002e6c);
  font-size: var(--ad-fs-sm, 14px);
  font-weight: 400;
  white-space: nowrap;
}

.home-search-result__price strong {
  font-size: var(--ad-fs-xl, 20px);
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .search-dropdown {
    max-height: min(400px, calc(100vh - 150px));
    border-radius: 14px !important;
  }

  .search-dropdown #searchResults .dropdown-header {
    padding: 12px 14px !important;
    font-size: var(--ad-fs-md, 16px) !important;
  }

  .search-dropdown #searchResultsList {
    padding: 6px !important;
  }

  .search-dropdown .dropdown-item.home-search-result {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 64px;
    padding: 7px 8px !important;
  }

  .home-search-result__media {
    width: 64px;
    border-radius: 8px;
  }

  .home-search-result__title {
    font-size: var(--ad-fs-md, 16px);
  }

  .home-search-result__meta,
  .home-search-result__price {
    font-size: var(--ad-fs-xs, 12px);
  }

  .home-search-result__price strong {
    display: block;
    font-size: var(--ad-fs-lg, 18px);
    line-height: 1;
    text-align: right;
  }
}

/* ── 11. Card motion — effect กลางของการ์ดที่กดได้ (แบบเดียวทั้งเว็บ — เจ้าของตัดสิน 21 ก.ย.) ──
   โครง: <div class="ad-card-motion"> (wrapper ถือเงา) > <... class="ad-card-motion__surface"> (ตัวการ์ดที่ขยับ)
   - เงาปกติ/เงา hover อยู่ใน ::before/::after ของ wrapper แล้ว crossfade ด้วย opacity (คอมโพสิตอย่างเดียว)
     ห้ามใส่ box-shadow บนการ์ดแล้ว transition ตรง ๆ — Chrome วาดเงาเบลอใหม่ทุกเฟรม = "สะดุด" (เจ้าของ 19 ก.ย.)
   - .ad-card-motion--overlay (ตัวเลือก) = ชั้นไล่สีเข้มของ __surface::after จางเข้าครึ่งหนึ่งตอนชี้ (การ์ดรูปเต็มใบ)
   - มุมโค้ง/เงา override ได้ด้วย --ad-card-motion-radius / -shadow-rest / -shadow-hover ที่ wrapper
   เปลี่ยน scale/เวลาใน :root จุดเดียวแล้วมีผลกับบทความ กิจกรรม โปรโมชั่น และผลงาน */
:root {
  --ad-card-motion-hover-scale: 1.0128;
  --ad-card-motion-active-scale: .9936;
  --ad-card-motion-enter-duration: .4s;
  --ad-card-motion-exit-duration: .52s;
  --ad-card-motion-active-duration: .2s;
  --ad-card-motion-easing: cubic-bezier(.22, .61, .36, 1);
}

.ad-card-motion {
  --ad-card-motion-radius: 22px;
  --ad-card-motion-shadow-rest: 0 6px 16px rgba(20, 24, 31, .12);
  --ad-card-motion-shadow-hover: 0 12px 28px rgba(20, 24, 31, .18);
  position: relative;
  isolation: isolate;
}

.ad-card-motion__surface {
  transition: transform var(--ad-card-motion-exit-duration) var(--ad-card-motion-easing);
}

.ad-card-motion::before,
.ad-card-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--ad-card-motion-radius);
  transition: opacity var(--ad-card-motion-exit-duration) ease;
  pointer-events: none;
}

.ad-card-motion::before {
  box-shadow: var(--ad-card-motion-shadow-rest);
  opacity: 1;
}

.ad-card-motion::after {
  box-shadow: var(--ad-card-motion-shadow-hover);
  opacity: 0;
  transform: scale(var(--ad-card-motion-hover-scale));
}

.ad-card-motion--overlay .ad-card-motion__surface::after {
  transition: opacity var(--ad-card-motion-exit-duration) ease;
}

@media (hover: hover) {
  .ad-card-motion__surface {
    will-change: transform;
  }

  .ad-card-motion:hover {
    z-index: 3;
  }

  .ad-card-motion:hover .ad-card-motion__surface {
    transform: scale(var(--ad-card-motion-hover-scale));
    transition-duration: var(--ad-card-motion-enter-duration);
  }

  .ad-card-motion:hover::before {
    opacity: 0;
    transition-duration: var(--ad-card-motion-enter-duration);
  }

  .ad-card-motion:hover::after {
    opacity: 1;
    transition-duration: var(--ad-card-motion-enter-duration);
  }

  .ad-card-motion--overlay:hover .ad-card-motion__surface::after {
    opacity: .5;
    transition-duration: var(--ad-card-motion-enter-duration);
  }
}

.ad-card-motion:focus-within {
  z-index: 3;
}

.ad-card-motion:focus-within .ad-card-motion__surface {
  transform: scale(var(--ad-card-motion-hover-scale));
  transition-duration: var(--ad-card-motion-enter-duration);
}

.ad-card-motion:focus-within::before {
  opacity: 0;
  transition-duration: var(--ad-card-motion-enter-duration);
}

.ad-card-motion:focus-within::after {
  opacity: 1;
  transition-duration: var(--ad-card-motion-enter-duration);
}

.ad-card-motion--overlay:focus-within .ad-card-motion__surface::after {
  opacity: .5;
  transition-duration: var(--ad-card-motion-enter-duration);
}

.ad-card-motion .ad-card-motion__surface:active {
  transform: scale(var(--ad-card-motion-active-scale));
  transition-duration: var(--ad-card-motion-active-duration);
}

@media (prefers-reduced-motion: reduce) {
  .ad-card-motion__surface,
  .ad-card-motion::before,
  .ad-card-motion::after,
  .ad-card-motion--overlay .ad-card-motion__surface::after {
    transition: none;
  }
}

/* ── 12. พิมพ์หน้าเว็บ (P2 ข้อ 2.4) ─────────────────────────────────────────────
   ซ่อนของที่ไม่มีความหมายบนกระดาษ: แถบเมนู · ฟุตเตอร์ · แถบลอยมือถือ · แบนเนอร์คุกกี้ ·
   ปุ่ม LINE ลอย · ปุ่มเลื่อนขึ้นบน · เมนูมือถือ (offcanvas) · แถบลอยหน้าแบบบ้าน
   ★ หน้าพิมพ์ตารางวัสดุ (resources/views/print/) มี layout ของตัวเอง ไม่โหลดไฟล์นี้ — ไม่กระทบ
   ★ ใช้ !important เพราะ .sticky-nav.sticky / .mbar ตั้ง position:fixed + display ด้วย JS inline */
@media print {
  #bloc-0,
  #site-footer,
  #mobileMenu,
  .mbar,
  .cookie-banner,
  .line-icon,
  .scrollToTop,
  .hdv2-mobbar {
    display: none !important;
  }
  body {
    background: #fff !important;
  }
}