/* ===================================================================
   site.css — สไตล์กลางของเว็บ (โหลดเป็นไฟล์สุดท้ายใน _header.php)
   - ปรับให้หน้าเดิมแสดงผลเหมือนเดิมหลังเปลี่ยนเป็น Bootstrap 5
   - ส่วนหัวเว็บ, สไลเดอร์, แกลเลอรี, หน้าต่างดูรูป, ปุ่มกลับขึ้นด้านบน
   (เขียนเองทั้งหมด แทน LayerSlider, Unite Gallery และสคริปต์ของธีม Porto)
   =================================================================== */

:root{
	--brand:#6D3192; --brand-2:#8722C5; --brand-dark:#4A1D6E; --accent:#FFD54A; --pink:#C5005B;
}

/* ---------- ค่าพื้นฐานหลังเปลี่ยน Bootstrap 3 -> 5 ---------- */
/* - ฟอนต์: ธีมเดิมตั้ง "PT+Sans+Narrow" (ชื่อผิด) แล้ว vendor/news-card ทับเป็นฟอนต์ที่ไม่มีในเครื่อง จึงใช้ Prompt ทั้งเว็บแทน
   - พื้นหลัง/ขนาดตัวอักษร: เดิมได้จาก vendor/news-card */
body{ font-family:'Prompt', sans-serif; font-size:14px; background:#F2F2F2;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
/* Bootstrap 5 ขีดเส้นใต้ลิงก์ทุกอัน ส่วน Bootstrap 3 ขีดเฉพาะตอนชี้ */
a{ text-decoration:none; }
a:hover{ text-decoration:underline; }
.btn:hover, .dropdown-item:hover, .hd a:hover, .pl-card a:hover, .ft a:hover{ text-decoration:none; }
/* ความกว้าง container เท่ากับ Bootstrap 3 + custom.css เดิม (1270px ที่จอ 1300px ขึ้นไป) */
.container{ --bs-gutter-x:30px; }
@media (min-width: 576px){ .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; } }
@media (min-width: 1300px){ .container{ max-width:1270px; } }
/* หน้าเก่าหลายหน้าวางคอลัมน์ (col-md-9 + col-md-3) ไว้นอก .row ซึ่ง Bootstrap 3 ใช้ float เรียงข้างกัน
   แต่ Bootstrap 5 ใช้ flex ของ .row จึงต้องคืน float ให้คอลัมน์ที่ไม่ได้อยู่ใน .row (ตามจุดตัดของ Bootstrap 5) */
