/* ============================================================
   udhr-home.css — หน้าแรก v3 (ud2-*) : แถบตัวเลขใน hero, การ์ดตราสาร, การ์ดยุทธศาสตร์ ๙ ด้าน
   โหลดต่อจาก udhr-theme.css (assets/ThemeAsset)
   ============================================================ */
.pv2 .ud-hero { padding: 44px 44px 30px; }
.pv2 .ud2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22); }
.pv2 .ud2-stats > div { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--ui-r, 6px); padding: 12px 16px; }
.pv2 .ud2-stats b { display: block; font: 600 28px/1.2 var(--ui-mono, 'IBM Plex Mono', monospace); color: var(--bma-gold, #F2C230); }
.pv2 .ud2-stats span { font-size: 13px; color: rgba(255, 255, 255, .88); }

.pv2 .ud-quick { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 14px; }

.pv2 h2.ui-section { display: flex; align-items: center; gap: 12px; margin: 38px 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ui-accent-tint, #E4F0E8); font-size: 21px; }
.pv2 h2.ui-section .ud2-no { flex: none; font: 600 13px var(--ui-mono, 'IBM Plex Mono', monospace); background: var(--ui-accent, #00703C); color: #fff; border-radius: 4px; padding: 3px 9px; letter-spacing: .04em; }
.pv2 .ud2-sub { color: var(--ink-soft, #4B5B4F); font-size: 14px; margin: -4px 0 16px; }

/* ตราสารสิทธิมนุษยชน */
.pv2 .ud2-inst { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 6px; }
.pv2 a.ud2-inst-card { display: flex; flex-direction: column; background: var(--ui-surface, #fff); border: 1px solid var(--ui-border, #CFDACB); border-radius: var(--ui-r, 6px); overflow: hidden; text-decoration: none; box-shadow: var(--ui-shadow); transition: box-shadow .18s, transform .18s, border-color .18s; }
.pv2 a.ud2-inst-card:hover { box-shadow: var(--ui-shadow-h); transform: translateY(-3px); border-color: var(--ui-accent, #00703C); }
.pv2 .ud2-inst-img { display: flex; align-items: center; justify-content: center; height: 170px; padding: 14px; background: #F7F9F5; border-bottom: 1px solid var(--ui-border-soft, #E3EAE0); }
.pv2 .ud2-inst-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pv2 .ud2-inst-txt { padding: 12px 16px 14px; }
.pv2 .ud2-inst-txt b { display: block; font: 600 15px var(--ui-mono, 'IBM Plex Mono', monospace); color: var(--ui-accent-deep, #123B27); }
.pv2 .ud2-inst-txt small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft, #4B5B4F); margin-top: 2px; }

/* ยุทธศาสตร์ ๙ ด้าน */
.pv2 .ud2-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 14px; font-size: 13px; color: var(--ink-soft, #4B5B4F); }
.pv2 .ud2-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pv2 .ud2-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pv2 .ud2-dot.s1, .pv2 .ud2-bar i.s1 { background: #9AA7B0; }
.pv2 .ud2-dot.s2, .pv2 .ud2-bar i.s2 { background: #E0A100; }
.pv2 .ud2-dot.s3, .pv2 .ud2-bar i.s3 { background: #00703C; }
.pv2 .ud2-dot.s4, .pv2 .ud2-bar i.s4 { background: #D9772B; }
.pv2 .ud2-dot.s5, .pv2 .ud2-bar i.s5 { background: #B3392B; }
.pv2 .ud2-strat { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.pv2 a.ud2-sc { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--ui-surface, #fff); border: 1px solid var(--ui-border, #CFDACB); border-radius: var(--ui-r, 6px); text-decoration: none; color: var(--ink, #17251C); box-shadow: var(--ui-shadow); transition: box-shadow .18s, transform .18s, border-color .18s; }
.pv2 a.ud2-sc:hover { box-shadow: var(--ui-shadow-h); transform: translateY(-3px); border-color: var(--ui-accent, #00703C); color: var(--ink, #17251C); }
.pv2 .ud2-sc-top { display: flex; align-items: center; gap: 14px; }
.pv2 .ud2-sc-top img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.pv2 .ud2-sc-name { flex: 1; min-width: 0; }
.pv2 .ud2-sc-name small { display: block; font-size: 12px; color: var(--ink-soft, #4B5B4F); }
.pv2 .ud2-sc-name b { display: block; font: 600 18px/1.3 var(--ui-serif, 'Taviraj', serif); color: var(--ui-accent-deep, #123B27); }
.pv2 .ud2-sc-total { text-align: right; flex: none; }
.pv2 .ud2-sc-total b { display: block; font: 600 26px/1.1 var(--ui-mono, 'IBM Plex Mono', monospace); color: var(--ui-accent, #00703C); }
.pv2 .ud2-sc-total small { font-size: 11.5px; color: var(--ink-soft, #4B5B4F); }
.pv2 .ud2-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: #E8EDE6; }
.pv2 .ud2-bar i { display: block; height: 100%; }
.pv2 .ud2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pv2 .ud2-chips > span { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--ui-mono, 'IBM Plex Mono', monospace); background: #F4F7F2; border: 1px solid var(--ui-border-soft, #E3EAE0); border-radius: 99px; padding: 3px 10px; }
.pv2 .ud2-chips > span.zero { opacity: .45; }
.pv2 .ud2-sc-budget { font-size: 13px; color: var(--ink-soft, #4B5B4F); border-top: 1px dashed var(--ui-border, #CFDACB); padding-top: 10px; }
.pv2 .ud2-sc-budget b { color: var(--ui-accent-deep, #123B27); font-family: var(--ui-mono, 'IBM Plex Mono', monospace); }
@media (max-width: 640px) { .pv2 .ud-hero { padding: 26px 20px 22px; } .pv2 .ud2-strat { grid-template-columns: 1fr; } .pv2 .ud2-stats b { font-size: 22px; } }