/* =====================================================================
   KUGO Globaltech — hyper.css  (LIGHT THEME v2, 2026)
   ต้นฉบับเป็นธีมสีดำ ปรับใหม่ให้เป็นธีมสว่าง โดยคงชื่อคลาสเดิม (hy-*)
   ทุกหน้าใช้ไฟล์นี้ร่วมกัน -> อัปโหลดทับไฟล์เดียว ทั้งเว็บจะสว่างขึ้น
   ฟอนต์ยังเป็น Prompt เหมือนเดิม
   ===================================================================== */

:root{
  --kg-blue:        #0056A4;   /* น้ำเงินเข้ม (แบรนด์) */
  --kg-blue-bright: #1E88E5;   /* น้ำเงินสด */
  --kg-blue-sky:    #4DA8FA;   /* ฟ้า */
  --kg-ink:         #16233A;   /* ตัวอักษรหลัก (เข้ม) */
  --kg-ink-soft:    #4A5A70;   /* ตัวอักษรรอง */
  --kg-bg:          #FFFFFF;   /* พื้นหลังหลัก */
  --kg-bg-soft:     #F4F8FE;   /* พื้นหลังอ่อน */
  --kg-line:        #E3ECF7;   /* เส้นขอบ */
  --kg-card-shadow: 0 18px 40px rgba(13, 71, 161, 0.10);
}

