:root{--ink:#17375e;--blue:#1f5b95;--gold:#d69a2d;--paper:#f4f7fb;--white:#fff;--muted:#607086;--line:#dbe3ee}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:#15243a;font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;font-size:16px;line-height:1.65}
.topbar{height:74px;padding:0 max(22px,calc((100vw - 1160px)/2));display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
.brand-mark{width:42px;height:42px;border-radius:12px;background:var(--ink);color:white;display:grid;place-items:center;font-weight:800}.topbar strong,.topbar span{display:block}.topbar strong{color:var(--ink)}.topbar span{font-size:.82rem;color:var(--muted)}
main{max-width:1160px;margin:auto;padding:42px 22px 70px}.intro{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;padding:42px;border-radius:28px;background:linear-gradient(135deg,#123359,#245f94);color:white;box-shadow:0 18px 45px rgba(23,55,94,.18);position:relative;overflow:hidden}.intro:after{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(255,255,255,.17);border-radius:50%;right:-90px;top:-130px}.eyebrow{margin:0 0 8px;color:#f5c76f;font-weight:800;letter-spacing:.14em;font-size:.8rem}.intro h1{font-size:clamp(2.1rem,5vw,4rem);line-height:1.08;margin:0 0 18px;letter-spacing:-.03em}.lead{max-width:670px;margin:0;color:#e6edf6;font-size:1.05rem}.summary{min-width:170px;padding:22px;border:1px solid rgba(255,255,255,.25);border-radius:20px;background:rgba(255,255,255,.1);text-align:center}.summary strong,.summary span,.summary small{display:block}.summary strong{font-size:3.2rem;line-height:1;color:#ffd47e}.summary span{font-weight:700}.summary small{margin-top:8px;color:#dbe6f2}
.filters{display:flex;gap:8px;overflow:auto;padding:28px 0 20px;scrollbar-width:none}.filters button{flex:0 0 auto;border:1px solid var(--line);background:white;color:var(--ink);padding:10px 16px;border-radius:999px;font:inherit;font-weight:700;cursor:pointer}.filters button.active{background:var(--ink);border-color:var(--ink);color:white}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.card{background:white;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 7px 22px rgba(38,66,99,.07);transition:.2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 13px 32px rgba(38,66,99,.14)}.image-btn{display:block;width:100%;border:0;padding:0;background:#eaf0f7;cursor:zoom-in;aspect-ratio:16/10;overflow:hidden}.image-btn img{width:100%;height:100%;object-fit:cover;display:block;transition:.3s ease}.card:hover img{transform:scale(1.018)}.content{padding:20px}.meta{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-bottom:8px}.badge{font-size:.78rem;color:#23547e;background:#eaf3fa;border-radius:999px;padding:4px 9px;font-weight:700}.date{font-size:.82rem;color:var(--muted)}.content h2{font-size:1.25rem;line-height:1.38;margin:0 0 9px;color:var(--ink)}.detail{margin:0 0 12px;color:#475a70}.issuer{margin:0;padding-top:11px;border-top:1px solid #edf1f6;color:#243b57;font-size:.9rem}.issuer strong{color:var(--gold)}.duplicate{outline:2px dashed #d9a43b;outline-offset:-7px}.note{color:var(--muted);font-size:.86rem;margin:24px 4px 0}footer{text-align:center;background:#102a49;color:#dce7f2;padding:24px}
dialog{width:min(96vw,1200px);max-height:95vh;border:0;border-radius:18px;padding:0;background:#111827;color:white;box-shadow:0 28px 90px rgba(0,0,0,.5)}dialog::backdrop{background:rgba(5,14,28,.85);backdrop-filter:blur(5px)}dialog img{width:100%;max-height:82vh;object-fit:contain;display:block;background:#0b1220}#viewer-caption{padding:14px 58px 16px 18px}#close{position:fixed;right:calc(2vw + 8px);top:calc(2.5vh + 8px);width:44px;height:44px;border:0;border-radius:50%;background:white;color:#111827;font-size:30px;cursor:pointer;z-index:3}
@media(max-width:760px){main{padding:20px 14px 52px}.topbar{padding:0 15px}.intro{grid-template-columns:1fr;padding:28px 22px;border-radius:22px}.summary{display:flex;align-items:baseline;gap:9px;text-align:left;padding:14px 17px}.summary strong{font-size:2.3rem}.summary small{margin-left:auto}.grid{grid-template-columns:1fr;gap:14px}.filters{padding-top:20px}.content{padding:17px}.intro h1{font-size:2.35rem}.lead{font-size:1rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}