/* Srikrung Broker | public topic page | PHP 8.4 | Responsive design v1 */
:root {
  --green: #087a49;
  --green-dark: #075838;
  --green-deep: #103b30;
  --green-soft: #e9f6ed;
  --mint: #c8e8d2;
  --gold: #f3c85a;
  --ink: #17352f;
  --muted: #657e77;
  --line: #e0ebe4;
  --canvas: #f5f9f6;
  --white: #fff;
  --radius: 24px;
  --shadow: 0 18px 58px rgba(16,61,43,.075);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 94px; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); font: 400 16px/1.8 "Prompt", "Noto Sans Thai", Tahoma, sans-serif; overflow-wrap: anywhere; }
button, input, textarea { font: inherit; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
img { max-width: 100%; }
.wrap { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; }
.skip-link { position:absolute; top:-100px; left:16px; z-index:1000; background:#fff; padding:8px 18px; border-radius:12px; }
.skip-link:focus { top:12px; }
/* Navigation */
.site-header { position:sticky; top:0; z-index:60; background:rgba(255,255,255,.97); box-shadow:0 1px 0 #e7efe9, 0 6px 32px rgba(11,68,43,.045); backdrop-filter:blur(14px); }
.header-inner { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.brand { display:flex; align-items:center; gap:12px; min-width:0; flex:0 0 auto; }
.brand-logo { width:49px; height:49px; object-fit:contain; }
.brand-text { display:flex; flex-direction:column; line-height:1.2; color:var(--ink); }
.brand-text strong { font-size:clamp(18px,1.8vw,23px); font-weight:800; white-space:nowrap; letter-spacing:-.7px; }
.brand-text strong span,.footer-brand span { color:#39af58; }
.brand-text small { font-size:9px; letter-spacing:1.15px; color:#899c92; font-weight:600; padding-top:5px; white-space:nowrap; }
.main-nav { display:flex; align-items:center; gap:clamp(12px,1.6vw,23px); }
.main-nav > a { font-size:13px; color:#2f4c3e; font-weight:600; white-space:nowrap; padding:9px 2px; border-bottom:2px solid transparent; }
.main-nav > a:hover,.main-nav > a.active { color:var(--green); border-bottom-color:var(--green); }
.main-nav > .nav-cta { color:white; padding:12px 20px; border:0; border-radius:100px; background:var(--green); box-shadow:0 10px 22px #0b864621; }
.main-nav > .nav-cta:hover { background:var(--green-dark); color:white; }
.menu-toggle { display:none; border:1px solid var(--line); width:46px; height:46px; border-radius:14px; align-items:center; justify-content:center; flex-direction:column; gap:5px; background:#fff; cursor:pointer; }
.menu-toggle span { width:20px; height:2px; display:block; border-radius:4px; background:var(--green-deep); transition:transform .2s,opacity .2s; }
/* Hero */
.hero { position:relative; overflow:hidden; background:linear-gradient(108deg, #075e39 0%, #087b47 57%, #0b8b50 100%); color:white; isolation:isolate; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(4,72,41,.96) 0%,rgba(6,104,60,.93) 75%,rgba(6,111,62,.84) 100%),url('https://srikrungbroker.com/wp-content/uploads/2017/09/pic-7.jpg') center / cover no-repeat; opacity:.52; pointer-events:none; }
.hero-inner { min-height:360px; padding-block:42px 50px; position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,.35fr); align-items:center; gap:32px; }
.hero-copy { position:relative; z-index:2; max-width:790px; }
.breadcrumb { display:flex; align-items:center; gap:12px; color:#e5f5e9a9; font-size:12px; margin-bottom:26px; }
.breadcrumb a { color:#f1fff4; }
.breadcrumb a:hover { text-decoration:underline; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; letter-spacing:1.35px; font-size:11px; font-weight:700; color:#b7f3c8; }
.eyebrow-dot { width:8px; height:8px; background:var(--gold); border-radius:50%; box-shadow:0 0 0 5px #ffd67125; }
.hero h1 { font-size:clamp(30px,3.5vw,50px); font-weight:800; letter-spacing:-1.3px; line-height:1.35; margin:14px 0 12px; text-wrap:balance; }
.hero-desc { color:#e2f4e8; font-size:clamp(14px,1.45vw,17px); line-height:1.85; max-width:680px; margin:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.hero-actions { display:flex; gap:26px; margin-top:26px; align-items:center; flex-wrap:wrap; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:14px; border:0; border-radius:100px; padding:12px 20px; background:var(--green); color:white; font-weight:700; font-size:13px; cursor:pointer; line-height:1.4; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.button:hover { color:#fff; background:var(--green-dark); box-shadow:0 12px 25px rgba(8,89,50,.18); transform:translateY(-1px); }
.button-hero { background:var(--gold); color:#28402c; box-shadow:0 12px 28px #04281820; padding:13px 24px; }
.button-hero:hover { color:#26412d; background:#ffe29a; }
.hero-link { color:white; font-size:13px; font-weight:600; }
.hero-link:hover { color:var(--gold); }
.hero-link span { margin-left:8px; }
.hero-art { justify-self:center; position:relative; width:240px; height:220px; display:grid; place-items:center; }
.art-circle { position:absolute; border:1px solid #ffffff35; border-radius:50%; }
.art-circle-large { width:260px; height:260px; background:radial-gradient(circle,#ffffff10,transparent 67%); }
.art-circle-small { width:185px; height:185px; border-style:dashed; }
.art-frame { display:flex; flex-direction:column; justify-content:center; align-items:center; width:160px; height:160px; border:1px solid #ffffff73; border-radius:44px; background:linear-gradient(160deg,#ffffff3b,#ffffff07); box-shadow:0 28px 52px #002e231c; backdrop-filter:blur(4px); transform:rotate(-10deg); }
.art-mark { font-size:77px; font-weight:800; line-height:1; letter-spacing:-9px; color:#edfff0; transform:rotate(10deg); }
.art-label { font-size:8px; font-weight:700; letter-spacing:1.2px; color:#edffe9; transform:rotate(10deg); margin-top:12px; }
/* Main content */
.content-grid { padding-block:46px 80px; display:grid; grid-template-columns:minmax(0,1fr) 316px; gap:30px; align-items:start; }
.main-column { min-width:0; }
.article-card,.advisor-card,.quick-card,.share-panel,.signup-panel { border:1px solid var(--line); background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.article-card { padding:clamp(24px,3.2vw,44px); }
.article-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-tag { color:var(--green); background:var(--green-soft); border-radius:100px; padding:6px 12px; font-size:12px; font-weight:700; }
.article-number { font-weight:700; letter-spacing:1.3px; color:#a5b6ac; font-size:11px; }
.article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px; margin:18px 0 24px; padding-bottom:21px; border-bottom:1px solid var(--line); font-size:12px; color:#7b9083; }
.article-meta span > span { font-size:15px; color:var(--green); margin-right:4px; }
.article-body { color:#32493e; line-height:1.96; font-size:15px; min-height:100px; }
.article-body > :first-child { margin-top:0!important; }
.article-body h1,.article-body h2,.article-body h3,.article-body h4 { color:#173c30; letter-spacing:-.35px; line-height:1.55; font-weight:800; margin-top:1.7em; margin-bottom:.55em; }
.article-body h1 { font-size:clamp(23px,2vw,29px); }
.article-body h2 { font-size:clamp(21px,1.8vw,25px); }
.article-body h3 { font-size:19px; }
.article-body p { margin:0 0 19px; }
.article-body a { text-decoration:underline; text-decoration-color:#7ac99b; text-underline-offset:3px; }
.article-body a:hover { color:#065637; }
.article-body img { height:auto; max-width:100%; border-radius:15px; box-shadow:0 7px 24px #1445340d; }
.article-body figure { margin:22px 0; }
.article-body figcaption { font-size:12px; color:var(--muted); text-align:center; margin-top:8px; }
.article-body blockquote { padding:18px 24px; margin:22px 0; background:#f0f9f2; border-left:4px solid #1ca36a; border-radius:0 14px 14px 0; }
.article-body ul,.article-body ol { padding-left:26px; margin:0 0 20px; }
.article-body li { margin:5px 0; }
.article-body :is(table, pre) { max-width:100%; overflow-x:auto; }
.article-body table { border-collapse:collapse; border-radius:12px; display:block; overflow-x:auto; margin:20px 0; }
.article-body th,.article-body td { border:1px solid #e1ebe4; padding:10px 12px; min-width:80px; }
.article-body th { background:#eaf7ef; }
.article-body iframe,.article-body video { display:block; width:100%; max-width:100%; border:0; border-radius:14px; min-height:240px; }
.article-body iframe[src*="youtube"] { aspect-ratio:16/9; height:auto; }
.article-body * { max-width:100%; }
.article-end { display:flex; gap:20px; align-items:center; color:#799b87; margin:32px 0 4px; font-size:11px; letter-spacing:1px; }
.article-end span { height:1px; background:var(--line); flex:1; }
/* Share + signup */
.share-panel { padding:24px 27px; margin-top:22px; display:flex; gap:15px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.share-heading { display:flex; align-items:center; gap:14px; }
.share-icon { display:grid; place-items:center; width:45px; height:45px; flex:0 0 45px; border-radius:16px; color:var(--green); background:var(--green-soft); font-size:23px; font-weight:700; }
.share-heading h2 { margin:0; font-size:16px; line-height:1.5; }
.share-heading p { margin:2px 0 0; color:var(--muted); font-size:12px; }
.share-actions { display:flex; gap:10px; flex-wrap:wrap; }
.copy-button { border:1px solid #c8dfd0; background:#fff; color:var(--green); }
.copy-button:hover { background:#eff8f2; color:var(--green-dark); }
.line-share { background:#0cbe57; }
.line-share:hover { background:#07964a; }
.signup-panel { margin-top:22px; }
.signup-intro { display:flex; justify-content:space-between; align-items:center; padding:24px 28px; background:linear-gradient(100deg,#ebf8ef,#fff); border-bottom:1px solid var(--line); }
.signup-intro h2 { font-size:clamp(19px,2vw,24px); margin:10px 0 3px; }
.signup-intro p { font-size:13px; margin:0; color:var(--muted); }
.signup-symbol { color:#67b88a; font-size:45px; }
.signup-panel > iframe { display:block; width:100%; height:640px; border:0; background:white; }
.form-note { padding:0 24px 18px; color:#7b9185; font-size:11px; margin:0; }
.form-note code { font-family:monospace; }
/* Sidebar */
.sidebar { min-width:0; display:grid; gap:20px; }
.advisor-card { position:relative; }
.advisor-banner { height:105px; background:linear-gradient(122deg,#045b39,#149158); position:relative; overflow:hidden; }
.advisor-banner::after { content:""; position:absolute; width:250px; height:250px; border:1px solid #ffffff2c; border-radius:50%; top:-132px; right:-80px; box-shadow:0 0 0 42px #ffffff10,0 0 0 83px #ffffff0a; }
.advisor-badge { position:absolute; left:23px; top:17px; font-size:12px; font-weight:600; color:#ecffe8; }
.advisor-avatar-wrap { margin-top:-57px; padding:0 24px; position:relative; z-index:1; }
.advisor-avatar { width:104px; height:104px; border-radius:26px; object-fit:cover; border:5px solid #fff; background:#e5eee8; box-shadow:0 12px 24px #173a242a; }
.advisor-body { padding:15px 24px 26px; }
.advisor-label { color:var(--green); letter-spacing:1.4px; font-weight:800; font-size:10px; }
.advisor-body h2 { margin:7px 0 8px; font-size:22px; line-height:1.5; font-weight:800; }
.advisor-body > p { font-size:12px; line-height:1.85; color:var(--muted); margin:0 0 20px; }
.advisor-contact { border-top:1px solid var(--line); padding-top:5px; margin-bottom:20px; }
.advisor-contact > div { display:flex; gap:11px; align-items:center; margin-top:15px; }
.contact-icon { display:grid; place-items:center; flex:0 0 35px; width:35px; height:35px; border-radius:12px; background:#edf8f0; color:var(--green); font-size:18px; }
.advisor-contact > div > div { min-width:0; }
.advisor-contact small { display:block; color:#8ba198; font-size:10px; line-height:1.4; }
.advisor-contact a { font-size:12px; font-weight:700; word-break:break-all; }
.advisor-button { width:100%; padding:14px; background:var(--green); }
.quick-card { padding:24px; }
.quick-card h2 { margin:0 0 16px; font-size:17px; }
.quick-card nav { display:grid; }
.quick-card a { display:flex; justify-content:space-between; align-items:center; padding:12px 1px; border-bottom:1px solid #eef3ee; color:#486b54; font-size:12px; font-weight:600; }
.quick-card a:last-child { border:0; }
.quick-card a:hover,.quick-card a.selected { color:var(--green); }
/* Footer */
.site-footer { background:#083a2c; color:#d3e4d7; padding-top:54px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:55px; padding-bottom:43px; }
.footer-brand { font-size:24px; font-weight:800; color:#fff; letter-spacing:-.7px; }
.footer-brand:hover { color:#fff; }
.footer-grid p { max-width:350px; font-size:12px; color:#bdd0c4; margin:10px 0 0; }
.footer-grid h2 { margin:2px 0 12px; font-size:14px; color:#fff; }
.footer-grid div:not(:first-child) a { display:block; font-size:12px; color:#c1d9c9; padding:5px 0; }
.footer-grid div:not(:first-child) a:hover { color:#ffe3a1; }
.footer-bottom { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-block:20px; border-top:1px solid #ffffff21; font-size:11px; color:#96b4a4; }
.back-to-top { position:fixed; right:22px; bottom:24px; z-index:50; display:grid; place-items:center; width:45px; height:45px; background:#fff; color:var(--green); box-shadow:0 8px 22px #142c2736; border:1px solid var(--line); border-radius:15px; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(15px); transition:opacity .2s,transform .2s; }
.back-to-top.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
@media (max-width:1080px) {
  .main-nav { gap:12px; }
  .main-nav > a { font-size:12px; }
  .main-nav > .nav-cta { padding:11px 14px; }
  .content-grid { grid-template-columns:minmax(0,1fr) 280px; gap:20px; }
}
@media (max-width:920px) {
  .wrap { width:min(100% - 40px,750px); }
  .header-inner { min-height:72px; }
  .brand-logo { width:42px; height:42px; }
  .brand-text strong { font-size:20px; }
  .menu-toggle { display:flex; }
  .main-nav { display:none; position:absolute; top:calc(100% - 1px); left:0; right:0; padding:12px 20px 22px; background:white; border-top:1px solid var(--line); box-shadow:0 20px 28px #102f2415; align-items:stretch; flex-direction:column; gap:3px; }
  .main-nav.is-open { display:flex; }
  .main-nav > a { font-size:14px; padding:10px 16px; border-radius:12px; border:0; }
  .main-nav > a.active { background:var(--green-soft); }
  .main-nav > .nav-cta { text-align:center; margin-top:5px; padding:14px; }
  .hero-inner { grid-template-columns:minmax(0,1fr) 165px; min-height:320px; }
  .hero-art { width:165px; transform:scale(.78); }
  .content-grid { grid-template-columns:1fr; }
  .sidebar { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .advisor-card,.quick-card { align-self:start; }
  .footer-grid { gap:30px; }
}
@media (max-width:640px) {
  body { font-size:14px; }
  .wrap { width:calc(100% - 32px); }
  .brand { gap:9px; }
  .brand-text strong { font-size:17px; }
  .brand-text small { font-size:7px; letter-spacing:.7px; }
  .brand-logo { width:40px; height:40px; }
  .hero-inner { display:block; min-height:0; padding-block:30px 42px; }
  .hero-art { display:none; }
  .breadcrumb { margin-bottom:20px; font-size:11px; }
  .hero h1 { font-size:clamp(28px,7vw,38px); line-height:1.4; margin-top:12px; }
  .hero-desc { font-size:14px; }
  .hero-actions { gap:20px; margin-top:22px; }
  .content-grid { padding-block:22px 50px; gap:20px; }
  .article-card { border-radius:20px; padding:23px 19px; }
  .article-meta { margin-bottom:19px; padding-bottom:16px; }
  .article-body { font-size:14px; line-height:1.93; }
  .article-body :is(h1,h2) { font-size:22px; }
  .share-panel { border-radius:20px; padding:18px; }
  .share-actions,.share-actions > * { width:100%; }
  .signup-panel { border-radius:20px; }
  .signup-intro { padding:20px; }
  .signup-panel > iframe { height:650px; }
  .sidebar { grid-template-columns:1fr; }
  .advisor-body { padding-inline:22px; }
  .footer-grid { grid-template-columns:repeat(2,1fr); gap:28px 22px; }
  .footer-grid div:first-child { grid-column:1/-1; }
  .site-footer { padding-top:36px; }
  .footer-bottom { flex-direction:column; }
  .back-to-top { width:40px; height:40px; right:13px; bottom:13px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}