/* =====================================================================
 * bs4-compat.css — คงหน้าตาเดิมหลังเปลี่ยน Bootstrap 4.1.3 เป็น 5.3
 * ธีม Porto ของเว็บถูกออกแบบบน Bootstrap 4 ไฟล์นี้คืนค่าเริ่มต้นที่ Bootstrap 5 เปลี่ยนไป
 * และ class ที่ Bootstrap 5 ถอดออก — โหลดหลัง bootstrap.min.css แต่ก่อน theme.css
 * (ธีมจึงยังเขียนทับได้เหมือนเดิม)
 * ===================================================================== */

/* BS5 ขีดเส้นใต้ลิงก์ทุกลิงก์ — BS4 ขีดเฉพาะตอนชี้ */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* BS5 ลดระยะห่างคอลัมน์เป็น 24px — BS4 ใช้ 30px */
.row,
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { --bs-gutter-x: 30px; }

/* BS5 บังคับลูกทุกตัวของ .row ให้กว้าง 100% — BS4 บังคับเฉพาะ .col-* */
.row > :not([class^="col"]):not([class*=" col"]) {
	flex-shrink: 1;
	width: auto;
	max-width: none;
	padding-right: 0;
	padding-left: 0;
}

/* BS5 เอาระยะใต้ label ออก */
label { display: inline-block; margin-bottom: .5rem; }

/* ----- class ที่ Bootstrap 5 ถอดออก (เผื่อธีม/โค้ดเก่ายังใช้) ----- */
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: .5rem; }
.form-group { margin-bottom: 1rem; }
.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }
.form-row > .col, .form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; }
.no-gutters { margin-right: 0; margin-left: 0; }
.no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }

.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.font-weight-light { font-weight: 300 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-italic { font-style: italic !important; }
.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;
}

.badge-pill { 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-warning   { color: #212529; background-color: var(--bs-warning); }
.badge-info      { color: #fff; background-color: var(--bs-info); }
.badge-light     { color: #212529; background-color: var(--bs-light); }
.badge-dark      { color: #fff; background-color: var(--bs-dark); }

.embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; }
.embed-responsive::before { content: ""; display: block; }
.embed-responsive-16by9::before { padding-top: 56.25%; }
.embed-responsive-4by3::before { padding-top: 75%; }
.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;
}

.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; }

.close {
	float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000;
	text-shadow: 0 1px 0 #fff; opacity: .5; background: transparent; border: 0; padding: 0;
}
.close:hover { opacity: .75; text-decoration: none; }