/* ===========================================================
   ธีม Dr.master — LOCK CAP x REDU-SHOT
   ทับสีและการจัดตัวอักษรของ lp.css โดยไม่แก้ไฟล์เดิม
   สีทั้งหมดดูดมาจากอาร์ตเวิร์กจริง เวลาเลื่อนผ่านจะไม่รู้สึกว่าคนละเว็บ
   =========================================================== */

:root {
  /* สีหลักจากกล่อง LOCK CAP (ลูกพลับ) */
  --dm-orange:      #E05B22;
  --dm-orange-dk:   #C04615;
  --dm-orange-soft: #F7A072;

  /* สีจากขวด REDU-SHOT (มะนาว–ยูซุ) */
  --dm-lime:        #C3D12F;
  --dm-lime-dk:     #8C9A16;
  --dm-lime-soft:   #F3F7D4;

  /* พื้นและตัวอักษร โทนครีมอุ่นให้เข้ากับอาร์ตเวิร์ก */
  --dm-cream:       #FDF4EA;
  --dm-card:        #FFFCF8;
  --dm-cocoa:       #3E2316;
  --dm-cocoa-soft:  #8A6B57;
  --dm-hair:        #EADACB;

  /* ทับตัวแปรเดิมของ lp.css */
  --green:      var(--dm-orange);
  --green-dark: var(--dm-orange-dk);
  --orange:     var(--dm-orange);
  --orange-dk:  var(--dm-orange-dk);
  --red:        #C8102E;
  --tel:        #C8102E;
  --ink:        var(--dm-cocoa);
  --ink-soft:   var(--dm-cocoa-soft);
  --hair:       var(--dm-hair);
  --bg:         var(--dm-cream);
  --card:       var(--dm-card);
}

/* ---------- ตัวอักษร ----------
   เปลี่ยนจาก Kanit เป็น Anuphan ให้ตรงกับหัวเรื่องในอาร์ตเวิร์ก
   ซึ่งเป็นทรงกลมมนกว่า อ่านยาวสบายตากว่าในขนาดตัวเล็ก */
body,
input, select, textarea, button {
  font-family: Anuphan, "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
}

