/**
 * Custom overrides — โหลดหลัง style.css
 * Layout: Sidebar เมนูด้านซ้าย (ใช้โครง .sidebar / .sidebar-nav ของ NiceAdmin ใน style.css)
 */

/* ===================================================================
   THEME PALETTE — ชุดสีของเว็บ อิงสีโลโก้ KBD POWER (#2F318B indigo)
   * แก้สีทั้งเว็บได้จากบล็อกนี้จุดเดียว *
   style.css ถูกแปลงให้อ้าง var เหล่านี้แล้วทุกจุด (มี fallback ในตัว)
   ต้นฉบับ NiceAdmin เดิมเก็บไว้ที่ _archive/style-niceadmin-original.css
   =================================================================== */
:root {
  /* สีหลัก — ดึงจากพื้นหลังโลโก้โดยตรง (ไม่เปลี่ยน) */
  --kbd-primary: #2f318b;       /* ลิงก์ ปุ่ม ไอคอน เมนู active */
  --kbd-primary-light: #4d4fb3; /* ลิงก์ hover */
  --kbd-primary-hover: #3f41a3; /* ปุ่ม hover */
  --kbd-primary-dark: #262862;  /* ปุ่ม submit hover / กด */
  --kbd-primary-rgb: 47, 49, 139;

  /* หัวข้อ / ตัวหนังสือเข้ม */
  --kbd-heading: #1b1d5c;
  --kbd-heading-rgb: 27, 29, 92;

  /* สีเน้น (accent) — ใช้เฉพาะปุ่ม "ขอใบเสนอราคา/ติดต่อเรา" และป้ายสินค้า
     ห้ามใช้กับเมนู active (สงวนให้ indigo) และห้ามใช้กับปุ่มทั่วไป ไม่งั้นจะเฝือจนไม่เน้นอะไรเลย
     ⚠️ accent-bright ผ่านแค่เกณฑ์ UI 3:1 (3.58:1) — ใช้กับเส้น/ไอคอนเท่านั้น ห้ามวางตัวอักษรทับ */
  --kbd-accent: #c2410c;        /* ปุ่ม CTA — ตัวขาวบนพื้นนี้ = 5.18:1 ผ่าน AA */
  --kbd-accent-hover: #9a3412;  /* CTA ตอน hover/กด = 7.31:1 */
  --kbd-accent-bright: #e8590c; /* เส้น/ไอคอนเท่านั้น */
  --kbd-accent-bright-rgb: 232, 89, 12;
  --kbd-accent-soft: #fff1e6;   /* พื้นป้ายสินค้า (ตัวอักษร accent-hover = 6.60:1) */

  /* ตัวหนังสือรอง — เทากลาง (เดิมเป็นเทาอมม่วง ทำให้ทั้งหน้าดูม่วงไปหมด)
     ตัวเลขคือ contrast บนพื้นขาว ผ่านเกณฑ์ WCAG AA */
  --kbd-muted: #5b6b80;        /* 5.44:1 — ข้อความรอง (เดิม #6b6c93 = 5.01:1) */
  --kbd-muted-2: #748699;      /* 3.74:1 — ไอคอน/scrollbar (เกณฑ์ UI 3:1 ; เดิม #83849f = 3.64:1) */
  --kbd-slate: #4b5b70;        /* 7.2:1 */
  --kbd-slate-light: #64748b;  /* 4.76:1 */
  --kbd-slate-2: #64748b;
  --kbd-slate-dark: #334155;
  --kbd-slate-darker: #1e293b;

  /* พื้นหลัง / เส้นขอบ */
  --kbd-bg: #f8fafc;      /* พื้นหลังหน้า */
  --kbd-bg-alt: #f1f5f9;
  --kbd-tint: #eef2ff;    /* พื้นอ่อนสีธีม — พื้นของกลุ่มเมนูที่เปิดอยู่ */
  --kbd-tint-2: #dbe0fb;
  --kbd-tint-3: #a5abe8;
  --kbd-border: #e2e8f0;
  --kbd-border-2: #e2e8f0;

  /* มุมโค้ง + เงา — ให้ทั้งเว็บใช้ชุดเดียวกัน (เดิมการ์ด/ปุ่ม/อินพุตต่างคนต่างค่า) */
  --kbd-radius: 10px;     /* การ์ด กล่อง รูป */
  --kbd-radius-sm: 6px;   /* ปุ่ม ป้าย อินพุต เมนู */
  --kbd-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .06);
  --kbd-shadow-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .10);
}

