/*
	bs5-compat.css  -  ให้ธีม Porto (ออกแบบบน Bootstrap 4) แสดงผลเหมือนเดิมบน Bootstrap 5
	----------------------------------------------------------------
	โหลดหลัง bootstrap.min.css + theme*.css + skin และก่อน custom.css
	(custom.css ยัง override ได้ตามเดิม)

	ทุกกฎในไฟล์นี้คือ "ค่าของ Bootstrap 4" ที่ Bootstrap 5 เปลี่ยนหรือลบไป
	ตรวจด้วยการวัด CSS ของทุก element ก่อน/หลังเปลี่ยนเวอร์ชันแล้ว
*/

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

/* class ที่ Bootstrap 5 ลบไป แต่ธีม (theme-elements.css) ยังอ้างถึง */
.form-group { margin-bottom: 1rem; }
.btn-block { display: block; width: 100%; }
.badge-pill { border-radius: 10rem; }

/* ข้อความ: Bootstrap 4 ตั้ง body ให้ชิดซ้าย */
body { text-align: left; }

/* Grid: Bootstrap 4 ใช้ gutter 30px (15px ต่อข้าง) / Bootstrap 5 ใช้ 24px */
.row { --bs-gutter-x: 30px; }

/* คอลัมน์: Bootstrap 4 ให้ทุก .col-* มี position:relative และ padding 15px เสมอ
   Bootstrap 5 ให้เฉพาะลูกตรงของ .row -> คอลัมน์ที่ไม่ได้อยู่ใน .row ตรง ๆ เสีย padding
   และสิ่งที่วางแบบ absolute ในคอลัมน์จะหลุดไปอิงกล่องที่อยู่นอกกว่า */
.col, [class^="col-"], [class*=" col-"] { position: relative; padding-right: 15px; padding-left: 15px; }

/* Container: Bootstrap 4 ใช้ padding 15px / Bootstrap 5 ใช้ 12px (ครึ่งหนึ่งของ gutter) */
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { --bs-gutter-x: 30px; }

/* .row ซ้อนใน .row โดยตรง: Bootstrap 5 ให้ padding/width 100% กับลูกทุกตัวของ .row
   Bootstrap 4 ปล่อย .row ด้านในยืดเต็มรวมขอบติดลบ (เช่น แบนเนอร์ 4:3 หน้าแรก) */
/* ลูกของ .row ที่ไม่ใช่คอลัมน์: Bootstrap 5 ใส่ padding / width:100% ให้ลูกทุกตัวของ .row
   Bootstrap 4 ใส่เฉพาะ .col-* (เช่น กล่องคอมเมนต์ Facebook ในหน้าข่าว) */
.row > :not(.col):not([class^="col-"]):not([class*=" col-"]) { flex-shrink: 1; width: auto; max-width: none; padding-left: 0; padding-right: 0; }
.row > .row:not(.col):not([class^="col-"]):not([class*=" col-"]) { flex: 1 0 100%; }

/* Breadcrumb: Bootstrap 4 มีมุมโค้ง .25rem */
.breadcrumb { border-radius: .25rem; }

/* รายการ: Bootstrap 4 ใช้ค่าเยื้องของเบราว์เซอร์ (40px) / Bootstrap 5 ใช้ 2rem */
ol, ul { padding-left: 40px; }

/* ฟอร์ม: ค่าของ Bootstrap 4 */
label { display: inline-block; margin-bottom: .5rem; }
.form-control { color: #495057; border-radius: .25rem; }
.form-control:not(textarea):not([size]):not([multiple]) { height: calc(1.5em + .75rem + 2px); }
/* Bootstrap 5 ซ่อนลูกศรของ <select class="form-control"> (ให้ใช้ .form-select แทน) */
select.form-control { -webkit-appearance: menulist; -moz-appearance: menulist; appearance: auto; }

/* สีปุ่ม: ชุดสีของ Bootstrap 4 (Bootstrap 5 เปลี่ยนเฉดสี และ hover ของ info/warning ใช้ตัวอักษรสีดำ)
   ธีม/ custom.css ที่กำหนดสีเองยัง override ได้ตามเดิม */
.btn-primary   { --bs-btn-bg:#007bff; --bs-btn-border-color:#007bff; --bs-btn-hover-bg:#0069d9; --bs-btn-hover-border-color:#0062cc; --bs-btn-active-bg:#0062cc; --bs-btn-active-border-color:#005cbf; }
.btn-secondary { --bs-btn-bg:#6c757d; --bs-btn-border-color:#6c757d; --bs-btn-hover-bg:#5a6268; --bs-btn-hover-border-color:#545b62; --bs-btn-active-bg:#545b62; --bs-btn-active-border-color:#4e555b; }
.btn-success   { --bs-btn-bg:#28a745; --bs-btn-border-color:#28a745; --bs-btn-hover-bg:#218838; --bs-btn-hover-border-color:#1e7e34; --bs-btn-active-bg:#1e7e34; --bs-btn-active-border-color:#1c7430; }
.btn-info      { --bs-btn-color:#fff; --bs-btn-bg:#17a2b8; --bs-btn-border-color:#17a2b8; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#138496; --bs-btn-hover-border-color:#117a8b; --bs-btn-active-color:#fff; --bs-btn-active-bg:#117a8b; --bs-btn-active-border-color:#10707f; --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:#17a2b8; --bs-btn-disabled-border-color:#17a2b8; }
.btn-warning   { --bs-btn-color:#212529; --bs-btn-hover-color:#212529; --bs-btn-hover-bg:#e0a800; --bs-btn-hover-border-color:#d39e00; --bs-btn-active-color:#212529; --bs-btn-active-bg:#d39e00; --bs-btn-active-border-color:#c69500; }
.btn-danger    { --bs-btn-hover-bg:#c82333; --bs-btn-hover-border-color:#bd2130; --bs-btn-active-bg:#bd2130; --bs-btn-active-border-color:#b21f2d; }