/* ลอกจากเว็บร้านของจริง ไม่ได้เดาเอง — ค่าทุกตัวในนี้อ่านมาจาก computed style ของหน้า scimath (ธีม Astra + Elementor) ที่รันอยู่ ตอน 2026-10-06 หน้านี้อยู่คนละที่กับเว็บร้าน (คนละโดเมน คนละระบบ) แต่ลูกค้าต้องไม่รู้สึกแบบนั้น ถ้าแถบบน ฟอนต์ สี และปุ่ม ไม่ตรงกัน ลูกค้าจะเริ่มสงสัยว่าหลุดไปเว็บอื่นหรือเปล่า ซึ่งเป็นปัญหาเดียวกับที่เราย้ายหนีมาจาก Apps Script ถ้าเว็บร้านเปลี่ยนธีมเมื่อไหร่ ต้องกลับมาวัดใหม่แล้วแก้ที่นี่ */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Lora:wght@600;700&display=swap'); :root { /* ---- สีที่วัดมาจากเว็บร้าน ---- */ --primary: #0b5ccb; /* ปุ่มหลัก */ --primary-ink: #10213f; /* หัวเรื่องใหญ่ */ --heading: #172033; /* หัวข้อย่อย */ --brand-ink: #1e293b; /* ชื่อร้านบนแถบบน */ --ink: #222222; /* ตัวอักษรทั่วไป */ --nav-ink: #1a1a1a; /* เมนูชั้นบนสุด (#333 คือเมนูย่อย คนละตัว) */ --muted: #8a8a8a; /* ท้ายหน้า ข้อความรอง */ --line: #E2E5EA; /* เส้นขอบการ์ด */ --bar-line: #f0ede7; /* เส้นใต้แถบบน จางกว่าเส้นการ์ด */ --pill-line: #afc8f7; /* ขอบเม็ดยาบนหน้าวิธีสั่งซื้อ */ /* เว็บร้านใช้สีอุ่นคนละเฉดกันเล็กน้อยในแต่ละที่ ต่างกัน 1 หน่วยจนตามองไม่ออก แต่แยกไว้เพื่อให้รู้ว่าแต่ละค่ามาจากชิ้นไหน เวลาเว็บร้านเปลี่ยนจะได้ตามถูกตัว */ --cream: #faf8f3; /* แถบหัวเรื่อง — วัดจากหน้า "วิธีสั่งซื้อ" */ --cream-foot: #faf8f4; /* ท้ายหน้า */ --tint: #f0f5fa; --white: #ffffff; --amber-bg: #fff7e6; --amber-line: #f0c36d; --amber-ink: #7a5300; --green-bg: #eaf6ee; --green-line: #8fcba3; --green-ink: #1f6b3a; --blue-bg: #eaf1fc; --blue-line: #9dbbec; --blue-ink: #1d4ed8; --grey-bg: #f3f4f6; --grey-line: #cbd0d8; --grey-ink: #475569; /* ธีม Astra ของร้านใส่เงานี้ให้ "ทุกปุ่มและทุกช่องกรอก" เท่ากันหมด (button,.ast-button,.button,input[type=submit],input[type=text],select,textarea) จางมากจนแทบไม่เห็น ซึ่งเป็นสิ่งที่ถูกแล้ว — ปุ่มไหนในหน้านี้มีเงาเข้มกว่านี้ จะเด้งออกมาจากทั้งหน้าทันที จึงต้องใช้ตัวแปรตัวเดียวกันให้หมด ห้ามใส่ค่าเอง */ --btn-shadow: 0 1px 2px rgba(0, 0, 0, .05); --bar-h: 85px; /* ความสูงแถบบนของเว็บร้าน */ --bar-max: 1240px; /* ความกว้างในแถบบน */ /* เว็บร้านใช้ 940px กับหน้าบทความที่เป็นข้อความยาวเต็มความกว้าง แต่หน้านี้เป็นรายการให้เลือกกับปุ่มกด ไม่ใช่บทความ กว้างขนาดนั้นแล้วสายตาต้องกวาดไกลเกินไปกว่าจะเจอปุ่ม จึงแคบลงมา */ --page-max: 720px; } * { box-sizing: border-box; } body { margin: 0; background: var(--white); color: var(--ink); font-family: "Noto Sans Thai", sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: var(--primary); } /* ---------- แถบบน ---------- */ .topbar { height: var(--bar-h); background: var(--white); display: flex; align-items: center; /* เส้นใต้บางๆ มีจริงบนเว็บร้าน แต่อยู่ที่ชั้นใน .main-header-bar วัดจากชั้นนอกเลยไม่เห็น ต้องไปอ่านจาก CSS ของธีมถึงเจอ */ border-bottom: 1px solid var(--bar-line); } .topbar-in { max-width: var(--bar-max); width: 100%; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 16px; } .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; } .brand img { width: 40px; height: 40px; border-radius: 50%; display: block; } .brand span { /* ชื่อร้านใช้ Lora ไม่ใช่ Noto Sans Thai — เป็นจุดที่สังเกตง่ายที่สุดถ้าลอกผิด */ font-family: Lora, serif; font-size: 24px; font-weight: 700; color: var(--brand-ink); white-space: nowrap; } .nav { margin-left: auto; display: flex; align-items: center; gap: 26px; } .nav a { font-size: 14px; font-weight: 500; color: var(--nav-ink); text-decoration: none; white-space: nowrap; padding: 10px 0; } .nav a:hover { color: var(--primary); } /* ---------- แถบหัวเรื่อง ---------- */ .hero { background: var(--cream); padding: 54px 20px 48px; text-align: center; } .hero h1 { margin: 0 0 10px; font-size: 40px; font-weight: 700; color: var(--primary-ink); line-height: 1.3; } .hero p { margin: 0; color: var(--ink); font-size: 17px; } /* ---------- เนื้อหา ---------- */ .wrap { max-width: var(--page-max); margin: 0 auto; padding: 44px 20px 72px; } h2 { font-size: 20px; font-weight: 700; color: var(--heading); margin: 36px 0 14px; } h2:first-child { margin-top: 0; } h2.plain { margin-top: 0; } .who { background: var(--tint); border-radius: 8px; padding: 13px 18px; font-size: 15px; margin-bottom: 30px; word-break: break-all; } .who b { color: var(--ink); font-weight: 600; } .who a { font-weight: 600; margin-left: 8px; white-space: nowrap; } .card { border: 1px solid var(--line); border-radius: 10px; padding: 26px; background: var(--white); } .card p { margin: 0 0 14px; } .card p b { color: var(--ink); font-weight: 600; } .card p:last-of-type { margin-bottom: 0; } /* ปุ่มเข้าสู่ระบบ — ทำตามหน้าตามาตรฐานของ Google (พื้นขาว ขอบเทา โลโก้ซ้าย) ซึ่งเป็นแบบที่คนคุ้นตาและดูน่าเชื่อถือกว่าปุ่มสีของเราเอง ที่ไม่ใช้ปุ่มสำเร็จรูปของ Google เพราะพอผู้ใช้เคยล็อกอินแล้ว มันจะเปลี่ยน เป็นปุ่มโชว์ชื่อกับอีเมลพร้อมลูกศรเอง ซึ่งสั่งไม่ให้เปลี่ยนไม่ได้ ทำเองจึงได้หน้าตาคงที่ทุกครั้ง และยังเป็นภาษาไทยให้เข้ากับทั้งหน้า **เงาใช้ของเว็บร้าน ไม่ใช่ของ Google** — ตอนแรกใส่เงาตอน hover ตามสเปกของ Google (rgba(60,64,67,.3) ซ้อนสองชั้น) ซึ่งเข้มจนดูเป็นเงาดำ ผิดจากทั้งหน้าที่เหลือ เพราะธีม Astra ของร้านใส่เงาจางมากให้ทุกปุ่มและทุกช่องกรอกเท่ากันหมด (ดู --btn-shadow) หน้าตาปุ่มยังเป็นแบบ Google อยู่ แค่เงาตามบ้านเรา */ .signin { display: inline-flex; align-items: center; gap: 12px; margin: 22px 0 4px; height: 46px; padding: 0 22px; background: var(--white); color: #1f1f1f; border: 1px solid #dadce0; border-radius: 4px; box-shadow: var(--btn-shadow); font-size: 16px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s; } .signin:hover { background: #f8f9fa; border-color: #d2d5d9; } .signin svg { width: 20px; height: 20px; flex: 0 0 auto; } /* ฟอร์มผูกอีเมล — ช่องกรอกกับปุ่มอยู่บรรทัดเดียวบนจอกว้าง ซ้อนกันบนมือถือ */ .linkform { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; } .linkform input { flex: 1 1 240px; height: 46px; padding: 0 14px; font-family: inherit; font-size: 16px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--btn-shadow); /* ธีมใส่เงาเดียวกันนี้ให้ช่องกรอกด้วย ไม่ใช่เฉพาะปุ่ม */ } .linkform input:focus { outline: none; border-color: var(--primary); } .linkform .cta { flex: 0 0 auto; margin: 0; height: 46px; line-height: 22px; } @media (max-width: 544px) { .linkform .cta { flex: 1 1 100%; } } .warn { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink); border-radius: 8px; padding: 12px 16px; font-size: 15px; margin: 16px 0; } /* ---------- การ์ดคำสั่งซื้อ ---------- */ .order { border: 1px solid var(--line); border-radius: 10px; padding: 20px 20px 18px; margin-bottom: 16px; background: var(--white); } .order-head { font-weight: 600; color: var(--heading); font-size: 16px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); } /* บรรทัดรองในหัวการ์ด — บอกว่าใบนี้ยุบมาจากการส่งไฟล์หลายครั้ง ตัวเล็กและสีจางกว่าหัว เพราะเป็นคำอธิบาย ไม่ใช่หัวข้อ */ .order-times { display: block; margin-top: 4px; font-weight: 400; font-size: 13px; color: var(--muted); } .order-item { display: flex; align-items: flex-start; gap: 10px; padding: 3px 0; } .order-item .tick { color: var(--primary); font-weight: 700; flex: 0 0 auto; } .order .cta { margin-top: 18px; } /* ข้อความบอกว่าคำสั่งซื้อใบนี้ยื่นไปแล้ว — อยู่เหนือปุ่มเสมอ คนที่กำลังจะกดยื่นซ้ำต้องอ่านเจอก่อนมือถึงปุ่ม */ .claimed { margin-top: 16px; padding: 11px 14px; border-radius: 6px; background: var(--tint); font-size: 15px; line-height: 1.6; /* ข้อความบางแบบมาเป็นหลายบรรทัด (ยื่นไปแล้ว / ยังยื่นได้ / ให้ทำอะไรต่อ) ต้องคงบรรทัดไว้ ไม่งั้นสามเรื่องจะไหลต่อกันเป็นพืดอ่านไม่ออก pre-line ไม่ใช่ pre เพราะยังต้องตัดบรรทัดเองเมื่อจอแคบ */ white-space: pre-line; } /* ปุ่มลอกจากปุ่ม "เลือกดูหนังสือ" บนหน้าแรกของเว็บร้าน คลาสนี้ใช้กับทั้ง และ