/* --- Bootstrap components ให้ใช้สีธีมเดียวกัน (bootstrap 5.2 = CSS vars ต่อ component) --- */
.btn-primary {
  --bs-btn-bg: var(--kbd-primary);
  --bs-btn-border-color: var(--kbd-primary);
  --bs-btn-hover-bg: var(--kbd-primary-hover);
  --bs-btn-hover-border-color: var(--kbd-primary-hover);
  --bs-btn-active-bg: var(--kbd-primary-dark);
  --bs-btn-active-border-color: var(--kbd-primary-dark);
  --bs-btn-disabled-bg: var(--kbd-primary);
  --bs-btn-disabled-border-color: var(--kbd-primary);
  --bs-btn-focus-shadow-rgb: var(--kbd-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--kbd-primary);
  --bs-btn-border-color: var(--kbd-primary);
  --bs-btn-hover-bg: var(--kbd-primary);
  --bs-btn-hover-border-color: var(--kbd-primary);
  --bs-btn-active-bg: var(--kbd-primary);
  --bs-btn-active-border-color: var(--kbd-primary);
  --bs-btn-disabled-color: var(--kbd-primary);
  --bs-btn-disabled-border-color: var(--kbd-primary);
  --bs-btn-focus-shadow-rgb: var(--kbd-primary-rgb);
}
.text-primary { color: var(--kbd-primary) !important; }
.bg-primary { background-color: var(--kbd-primary) !important; }
.link-primary { color: var(--kbd-primary) !important; }

/* ช่องกรอกข้อมูล: เส้นขอบ/เงาตอนโฟกัสให้เป็นสีธีม (แทนฟ้า default) */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--kbd-tint-3);
  box-shadow: 0 0 0 0.25rem rgba(var(--kbd-primary-rgb), 0.2);
}
.form-check-input:checked {
  background-color: var(--kbd-primary);
  border-color: var(--kbd-primary);
}

/* ===================================================================
   ACCENT — ปุ่ม CTA และป้ายสินค้า (ชุดสี 2026-08-28)
   ใช้ที่: templates/partials/product-cta.php, templates/home/cta.php,
           bodies/pages-contact.php (ปุ่มส่งฟอร์ม), .kbd-badge ในหน้าหมวด/เมนู
   =================================================================== */
.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--kbd-accent);
  --bs-btn-border-color: var(--kbd-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--kbd-accent-hover);
  --bs-btn-hover-border-color: var(--kbd-accent-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--kbd-accent-hover);
  --bs-btn-active-border-color: var(--kbd-accent-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--kbd-accent);
  --bs-btn-disabled-border-color: var(--kbd-accent);
  --bs-btn-focus-shadow-rgb: 194, 65, 12;
  font-weight: 600;
}

/* ป้ายสินค้า ("แนะนำ"/"ใหม่") — เดิมใช้ .badge.bg-danger ซึ่งสีแดงสื่อว่าผิดพลาด */
.kbd-badge {
  background: var(--kbd-accent-soft);
  color: var(--kbd-accent-hover);
  border: 1px solid rgba(var(--kbd-accent-bright-rgb), .35);
  font-weight: 700;
}

/* ===================================================================
   การ์ด — เงานุ่มลง มุมโค้งชุดเดียวกัน ยกขึ้นเล็กน้อยตอนชี้
   =================================================================== */
.card {
  border: 1px solid var(--kbd-border);
  border-radius: var(--kbd-radius);
  box-shadow: var(--kbd-shadow);
  transition: box-shadow .18s ease, transform .18s ease;
}
/* .shadow-sm ของ Bootstrap ถูกใส่ไว้ที่การ์ดสินค้าอยู่แล้ว — บังคับให้ใช้เงาชุดเดียวกัน */
.card.shadow-sm { box-shadow: var(--kbd-shadow) !important; }
a:hover > .card,
.card:hover {
  box-shadow: var(--kbd-shadow-hover) !important;
  transform: translateY(-2px);
}
.btn { border-radius: var(--kbd-radius-sm); }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  a:hover > .card, .card:hover { transform: none; }
}

/* ===================================================================
   เมนูด้านซ้าย — ให้เห็นชัดว่ากำลังอยู่หน้าไหน
   สินค้าที่เปิดอยู่ = พื้นทึบ + ตัวขาว (10.86:1)
   กลุ่มที่เปิดอยู่  = พื้นอ่อน + ตัวหนา (9.72:1) — เน้นเบากว่าลูก ไม่แย่งกันเด่น
   =================================================================== */