/* ---------- Navbar : พื้นน้ำเงินแบรนด์ (โลโก้ + ตัวอักษรขาว) ---------- */
.hy-nav-bg{
  background: linear-gradient(90deg, #0056A4 0%, #1E88E5 100%);
  box-shadow: 0 4px 24px rgba(13, 71, 161, 0.20);
}

/* ---------- Navbar brand: โลโก้น้ำเงิน -> ทำเป็นสีขาวด้วย filter ให้เด่นบนพื้นน้ำเงิน ---------- */
.hy-nav-bg .navbar-brand img{ height: 42px; width: auto; filter: brightness(0) invert(1); }

/* ---------- Footer : พื้นน้ำเงินแบรนด์ (โลโก้ขาว + ตัวอักษรขาว) ---------- */
.hy-footer-bg{
  background: linear-gradient(315deg, #0A3D77 0%, #0056A4 55%, #1E88E5 100%);
  color: #FFFFFF !important;
}
.hy-footer-bg .text-white{ color: #FFFFFF !important; }
.hy-footer-bg a{ color: #EAF4FF !important; }
.hy-footer-bg a:hover{ color: #FFFFFF !important; }
.hy-footer-bg h6{ color: #FFFFFF !important; }
.hy-footer-bg img{ height: 40px; width: auto; filter: brightness(0) invert(1); }

/* ---------- Reference: โลโก้ลูกค้าเป็นสีขาว/เทาอ่อน วางบนพื้นสว่างจะจม
   จึงวางบนแผงพื้นน้ำเงินเข้มให้เห็นชัด ---------- */
.kg-ref-panel{
  background: linear-gradient(135deg, #0A3D77 0%, #0056A4 60%, #1E88E5 100%);
  border-radius: 28px;
  box-shadow: var(--kg-card-shadow);
}
/* โลโก้ลูกค้า จัดขนาดเท่ากัน เรียงตรงเป็นระเบียบ */
.kg-ref-cell{
  display: flex; align-items: center; justify-content: center;
  height: 90px; padding: 10px;
}
.kg-ref-logo{
  max-height: 46px; max-width: 130px; width: auto; height: auto;
  object-fit: contain;
}

/* ---------- Hero / Content background : ฟ้าอ่อนไล่เป็นขาว ---------- */
.hy-content-bg{
  background: linear-gradient(180deg, #E9F4FF 0%, #F6FAFF 55%, #FFFFFF 100%);
}

/* ---------- การ์ดใส่รูป ---------- */
.hy-slide-bg{
  background: linear-gradient(135deg, #EAF4FF 0%, #D3E7FF 100%);
  border: 1px solid var(--kg-line);
  border-radius: 30px;
  box-shadow: var(--kg-card-shadow);
}

/* ---------- เมนู hover underline ---------- */
.hy-nav-item{
  transition: 0.25s all;
  border-bottom: 3.5px solid transparent !important;
}
.hy-nav-item:hover{
  transition: 0.25s all;
  border-bottom: 3.5px solid var(--kg-blue-bright) !important;
}

/* ---------- ข้อความไล่สี (ต้นฉบับเป็น ขาว->ฟ้า มองไม่เห็นบนพื้นสว่าง)
   ปรับเป็น น้ำเงินเข้ม->ฟ้า ให้เห็นชัดบนพื้นสว่าง ---------- */
.hy-header-text{
  font-style: normal;
  font-weight: 700;
  font-size: 250%;
  line-height: 1.18;
  letter-spacing: -0.3px;
  text-transform: capitalize;
  background: linear-gradient(264deg, var(--kg-blue) 15%, var(--kg-blue-sky) 93%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hy-grd-text-180,
.hy-grd-text-75,
.hy-grd-text-242{
  background: linear-gradient(90deg, var(--kg-blue) 0%, var(--kg-blue-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

/* ---------- ปุ่ม ---------- */
.hy-btn-outline-light{
  transition: 0.25s all;
  background: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 50px !important;
  font-weight: 500;
}
.hy-btn-outline-light:hover{
  background: #FFFFFF !important;
  color: var(--kg-blue) !important;
  border: 2px solid #FFFFFF !important;
}
.hy-btn-outline-primary{
  transition: 0.25s all;
  background: transparent !important;
  color: var(--kg-blue-bright) !important;
  border: 2px solid var(--kg-blue-bright) !important;
  border-radius: 50px !important;
  font-weight: 500;
}
.hy-btn-outline-primary:hover{
  background: var(--kg-blue-bright) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--kg-blue-bright) !important;
}
/* ปุ่มทึบ (ใช้ใน section แพ็คเกจ) */
.hy-btn-primary{
  transition: 0.25s all;
  background: var(--kg-blue-bright) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--kg-blue-bright) !important;
  border-radius: 50px !important;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(30,136,229,0.28);
}
.hy-btn-primary:hover{ background: var(--kg-blue) !important; border-color: var(--kg-blue) !important; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(13,71,161,0.34); }

/* ---------- Dropdown : ขาว เงานุ่ม ---------- */
.hy-dropdown{
  background: #FFFFFF !important;
  border: 1px solid var(--kg-line) !important;
  border-radius: 15px !important;
  box-shadow: var(--kg-card-shadow) !important;
}
.hy-dropdown .dropdown-item{ color: var(--kg-ink) !important; }
.hy-dropdown .dropdown-item .text-muted{ color: var(--kg-ink-soft) !important; }
.hy-dropdown .dropdown-item:hover{ background: var(--kg-bg-soft) !important; }
.hy-dropdown .dropdown-item:hover .text-muted{ color: var(--kg-blue) !important; }

/* ---------- Base / Bootstrap overrides ---------- */
body{
  background-color: var(--kg-bg);
  color: var(--kg-ink);
  font-family: 'Prompt', sans-serif !important;
  font-style: normal;
}

/* ต้นฉบับหลายหน้าใช้ .text-white -> บนพื้นสว่างจะมองไม่เห็น
   จึงบังคับให้เป็นสีเข้ม (safety net ให้ทุกหน้าอ่านออก) */
.text-white{ color: var(--kg-ink) !important; }

/* nav link เป็นสีขาว (บนพื้นน้ำเงิน) */
.nav-link{ color: #FFFFFF !important; font-weight: 500; }
.nav-link:hover{ color: #EAF4FF !important; }

.btn{ font-family: 'Prompt', sans-serif !important; }

a{ color: var(--kg-blue); text-decoration: none; }
a:hover{ color: var(--kg-blue-bright); text-decoration: none; }

hr{ opacity: 1 !important; color: var(--kg-line); }

.text-muted{ color: var(--kg-ink-soft) !important; }

.dropdown-toggle::after{
  display: none;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

/* =====================================================================
   ส่วนใหม่: การ์ดแพ็คเกจ (IT Support / CCTV)  — .kg-*
   ===================================================================== */
.kg-section-soft{ background: linear-gradient(180deg, #F6FAFF 0%, #FFFFFF 100%); }

.kg-eyebrow{
  color: var(--kg-blue-bright);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
}
.kg-lead{ color: var(--kg-ink-soft); max-width: 720px; font-size: 17px; line-height: 1.7; }

.kg-pkg-card{
  background: #FFFFFF;
  border: 1px solid var(--kg-line);
  border-radius: 24px;
  box-shadow: var(--kg-card-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height: 100%;
}
.kg-pkg-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(13,71,161,0.16);
  border-color: #BFDCFF;
}
.kg-pkg-card.kg-featured{
  border: 2px solid var(--kg-blue-bright);
  box-shadow: 0 26px 54px rgba(13,71,161,0.18);
}
.kg-pkg-badge{
  display:inline-block;
  background: linear-gradient(90deg, var(--kg-blue) 0%, var(--kg-blue-bright) 100%);
  color:#fff; font-weight:600; font-size:12px;
  padding: 4px 14px; border-radius: 50px; letter-spacing:1px;
}
.kg-pkg-size{
  background: linear-gradient(90deg, var(--kg-blue) 0%, var(--kg-blue-bright) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-weight:700; font-size: 40px; line-height:1;
}
.kg-price{ font-weight:700; color: var(--kg-ink); font-size: 28px; }
.kg-price small{ color: var(--kg-ink-soft); font-weight:400; font-size: 14px; }
.kg-save{
  background: var(--kg-bg-soft); border-radius: 14px; padding: 12px 8px;
  color: var(--kg-ink-soft); font-size: 13px;
}
.kg-save b{ color: var(--kg-blue); font-size: 20px; }

.kg-feature-list{ list-style:none; padding-left:0; margin:0; }
.kg-feature-list li{ padding: 8px 0; color: var(--kg-ink); display:flex; align-items:flex-start; gap:12px; line-height:1.55; }
.kg-check{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-top:1px;
  border-radius:50%;
  background:#E7F1FF;
  color: var(--kg-blue-bright);
  font-weight:700; font-size:12px; line-height:1;
}

/* ตาราง CCTV */
.kg-table{ width:100%; border-collapse: separate; border-spacing:0; overflow:hidden; border-radius:18px; box-shadow: var(--kg-card-shadow); background:#fff; }
.kg-table thead th{ background: linear-gradient(90deg, var(--kg-blue) 0%, var(--kg-blue-bright) 100%); color:#fff; font-weight:600; padding:14px 16px; }
.kg-table tbody td{ padding:13px 16px; border-top:1px solid var(--kg-line); color: var(--kg-ink); }
.kg-table tbody tr:nth-child(even) td{ background: var(--kg-bg-soft); }
.kg-table tbody tr:hover td{ background:#EAF4FF; }

.kg-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--kg-line); border-radius:50px;
  padding:8px 16px; margin:5px; color: var(--kg-ink); font-size:14px;
  box-shadow: 0 4px 14px rgba(13,71,161,0.05);
}

/* ===== ภาพรวมธุรกิจ: แผงพื้นหลัง ===== */
.kg-overview{
  background: linear-gradient(160deg, #E9F3FF 0%, #F5FAFF 100%);
  border: 1px solid var(--kg-line);
  border-radius: 30px;
  box-shadow: var(--kg-card-shadow);
}
.kg-overview .kg-company{
  font-weight: 700;
  background: linear-gradient(90deg, var(--kg-blue) 0%, var(--kg-blue-bright) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ===== แยกบริการ IT / CCTV เป็นคนละ Service ===== */
.kg-band{ background: linear-gradient(180deg, #EAF3FF 0%, #F4F9FF 100%); }
.kg-service-tag{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--kg-line); border-radius:50px;
  padding:8px 20px; box-shadow: var(--kg-card-shadow); margin-bottom:6px;
}
.kg-service-no{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background: linear-gradient(90deg, var(--kg-blue) 0%, var(--kg-blue-bright) 100%);
  color:#fff; font-weight:700; font-size:14px;
}
.kg-service-tag .kg-service-label{ font-weight:600; color:var(--kg-blue); letter-spacing:1px; }

/* ===== ฟอร์ม ขอใบเสนอราคา ===== */
.kg-form-card{
  background:#fff; border:1px solid var(--kg-line); border-radius:24px;
  box-shadow: var(--kg-card-shadow);
}
.kg-form .form-label{ font-weight:500; color:var(--kg-ink); margin-bottom:6px; }
.kg-form .form-label .req{ color:#E23; }
.kg-form .form-control,
.kg-form .form-select{
  border:1px solid var(--kg-line); border-radius:12px; padding:12px 14px;
  font-family:'Prompt',sans-serif; color:var(--kg-ink); background:#fff;
}
.kg-form .form-control:focus,
.kg-form .form-select:focus{
  border-color: var(--kg-blue-bright);
  box-shadow: 0 0 0 .2rem rgba(30,136,229,.15);
}
.kg-alert-success{
  background:#E7F7EE; border:1px solid #A9E2C3; color:#1B7A46;
  border-radius:16px; padding:20px 24px;
}
.kg-alert-error{
  background:#FDECEC; border:1px solid #F3C2C2; color:#B02A2A;
  border-radius:14px; padding:14px 18px;
}
.kg-contact-item{ color:var(--kg-ink); }
.kg-contact-item .kg-ci-label{ color:var(--kg-blue); font-weight:600; font-size:13px; letter-spacing:1px; text-transform:uppercase; }

/* =====================================================================
   POLISH v3 (2026-10-06) — global refinements for a more premium feel
   ===================================================================== */
html{ scroll-behavior: smooth; }
body{ line-height: 1.6; }

/* readable body paragraphs inside content sections */
.kg-section-soft p, .kg-band p{ line-height: 1.7; }

/* eyebrow: give it breathing room + a touch of presence */
.kg-eyebrow{ display:inline-block; margin-bottom:6px; }

/* lift outline button + chip on hover (depth, consistency with primary) */
.hy-btn-outline-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(30,136,229,0.22); }
.kg-chip{ transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.kg-chip:hover{ transform: translateY(-2px); border-color:#BFDCFF; box-shadow:0 10px 22px rgba(13,71,161,0.12); }

/* service-tag + overview panels: consistent soft lift */
.kg-service-tag{ transition: transform .25s ease, box-shadow .25s ease; }

/* images inside package cards: consistent rounded corners */
.kg-pkg-card > img{ border-radius: 16px; }

/* Mobile: scale down oversized headings so they don't wrap awkwardly */
@media (max-width: 575.98px){
  .hy-header-text{ font-size: 182%; }
  .hy-grd-text-180{ font-size: 26px !important; }
  .kg-lead{ font-size: 16px; }
}

/* ===== Process / How-we-work infographic (connected timeline) ===== */
.kg-process{ position:relative; }
.kg-process-track{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative; }
.kg-process-track::before{
  content:""; position:absolute; top:38px; left:10%; right:10%; height:3px; z-index:0;
  background: linear-gradient(90deg, var(--kg-blue) 0%, var(--kg-blue-bright) 100%);
  border-radius:3px;
}
.kg-step{ position:relative; z-index:1; flex:1 1 0; min-width:0; text-align:center; }
.kg-step-icon{
  width:76px; height:76px; margin:0 auto 14px; border-radius:50%;
  background:#FFFFFF; border:3px solid var(--kg-blue-bright);
  display:flex; align-items:center; justify-content:center; font-size:32px; line-height:1;
  box-shadow: 0 12px 26px rgba(13,71,161,0.16);
  position:relative; transition: transform .25s ease, box-shadow .25s ease;
}
.kg-step:hover .kg-step-icon{ transform: translateY(-4px); box-shadow: 0 18px 34px rgba(13,71,161,0.22); }
.kg-step-no{
  position:absolute; top:-6px; right:-6px;
  width:28px; height:28px; border-radius:50%;
  background: linear-gradient(135deg, var(--kg-blue) 0%, var(--kg-blue-bright) 100%);
  color:#fff; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff; box-shadow:0 4px 10px rgba(13,71,161,0.3);
}
.kg-step-title{ font-weight:600; color:var(--kg-ink); font-size:15px; line-height:1.4; padding:0 4px; }
.kg-step-desc{ color:var(--kg-ink-soft); font-size:13px; margin-top:4px; line-height:1.5; padding:0 6px; }

@media (max-width: 767.98px){
  .kg-process-track{ flex-direction:column; gap:0; }
  .kg-process-track::before{ top:16px; bottom:16px; left:36px; right:auto; width:3px; height:auto; }
  .kg-step{ display:flex; align-items:center; gap:18px; text-align:left; padding:10px 0; flex:0 0 auto; }
  .kg-step-icon{ margin:0; flex:0 0 auto; width:72px; height:72px; }
  .kg-step-title{ padding:0; font-size:16px; }
  .kg-step-desc{ padding:0; }
}