/* สไตล์ร่วมของเว็บ · โทน "ขาว · ส้มเข้ม · ดำ" แบบแกลเลอรีสินค้า
   ขาว/เทาอ่อน = พื้นหลัก · ดำ = ตัวหนังสือ ปุ่ม และส่วนพื้นเข้ม · ส้มเข้ม = จุดสำคัญ (ราคา ป้าย หมายเลข) ใช้น้อยๆ ให้เด่น */
:root {
  --bg: #FFFFFF;
  --soft: #F3F2EF;        /* พื้นเทาอุ่นอ่อน */
  --soft-2: #E9E7E3;
  --paper: #FFFFFF;
  --line: #E2DFDA;
  --ink: #111111;         /* ตัวหนังสือหลัก */
  --ink-2: #2C2C2C;
  --mute: #63605B;        /* ตัวหนังสือรอง (คอนทราสต์ > 5:1 บนพื้นขาวและเทาอ่อน) */
  --accent: #D4470F;      /* ส้มเข้ม (คอนทราสต์ 5.9:1 กับขาว) */
  --accent-2: #A9360A;
  --accent-3: #F06A2E;    /* ส้มสว่าง ใช้บนพื้นดำ */
  --accent-soft: #FCEBE2;
  --night: #111111;       /* ส่วนพื้นดำ */
  --night-2: #1D1D1D;
  --night-line: #343434;
  --on-night: #F5F4F2;
  --on-night-mute: #A8A49E;
  --danger: #B42318;
  --danger-soft: #FDECEA;
  /* ชื่อเดิม (หน้าอื่นยังเรียกใช้) ชี้มาที่สีชุดใหม่ */
  --green: var(--accent);
  --green-2: var(--accent-2);
  --green-3: var(--accent-3);
  --mint: var(--soft);
  --mint-2: var(--soft-2);
  --gold: var(--accent);
  --gold-2: #F9CDB6;
  --gold-soft: var(--accent-soft);
  --gold-ink: var(--accent-2);
  --f-th: "IBM Plex Sans Thai", "Noto Sans Thai", "Leelawadee UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --r-lg: 30px;
  --r-md: 18px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 40px -20px rgba(0, 0, 0, .22);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-th); font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; line-height: 1.22; text-wrap: balance; font-weight: 700; letter-spacing: -.015em; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
code, kbd, pre { font-family: var(--f-mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 28px; }
.hl { background: linear-gradient(transparent 64%, var(--gold-2) 64%); padding: 0 2px; }
.green, .accent { color: var(--accent); }
.label { display: inline-block; font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; color: var(--mute); }
.tag { display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px var(--f-th); padding: 3px 13px; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); background: transparent; white-space: nowrap; }
.tag.fill { background: var(--ink); color: #fff; }
.tag.hot { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- ปุ่ม: แคปซูลดำ + วงกลมลูกศร ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font: 600 15.5px var(--f-th);
  padding: 11px 22px; border-radius: 999px; border: 1.5px solid var(--ink); cursor: pointer;
  background: var(--ink); color: #fff; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); background: #000; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn .arrow { width: 28px; height: 28px; margin: -4px -12px -4px 2px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; flex: none; }
.btn .arrow svg { width: 15px; height: 15px; }
.btn-accent, .btn-gold { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover, .btn-gold:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-accent .arrow, .btn-gold .arrow { color: var(--accent); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-line .arrow { background: var(--ink); color: #fff; }
.btn-ghost-light { background: transparent; color: var(--on-night); border-color: var(--night-line); }
.btn-ghost-light:hover { background: transparent; border-color: var(--on-night); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-lg { font-size: 16.5px; padding: 14px 26px; }
.btn-lg .arrow { width: 32px; height: 32px; margin-right: -14px; }

/* ---------- เมนูบน ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(255, 255, 255, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 11px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 15.5px; line-height: 1.2; min-width: 0; letter-spacing: -.01em; }
.logo-mark { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; white-space: nowrap; letter-spacing: -.02em; font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; line-height: 1; }
.logo-mark b { color: var(--accent-3); }
.logo small { display: block; font-size: 12px; font-weight: 500; color: var(--mute); }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 7px 12px; border-radius: 999px; color: var(--ink-2); white-space: nowrap; }
.nav-links a:hover { background: var(--soft); color: var(--ink); }
.nav-links .icon { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; }
.nav-links .icon svg { width: 20px; height: 20px; }
.nav-links .btn { padding: 7px 16px; font-size: 14px; color: #fff; }
.nav-links .btn:hover { background: #000; color: #fff; }

/* ---------- footer ---------- */
.foot { background: var(--night); color: var(--on-night); padding-block: 64px 36px; }
.foot .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: end; }
.foot .big { font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; }
.foot .big span { color: var(--accent-3); }
.foot .who { margin-top: 12px; color: var(--on-night-mute); font-size: 15px; }
.foot-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.foot .btn-gold, .foot .btn-accent { background: #fff; border-color: #fff; color: var(--ink); }
.foot .btn-gold:hover, .foot .btn-accent:hover { background: var(--accent-3); border-color: var(--accent-3); color: #fff; }
.foot .fine { grid-column: 1 / -1; border-top: 1px solid var(--night-line); padding-top: 18px; font-size: 13px; color: var(--on-night-mute); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot .fine a { color: inherit; text-decoration: none; }

@media (max-width: 480px) {
  .hide-xs { display: none; }
}
@media (max-width: 860px) {
  .nav-links a.hide-sm { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .wrap { padding-inline: 16px; }
  .logo small { display: none; }
  .logo { font-size: 15px; white-space: nowrap; }
  .logo > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .nav-links { flex: none; }
  .nav .wrap { gap: 8px; }
  .nav-links a { padding: 7px 8px; font-size: 14px; }
  .steps-bar span { white-space: nowrap; font-size: 12px !important; padding: 3px 8px !important; }
  .steps-bar i { width: 10px !important; }
  .foot .wrap { grid-template-columns: 1fr; }
  .foot-actions { justify-content: flex-start; }
}