/* ============================================================================
 *  ให้ธีมเดิม (ออกแบบบน Bootstrap 3) แสดงผลเหมือนเดิมบน Bootstrap 5
 *  โหลดต่อจาก vendor/bootstrap5/css/bootstrap.min.css และก่อน CSS ของธีม
 * ========================================================================== */

/* ลิงก์: Bootstrap 5 ขีดเส้นใต้ทุกลิงก์ ส่วน Bootstrap 3 ไม่ขีด (ขีดตอนชี้) */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.btn:hover, .btn:focus, .nav a:hover, .nav a:focus, .dropdown-menu a:hover, .dropdown-menu a:focus,
#header a:hover, #header a:focus, .breadcrumb a:hover { text-decoration: none; }

/* ระยะห่างคอลัมน์และความกว้าง container ตาม Bootstrap 3 (30px / สูงสุด 1170px) */
.container, .container-fluid, .row { --bs-gutter-x: 30px; }
@media (min-width: 576px) and (max-width: 767px) { .container { max-width: none; } }
@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }

/* Bootstrap 5 ใส่ระยะขอบให้ทุกอย่างใน .row ส่วน Bootstrap 3 ใส่ให้เฉพาะคอลัมน์ */
/* .row ของ Bootstrap 5 เป็น flex (สร้าง BFC) ถ้ามีคอลัมน์ float อยู่ก่อนหน้า แถวจะหดเหลือ 0px แทนที่จะลงไปใต้ float แบบ Bootstrap 3 */
.row { clear: both; }
/* ใช้ :where ให้ specificity เท่ากับ .row > * ของ Bootstrap 5 — class ของธีมที่กำหนดความกว้าง/ระยะเองยังมีผลเหมือนเดิม
   flex-shrink: 1 ให้กล่องที่มี margin หดพอดีแถว ไม่ล้น (Bootstrap 5 ตั้ง 0) */
.row > :where(:not([class^="col"]):not([class*=" col"])) { padding-left: 0; padding-right: 0; flex-shrink: 1; }

/* ขนาดตัวอักษรพื้นฐานตาม Bootstrap 3 (ธีมกำหนดทับอีกชั้น) */
body { font-size: 14px; line-height: 1.42857143; }
.btn { font-size: 14px; }
.btn-lg { font-size: 18px; }
.btn-sm { font-size: 12px; }

/* หัวข้อ: Bootstrap 5 ตั้งน้ำหนักและระยะต่างไปจากเดิม */
h1, h2, h3, h4, h5, h6 { margin-top: 0; }