.sidebar-nav .nav-content a {
  border-radius: var(--kbd-radius-sm);
  margin: 1px 0;
  padding-right: 10px;
}
.sidebar-nav .nav-content a.active,
.sidebar-nav .nav-content a.active:hover {
  background: var(--kbd-primary);
  color: #fff;
  font-weight: 700;
}
.sidebar-nav .nav-content a.active i,
.sidebar-nav .nav-content a.active:hover i {
  color: #fff;
  background: transparent;
}
.sidebar-nav .nav-content a:not(.active):hover { background: var(--kbd-bg); }

.sidebar-nav .nav-link:not(.collapsed) {
  background: var(--kbd-tint);
  color: var(--kbd-primary);
  font-weight: 700;
  border-radius: var(--kbd-radius-sm);
}
.sidebar-nav .nav-link.collapsed { color: var(--kbd-slate-dark); }
.sidebar-nav .nav-link.collapsed i { color: var(--kbd-muted-2); }

/* จุดเล็ก ๆ ที่เหลือให้เข้าชุด */
.page-link { color: var(--kbd-primary); }
.page-item.active .page-link {
  background-color: var(--kbd-primary);
  border-color: var(--kbd-primary);
}
.progress-bar { background-color: var(--kbd-primary); }
::selection { background: rgba(var(--kbd-primary-rgb), 0.2); }

/* ===================================================================
   Boxed layout — จัดทั้งชุด (sidebar + เนื้อหา) กึ่งกลางจอ
   ความกว้างรวมของกล่อง = 1600px (sidebar 300 + เนื้อหา 1300)
   * ปรับความกว้างกล่อง: แก้เลข 1600px ทุกจุดในบล็อกนี้ให้ตรงกัน *
   - จอ ≤1600px: กล่องเต็มความกว้าง (sidebar ชิดซ้าย ตามปกติ)
   - จอ >1600px: กล่องกว้าง 1600px อยู่กึ่งกลาง มีขอบซ้าย/ขวาเท่ากัน
   =================================================================== */
@media (min-width: 1600px) {
  /* ระยะขอบสองข้างของกล่อง = (ความกว้างจอ − 1600) / 2 */
  #header,
  #sidebar {
    left: calc((100vw - 1600px) / 2);
  }
  #header {
    right: calc((100vw - 1600px) / 2);
  }
  #main,
  #footer {
    margin-left: calc((100vw - 1600px) / 2 + 300px);
    margin-right: calc((100vw - 1600px) / 2);
  }

  /* เมื่อพับ sidebar (ปุ่ม hamburger บนจอใหญ่) */
  .toggle-sidebar #sidebar {
    left: calc((100vw - 1600px) / 2 - 300px);
  }
  .toggle-sidebar #main,
  .toggle-sidebar #footer {
    margin-left: calc((100vw - 1600px) / 2) !important;
  }
}

/* --- (1) ย้าย "สินค้าที่เกี่ยวข้อง" ลงด้านล่างต่อจากเนื้อหา ---
   ทำให้คอลัมน์หลัก (col-lg-8) และคอลัมน์ขวา (col-lg-4) ที่เป็นลูกโดยตรง
   ของแถวหลักในหน้าเนื้อหา กลายเป็นเต็มความกว้าง → เรียงต่อกันแนวตั้ง
   (คอลัมน์ inner เช่น รูป+ตาราง ที่ซ้อนอยู่ลึกกว่าไม่ได้รับผลกระทบ) */
#main .section.dashboard > .row > .col-lg-8,
#main .section.dashboard > .row > .col-lg-4 {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

/* การ์ด "สินค้าที่เกี่ยวข้อง" เมื่ออยู่ด้านล่าง: ให้รายการเรียงแนวนอนได้บนจอกว้าง */
@media (min-width: 768px) {
  #main .section.dashboard > .row > .col-lg-4 .info-card .card-body > .d-flex {
    display: inline-flex !important;
    margin-right: 1.5rem;
  }
}

/* ===================================================================
   Footer — ข้อมูลบริษัท (NAP) + ลิงก์ + ข้อมูลนิติบุคคล
   markup อยู่ที่ templates/partials/site-footer.php (ข้อมูลจาก data/site.json)
   =================================================================== */
