/* Skytrain Dental — shared "Our Branches" section (scoped #sk-branches).
   Self-contained so it renders identically inside #sk-home OR #sk-about, without
   relying on any page-scoped helper. Matches the original Home design 1:1. */
#sk-branches{background:#0B3A47;color:#fff}
#sk-branches,#sk-branches *{font-family:'Noto Sans Thai',sans-serif}
#sk-branches *{box-sizing:border-box}

/* layout container (mirrors the Home .sk-wrap / .sk-sec values) */
#sk-branches .sk-wrap{max-width:1240px;margin:0 auto}
#sk-branches .sk-sec{padding:80px 32px}

/* header */
#sk-branches .sk-branches-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:46px;flex-wrap:wrap}
#sk-branches .sk-kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#F47B3F}
#sk-branches .sk-kicker-sky{color:#7FE0F5}
#sk-branches .sk-h2{font-weight:700;font-size:42px;margin:14px 0 0;color:#0B3A47}
#sk-branches .sk-h2.sk-left{text-align:left}
#sk-branches .sk-white{color:#fff}
#sk-branches .sk-branches-sub{font-size:16px;color:#A9C6CF;max-width:360px;line-height:1.7;margin:0}

/* cards */
#sk-branches .sk-branch-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
#sk-branches .sk-branch-card{box-sizing:border-box;min-width:0;display:flex;align-items:center;gap:14px;background:#10485A;border:1px solid #1C5A6E;border-radius:14px;padding:11px 14px 11px 11px;text-decoration:none;transition:transform .16s,border-color .16s,background .16s}
#sk-branches .sk-branch-card:hover{transform:translateY(-2px);border-color:#17B0D4;background:#12556A}
#sk-branches .sk-branch-thumb{width:54px;height:54px;flex-shrink:0;border-radius:11px;overflow:hidden}
#sk-branches .sk-branch-thumb img{width:100%;height:100%;object-fit:cover}
#sk-branches .sk-branch-info{min-width:0}
#sk-branches .sk-branch-label{font-size:10.5px;color:#7FE0F5;letter-spacing:.05em}
#sk-branches .sk-branch-name{font-weight:600;font-size:16px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}

@media(min-width:900px){#sk-branches .sk-branch-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:768px){
	#sk-branches .sk-sec{padding:60px 24px}
	#sk-branches .sk-h2{font-size:32px}
}