/* =====================================================================
   theme-green.css — ธีมกลางโทนสีเขียวของ จองตั๋วรถทัวร์.com
   ---------------------------------------------------------------------
   ไฟล์นี้ถูกโหลดเป็นไฟล์สุดท้ายใน <head> ของทุกหน้า เพื่อให้ทุกหน้า
   ใช้สี ฟอนต์ ปุ่ม เมนู ตาราง และฟุตเตอร์ แบบเดียวกันทั้งเว็บ
   ถ้าต้องการเปลี่ยนโทนสีทั้งเว็บ ให้แก้เฉพาะตัวแปรใน :root ด้านล่าง
   ===================================================================== */

:root {
  /* ---- สีหลัก (Brand) ---- */
  --jb-primary: #059669;         /* เขียวหลัก: ปุ่ม ลิงก์ หัวข้อ */
  --jb-primary-hover: #047857;   /* เขียวตอน hover */
  --jb-primary-dark: #065f46;    /* เขียวเข้ม: แถบเมนู */
  --jb-primary-deep: #064e3b;    /* เขียวเข้มที่สุด: ฟุตเตอร์ */
  --jb-accent: #10b981;          /* เขียวสด: ไฮไลต์ */
  --jb-soft: #ecfdf5;            /* พื้นเขียวอ่อนมาก */
  --jb-soft-2: #d1fae5;          /* พื้นเขียวอ่อน */
  --jb-soft-border: #a7f3d0;     /* เส้นขอบเขียวอ่อน */
  --jb-highlight: #f59e0b;       /* สีเน้นรอง (ส้มทอง) ใช้เท่าที่จำเป็น */
  --jb-danger: #dc2626;

  /* ---- สีพื้นและตัวอักษร ---- */
  --jb-bg: #f5faf7;
  --jb-surface: #ffffff;
  --jb-text: #1e293b;
  --jb-muted: #64748b;
  --jb-border: #e2e8f0;

  /* ---- สีเฉพาะส่วน (เปลี่ยนได้ที่หลังบ้าน > สีของเว็บ) ---- */
  --jb-menu-from: var(--jb-primary-deep);   /* แถบเมนู ซ้าย */
  --jb-menu-to: var(--jb-primary);          /* แถบเมนู ขวา */
  --jb-menu-text: #ffffff;                  /* ตัวอักษรบนแถบเมนู */
  --jb-menu-shadow: rgba(6, 78, 59, 0.18);
  --jb-hbtn-bg: #ffffff;                    /* ปุ่มเด่นบนแถบเมนู */
  --jb-hbtn-text: var(--jb-primary-dark);
  --jb-btn: var(--jb-primary);              /* ปุ่มจอง / ปุ่มหลัก */
  --jb-btn-hover: var(--jb-primary-hover);
  --jb-btn-text: #ffffff;
  --jb-footer-bg: var(--jb-primary-deep);
  --jb-footer-text: #d1fae5;
  --jb-footer-muted: #a7f3d0;
  --jb-footer-head: #ffffff;
  --jb-focus-ring: rgba(5, 150, 105, 0.25);

  /* ---- รูปทรง ---- */
  --jb-radius: 12px;
  --jb-radius-sm: 8px;
  --jb-shadow: 0 4px 16px rgba(6, 78, 59, 0.08);
  --jb-font: 'Sarabun', 'Prompt', 'Tahoma', sans-serif;

  /* ---- ตัวแปรเดิมที่หน้าต่าง ๆ ใช้อยู่ (ผูกเข้ากับธีมเดียวกัน) ---- */
  --primary: var(--jb-primary);
  --primary-color: var(--jb-primary);
  --secondary: var(--jb-primary-hover);
  --accent: var(--jb-highlight);
  --dark: var(--jb-text);
  --dark-color: var(--jb-text);
  --bg: var(--jb-bg);
  --light: var(--jb-soft);
  --gray: var(--jb-muted);
  --slate: var(--jb-muted);
  --text-muted: var(--jb-muted);
  --p-green: var(--jb-primary);
  --p-dark: var(--jb-text);
  --p-gray: var(--jb-muted);
  --tbo-blue: var(--jb-primary);
  --tbo-light-blue: var(--jb-soft);
  --tbo-text: var(--jb-text);
  --tbo-gray: var(--jb-muted);

  /* Bootstrap 5 */
  --bs-primary: #059669;
  --bs-primary-rgb: 5, 150, 105;
  --bs-success: #059669;
  --bs-success-rgb: 5, 150, 105;
  --bs-link-color: #059669;
  --bs-link-color-rgb: 5, 150, 105;
  --bs-link-hover-color: #047857;
  --bs-link-hover-color-rgb: 4, 120, 87;
  --bs-body-font-family: var(--jb-font);
  --bs-body-color: #1e293b;
  --bs-heading-color: #065f46;
  --bs-font-sans-serif: var(--jb-font);
}

