/* สไตล์เว็บสาธารณะ VAVAGEMS — ฐานมาจาก mockup ที่เจ้าของอนุมัติ 2026-08-04 (docs/DESIGN-DIRECTION.md) · ปรับโทนตามแบบ dealuxeglobal.com ที่เจ้าของชี้ 2026-08-12: พื้นงาช้างอุ่นแทนขาวล้วน · หัว/ท้ายเว็บเป็นแถบสีเข้มทึบ · ปุ่มหลักสีทองตัวหนังสือเข้ม — โดยเปลี่ยนแดงเข้มของต้นแบบเป็นกรมท่าของเรา (แดง #5B0404 → กรมท่า #101E38) · ทอง/เขียว LINE คงเดิม */ /* เจ้าของลองพื้นงาช้างอุ่นแล้วตัดสินว่าไม่เข้า (2026-08-12) → พื้นกลับเป็นขาวแบบเดิม แต่**คงหัวเว็บกรมท่าเข้ม + ปุ่มทอง** ไว้ — สองอย่างนั้นเจ้าของไม่ได้ติ */ :root{ --bg:#FDFDFC; --panel:#FFFFFF; --ink:#2A3441; --muted:#8A94A3; --navy:#1C3156; --navy-deep:#101E38; --gold:#A8894A; --gold-line:#D6C49A; /* ⛔⛔ **ทองสำหรับพื้นปุ่มที่ใช้ตัวหนังสือสีขาวเท่านั้น** (เจ้าของเคาะ 2026-08-31) ขาวบนทองปกติ #A8894A วัดได้ 3.31 ต่ำกว่าเกณฑ์ 4.5 · บนตัวนี้ได้ 4.57 คงเฉดเดิมเป๊ะ (hue 40° · ความอิ่มสี 39%) เข้มลง 8% เท่านั้น ตาแทบไม่เห็นต่าง ⛔ **ห้ามเอาไปใช้กับปุ่มที่ตัวหนังสือเป็นกรมท่าเข้ม** ของพวกนั้นบนทองเดิม ได้ 5.01 อยู่แล้ว แต่บนตัวนี้จะเหลือ 3.63 = ทำของที่ดีอยู่แล้วพัง ⛔ ห้ามใช้เป็นสีเส้นขอบหรือสีตัวอักษร ใช้เป็น **พื้น** อย่างเดียว มีด่านเฝ้าที่ tools/check_gold_button.py */ --gold-btn:#8C723E; --warm:#F7F7F5; /* พื้นช่วงสลับ (โทนขาว) */ --line:#ECEDEF; --linegreen:#06C755; --ivory:#F3EDE2; /* ตัวหนังสือบนพื้นเข้ม */ } *{box-sizing:border-box;margin:0;padding:0} /* ขนาดตัวหนังสือปรับตามแนว navratan.com (2026-08-10 เจ้าของขอ): body 16px บรรทัดกระชับ 1.7 ให้อ่านง่ายและดู "จัดวางมาแล้ว" — คงหัวข้อ Trirong serif + น้ำเงิน/ทองเป็นเอกลักษณ์เดิม */ body{background:var(--bg);color:var(--ink);font-family:'Sarabun',sans-serif; font-weight:400;line-height:1.7;font-size:16px} h1,h2,h3,.serif{font-family:'Trirong',serif} img,video{max-width:100%} .eyebrow{font-size:12px;letter-spacing:3.5px;color:var(--gold);text-transform:uppercase;font-weight:500} /* ---------- แถบบนสุด ---------- */ /* แถบบนสุดถูกตัดออกทั้งแถบ 2026-08-13 (เจ้าของสั่ง) — เหตุผลและของที่ย้ายไปไหน จดไว้ตรงจุดที่เคยวางแถบใน base.html */ footer.site p a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(214,196,154,.45)} footer.site p a:hover{color:var(--navy)} /* ---------- หัวเว็บ ---------- */ /* หัวเว็บไม่มีสีพื้นของตัวเอง (เจ้าของสั่ง 2026-08-13) — ใช้พื้นเดียวกับทั้งหน้า แยกจากเนื้อหาด้วยเส้นทองหม่นบาง 1px เส้นเดียว ไม่ตีกรอบสายตา ⛔ เปลี่ยนพื้นเป็นสว่างแล้วทุกชิ้นในหัวเว็บต้องพลิกสีตาม (ชื่อร้าน ชื่อรอง เมนู ลิงก์เล็ก กรอบภาษา ไอคอนลูกโลก ขีดสามขีด) — กฎอยู่ใน base.html ระยะ 34/12 มาจากรอบปรับ white space: โลโก้→เมนู 28px · เมนู→เส้นขอบ 14px */ /* ⛔ ขอบซ้าย-ขวาเป็น 0 โดยตั้งใจ — ให้ .hrow กับ nav คุมขอบในเอง (ค่าเดียวกับ .wrap) ถ้าใส่ padding ข้างที่นี่ด้วย ตราโล่มุมซ้ายจะเยื้องจากขอบรูปสไลด์เท่ากับค่านั้น (เจอจริง 2026-08-14 เยื้อง 20px พอดีกับ padding เดิม) */ header.site{background:var(--bg);border-bottom:1px solid rgba(212,175,55,.3); padding:34px 0 12px;text-align:center} .brand{font-family:'Trirong',serif;font-size:32px;font-weight:500;letter-spacing:10px; color:var(--ivory);text-indent:10px} .brand a{color:inherit;text-decoration:none} .brand .gem{color:var(--gold);font-size:20px;vertical-align:middle} .brand-sub{font-size:10.5px;letter-spacing:7px;color:var(--gold);margin-top:4px;text-indent:7px} .brand-rule{width:56px;height:1px;background:var(--gold-line);margin:14px auto 0} nav.site{display:flex;justify-content:center;gap:34px;margin-top:22px;flex-wrap:wrap} nav.site a{font-size:16px;letter-spacing:.4px;color:var(--ink);font-weight:500;text-decoration:none; padding:12px 2px;border-bottom:2px solid transparent} nav.site a:hover,nav.site a.on{border-color:var(--gold);color:var(--navy)} nav.site a.line-mini{color:var(--linegreen);font-weight:600} /* จอใหญ่ต้องไม่บีบกลาง (เจ้าของทัก 2026-08-09) — ยืดตามจอ กว้างสุด 1440px ขอบข้างขยายตามจอด้วย clamp กันเนื้อหาไปติดขอบบนจอกว้าง */ .wrap{max-width:1440px;margin:0 auto;padding:0 clamp(24px,3vw,48px)} /* หน้าที่เนื้อหามีความกว้างตายตัว (หน้าสินค้า) — ปล่อยเต็ม 1440 แล้วเนื้อหากองซ้าย */ .wrap.narrow{max-width:1240px} .crumb{font-size:12.5px;color:var(--muted);padding:22px 0 26px;letter-spacing:.3px} .crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--navy)} /* ---------- หน้าแรก ---------- */ .hero{text-align:center;padding:66px 0 46px} .hero h1{font-size:32px;font-weight:500;color:var(--navy);margin:14px 0 14px} .hero p{color:#59617a;max-width:56ch;margin:0 auto} /* ระยะระหว่างส่วนเป็นค่ายืดตามจอ (เจ้าของทัก 2026-08-14 ว่าช่องว่างบนมือถือเยอะเกิน) เดิมตายตัว 48/26 ทุกจอ — บนเดสก์ท็อปพอดี แต่บนมือถือกลายเป็นแถบขาวใหญ่สองแถบ เพราะเนื้อหารอบ ๆ เล็กลงหมดแต่ช่องว่างเท่าเดิม ⛔ ระยะ "เหนือหัวข้อ" ต้องมากกว่า "ใต้หัวข้อ" เสมอ หัวข้อเป็นของสิ่งที่อยู่ใต้มัน ถ้าเท่ากันจะอ่านไม่ออกว่าหัวข้อคุมส่วนไหน */ .section-head{text-align:center;margin:clamp(26px,4vw,52px) 0 clamp(14px,2vw,26px)} .section-head h2{font-size:26px;font-weight:500;color:var(--navy)} .cats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0 8px} .cats a{border:1px solid var(--line);padding:8px 16px;border-radius:20px;font-size:14px; color:var(--ink);text-decoration:none;background:var(--panel)} .cats a:hover,.cats a.on{border-color:var(--gold-line);color:var(--navy)} .cats a small{color:var(--muted)} /* ---------- กริดสินค้า ---------- */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:8px 0 30px} @media(min-width:1280px){.grid{grid-template-columns:repeat(5,1fr)}} @media(max-width:920px){.grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:680px){.grid{grid-template-columns:repeat(2,1fr)}} .card{background:var(--panel);border:1px solid var(--line);text-decoration:none;color:var(--ink); display:flex;flex-direction:column} .card:hover{border-color:var(--gold-line)} .card .ph{position:relative;aspect-ratio:1;background:#F4F5F3;overflow:hidden} .card .ph img{width:100%;height:100%;object-fit:cover;display:block} .card .vid{position:absolute;right:8px;top:8px;background:rgba(16,30,56,.78);color:#fff; font-size:11px;padding:2px 9px;border-radius:10px;letter-spacing:.5px} .card .body{padding:13px 15px 15px} .card .name{font-size:14.5px;line-height:1.5;height:3em;overflow:hidden;color:var(--ink)} /* กะรัตเด่นไม่แพ้ชื่อพลอย + SKU ต่อท้ายบรรทัดเดียว ประหยัดพื้นที่ (เจ้าของสั่ง 2026-08-10) */ .card .cmeta{margin-top:6px;line-height:1.4} .card .cmeta .carat{font-size:15px;font-weight:600;color:var(--ink)} .card .cmeta .sku{font-size:12.5px;color:var(--muted);margin-left:8px} /* ป้ายรายละเอียดบนการ์ด — "ไม่เผา" กับ "สีพิเศษตามใบเซอร์" (เจ้าของเสนอ 2026-08-24) ⛔ ต้องอ่านออกว่าเป็น "ข้อเท็จจริงของเม็ดนี้" ไม่ใช่ป้ายโปรโมชั่น จึงใช้เส้นขอบบาง พื้นอ่อน ไม่ใช้สีแดง/ส้มแบบป้ายลดราคา ⛔ ไม่จองที่ว่างไว้ตอนไม่มีป้าย (ไม่ใช้ min-height) เพราะเม็ดส่วนใหญ่ไม่มีป้าย ถ้าจองไว้ การ์ดทั้งหน้าจะสูงขึ้นฟรี ๆ */ /* ⛔ วางบน **มุมล่างซ้ายของรูป** ไม่ใช่ในบล็อกข้อความ — เหตุผลอยู่ใน _gemcard.html มุมบนซ้ายเป็นปุ่มหัวใจ มุมบนขวาเป็นป้ายวีดีโอ ล่างซ้ายจึงเป็นที่เดียวที่ว่างจริง */ .card .cbadges{position:absolute;left:8px;bottom:8px;right:8px; display:flex;flex-wrap:wrap;gap:4px;pointer-events:none} /* ⛔ หน้าตาป้ายเป็นของกลาง — ใช้ทั้งการ์ดหน้ารายการ (.card) และแถว 'เพิ่งเข้ามาใหม่' หน้าแรก (.hev-badges) · แก้ที่นี่ที่เดียวเปลี่ยนทั้งเว็บ ส่วน **ตำแหน่งวาง** แยกกัน เพราะกล่องรูปคนละแบบ */ .cbadge{font-size:11.5px;line-height:1.65;padding:1px 8px;border-radius:11px; background:rgba(255,255,255,.93);white-space:nowrap; border:1px solid rgba(255,255,255,.5); box-shadow:0 1px 3px rgba(16,30,56,.18)} /* ไม่เผา = ข้อมูลที่ลูกค้าสายพลอยธรรมชาติมองหาก่อนอย่างอื่น ให้เด่นกว่าอีกใบเล็กน้อย */ .cb-unheated{color:#24603C;font-weight:600} /* สีพิเศษ = คำของแลป ไม่ใช่ของร้าน → ใช้สีทองแบรนด์ให้รู้ว่าเป็นของพิเศษจริง */ .cb-special_color{color:#8A6D2F;font-weight:600} /* มีใบเซอร์ = บอกว่า "มีเอกสาร" ไม่ได้บอกว่าเอกสารเขียนว่าอะไร จึงเบากว่าอีกสองใบโดยตั้งใจ ไม่แย่งสายตาป้ายที่บอกเนื้อหาจริง */ .cb-cert{color:var(--navy);font-weight:500} /* ไฮไลต์: แหล่งที่มา (เขียวมรกต) · วาไรตี้ Golden Star (ทองเข้ม) — เจ้าของสั่ง 9 ก.ย. */ .cb-origin{color:#0e7a56;font-weight:600} .cb-star{color:#9a7513;font-weight:600} /* ป้ายใบเซอร์: เดสก์ท็อป = ป้ายแยกใบ (.cbdg-d) · มือถือ = ยุบเข้าไปต่อท้ายป้ายสี (.cbdg-m) เจ้าของเลือก 2026-09-09 — จอ ≤680px การ์ดเหลือ 2 คอลัมน์ ป้ายสองใบแยกจะตกบรรทัด ⛔ เม็ดที่มีสีพิเศษต้องเห็น "มีใบเซอร์" เสมอ (เจ้าของสั่ง 24 ส.ค.) ห้ามยุบซ่อน */ .cbdg-m{display:none} @media(max-width:680px){.cbdg-d{display:none}.cbdg-m{display:inline}} @media(max-width:520px){.cbadge{font-size:11px;padding:1px 7px}} /* ขนาด มม. + ป้ายใบรายงาน — ขึ้นเฉพาะหน้าที่ส่งค่า wd_mm มา (ตอนนี้คือหน้าแต่งงาน) ⛔ ป้ายใบรายงานเป็นของ "รายเม็ด" ทั้งร้านมีจริงแค่ 508 จาก 4,698 เม็ด ห้ามย้ายไปเขียนเป็นข้อความประจำหน้าไม่ว่ากรณีใด */ .card .cmm{margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.5} .card .cmm .ccert{color:var(--gold-deep,#93773E)} .card .price{font-family:'Trirong',serif;font-size:19px;font-weight:600;color:var(--navy);margin-top:7px} .card .price .was{font-family:'Sarabun',sans-serif;font-size:12.5px;font-weight:400; color:var(--muted);text-decoration:line-through;margin-left:8px} /* ---------- ค้นหา + แบ่งหน้า ---------- */ .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:6px 0 20px} .toolbar input[type=text]{flex:1;min-width:220px;border:1px solid var(--line);padding:11px 14px; font-size:15px;font-family:inherit;background:var(--panel)} /* ⛔ ต้อง :not(.advlink) — ปุ่ม "ค้นหาแบบละเอียด" ในหน้า /gems เป็น