/* หน้าผลงาน our_success.php แบบใหม่ (rh_our_success.php · 2026-10-26) · ตัวแปรสีชุดเดียวกับหน้าฝาก (rh_consign_v2.css) */
.ros { --c-navy:#0E1E3D; --c-navy2:#13284F; --c-red:#E2302B; --c-red-hover:#C42620; --c-alt:#F4F5F8; --c-line:#E3E6EE; --c-muted:#4A5470; --c-soft:#C9CFDC; font-family:'Sarabun', sans-serif; color:var(--c-navy); }
.ros-hero { background:linear-gradient(160deg, var(--c-navy2), var(--c-navy) 65%); color:#fff; padding:26px 0 30px; }
.ros .ros-hero h1.page-topic { color:#fff; font-size:40px; line-height:1.2; font-weight:800; margin:0; text-align:left; }
.ros-lead { margin:10px 0 0; color:var(--c-soft); font-size:17px; line-height:1.65; max-width:720px; }
.ros-src { font-size:12.5px; color:var(--c-soft); margin:10px 0 0; opacity:.85; }
.ros-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:20px; }
.ros-stat { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:16px 18px; min-width:0; }
.ros-stat b { display:block; font-size:34px; line-height:1.1; font-weight:800; font-variant-numeric:tabular-nums; color:#fff; }
.ros-stat:first-child b { color:#fff; }
.ros-stat span { color:var(--c-soft); font-size:14.5px; }
.ros-sec { padding-top:44px; }
.ros .ros-h2 { font-size:28px; line-height:1.3; margin:0 0 6px; font-weight:800; color:var(--c-navy); text-align:left; }
.ros-sub { color:var(--c-muted); margin:0 0 18px; font-size:16px; }
/* แกลเลอรี (10-26 ไม่แยกหมวด): ก้อนละ 24 รูป · ดูเพิ่ม = ต่อก้อนใหม่ใต้ก้อนเดิม */
.ros a:focus-visible, .ros-btn-o:focus-visible { outline:3px solid var(--c-red); outline-offset:2px; }
.ros-mason { columns:4; column-gap:10px; }
.ros-g { margin:0 0 10px; break-inside:avoid; border-radius:14px; overflow:hidden; background:var(--c-alt); }
.ros-g img { width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover; }
.ros-g:nth-child(5n+2) img { aspect-ratio:3/4; } .ros-g:nth-child(7n+4) img { aspect-ratio:1/1; }
.ros-g[hidden] { display:none; }
.ros-more { text-align:center; margin-top:8px; }
.ros-more[hidden] { display:none; }
/* สอนและบรรยาย: ตาราง 4 คอลัมน์ รูปเท่ากัน · มือถือ 2 */
.ros-teach { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.ros-teach .ros-g { margin:0; }
.ros-teach .ros-g img { aspect-ratio:4/3; }
.ros-btn-o { display:inline-flex; align-items:center; min-height:48px; padding:0 26px; border-radius:10px; font:700 16px 'Sarabun', sans-serif; background:#fff; color:var(--c-navy); border:0; box-shadow:inset 0 0 0 1.5px var(--c-navy); cursor:pointer; }
.ros-btn-o[hidden] { display:none; }
.ros-btn-o span { margin-left:.3em; font-weight:500; color:var(--c-muted); font-variant-numeric:tabular-nums; }
/* บทความผลงานเดิม */
.ros-stories { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.ros a.ros-st { display:flex; flex-direction:column; text-decoration:none; color:var(--c-navy); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 1px 0 var(--c-line), 0 6px 20px rgba(14,30,61,.06); transition:transform .18s, box-shadow .18s; min-width:0; }
.ros a.ros-st:hover { transform:translateY(-3px); box-shadow:0 1px 0 var(--c-line), 0 12px 28px rgba(14,30,61,.12); color:var(--c-navy); text-decoration:none; }
.ros-st-ph { aspect-ratio:4/3; background:var(--c-alt); overflow:hidden; display:block; }
.ros-st-ph img { width:100%; height:100%; object-fit:cover; display:block; }
.ros-st-t { padding:12px 14px 14px; font-weight:700; font-size:15.5px; line-height:1.45; }
/* บริการ */
.ros-servs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.ros a.ros-sv { display:grid; grid-template-columns:48px minmax(0, 1fr) auto; grid-template-rows:auto auto; column-gap:12px; align-items:center; text-decoration:none; color:var(--c-navy); background:var(--c-alt); border-radius:16px; padding:14px 16px; transition:background .15s; }
.ros a.ros-sv:hover { background:#EAEDF4; color:var(--c-navy); text-decoration:none; }
.ros-sv-ic { grid-row:1 / 3; width:48px; height:48px; border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; }
.ros-sv-ic svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ros-sv-t { font-weight:700; font-size:16.5px; line-height:1.4; } .ros-sv-n { font-size:14px; color:var(--c-muted); } .ros-sv-n b { color:var(--c-red); font-size:16px; font-variant-numeric:tabular-nums; }
.ros-sv i { grid-row:1 / 3; grid-column:3; font-style:normal; font-weight:700; color:var(--c-red); } .ros-sv i::before { content:"\2192"; content:"\2192" / ""; }
/* แบนเนอร์ฝากทรัพย์ (แบบเดียวกับหน้าฝาก) */
.ros-cta { margin:44px 0 56px; border-radius:22px; background:linear-gradient(120deg, var(--color-navy, #0E1E3D), var(--color-navy-deep, #0A1630)); color:#fff; padding:28px 30px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.ros-cta strong { font-size:24px; display:block; line-height:1.3; } .ros-cta span { color:var(--color-border-strong, #C9CFDC); }
.ros a.ros-cta-btn { display:inline-flex; align-items:center; gap:12px; min-height:56px; padding:0 10px 0 26px; border-radius:999px; background:#fff; color:var(--color-navy-deep, #0A1630); font-weight:700; font-size:17px; text-decoration:none; box-shadow:0 8px 20px rgba(8,16,60,.28); }
.ros-cta-btn i { width:36px; height:36px; border-radius:50%; background:var(--color-navy, #0E1E3D); display:grid; place-items:center; font-style:normal; }
.ros-cta-btn i::before { content:"\2192"; content:"\2192" / ""; color:#fff; font-size:18px; line-height:1; }
@media (max-width:991px) { .ros-mason { columns:3; } .ros-stories { grid-template-columns:repeat(2, minmax(0, 1fr)); } .ros-servs { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:767px) {
	.ros .ros-hero h1.page-topic { font-size:32px; } .ros-stats { gap:8px; } .ros-stat { padding:12px; border-radius:14px; } .ros-stat b { font-size:24px; } .ros-stat span { font-size:12.5px; }
	.ros-sec { padding-top:34px; } .ros .ros-h2 { font-size:23px; }
	.ros-mason { columns:2; column-gap:8px; } .ros-teach { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; } .ros-g { margin-bottom:8px; border-radius:12px; }
	.ros-stories { gap:10px; } .ros-st-t { font-size:14.5px; padding:10px 12px 12px; }
	.ros-servs { grid-template-columns:minmax(0, 1fr); }
	.ros-cta { padding:22px 20px; } .ros-cta strong { font-size:20px; } .ros a.ros-cta-btn { width:100%; justify-content:space-between; }
}
@media (prefers-reduced-motion: reduce) { .ros * { transition:none !important; } }