/* =====================================================================
   1) พื้นฐาน: ฟอนต์ สีตัวอักษร ลิงก์ หัวข้อ
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--jb-font) !important;
  color: var(--jb-text);
  line-height: 1.65;
}
body, body[bgcolor] { background-color: var(--jb-bg); }

/* ใช้ :where() เพื่อให้สีหัวข้อเป็นค่าเริ่มต้นเท่านั้น หน้าใดกำหนดสีเองไว้จะยังใช้สีนั้น */
:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: var(--jb-font);
  color: var(--jb-primary-dark);
  font-weight: 700;
  line-height: 1.35;
}
/* หัวข้อที่อยู่บนพื้นเข้ม ให้ใช้สีตัวอักษรของพื้นนั้น */
:where([class*="bg-dark"], [class*="bg-success"], [class*="bg-primary"], .text-white, .text-light,
       .main-footer, .jb-footer, .navbar, .main-header, [bgcolor="#009900" i])
  :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: inherit; }

a { color: var(--jb-primary); }
a:hover, a:focus { color: var(--jb-primary-hover); }

/* ลิงก์ที่หน้าเก่ากำหนดสีน้ำเงินไว้ใน <font> หรือ <a> */
font[color="#0000FF" i], font[color="#0033FF" i], font[color="#0066FF" i],
font[color="#0099FF" i], font[color="blue" i], font[color="#000099" i],
font[color="#003399" i], font[color="#3366FF" i] { color: var(--jb-primary) !important; }
font[color="#009900" i], font[color="#009933" i], font[color="#006600" i],
font[color="green" i], font[color="#00CC00" i], font[color="#339900" i] { color: var(--jb-primary) !important; }
font[color="#FF6600" i], font[color="#FF9900" i] { color: var(--jb-highlight) !important; }
font[face] { font-family: var(--jb-font) !important; }

::selection { background: var(--jb-soft-2); color: var(--jb-primary-deep); }

/* =====================================================================
   2) เมนูด้านบน (Bootstrap navbar ของหน้าเก่า) — ทำให้เหมือนแถบเมนูหลัก
   ===================================================================== */
