/*
 * MPJGOLD5 — reference size 941 × 1672.
 * 1 rem is one design pixel at the original width; the portrait scales
 * proportionally on smaller displays, without rasterizing the editable text.
 * Main copy/prices/icons/logo are separate from the decorative background.
 */
@font-face {
  font-family: GoldThai;
  src: url("assets/fonts/thai-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: GoldThai;
  src: url("assets/fonts/thai-semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: GoldThai;
  src: url("assets/fonts/thai-extrabold.ttf") format("truetype");
  font-weight: 700 900;
  font-display: swap;
}
:root {
  font-size: min(calc(100vw / 941), 1px);
  color-scheme: dark;
  --gold-light: #fff5b6;
  --gold: #ffdf68;
  --cream: #fff3cf;
  --brown: #4d1709;
  --green: #29ed6a;
  --red: #fa6660;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #310300;
  color: var(--cream);
  font: 400 22rem/1.5 GoldThai, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, ul { margin: 0; }
img { display: block; }
ul { padding: 0; list-style: none; }
.gold-display {
  position: relative;
  isolation: isolate;
  width: 941rem;
  height: 1672rem;
  margin-inline: auto;
  background: #760906 url("assets/background.webp") center / 100% 100% no-repeat;
  overflow: hidden;
}
/* Keep generous line boxes: Thai vowels and tone marks must never be clipped. */
.gold-text {
  color: #ffe384;
  background: linear-gradient(180deg, #fffbd1 6%, #fff39b 20%, #ffe96b 48%, #ffce3c 78%, #c87915 93%, #fffac9 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2rem 1rem #5e1d03) drop-shadow(0 1rem 0 #fff0a0);
}
.shop-header { position: absolute; inset: 0 0 auto; height: 449rem; text-align: center; }
.shop-logo { position: absolute; left: 294rem; top: 16rem; width: 355rem; height: 178rem; }
.shop-logo > img { width: 100%; height: 100%; object-fit: contain; }
.logo-lettering {
  position: absolute;
  top: 82rem;
  left: 74rem;
  width: 209rem;
  color: #a80707;
  font: 400 49rem/1.3 Arial, sans-serif;
  letter-spacing: -1rem;
  text-shadow: 0 1rem 0 #fff6a1;
}
.shop-name {
  position: absolute;
  top: 176rem;
  left: 208rem;
  width: 525rem;
  font: 700 74rem/1.1 "Times New Roman", serif;
  letter-spacing: -1.8rem;
}
.shop-name-th {
  position: absolute;
  top: 241rem;
  left: 245rem;
  width: 450rem;
  font-size: 40rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -.5rem;
}
.shop-services {
  position: absolute;
  top: 314rem;
  left: 242rem;
  width: 459rem;
  font-size: 27rem;
  font-weight: 600;
  line-height: 1.6;
  color: #fff0a4;
  white-space: nowrap;
}
.shop-description {
  position: absolute;
  top: 372rem;
  left: 208rem;
  width: 525rem;
  font-size: 22rem;
  font-weight: 600;
  white-space: nowrap;
  color: #fff8e4;
}
.shop-promise {
  position: absolute;
  top: 414rem;
  left: 274rem;
  width: 393rem;
  font-size: 21rem;
  font-weight: 600;
  white-space: nowrap;
  color: #ffe18b;
}
.shop-promise { display: flex; align-items: center; justify-content: center; gap: 11rem; }
.shop-promise img { width: 35rem; height: 18rem; }
.shop-promise img:last-child { transform: scaleX(-1); }
.price-board { position: absolute; top: 452rem; left: 67rem; width: 812rem; height: 486rem; }
.price-title {
  position: absolute;
  top: 8rem;
  left: 114rem;
  width: 570rem;
  text-align: center;
  font-size: 61rem;
  font-weight: 800;
  letter-spacing: -.7rem;
  line-height: 1.5;
  white-space: nowrap;
}
.price-chart-icon { position: absolute; top: 35rem; left: 689rem; width: 55rem; height: 50rem; }
.updated-at { position: absolute; top: 76rem; left: 235rem; width: 340rem; text-align: center; font-size: 27rem; font-weight: 400; white-space: nowrap; }
.market-summary { position: absolute; top: 111rem; left: 41rem; width: 245rem; height: 334rem; }
.price-movement { position: absolute; top: 0; left: 26rem; width: 190rem; height: 84rem; display: flex; align-items: center; justify-content: center; gap: 14rem; color: var(--green); }
.movement-icon { width: 57rem; height: 73rem; filter: drop-shadow(0 2rem 2rem #163c063d); }
.price-movement span { font-size: 82rem; line-height: 1; font-weight: 800; letter-spacing: -2rem; text-shadow: 0 2rem 3rem #154d1560; }
.price-movement[data-direction="down"] { color: var(--red); }
.price-movement[data-direction="down"] .movement-icon { transform: rotate(180deg); filter: hue-rotate(225deg); }
.price-movement[data-direction="unchanged"] .movement-icon { visibility: hidden; }
.today-label { position: absolute; top: 80rem; left: 43rem; width: 160rem; text-align: center; font-size: 27rem; }
.daily-change { position: absolute; top: 111rem; left: 31rem; width: 180rem; text-align: center; font-size: 43rem; line-height: 1.3; font-weight: 800; color: var(--red); }
.spot-block { position: absolute; top: 179rem; left: 18rem; }
.spot-block h3, .currency-block h3 { color: #ffe394; font-size: 23rem; font-weight: 400; line-height: 1.35; }
.spot-block p { color: #fff7ed; font-size: 39rem; line-height: 1.15; font-weight: 600; font-variant-numeric: tabular-nums; }
.currency-block { position: absolute; top: 262rem; left: 18rem; }
.currency-block p { color: #fff7ed; font-size: 34rem; line-height: 1.15; font-weight: 600; font-variant-numeric: tabular-nums; }
.quote { position: absolute; left: 299rem; width: 466rem; height: 166rem; padding: 2rem 16rem; }
.buy-quote { top: 111rem; }
.sell-quote { top: 286rem; height: 158rem; }
.quote h3 { font-size: 33rem; line-height: 1.6; font-weight: 600; color: #fff9ef; }
.quote-value { position: absolute; top: 29rem; left: 15rem; width: 432rem; font-size: 130rem; line-height: 1.15; font-weight: 800; letter-spacing: -3rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-disclaimer { position: absolute; top: 449rem; left: 127rem; width: 569rem; color: #fff6e3; font-size: 15rem; line-height: 1.5; white-space: nowrap; text-align: center; }
.service-grid { position: absolute; top: 957rem; left: 23rem; width: 895rem; height: 154rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 11rem; color: var(--brown); text-align: center; }
.service-item { position: relative; min-width: 0; }
.service-icon { position: absolute; width: 104rem; height: 80rem; left: 50%; top: 10rem; transform: translateX(-50%); object-fit: contain; }
.exchange-service-icon { width: 76rem; height: 76rem; top: 13rem; }
.savings-service-icon { width: 90rem; height: 83rem; top: 6rem; }
.appraisal-service-icon { width: 71rem; height: 76rem; top: 13rem; }
.service-item h2 { position: absolute; top: 85rem; left: 0; width: 100%; font-size: 25rem; font-weight: 800; line-height: 1.6; white-space: nowrap; letter-spacing: -.5rem; }
.service-item p { position: absolute; top: 119rem; left: 0; width: 100%; font-size: 18rem; font-weight: 400; line-height: 1.6; white-space: nowrap; }
.contact-section { position: absolute; top: 1127rem; left: 0; width: 100%; height: 407rem; }
.contact-title { position: absolute; top: 8rem; left: 365rem; width: 494rem; font-size: 38rem; font-weight: 600; line-height: 1.6; letter-spacing: -1.3rem; white-space: nowrap; }
.contact-pill { position: absolute; top: 78rem; left: 359rem; width: 299rem; color: #2b1703; text-align: center; font-size: 21rem; line-height: 1.6; font-weight: 600; white-space: nowrap; }
.contact-benefits { position: absolute; top: 203rem; left: 449rem; width: 220rem; font-size: 17rem; color: #ffebc1; }
.contact-benefits li { display: flex; align-items: center; gap: 12rem; min-height: 40rem; white-space: nowrap; }
.contact-benefits img { width: 31rem; height: 31rem; flex: 0 0 auto; }
.line-card { position: absolute; top: 73rem; left: 676rem; width: 237rem; height: 268rem; }
.line-card h3 { position: absolute; top: 9rem; left: 11rem; width: 216rem; text-align: center; font-size: 18rem; line-height: 1.7; font-weight: 600; color: #fff6d8; white-space: nowrap; }
.line-qr { position: absolute; left: 20rem; top: 53rem; width: 198rem; height: 198rem; overflow: hidden; background: white; border-radius: 4rem; }
.line-qr > img { width: 100%; height: 100%; object-fit: contain; }
.line-qr > .reference-crop { position: absolute; width: 941rem; height: 1672rem; max-width: none; left: -696rem; top: -1253rem; object-fit: fill; }
.trust-footer { position: absolute; top: 1554rem; left: 50rem; width: 704rem; height: 62rem; display: grid; grid-template-columns: 258rem 262rem 184rem; }
.trust-item { display: flex; align-items: flex-start; gap: 14rem; }
.trust-item img { width: 43rem; height: 45rem; object-fit: contain; flex: 0 0 auto; }
.trust-item:nth-child(2) img { width: 48rem; }
.trust-item:nth-child(3) { gap: 16rem; }
.trust-item h2 { font-size: 19rem; line-height: 1.7; font-weight: 400; color: #ffe6a7; white-space: nowrap; }
.trust-item p { font-size: 14rem; line-height: 1.4; color: #f0cba8; white-space: nowrap; }
/* This is a portrait price display, so retaining its composition is intentional.
   Browser zoom remains enabled; editable prices stay crisp at any scale. */
@media print {
  :root { font-size: 1px; }
  body { background: transparent; }
  .gold-display { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* === 1D1D: เพิ่มเติม (ไม่แตะดีไซน์ที่อนุมัติ) === */
/* สถานะที่ดีไซน์ไม่ได้วาด: ราคาวันนี้ "ขึ้น" ใช้สีเขียวตามที่ README ของผู้ออกแบบระบุ · "เท่าเดิม" ใช้สีครีม */
#daily-change[data-direction="up"] { color: var(--green); }
#daily-change[data-direction="unchanged"] { color: var(--cream); }
/* เบราว์เซอร์ในแอป (LINE / Android WebView) ชอบขยายตัวอักษรเองบนจอแคบ ทำให้ข้อความที่วางแบบ absolute ล้นกรอบ */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }