/* =========================================================
   IRT GOLD — หน้าบทวิเคราะห์ราคาทองคำ v2.0b (17 ต.ค. 69) · #property copyright "IRT GOLD"
   สไตล์บทวิจัยการเงิน: คอลัมน์อ่านเดียว · หัวข้อฟอนต์มีเชิง (Noto Serif Thai) · เส้นบางแทนกล่อง · ทองใช้เฉพาะจุด
   ใช้คู่กับ site.css (ตัวแปรสี / ปุ่ม / เมนู / ท้ายหน้า) · ค่าเริ่มต้นพื้นขาว
   คลาสในไฟล์นี้ห้ามซ้ำกับ site.css (.st .indi .cta .plans มีแล้ว)
   ========================================================= */
.an-page { --serif: "Noto Serif Thai", "IBM Plex Sans Thai", serif; --a-up: #1d6b4f; --a-dn: #a3243b; --a-gold: #a47a2c; --col: 720px; }
[data-theme="dark"] .an-page { --a-up: #4ade80; --a-dn: #fb7185; --a-gold: #e9c46c; }
.an { padding: 56px 24px 90px; }
.an .up { color: var(--a-up); } .an .dn { color: var(--a-dn); }
.nav-links a.on { color: var(--gold-t); font-weight: 600; }
.mut { color: var(--ink3); }
.draft { max-width: var(--col); margin: 0 auto 28px; font-size: 13px; color: #7a5a12; border-top: 2px solid var(--gold); padding-top: 8px; letter-spacing: .02em; }
[data-theme="dark"] .draft { color: var(--gold-t); }

/* ── หัวบทความ ── */
.post, .ix, .ix-list { max-width: var(--col); margin: 0 auto; }
.kicker { display: flex; gap: 14px; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--a-gold); margin-bottom: 18px; }
.kicker a { color: inherit; text-decoration: none; } .kicker a:hover { text-decoration: underline; }
.kicker span { color: var(--ink3); font-weight: 500; } .kicker a + span::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--line); vertical-align: middle; margin-right: 14px; }
.post h1, .ix h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.32; letter-spacing: -.005em; margin: 0 0 18px; color: var(--ink); }
.dek { font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 2.1vw, 21px); line-height: 1.7; color: var(--ink2); margin: 0 0 26px; }
.by { display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 13.5px; color: var(--ink3); padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.by span:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--line); }
.by span:first-child { color: var(--ink); font-weight: 600; }

/* ── สรุประดับราคา (เส้นบาง ไม่มีกล่อง) ── */
.keys { display: grid; grid-template-columns: repeat(4, 1fr); margin: 34px 0 30px; border-top: 2px solid var(--ink); }
.keys > div { padding: 14px 18px 4px 0; }
.keys > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.keys small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); margin-bottom: 6px; }
.keys b { display: block; font: 600 27px/1.2 "IBM Plex Sans Thai", sans-serif; font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -.01em; }
.keys .k-st { font-family: var(--serif); }
.keys .k-bias { font-size: 15.5px; line-height: 1.5; font-weight: 500; color: var(--ink2); }
.keys em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink3); margin-top: 4px; line-height: 1.5; }

/* ── กราฟ ── */
.chart { margin: 0 0 40px; }
.chart img { width: 100%; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
[data-theme="dark"] .chart img { border-radius: 4px; }
.chart figcaption { font-size: 13px; line-height: 1.7; color: var(--ink3); margin-top: 10px; }
.chart figcaption b { color: var(--ink2); font-weight: 600; margin-right: 6px; }

/* ── เนื้อความ ── */
.body p { font-size: 17.5px; line-height: 1.95; color: var(--ink); margin: 0 0 22px; }
.body .lead { font-size: 19px; }
.body h2 { font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 1.4; margin: 50px 0 16px; color: var(--ink); }
.body h2::before { content: ""; display: block; width: 32px; height: 2px; background: var(--gold); margin-bottom: 16px; }
.body table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 15.5px; }
.body th, .body td { text-align: left; vertical-align: top; padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); }
.body tr:first-child th, .body tr:first-child td { border-top: 1px solid var(--ink); }
.body td span { display: block; color: var(--ink2); margin-top: 2px; }
.body td b { font-weight: 600; color: var(--ink); }
.t-week { margin-top: 4px !important; }
.t-week thead th { font-size: 12px; font-weight: 600; letter-spacing: .05em; color: var(--ink3); border-top: 1px solid var(--ink); padding-bottom: 8px; }
.t-week td { font-variant-numeric: tabular-nums; font-size: 16.5px; }
.t-week tbody tr:first-child td { border-top: 0; }
.t-lv th { width: 110px; font-weight: 600; font-size: 14px; }
.t-lv td.num { width: 120px; font: 600 17px "IBM Plex Sans Thai", sans-serif; font-variant-numeric: tabular-nums; color: var(--ink); }
.t-lv td:last-child { color: var(--ink2); }
.t-plan th { width: 92px; font-weight: 600; font-size: 14px; } .t-plan th.range { color: var(--a-gold); }
.t-indi th { width: 140px; font-size: 13px; font-weight: 600; color: var(--ink2); letter-spacing: .02em; }
.watch { margin: 0 0 10px; padding: 0; list-style: none; }
.watch li { font-size: 17px; line-height: 1.8; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--line); position: relative; }
.watch li::before { content: ""; position: absolute; left: 0; top: 22px; width: 8px; height: 1px; background: var(--gold); }
.body .src { font-size: 13px; color: var(--ink3); margin-top: 26px; line-height: 1.7; }