.navbar,
.navbar.bg-success, .navbar.bg-dark, .navbar.bg-primary, .navbar.bg-light,
nav.navbar[style] {
  background: linear-gradient(90deg, var(--jb-menu-from), var(--jb-menu-to)) !important;
  box-shadow: 0 2px 12px var(--jb-menu-shadow);
  border: 0;
  font-family: var(--jb-font);
}
.navbar .navbar-brand,
.navbar .navbar-brand:hover { color: var(--jb-menu-text) !important; font-weight: 700; }
.navbar .nav-link,
.navbar-light .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link {
  color: var(--jb-menu-text) !important;
  opacity: .95;
  font-weight: 500;
  border-radius: 6px;
  transition: background-color .2s ease, color .2s ease;
}
.navbar .nav-link:hover, .navbar .nav-link:focus,
.navbar .nav-item.active .nav-link, .navbar .nav-link.active {
  color: var(--jb-menu-text) !important; opacity: 1;
  background-color: rgba(255, 255, 255, 0.14);
}
.navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.55) !important; }
.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar .dropdown-menu {
  background: #fff !important;
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius-sm);
  box-shadow: var(--jb-shadow);
}
.navbar .dropdown-menu .dropdown-item { color: var(--jb-text) !important; }
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  background: var(--jb-soft) !important;
  color: var(--jb-primary) !important;
}
.navbar .btn-outline-light { border-color: #fff; color: #fff; }
.navbar .btn-outline-light:hover { background: #fff; color: var(--jb-primary-dark); }

/* =====================================================================
   3) ปุ่ม — ทุกปุ่มใช้รูปทรงและโทนเดียวกัน
   ===================================================================== */
.btn {
  font-family: var(--jb-font);
  font-weight: 600;
  border-radius: var(--jb-radius-sm);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-primary, .btn-success, .btn-info, .btn-danger,
.btn-booking, input[type="submit"], button[type="submit"]:not([class]) {
  background-color: var(--jb-btn) !important;
  border-color: var(--jb-btn) !important;
  color: var(--jb-btn-text) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-danger:hover,
.btn-primary:focus, .btn-success:focus, .btn-info:focus, .btn-danger:focus,
.btn-booking:hover, input[type="submit"]:hover {
  background-color: var(--jb-btn-hover) !important;
  border-color: var(--jb-btn-hover) !important;
  color: var(--jb-btn-text) !important;
}
.btn-secondary, .btn-dark {
  background-color: var(--jb-primary-dark) !important;
  border-color: var(--jb-primary-dark) !important;
  color: #fff !important;
}
.btn-secondary:hover, .btn-dark:hover {
  background-color: var(--jb-primary-deep) !important;
  border-color: var(--jb-primary-deep) !important;
}
.btn-warning {
  background-color: var(--jb-highlight) !important;
  border-color: var(--jb-highlight) !important;
  color: #1e293b !important;
}
.btn-light {
  background-color: var(--jb-soft) !important;
  border-color: var(--jb-soft-border) !important;
  color: var(--jb-primary-dark) !important;
}
.btn-outline-primary, .btn-outline-success, .btn-outline-secondary,
.btn-outline-info, .btn-outline-dark {
  color: var(--jb-primary) !important;
  border-color: var(--jb-primary) !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-secondary:hover,
.btn-outline-info:hover, .btn-outline-dark:hover {
  color: #fff !important;
  background-color: var(--jb-primary) !important;
}
.btn:focus, .btn:focus-visible, .form-control:focus, .form-select:focus, .custom-select:focus {
  box-shadow: 0 0 0 .2rem var(--jb-focus-ring) !important;
}
/* ปุ่มกลับขึ้นด้านบน (หน้าเก่าใช้สีส้ม) */
#myBtn {
  background-color: var(--jb-primary) !important;
  color: #fff !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
#myBtn:hover { background-color: var(--jb-primary-hover) !important; }

/* =====================================================================
   4) สีพื้นหลัง/ตัวอักษรแบบ Bootstrap (utility)
   ===================================================================== */
.bg-success, .bg-primary { background-color: var(--jb-primary) !important; }
.bg-dark { background-color: var(--jb-primary-deep) !important; }
.bg-info { background-color: var(--jb-accent) !important; }
.bg-light { background-color: var(--jb-soft) !important; }
.text-primary, .text-success, .text-info { color: var(--jb-primary) !important; }
.text-muted, .text-secondary { color: var(--jb-muted) !important; }
.border-primary, .border-success { border-color: var(--jb-primary) !important; }
.badge-primary, .badge-success, .badge.bg-primary, .badge.bg-success,
.badge-info, .badge.bg-info { background-color: var(--jb-primary) !important; color: #fff !important; }
.badge-secondary, .badge.bg-secondary { background-color: var(--jb-soft-2) !important; color: var(--jb-primary-dark) !important; }

/* กล่องข้อความแจ้งเตือน: ใช้โทนเขียวอ่อน (ยกเว้นแจ้งเตือนสีแดง) */
.alert-warning, .alert-info, .alert-primary, .alert-success, .alert-secondary, .alert-light {
  background-color: var(--jb-soft) !important;
  border: 1px solid var(--jb-soft-border) !important;
  border-left: 5px solid var(--jb-primary) !important;
  color: var(--jb-primary-deep) !important;
  border-radius: var(--jb-radius-sm);
}
.alert-warning a, .alert-info a, .alert-success a { color: var(--jb-primary-hover); font-weight: 600; }
.list-group-item.alert-warning, .list-group-item.alert-info, .list-group-item.alert-success {
  border-left-width: 1px !important;
  border-radius: 0;
}

/* การ์ด / list group / pagination / nav pills */
.card {
  border: 1px solid var(--jb-border);
  border-radius: var(--jb-radius);
  box-shadow: var(--jb-shadow);
}
.card-header {
  background: var(--jb-soft);
  color: var(--jb-primary-dark);
  font-weight: 700;
  border-bottom: 1px solid var(--jb-soft-border);
}
.card-title { color: var(--jb-primary-dark); }
.list-group-item.active, .nav-pills .nav-link.active, .nav-pills .show > .nav-link,
.page-item.active .page-link, .dropdown-item.active, .dropdown-item:active {
  background-color: var(--jb-primary) !important;
  border-color: var(--jb-primary) !important;
  color: #fff !important;
}
.page-link, .nav-pills .nav-link, .nav-tabs .nav-link { color: var(--jb-primary); }
.nav-tabs .nav-link.active { color: var(--jb-primary-dark); border-top: 3px solid var(--jb-primary); }
.progress-bar { background-color: var(--jb-primary); }
.form-check-input:checked, .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--jb-primary) !important;
  border-color: var(--jb-primary) !important;
}
.form-control:focus, .form-select:focus { border-color: var(--jb-accent) !important; }

/* =====================================================================
   5) ตาราง — ทั้งตาราง Bootstrap และตารางแบบเก่า
   ===================================================================== */
.table thead th, .table > thead > tr > th, .thead-dark th, .table-dark th,
.table-success th, .table-primary th {
  background-color: var(--jb-primary) !important;
  color: #fff !important;
  border-color: var(--jb-primary-hover) !important;
}
.table-striped tbody tr:nth-of-type(odd), .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--jb-soft);
  --bs-table-accent-bg: var(--jb-soft);
}
.table-hover tbody tr:hover, .table-hover > tbody > tr:hover > * {
  background-color: var(--jb-soft-2);
  --bs-table-accent-bg: var(--jb-soft-2);
}
.table-success, .table-success > td, .table-primary, .table-primary > td,
.table-info, .table-info > td { background-color: var(--jb-soft) !important; }

/* ตารางแบบเก่าที่กำหนดสีด้วย bgcolor="..." — เปลี่ยนเป็นโทนเขียวชุดเดียว */
[bgcolor="#009900" i], [bgcolor="#009933" i], [bgcolor="#006600" i], [bgcolor="#00CC00" i],
[bgcolor="#339900" i], [bgcolor="#336600" i], [bgcolor="#008000" i], [bgcolor="green" i],
[bgcolor="#2E7D32" i], [bgcolor="#28A745" i] {
  background-color: var(--jb-primary) !important;
  color: #fff;
}
[bgcolor="#009900" i] a, [bgcolor="#009933" i] a, [bgcolor="#006600" i] a { color: #fff; }
[bgcolor="#CCFFCC" i], [bgcolor="#E1ECE4" i], [bgcolor="#99FF66" i], [bgcolor="#CCFF99" i],
[bgcolor="#E0F4FF" i], [bgcolor="#B9E5FC" i], [bgcolor="#87D3EB" i], [bgcolor="#CCFFFF" i],
[bgcolor="#99CCFF" i], [bgcolor="#CCE5FF" i] {
  background-color: var(--jb-soft) !important;
}
[bgcolor="#68CBFF" i], [bgcolor="#1EC0DB" i], [bgcolor="#0099FF" i], [bgcolor="#0066FF" i],
[bgcolor="#3399FF" i], [bgcolor="#66CCFF" i] {
  background-color: var(--jb-soft-2) !important;
}
[bgcolor="#FF6600" i], [bgcolor="#FF9900" i] { background-color: var(--jb-primary-dark) !important; color: #fff; }
[bgcolor="#FFFF00" i], [bgcolor="#FFFF66" i], [bgcolor="#FFFFCC" i] { background-color: #fef9c3 !important; }
[bgcolor="#EFEFEF" i], [bgcolor="#EEEEEE" i], [bgcolor="#E8E8E8" i], [bgcolor="#DDDDDD" i] {
  background-color: #f1f5f4 !important;
}
[bgcolor="#CCCCCC" i] { background-color: var(--jb-border) !important; }
table[bordercolor] { border-color: var(--jb-soft-border) !important; }

/* =====================================================================
   6) แถบเมนูหลัก (header.php) และฟุตเตอร์หลัก (footer.php)
      ใช้ร่วมกันทุกหน้าที่เป็น PHP
   ===================================================================== */
.main-header {
  background: linear-gradient(90deg, var(--jb-menu-from), var(--jb-menu-to)) !important;
  box-shadow: 0 2px 12px var(--jb-menu-shadow) !important;
}
.main-header .logo a { color: var(--jb-menu-text) !important; }
.main-header .menu-toggle span { background: var(--jb-menu-text) !important; }

.main-footer, .jb-footer {
  background: var(--jb-footer-bg) !important;
  color: var(--jb-footer-text) !important;
  border-top: 4px solid var(--jb-accent) !important;
}

/* ฟุตเตอร์แบบเก่า (คลาส footer / container bg-dark) */
footer.footer, .footer { font-family: var(--jb-font); }

/* =====================================================================
   7) ส่วนประกอบที่หน้าเว็บใช้บ่อย
   ===================================================================== */
.breadcrumb { background: transparent; }
.breadcrumb a { color: var(--jb-primary); }
.jumbotron {
  background: linear-gradient(135deg, var(--jb-soft), #fff);
  border: 1px solid var(--jb-soft-border);
  border-radius: var(--jb-radius);
}
hr { border-color: var(--jb-soft-border); }
blockquote { border-left: 4px solid var(--jb-primary); padding-left: 1rem; }

/* ข้อความ class style* จาก Dreamweaver ที่ใช้สีฟ้า/น้ำเงินเป็นหัวข้อ */
.style2, .style48 { color: var(--jb-primary-dark) !important; }

/* ปรับให้หน้าเก่าที่กว้างตายตัวไม่ล้นจอมือถือ */
@media (max-width: 768px) {
  table[width] { max-width: 100% !important; }
  iframe { max-width: 100%; }
}

/* ===== สีที่ตั้งค่าจากหลังบ้าน (/theme-colors-admin.php) ===== */
html:root {
  --jb-primary: #2563eb;
  --jb-primary-hover: #1e4fbc;
  --jb-soft: #eef3fd;
  --jb-soft-2: #d3e0fb;
  --jb-soft-border: #a8c1f7;
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-success: #2563eb;
  --bs-success-rgb: 37, 99, 235;
  --bs-link-color: #2563eb;
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: #1e4fbc;
  --bs-link-hover-color-rgb: 30, 79, 188;
  --jb-focus-ring: rgba(37, 99, 235, 0.25);
  --jb-primary-dark: #1e3a8a;
  --bs-heading-color: #1e3a8a;
  --jb-primary-deep: #1a3175;
  --jb-bg: #f5f8ff;
  --jb-accent: #60a5fa;
  --jb-menu-from: #1e3a8a;
  --jb-menu-to: #2563eb;
  --jb-hbtn-text: #1e3a8a;
  --jb-btn: #2563eb;
  --jb-footer-bg: #172554;
  --jb-footer-text: #dbeafe;
  --jb-btn-hover: #1e51c1;
  --jb-footer-muted: #b0bfd9;
  --jb-menu-shadow: rgba(30, 58, 138, 0.18);
}