/*
 * ทำให้ธีม Porto 7.2 (ออกแบบบน Bootstrap 4) แสดงผลเหมือนเดิมบน Bootstrap 5
 * โหลดต่อจาก bootstrap.min.css และก่อน theme.css เพื่อให้ธีมยัง override ได้เหมือนเดิม
 */

/* ระยะห่างระหว่างคอลัมน์ BS4 = 30px (BS5 ลดเหลือ 24px) */
.row,
.container, .container-fluid,
.container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
	--bs-gutter-x: 30px;
}

/* ลิงก์: BS4 ไม่ขีดเส้นใต้จนกว่าจะ hover (BS5 ขีดเส้นใต้ตลอด) */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .nav-link:hover, .dropdown-item:hover, .page-link:hover, .badge:hover,
.ds-slide:hover, .ds-gallery-item:hover, .paging-item:hover { text-decoration: none; }

/* label: BS4 เว้นระยะใต้ label ให้เอง */
label { display: inline-block; margin-bottom: .5rem; }

/* select.form-control: BS5 ซ่อนลูกศรของ select ทำให้ดูเหมือนช่องพิมพ์ */
select.form-control { -webkit-appearance: menulist; -moz-appearance: menulist; appearance: auto; }

/* ---------- คลาสของ BS4 ที่ถูกถอดใน BS5 แต่หน้าเว็บยังใช้อยู่ ---------- */

.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: .5rem; }

.embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; }
.embed-responsive::before { display: block; content: ""; }
.embed-responsive-21by9::before { padding-top: 42.857143%; }
.embed-responsive-16by9::before { padding-top: 56.25%; }
.embed-responsive-4by3::before { padding-top: 75%; }
.embed-responsive-1by1::before { padding-top: 100%; }
.embed-responsive .embed-responsive-item,
.embed-responsive iframe, .embed-responsive embed,
.embed-responsive object, .embed-responsive video {
	position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0;
}

.badge-pill { padding-right: .6em; padding-left: .6em; border-radius: 10rem; }
.badge-primary { color: #fff; background-color: var(--bs-primary); }
.badge-secondary { color: #fff; background-color: var(--bs-secondary); }
.badge-success { color: #fff; background-color: var(--bs-success); }
.badge-danger { color: #fff; background-color: var(--bs-danger); }
.badge-info { color: #fff; background-color: var(--bs-info); }
.badge-dark { color: #fff; background-color: var(--bs-dark); }

.sr-only {
	position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
	margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important; border: 0 !important;
}