.container{ display:flow-root; }   /* แทน clearfix ของ .container ใน Bootstrap 3 */
@media (min-width: 576px){ :not(.row) > :is([class^="col-sm-"], [class*=" col-sm-"]){ float:left; } }
@media (min-width: 768px){ :not(.row) > :is([class^="col-md-"], [class*=" col-md-"]){ float:left; } }
@media (min-width: 992px){ :not(.row) > :is([class^="col-lg-"], [class*=" col-lg-"]){ float:left; } }
/* .row ของ Bootstrap 5 เป็น flex ถ้าอยู่ถัดจากคอลัมน์ที่ลอยจะหดเหลือกว้าง 0 จึงให้ขึ้นใต้คอลัมน์เหล่านั้นแบบ Bootstrap 3 */
.row{ clear:both; }
/* ปุ่มปิดในหัวโมดัล (modal/*.php) อยู่ก่อนชื่อเรื่อง: Bootstrap 3 ลอยไปขวา, Bootstrap 5 ต้องสั่งลำดับเอง */
.modal-header .close{ order:2; margin-left:auto; cursor:pointer; text-decoration:none; }
/* ปุ่ม btn-default ของ Bootstrap 3 (Bootstrap 5 ไม่มี) */
.btn-default{ --bs-btn-color:#333; --bs-btn-bg:#FFF; --bs-btn-border-color:#CCC;
              --bs-btn-hover-color:#333; --bs-btn-hover-bg:#E6E6E6; --bs-btn-hover-border-color:#ADADAD;
              --bs-btn-active-color:#333; --bs-btn-active-bg:#E6E6E6; --bs-btn-active-border-color:#ADADAD; }
/* Bootstrap 5 ซ่อนลูกศรของ select ที่ใช้คลาส form-control (ต้องเป็น form-select) */
select.form-control{ -webkit-appearance:menulist; -moz-appearance:menulist; appearance:auto; }
/* รูปในเนื้อหาไม่ล้นกรอบ (แทน .img-responsive ของ Bootstrap 3) */
.img-responsive{ max-width:100%; height:auto; }

/* ---------- ส่วนหัวเว็บ (_nav_top.php) ---------- */
.hd{ font-family:'Prompt', sans-serif; position:relative; z-index:20; }
.hd-top{ background:var(--brand); color:#FFF; font-size:14px; }
.hd-top-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; }
.hd-url{ text-transform:uppercase; letter-spacing:.3px; opacity:.95; }
.hd-top-r{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.hd-ic{ width:32px; height:32px; border-radius:50%; background:#FFF; color:var(--brand) !important;
        display:inline-flex; align-items:center; justify-content:center; font-size:15px; transition:.2s; }
.hd-ic:hover{ transform:translateY(-2px); }
.hd-lang-btn{ background:transparent; border:0; color:var(--accent); font-weight:bold; font-size:15px; padding:4px 6px; }
.hd-lang-btn:hover, .hd-lang-btn:focus{ color:#FFF; }
.hd-lang .dropdown-menu{ font-size:15px; min-width:150px; border-radius:12px; padding:6px; box-shadow:0 12px 28px rgba(0,0,0,.18); border:0; }
.hd-lang .dropdown-item{ border-radius:8px; padding:7px 12px; display:flex; align-items:center; gap:8px; }
.hd-lang .dropdown-item img{ width:22px; height:auto; }
.hd-chat{ color:var(--accent) !important; font-weight:bold; display:inline-flex; align-items:center; gap:6px; }
.hd-chat:hover{ color:#FFF !important; }

.hd-mid{ background:#F5EEFA url(../img/bg-head-logo.jpg) center top / cover no-repeat; }
.hd-mid-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 12px; }
.hd-logo img{ height:108px; width:auto; display:block; }
.hd-contact{ text-align:right; line-height:1.6; }
.hd-contact .addr{ color:var(--brand-2); font-size:16px; }
.hd-contact .tel{ color:var(--pink); font-size:15px; }
.hd-contact .tel a{ color:var(--pink); }
.hd-contact i{ margin-right:6px; }
.hd-burger{ width:46px; height:46px; border-radius:12px; border:0; background:var(--brand); color:#FFF; font-size:20px;
            display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(109,49,146,.3); }

.hd-nav{ background:var(--brand-2); }
.hd-menu{ list-style:none; margin:0; padding:12px 0; display:flex; flex-wrap:wrap; gap:4px; }
.hd-menu a{ display:inline-flex; align-items:center; gap:7px; color:#FFF; font-size:15px; padding:10px 16px; border-radius:20px; transition:.2s; white-space:nowrap; }
.hd-menu a:hover{ background:rgba(255,255,255,.16); color:#FFF; }
.hd-menu li.active a{ background:#FFF; color:var(--brand); }
.hd-menu li.admin a{ border:1px solid rgba(255,255,255,.6); }
@media (max-width: 991px){
	.hd-logo img{ height:72px; }
	.hd-mid-in{ padding:12px; }
	.hd-menu{ flex-direction:column; gap:2px; padding:8px 0 12px 0; }
	.hd-menu a{ display:flex; border-radius:12px; padding:11px 14px; }
}
@media (max-width: 600px){
	.hd-top-in{ min-height:42px; }
	.hd-chat span{ display:none; }
	.hd-logo img{ height:60px; }
}

/* ---------- สไลเดอร์หน้าแรก (_slider.php) ---------- */
.sl{ position:relative; overflow:hidden; background:#2A1238; aspect-ratio:1600 / 500; max-height:560px; width:100%; }
.sl-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s ease, visibility .9s; }
.sl-slide.is-active{ opacity:1; visibility:visible; }
.sl-slide img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04); transition:transform 6s ease-out; }
.sl-slide.is-active img{ transform:scale(1); }
.sl-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:46px; border-radius:50%; border:0;
         background:rgba(0,0,0,.35); color:#FFF; font-size:18px; display:flex; align-items:center; justify-content:center; transition:.2s; opacity:0; }
.sl:hover .sl-btn, .sl-btn:focus-visible{ opacity:1; }
.sl-btn:hover{ background:rgba(0,0,0,.6); }
.sl-prev{ left:16px; } .sl-next{ right:16px; }
.sl-dots{ position:absolute; left:0; right:0; bottom:14px; z-index:2; display:flex; justify-content:center; gap:8px; }
.sl-dots button{ width:10px; height:10px; border-radius:10px; border:0; padding:0; background:rgba(255,255,255,.55); transition:.3s; }
.sl-dots button.is-active{ width:28px; background:#FFF; }
@media (max-width: 600px){
	.sl-btn{ display:none; }
	.sl-dots{ bottom:8px; }
	.sl-dots button{ width:8px; height:8px; }
	.sl-dots button.is-active{ width:20px; }
}
@media (prefers-reduced-motion: reduce){
	.sl-slide, .sl-slide img{ transition:none; transform:none; }
}

/* ---------- แกลเลอรีอัลบั้ม (post-gallery.php) — เรียงแถวเต็มกว้างตามสัดส่วนรูป ---------- */
.gl{ display:flex; flex-wrap:wrap; gap:6px; }
.gl::after{ content:""; flex-grow:999999; }
.gl-item{ position:relative; display:block; flex-grow:calc(var(--r, 1) * 100); flex-basis:calc(var(--r, 1) * 150px);
          aspect-ratio:var(--r, 1); overflow:hidden; border-radius:10px; background:#EEE; max-height:260px; }
.gl-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.gl-item::after{ content:"\f00e"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; inset:0;
                 display:flex; align-items:center; justify-content:center; color:#FFF; font-size:22px;
                 background:rgba(109,49,146,.45); opacity:0; transition:opacity .25s; }
.gl-item:hover img{ transform:scale(1.06); }
.gl-item:hover::after, .gl-item:focus-visible::after{ opacity:1; }
@media (max-width: 600px){
	.gl{ gap:4px; }
	.gl-item{ flex-basis:calc(var(--r, 1) * 100px); border-radius:8px; }
}

/* ---------- หน้าต่างดูรูปใหญ่ (js/site.js) ---------- */
.lbox{ position:fixed; inset:0; z-index:2000; background:rgba(15,8,22,.92); display:flex; align-items:center; justify-content:center;
     opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; font-family:'Prompt', sans-serif; }
.lbox.is-open{ opacity:1; visibility:visible; }
.lbox-img{ max-width:calc(100vw - 140px); max-height:calc(100vh - 110px); border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5);
         user-select:none; -webkit-user-drag:none; }
.lbox-btn{ position:absolute; border:0; background:rgba(255,255,255,.12); color:#FFF; width:50px; height:50px; border-radius:50%;
         font-size:20px; display:flex; align-items:center; justify-content:center; transition:.2s; }
.lbox-btn:hover{ background:rgba(255,255,255,.25); }
.lbox-prev{ left:18px; top:50%; transform:translateY(-50%); }
.lbox-next{ right:18px; top:50%; transform:translateY(-50%); }
.lbox-close{ right:18px; top:18px; }
.lbox-count{ position:absolute; left:0; right:0; bottom:18px; text-align:center; color:#DDD; font-size:14px; }
.lbox-spin{ position:absolute; width:38px; height:38px; border:3px solid rgba(255,255,255,.25); border-top-color:#FFF; border-radius:50%;
          animation:lbox-spin .8s linear infinite; display:none; }
.lbox.is-loading .lbox-spin{ display:block; }
@keyframes lbox-spin{ to{ transform:rotate(360deg); } }
@media (max-width: 600px){
	.lbox-img{ max-width:100vw; max-height:calc(100vh - 120px); border-radius:0; }
	.lbox-prev, .lbox-next{ top:auto; bottom:10px; transform:none; width:44px; height:44px; }
	.lbox-count{ bottom:22px; }
}

/* ---------- ปุ่มกลับขึ้นด้านบน (แทนของธีม Porto) ---------- */
.totop{ position:fixed; right:18px; bottom:18px; z-index:1500; width:46px; height:46px; border-radius:50%; border:0;
        background:var(--brand); color:#FFF; font-size:18px; box-shadow:0 8px 20px rgba(0,0,0,.25);
        display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(10px); transition:.25s; }
.totop.is-shown{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--brand-dark); }

/* จอ 992-1299px เมนูเต็มแถวพอดี: ลดระยะห่างลงเล็กน้อยไม่ให้ตกบรรทัด */
@media (min-width: 992px) and (max-width: 1299px){
	.hd-menu{ gap:2px; }
	.hd-menu a{ padding:10px 11px; font-size:14px; gap:5px; }
}
/* เว้นที่ให้ปุ่มกลับขึ้นด้านบน ไม่ให้บังสถิติผู้เข้าชมท้ายเว็บ (_footer.php) */
.ft-bottom .container{ padding-right:76px; }
@media (max-width: 600px){
	.ft-bottom .container{ padding-right:15px; }
	#footer .ft-bottom{ padding-bottom:76px; }
}