.kbd-footer {
  padding: 32px 0 24px;
  color: var(--kbd-slate-dark, #3f4166);
}
.kbd-footer-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--kbd-heading, #1b1d5c);
  margin-bottom: 12px;
}
.kbd-footer ul li {
  margin-bottom: 6px;
  line-height: 1.6;
}
.kbd-footer i {
  color: var(--kbd-primary, #2f318b);
  margin-right: 6px;
}
/* :not(.btn) — ไม่งั้นสีนี้จะทับตัวอักษรของปุ่มจนอ่านไม่ออกบนพื้นสีเข้ม */
.kbd-footer a:not(.btn) {
  color: var(--kbd-slate-dark, #3f4166);
}
.kbd-footer a:not(.btn):hover {
  color: var(--kbd-primary, #2f318b);
  text-decoration: underline;
}
.kbd-footer-legal li {
  font-size: 13px;
}
.kbd-footer-social a {
  font-size: 13px;
  font-weight: 600;
  color: var(--kbd-primary, #2f318b);
}
/* เส้นคั่นก่อนบรรทัดลิขสิทธิ์ */
.footer .copyright {
  border-top: 1px solid var(--kbd-border, #eaeaf2);
  padding-top: 16px;
}

/* style.css ใส่ padding ให้ input ทุกชนิดในฟอร์มติดต่อ ทำให้ checkbox บวมจนข้อความตกบรรทัด */
.contact .php-email-form input[type="checkbox"] {
  padding: 0;
  margin-top: 0.25em;
}

/* ลิงก์ "ข้ามไปยังเนื้อหาหลัก" — ซ่อนไว้จนกว่าจะโฟกัสด้วยคีย์บอร์ด */
.kbd-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--kbd-primary, #2f318b);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 4px 0;
}
.kbd-skip-link:focus {
  left: 0;
  color: #fff;
}

/* ปุ่มเปิด-ปิดเมนูเป็น <button> จริง — ล้างสไตล์ปุ่มเริ่มต้นของเบราว์เซอร์ */
.header .toggle-sidebar-btn {
  background: none;
  border: 0;
  line-height: 1;
}

/* การ์ดแนะนำบนหน้าแรก (.card-body ของ template ตั้ง padding-top:0 ไว้) */
.kbd-home-card {
  padding-top: 20px;
}
.kbd-home-card > i {
  font-size: 26px;
  color: var(--kbd-primary, #2f318b);
  display: block;
  margin-bottom: 10px;
}
.kbd-home-card h2,
.kbd-home-card h3 {
  color: var(--kbd-heading, #1b1d5c);
}

/* บล็อกเอกสารดาวน์โหลดท้ายหน้าสินค้า (templates/partials/downloads.php) */
.kbd-downloads {
  padding-top: 20px;   /* .card-body ของ template ตั้ง padding-top:0 ไว้ */
}
.kbd-downloads h2 i {
  color: var(--kbd-primary, #2f318b);
}
.kbd-downloads a {
  font-weight: 600;
}
.kbd-downloads a i {
  color: #c0392b;      /* ไอคอน PDF */
}

/* แถบขอใบเสนอราคาท้ายหน้าสินค้า (templates/partials/product-cta.php) */
.kbd-cta {
  border-left: 4px solid var(--kbd-primary, #2f318b);
  background: var(--kbd-bg-alt, #f4f4fb);
}
/* style.css ตั้ง .card-body เป็น padding-top:0 (เผื่อไว้ให้ .card-title ที่มี padding ในตัว)
   กล่องนี้ไม่ได้ใช้ .card-title จึงต้องคืนระยะห่างด้านบนเอง ไม่งั้นข้อความชิดขอบ */
.kbd-cta .card-body {
  padding-top: 20px;
}
.kbd-cta h2 {
  color: var(--kbd-heading, #1b1d5c);
}

/* หัวข้อกล่องข้อมูลติดต่อ — ใช้ <h2> เพื่อลำดับ heading ที่ถูกต้อง (style.css เขียนไว้กับ h3) */
.contact .info-box h2 {
  font-size: 20px;
  color: var(--kbd-heading, #1b1d5c);
  font-weight: 700;
  margin: 20px 0 10px 0;
}

/* --- Sidebar tweaks --- */
.sidebar-nav .nav-content a .badge {
  font-size: 10px;
  padding: 2px 6px;
}

/* --- Responsive padding --- */
/* Tablet (768–1024px) */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #main { padding-left: 24px; padding-right: 24px; }
}
/* Mobile (≤575px) */
@media (max-width: 575.98px) {
  #main { padding-left: 14px; padding-right: 14px; }
}

/* --- หัวข้อใหญ่หน้าแรก (templates/partials/home-headline.php) ------------------
   ฟอนต์/ขนาด/สี ถูกใส่เป็น inline style จากค่าใน admin — ที่นี่มีแต่ลูกเล่น
   หมายเหตุ: ไม่ใช้แท็ก <marquee> เพราะเลิกใช้แล้วตามมาตรฐาน HTML */
.kbd-headline { margin-bottom: 0; }

/* กระพริบ */
@keyframes kbd-headline-blink {
  0%, 45%   { opacity: 1; }
  50%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}
.kbd-headline-blink .kbd-headline-text {
  animation: kbd-headline-blink 1.4s step-end infinite;
}

/* วิ่งจากขวาไปซ้าย */
.kbd-headline-marquee {
  overflow: hidden;
  white-space: nowrap;
}
.kbd-headline-marquee .kbd-headline-text {
  display: inline-block;
  padding-left: 100%;
  animation: kbd-headline-marquee 14s linear infinite;
}
@keyframes kbd-headline-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.kbd-headline-marquee:hover .kbd-headline-text { animation-play-state: paused; }

/* ผู้ใช้ที่ตั้งค่าระบบให้ลดการเคลื่อนไหว — แสดงข้อความนิ่ง ๆ (a11y) */
@media (prefers-reduced-motion: reduce) {
  .kbd-headline-blink .kbd-headline-text,
  .kbd-headline-marquee .kbd-headline-text { animation: none; }
  .kbd-headline-marquee { overflow: visible; white-space: normal; }
  .kbd-headline-marquee .kbd-headline-text { padding-left: 0; }
}

/* --- สินค้าที่เกี่ยวข้อง (templates/partials/related.php) --- */
/* style.css ตั้ง .card-body เป็น padding-top:0 (เผื่อไว้ให้ .card-title ที่มี padding ในตัว)
   กล่องนี้ใช้ <h2 class="h5"> ไม่ใช่ .card-title จึงต้องคืนระยะห่างด้านบนเอง — เหมือน .kbd-downloads/.kbd-cta */
.kbd-related {
  padding-top: 20px;
}
.kbd-related-item {
  text-decoration: none;
  color: var(--kbd-heading, #1b1d5c);
  padding: 8px;
  border-radius: 8px;
  transition: background-color .15s;
}
.kbd-related-item:hover { background: var(--kbd-bg-alt, #f4f4fb); }
.kbd-related-thumb {
  width: 56px; height: 56px;
  object-fit: contain;
  flex: 0 0 56px;
  background: #fff;
  border: 1px solid #eceef4;
  border-radius: 8px;
}

/* ============================================================
   วิดีโอ YouTube แบบ "กดแล้วค่อยโหลด" (blk_video_html ใน inc/blocks.php)
   กล่องนอกกำหนดสัดส่วน 16:9 ด้วย padding-top:56.25% แบบเดียวกับเนื้อหาเดิม
   ============================================================ */
.kbd-video {
  background: #0d0d16;
  border-radius: 8px;
  overflow: hidden;
}
.kbd-video-btn {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.kbd-video-btn img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: .78;
  transition: opacity .15s;
}
.kbd-video-btn:hover img,
.kbd-video-btn:focus-visible img { opacity: 1; }
/* ปุ่มเล่น: สี่เหลี่ยมมุมมนแบบเดียวกับ YouTube แต่ใช้สีธีม เมื่อ hover */
.kbd-video-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 48px;
  border-radius: 12px;
  background: rgba(13, 13, 22, .72);
  transition: background-color .15s;
}
.kbd-video-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}
/* !important เพราะกล่องวิดีโอมีสไตล์โครงสร้าง inline ติดมาด้วย (ดู blk_video_html ใน inc/blocks.php)
   ซึ่งมีลำดับความสำคัญสูงกว่าไฟล์ CSS — ถ้าไม่ใส่ ปุ่มจะไม่เปลี่ยนสีตอนชี้เมาส์ */
.kbd-video-btn:hover .kbd-video-icon,
.kbd-video-btn:focus-visible .kbd-video-icon { background: var(--kbd-primary, #2f318b) !important; }
.kbd-video-btn:focus-visible { outline: 3px solid var(--kbd-primary, #2f318b); outline-offset: 2px; }
.kbd-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* ไม่มี JS: ให้ลิงก์ไปดูบน YouTube แทน (ยังไม่ส่งข้อมูลไปไหนจนกว่าจะคลิก) */
.kbd-video-fallback {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-decoration: underline;
}