/* ── ชวนเข้า Dashboard (เรียบ) ── */
.note { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 46px 0 0; padding: 22px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.note b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; } .note span { color: var(--ink2); font-size: 14.5px; }

/* ── บทความก่อนหน้า ── */
.more { margin-top: 50px; }
.more h3 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin: 0 0 6px; }
.more a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.more a small { display: block; color: var(--ink3); font-size: 12.5px; } .more a span { font-family: var(--serif); font-size: 17.5px; color: var(--ink); }
.more a:hover span { color: var(--a-gold); }

/* ── หน้ารวม ── */
.ix { margin-bottom: 30px; }
.ix-list { border-top: 2px solid var(--ink); }
.ix-list .row { display: block; padding: 26px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.ix-list .row img { width: 100%; margin-bottom: 18px; background: #fff; border-bottom: 1px solid var(--line); }
.ix-list small { color: var(--ink3); font-size: 13px; }
.ix-list h3 { font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.4; margin: 6px 0 8px; color: var(--ink); }
.ix-list .first h3 { font-size: 30px; }
.ix-list p { margin: 0 0 12px; color: var(--ink2); font-size: 16px; line-height: 1.8; }
.ix-list .lv { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.5px; color: var(--ink3); }
.ix-list .lv b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 4px; }
.ix-list .lv b.dn { color: var(--a-dn); } .ix-list .lv b.up { color: var(--a-up); }
.ix-list .row:hover h3 { color: var(--a-gold); }

@media (max-width: 760px) {
  .an { padding: 34px 18px 70px; }
  .keys { grid-template-columns: 1fr 1fr; }
  .keys > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .keys > div:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 6px; }
  .body p { font-size: 16.5px; } .t-lv th, .t-plan th, .t-indi th { width: 84px; }
  .t-week { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── ปกบทความ (v2.0c · 17 ต.ค. 69 ผู้ใช้: "ใส่รูปปกด้านบนให้ดูหรูขึ้น") — กรมท่าตลอดทั้ง 2 โหมด ── */
.cover { position: relative; overflow: hidden; margin-top: -78px; padding-top: 78px;
  background: radial-gradient(760px 460px at 80% 45%, rgba(214,170,68,.22), transparent 70%), linear-gradient(180deg, #f8f1e1 0%, #fcf8ef 70%, #fffdf8 100%); }
[data-theme="dark"] .cover { background: radial-gradient(760px 420px at 80% 40%, rgba(214,170,68,.16), transparent 70%), linear-gradient(180deg, #060c1d 0%, #0b1630 55%, #0a1430 78%, var(--bg) 100%); }
.cover::after { display: none; }
.cv-in { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: end; }
.cv-txt { padding: 54px 0 46px; }
.cover .kicker { color: var(--a-gold); } .cover .kicker span { color: var(--ink3); }
.cover h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.32; margin: 0 0 16px; color: var(--ink); }
.cover .dek { color: var(--ink2); margin-bottom: 26px; }
.cover .by { display: flex; align-items: center; gap: 12px; border: 0; padding: 0; }
.cover .by img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #f3dfa8; box-shadow: 0 0 0 2px rgba(233,196,108,.6); }
.cover .by b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; } .cover .by span { color: var(--ink3); font-size: 13px; }
.cv-coach { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; object-position: bottom;
  -webkit-mask-image: linear-gradient(180deg, #000 93%, transparent 100%); mask-image: linear-gradient(180deg, #000 93%, transparent 100%);
  filter: drop-shadow(0 18px 30px rgba(11,22,48,.18)); }
.an-page .nav-in { background: rgba(255,255,255,.95); }
[data-theme="dark"] .an-page .nav-in { background: var(--glass); }
@media (max-width: 760px) {
  .cv-in { grid-template-columns: 1fr 120px; gap: 10px; }
  .cv-txt { padding: 36px 0 30px; }
  .cv-coach { max-height: 220px; }
}
@media (max-width: 600px) {
  .cv-in { grid-template-columns: 1fr; }
  .cv-coach { display: none; }
  .cv-txt { padding: 30px 0 34px; }
  .cover h1 { font-size: 27px; line-height: 1.38; }
  .cover .dek { font-size: 16.5px; line-height: 1.75; }
  .kicker { gap: 10px; font-size: 12px; }
  .an { padding: 28px 16px 60px; }
}
@media (max-width: 600px) {
  .t-lv tr { display: grid; grid-template-columns: 84px 1fr; border-bottom: 1px solid var(--line); }
  .t-lv tr:first-child { border-top: 1px solid var(--ink); }
  .t-lv th, .t-lv td { border: 0 !important; }
  .t-lv th { padding: 12px 8px 2px 0; } .t-lv td.num { width: auto; padding: 10px 0 2px; }
  .t-lv td:last-child { grid-column: 1 / -1; padding: 2px 0 12px; font-size: 14.5px; }
}