/* ปุ่มปิด .close ใน popup (Bootstrap 5 ไม่มีแล้ว) */
.close {
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	opacity: .35;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}
.close:hover, .close:focus { opacity: .6; color: #000; text-decoration: none; }
.modal-header { justify-content: flex-start; }
.modal-header .close { order: 2; margin-left: auto; }

/* popup ขนาดกลางของ Bootstrap 3 (.modal-md) */
@media (min-width: 576px) {
	.modal-md { max-width: 600px; }
}

/* ตารางและฟอร์ม: ใกล้เคียงขนาดเดิม */
.table > :not(caption) > * > * { padding: 8px; }
.form-control, .form-select { font-size: 14px; }
label { margin-bottom: 5px; font-weight: 700; }

/* ---------- คอลัมน์ที่ไม่ได้อยู่ใน .row ----------
   เทมเพลตเดิมวาง col-* ไว้ตรง ๆ ใน container (Bootstrap 3 ใช้ float จึงเรียงกันได้)
   Bootstrap 5 ใช้ flex ที่ต้องมี .row ครอบ -> ให้คอลัมน์ที่อยู่นอก .row ลอยเรียงแบบเดิม
   (ความกว้างใช้ของ Bootstrap 5 เอง ชื่อ class ถูกแปลงแล้ว: xs->col, sm->md, md->lg, lg->xl) */
:not(.row) > [class^="col-"], :not(.row) > [class*=" col-"] { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
.container::after, .container-fluid::after, .clearfix::after { content: ""; display: table; clear: both; }
:not(.row) > .col-1, :not(.row) > .col-2, :not(.row) > .col-3, :not(.row) > .col-4, :not(.row) > .col-5, :not(.row) > .col-6, :not(.row) > .col-7, :not(.row) > .col-8, :not(.row) > .col-9, :not(.row) > .col-10, :not(.row) > .col-11, :not(.row) > .col-12 { float: left; }
@media (min-width: 768px) {
:not(.row) > .col-md-1, :not(.row) > .col-md-2, :not(.row) > .col-md-3, :not(.row) > .col-md-4, :not(.row) > .col-md-5, :not(.row) > .col-md-6, :not(.row) > .col-md-7, :not(.row) > .col-md-8, :not(.row) > .col-md-9, :not(.row) > .col-md-10, :not(.row) > .col-md-11, :not(.row) > .col-md-12 { float: left; }
}
@media (min-width: 992px) {
:not(.row) > .col-lg-1, :not(.row) > .col-lg-2, :not(.row) > .col-lg-3, :not(.row) > .col-lg-4, :not(.row) > .col-lg-5, :not(.row) > .col-lg-6, :not(.row) > .col-lg-7, :not(.row) > .col-lg-8, :not(.row) > .col-lg-9, :not(.row) > .col-lg-10, :not(.row) > .col-lg-11, :not(.row) > .col-lg-12 { float: left; }
}
@media (min-width: 1200px) {
:not(.row) > .col-xl-1, :not(.row) > .col-xl-2, :not(.row) > .col-xl-3, :not(.row) > .col-xl-4, :not(.row) > .col-xl-5, :not(.row) > .col-xl-6, :not(.row) > .col-xl-7, :not(.row) > .col-xl-8, :not(.row) > .col-xl-9, :not(.row) > .col-xl-10, :not(.row) > .col-xl-11, :not(.row) > .col-xl-12 { float: left; }
}

/* custom.css เดิมตั้งระยะขอบคอลัมน์ 7px ให้ col-xs/sm/md/lg -> ครอบชื่อใหม่ด้วย */
[class^="col-"], [class*=" col-"] { padding-right: 7px !important; padding-left: 7px !important; }
/* theme.css เดิม: .col-md-3 .sidebar (ชื่อใหม่ col-lg-3) */
@media (max-width: 991px) { .col-lg-3 .sidebar { clear: both; } }

/* เมนู dropdown แบบ Bootstrap 3 (<ul class="dropdown-menu"><li><a>) — Bootstrap 5 ใช้ .dropdown-item แทน
   ธีมกำหนดสี/ระยะเอง ส่วนนี้คืนค่าพื้นฐานที่ Bootstrap 3 เคยให้ */
.dropdown-menu { font-size: 14px; }
.dropdown-menu > li > a {
	display: block;
	clear: both;
	white-space: nowrap;
	line-height: 1.42857143;
}

/* เมนูหลักบนมือถือ: Bootstrap 5 ตั้ง .nav เป็น flex ทำให้รายการเรียงต่อกันในแถว
   (Bootstrap 3 เป็น block — ธีมจัดเมนูมือถือให้เรียงบรรทัดละรายการ) */
@media (max-width: 991px) {
	#header .header-nav-main .nav { display: block; }
}
/* ค่าพื้นฐานของ .nav ใน Bootstrap 3 (ธีมกำหนดทับเฉพาะบางส่วน) */
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 15px; }
/* nav-pills ของ Bootstrap 3 เว้นระยะ 2px ระหว่างรายการ */
.nav-pills > li + li { margin-left: 2px; }
@media (max-width: 991px) { #header .header-nav-main .nav-pills > li + li { margin-left: 0; } }
/* img-responsive (Bootstrap 3) เป็น block — ชื่อใหม่ img-fluid ของ Bootstrap 5 เป็น inline ทำให้มีช่องว่างใต้รูป */
.img-fluid { display: block; }

/* สีตัวอักษร .text-primary ของเว็บ (Bootstrap 5 ค่าเริ่มต้นเป็น #0d6efd) */
.text-primary { color: rgb(51, 177, 240) !important; }