body { background: #EFE4D8; }
.lp { background: var(--dm-cream); }

/* ---------- แถบบนสุด ---------- */
.topbar {
  background: var(--dm-cocoa);
  color: #FFF3E6;
  letter-spacing: .01em;
}
.topbar-dot { background: var(--dm-lime); }

/* ---------- ช่วงข้อความคั่นระหว่างรูป ----------
   หัวใจของงานนี้ ลูกค้าเลื่อนเร็ว ข้อความต้องอ่านจบในสายตาเดียว
   จึงบีบความกว้างบรรทัด เพิ่มช่องไฟ และทำหัวข้อให้ต่างจากเนื้อหาชัดๆ */
.say {
  padding: 40px 24px 44px;
}
.say > * {
  max-width: 30em;          /* บรรทัดยาวเกิน ~30em สายตาหาบรรทัดถัดไปไม่เจอ */
  margin-inline: auto;
}

/* ขีดสั้นๆ เหนือหัวข้อ ช่วยบอกว่าเริ่มเรื่องใหม่ */
.say::before {
  content: "";
  display: block;
  width: 46px; height: 4px;
  margin: 0 auto 20px;
  border-radius: 99px;
  background: var(--dm-orange);
  opacity: .85;
}

.say-lead {
  /* ต้องเป็น auto ซ้ายขวา ไม่งั้นจะทับ margin-inline ของ .say > * แล้วข้อความเบี้ยวซ้าย */
  margin: 0 auto 14px;
  max-width: 22em;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.005em;
  text-wrap: balance;        /* กันหัวข้อตกบรรทัดเหลือคำเดียว */
}
.say-body {
  margin: 0 auto;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 1.78;
  text-wrap: pretty;
}
.say .hl { font-weight: 700; }

/* ---- โทน 1 · ครีมสะอาด — ใช้ตอนให้ข้อมูล ---- */
.say-plain { background: var(--dm-card); }
.say-plain::before { background: var(--dm-orange); }
.say-plain .say-lead { color: var(--dm-cocoa); }
.say-plain .say-body, .say-plain .say-list li { color: #6B4D3C; }
.say-plain .hl { color: var(--dm-orange-dk); }
.say-plain .say-list li::before { color: var(--dm-orange); }
.say-plain .say-note { background: var(--dm-lime-soft); border: 1px solid #DCE59B; color: #5C6410; }

/* ---- โทน 2 · ส้มอิฐเข้ม — ใช้ตอนขยี้ปัญหา ----
   เปลี่ยนจากแดงเลือดหมูเดิมมาเป็นส้มไหม้ ให้เป็นวงศ์เดียวกับลูกพลับบนกล่อง */
.say-alert {
  background: linear-gradient(160deg, #B8431A 0%, #8A2D0E 100%);
  color: #fff;
}
.say-alert::before { background: var(--dm-lime); opacity: 1; }
.say-alert .say-lead { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.say-alert .say-body, .say-alert .say-list li { color: #FFE6D5; }
.say-alert .hl { color: #E9F26B; }          /* เหลืองมะนาวบนส้มไหม้ อ่านง่ายที่สุดในชุดนี้ */
.say-alert .say-list li::before { color: #E9F26B; }
.say-alert .say-note { background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .22); color: #FFE6D5; }

/* ---- โทน 3 · โกโก้เข้มหัวข้อส้มทอง — ใช้ตอนพูดถึงตัวสินค้า ---- */
.say-gold {
  background: linear-gradient(160deg, #42230F 0%, #22120A 100%);
  color: #fff;
}
.say-gold::before { background: var(--dm-orange-soft); opacity: 1; }
.say-gold .say-lead {
  background: linear-gradient(95deg, #FFC48A 0%, #F08A3C 52%, #FFC48A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #F08A3C;
}
.say-gold .say-body, .say-gold .say-list li { color: #F2DFCE; }
.say-gold .hl { color: #FFC48A; }
.say-gold .say-list li::before { color: var(--dm-orange-soft); }
.say-gold .say-note { background: rgba(0, 0, 0, .26); border: 1px solid rgba(240, 138, 60, .35); color: #F2DFCE; }

/* ---- โทน 4 · เขียวมะนาวอ่อน — ใช้ตอนให้ความมั่นใจ ----
   ดึงสีมาจากขวด REDU-SHOT ให้คนจำได้ว่าเป็นฝั่งไหนของสินค้า */
.say-calm { background: var(--dm-lime-soft); }
.say-calm::before { background: var(--dm-lime-dk); }
.say-calm .say-lead { color: #4B5407; }
.say-calm .say-body, .say-calm .say-list li { color: #5A5F33; }
.say-calm .hl { color: var(--dm-lime-dk); }
.say-calm .say-list li::before { color: var(--dm-lime-dk); }
.say-calm .say-note { background: #fff; border: 1px solid #DCE59B; color: #5A5F33; }

/* ---------- คลิปแนวตั้ง (YouTube Shorts) ----------
   .vid ปกติถูกบังคับเป็น 16:9 ถ้าเอาคลิปแนวตั้งมาใส่จะโดนครอปเหลือแค่แถบกลาง
   จึงทำคลาสแยกไว้ และบีบความกว้างไม่ให้สูงจนล้นจอมือถือ */
.vid-short { max-width: 300px; margin-inline: auto; }
.vid-short .vid-btn,
.vid-short .vid-frame { aspect-ratio: 9 / 16; }
.vid-short .vid-title { text-align: center; }

@media (min-width: 768px) {
  .vid-short { max-width: 340px; }
  .vids:has(.vid-short:only-child) { grid-template-columns: 1fr; }
}

/* ---------- หัวข้อหมวด ---------- */
.sec-title { color: var(--dm-cocoa); letter-spacing: -.01em; }
.sec-title span { color: var(--dm-cocoa-soft); }

/* ---------- การ์ดแพ็ก ---------- */
.pack { background: var(--dm-card); border-color: var(--dm-hair); }
.pack-title { color: var(--dm-cocoa); }
.pack-now { color: var(--dm-orange-dk); font-weight: 700; }
.pack-add { background: var(--dm-orange); }
.pack-add:active { background: var(--dm-orange-dk); }
.pack.is-on, .pack[data-on="1"] { border-color: var(--dm-orange); box-shadow: 0 0 0 2px rgba(224, 91, 34, .18); }

/* ---------- ปุ่มลอยล่างจอ ---------- */
.sticky { background: rgba(62, 35, 22, .96); border-top: 1px solid rgba(255, 255, 255, .1); }
.sticky .s-buy { background: var(--dm-orange); }
.sticky .s-buy:active { background: var(--dm-orange-dk); }

/* ปุ่มสั่งซื้อเป็นกริดสองคอลัมน์ที่ความกว้าง auto ซึ่งจะยืดกินพื้นที่ว่างทั้งหมด
   ไอคอนเลยไปอยู่กึ่งกลางครึ่งซ้าย ตัวหนังสืออยู่กึ่งกลางครึ่งขวา ดูเหมือนคำไม่อยู่กลางปุ่ม
   สั่ง justify-content: center ให้คอลัมน์หดชิดกันแล้วยกมาไว้กลางปุ่มทั้งก้อน */
.s-buy { justify-content: center; }

/* ---------- ฟอร์มและปุ่มยืนยัน ---------- */
#submitBtn, .btn-primary { background: var(--dm-orange); }
#submitBtn:active, .btn-primary:active { background: var(--dm-orange-dk); }
input:focus, select:focus, textarea:focus {
  border-color: var(--dm-orange) !important;
  box-shadow: 0 0 0 3px rgba(224, 91, 34, .15) !important;
}

/* ---------- คำถามที่พบบ่อย ---------- */
.faq-q { color: var(--dm-cocoa); }
.faq-item { border-color: var(--dm-hair); }

/* ---------- ท้ายหน้า ---------- */
.foot { background: var(--dm-cocoa); color: #E8D5C5; }
.foot a { color: var(--dm-orange-soft); }

/* ---------- จอใหญ่ ---------- */
@media (min-width: 768px) {
  .say { padding: 56px 32px 60px; }
  .say::before { margin-bottom: 24px; }
  .say-lead { font-size: 34px; line-height: 1.28; }
  .say-body { font-size: 19px; line-height: 1.8; }
}