:root{
  --ink:#0f3b6e;
  --accent:#f0b90b;
  --glass-bg: rgba(255,255,255,.08);
  --light-50: rgba(255,255,255,.5);
  --light-70: rgba(255,255,255,.75);
}
*{box-sizing:border-box}
body{font-family:"Sarabun",system-ui,Segoe UI,Roboto,Arial;background:#0a0f1a;color:#eaeef6}
.navbar.bg-gradient-blur{background:linear-gradient(90deg,rgba(10,15,26,.7),rgba(15,59,110,.4));backdrop-filter:blur(8px)}
.text-light-50{color:var(--light-50)!important}
.text-light-70{color:var(--light-70)!important}
.text-accent{color:var(--accent)}
.btn-glow{background:var(--accent); color:#1b1f2a; border:0; box-shadow:0 6px 20px -4px rgba(240,185,11,.6); transition:.25s}
.btn-glow:hover{transform:translateY(-1px)}
.logo-rounded{border-radius:8px}

.section{padding:80px 0; position:relative}
.section-dark{background:radial-gradient(1200px 600px at 10% 0%, #0f3b6e 0%, #0a0f1a 60%, #090c14 100%); color:#eaf1ff}
.card-glass{background:var(--glass-bg); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); color:#fff}
.hero{background:url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat; position:relative}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(120deg, rgba(10,15,26,.75), rgba(15,59,110,.55))}

.bg-image-tiles{background:url('https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat}
.bg-photo-right{background:url('https://images.unsplash.com/photo-1454165205744-3b78555e5572?q=80&w=1600&auto=format&fit=crop') center right/cover no-repeat}
.bg-photo-left{background:url('https://images.unsplash.com/photo-1553729784-e91953dec042?q=80&w=1600&auto=format&fit=crop') center left/cover no-repeat}
.bg-photo-cta{background:url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat}
.bg-black-true{background:#05070b}

.step{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:24px; height:100%; border-radius:14px}
.step-num{display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:999px; background:var(--accent); color:#121722; font-weight:700; margin-bottom:10px}

.checklist{padding:0; margin:0; list-style:none}
.checklist li{padding-left:32px; position:relative; margin:12px 0}
.checklist li:before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700}

.doc-card{display:flex; flex-direction:column; align-items:center; gap:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:24px; border-radius:14px}


.form-control, .form-select{border-radius:12px; background:rgba(255,255,255,.9)}
label{font-weight:600}

.card{border-radius:16px}

/* -------- Docs icons -------- */
:root{
  --icon-box: clamp(56px, 7vw, 72px); /* ไซส์กล่องไอคอน */
  --icon-radius: 18px;                /* ความโค้งมน */
}
.doc-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.doc-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.icon-box{
  width: var(--icon-box);
  height: var(--icon-box);
  border-radius: var(--icon-radius);
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px auto 10px auto; /* center */
  box-shadow: 0 2px 12px rgba(0,0,0,.25), inset 0 -2px 0 rgba(0,0,0,.08);
}
.icon-box i.bi{
  line-height: 1;
  font-size: calc(var(--icon-box) * .52); /* ขนาดไอคอน */
  color: #0a0f1a;
  transform: translateY(1px);             /* จูนตำแหน่งเล็กน้อย */
}

.doc-title{ margin: 0; font-weight: 600; }

/* === Navbar Brand (SkyLink) === */
:root{
  --brand-size: clamp(36px, 4.6vw, 48px); /* ความสูงโลโก้/ตัวหนังสือ */
  --brand-gap: 10px;
}

.navbar .brand{
  gap: var(--brand-gap);
  padding: 6px 0;
}

.brand-mark{
  display: inline-grid;
  place-items: center;
  width: var(--brand-size);
  height: var(--brand-size);
  border-radius: 12px;
  background: radial-gradient(80% 80% at 30% 20%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.brand-svg{ width: 72%; height: 72%; display:block; }

.brand-img{ /* หากใช้ <img> */
  width: var(--brand-size);
  height: var(--brand-size);
  object-fit: contain; border-radius: 12px;
}

.brand-text{ display:flex; align-items: baseline; gap: 10px; }
.brand-name{
  font-weight: 800;
  font-size: calc(var(--brand-size) * .58);
  line-height: 1;
  color: #fff;
  letter-spacing: .2px;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.brand-tag{
  font-weight: 700;
  font-size: calc(var(--brand-size) * .42);
  line-height: 1;
  color: #10141f;
  padding: .32em .6em;
  border-radius: 999px;
  background: linear-gradient(180deg, #f7cc37, #f0b90b);
  box-shadow: 0 3px 12px rgba(240,185,11,.4), inset 0 -1px 0 rgba(0,0,0,.15);
}

/* ลดสเกลเล็กลงเวลาเมนูพับ */
@media (max-width: 991.98px){
  :root{ --brand-size: clamp(32px, 5vw, 40px); }
  .brand-text{ gap: 8px; }
}

/* ===== Eligibility (รายละเอียด) ===== */
.elig-head h2{ text-shadow:0 2px 10px rgba(0,0,0,.35) }
.elig-underline{
  width: min(220px, 40vw);
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,#6ec1ff 0%, #f0b90b 100%);
  opacity:.9;
}

.elig-card{
  position:relative;
  padding: 26px 26px;
  border-radius: 20px;
  color:#fff;
  /* glass + เบลอพื้นหลัง */
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.elig-title{
  font-weight:800;
  margin: 0 0 14px 0;
  font-size: clamp(18px,2.6vw,22px);
  color: #fff;
}

/* เช็กลิสต์สวย ๆ */
.list-check{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.list-check li{
  position:relative; padding-left:44px; line-height:1.55;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* วงกลมเขียว + เครื่องหมายถูก (SVG data-uri) */
.list-check li::before{
  content:"";
  position:absolute; left:0; top:2px;
  width:28px; height:28px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), transparent 60%),
    #1fbe72;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.25);
}
/* เครื่องหมายถูกสีขาว */
.list-check li::after{
  content:"";
  position:absolute; left:7px; top:10px; width:14px; height:8px;
  border-left:3px solid #fff; border-bottom:3px solid #fff;
  transform: rotate(-45deg);
}

/* ระยะห่างในจอเล็ก */
@media (max-width: 991.98px){
  .elig-card{ padding:22px 20px }
}

/* ==== Eligibility: ดีไซน์ใหม่ (ต่างจากตัวอย่างเดิม) ==== */
.elig-wrap{
  /* ใช้พื้นหลังของธีมเดิม + แต่ง overlay เบา ๆ ให้ข้อความลอย */
  position: relative;
}
.elig-wrap::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(800px 400px at 12% 0%, rgba(15,59,110,.35), transparent 60%),
              radial-gradient(800px 400px at 88% 100%, rgba(240,185,11,.08), transparent 50%);
  pointer-events:none;
}

/* การ์ดไล่สีกรอบ (gradient border) */
.elig-box{
  --radius: 20px;
  position: relative;
  padding: 22px 22px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(10,15,26,.85), rgba(10,15,26,.70)) padding-box,
    linear-gradient(120deg, #6ec1ff, #f0b90b) border-box;
  border: 1px solid transparent;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.elig-box__head{
  display:flex; align-items:center; justify-content:flex-start;
  margin-bottom: 12px;
}
.badge-pill{
  display:inline-block;
  padding: .45rem .9rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #10141f;
  background: linear-gradient(180deg, #f7cc37, #f0b90b);
  box-shadow: 0 3px 12px rgba(240,185,11,.35), inset 0 -1px 0 rgba(0,0,0,.18);
}

/* รายการเงื่อนไขแบบ "เพชร" */
.req-list{
  list-style:none; padding: 6px 0 0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.req-list li{
  position:relative;
  padding-left: 46px;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.req-list li::before{
  /* เพชรสีเขียว + ขอบเงา */
  content:"";
  position:absolute; left: 6px; top: 6px;
  width: 24px; height: 24px;
  transform: rotate(45deg);
  border-radius: 6px;
  background: linear-gradient(180deg,#38d489,#1fbe72);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 6px 14px rgba(0,0,0,.25);
}
.req-list li::after{
  /* เครื่องหมายถูกสีขาว วางกลางเพชร */
  content:"";
  position:absolute; left: 13px; top: 14px;
  width: 10px; height: 6px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg);
}

@media (max-width: 991.98px){
  .elig-box{ padding: 18px 18px }
}

/* ==== พื้นหลังภาพสำหรับส่วนคุณสมบัติผู้สมัคร ==== */
.bg-photo-elig {
  position: relative;
  background: url("../img/bg-eligibility.jpg") center center / cover no-repeat fixed;
  color: #fff;
  overflow: hidden;
}
.bg-photo-elig::before {
  /* overlay มืดบางๆ เพื่อให้อ่านชัด */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.65));
  backdrop-filter: blur(2px);
}
.bg-photo-elig > * {
  position: relative;
  z-index: 1;
}

/* ---- Calculator background image ---- */
.bg-photo-calc{
  position: relative;
  background: url("../img/bg-calc.jpg") center/cover no-repeat; /* เปลี่ยนชื่อไฟล์ตามที่คุณวาง */
  color: #fff;
  overflow: hidden;
}
.bg-photo-calc::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);              /* เบลอ/ทึบเล็กน้อยให้ตัวอักษรอ่านง่าย */
  backdrop-filter: blur(2px);
}
.bg-photo-calc > *{ position: relative; z-index: 1; }

/* ---- Installment table style ---- */
.table-plan{
  --rad: 18px;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  color: #eaf1ff;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--rad);
  overflow: hidden;
}
.table-plan thead th{
  padding: 16px 18px;
  text-align: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg,#1a90ff 0%, #0f3b6e 50%, #22c1dc 100%);
}
.table-plan thead th:first-child{ text-align:left }
.table-plan tbody td{
  padding: 16px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.table-plan tbody tr:nth-child(even){ background: rgba(255,255,255,.03) }
.table-plan tbody td:not(:first-child){ text-align: center; font-weight: 600 }

/* round corners */
.table-plan thead th:first-child { border-top-left-radius: var(--rad) }
.table-plan thead th:last-child  { border-top-right-radius: var(--rad) }
.table-plan tbody tr:last-child td:first-child { border-bottom-left-radius: var(--rad) }
.table-plan tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--rad) }

/* small screens */
@media (max-width: 575.98px){
  .table-plan thead{ display:none }
  .table-plan, .table-plan tbody, .table-plan tr, .table-plan td{ display:block; width:100% }
  .table-plan tr{ margin-bottom:10px; background: rgba(255,255,255,.03); border-radius:12px }
  .table-plan td{ text-align:left; padding:12px 16px; border:none; border-bottom:1px solid rgba(255,255,255,.08) }
  .table-plan td:last-child{ border-bottom:0 }
  .table-plan td::before{
    content: attr(data-label);
    display:block; font-size:.85rem; color:var(--light-70); margin-bottom:4px
  }
}

/* ===== Installment Table - Clean, Clear, Financial Style ===== */
.tbl-installments {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  color: #0f1a2b;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0,0,0,.25);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.tbl-installments thead th {
  background: #0f3b6e;
  color: #ffffff;
  font-weight: 800;
  text-align: right;
  padding: 16px 24px;
  border-top: 4px solid #007bff;   /* เส้นบนหัวตาราง */
  border-bottom: 2px solid #0056b3; /* เส้นล่างหัวตาราง */
}

.tbl-installments thead th:first-child {
  text-align: left;
  padding-left: 24px;
}

.tbl-installments tbody td {
  padding: 14px 24px;
  border-top: 1px solid rgba(0,0,0,.05);
  text-align: right;
  font-weight: 600;
}

.tbl-installments tbody td:first-child {
  text-align: left;
  font-weight: 700;
  color: #0f3b6e;
}

.tbl-installments tbody tr:nth-child(even) {
  background: #f9fbfe;
}

.tbl-installments tbody tr:hover {
  background: #eaf3ff;
  transition: 0.3s ease;
}

/* rounding */
.tbl-installments thead th:first-child { border-top-left-radius: 14px; }
.tbl-installments thead th:last-child  { border-top-right-radius: 14px; }
.tbl-installments tbody tr:last-child td:first-child { border-bottom-left-radius: 14px; }
.tbl-installments tbody tr:last-child td:last-child  { border-bottom-right-radius: 14px; }

/* Mobile responsive */
@media (max-width: 767.98px) {
  .tbl-installments thead { display: none; }
  .tbl-installments, .tbl-installments tbody, .tbl-installments tr, .tbl-installments td {
    display: block;
    width: 100%;
  }
  .tbl-installments tbody tr {
    margin-bottom: 14px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
  }
  .tbl-installments tbody td {
    text-align: left !important;
    padding: 10px 16px;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }
  .tbl-installments tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #555;
    display: block;
    margin-bottom: 4px;
  }
  .tbl-installments tbody td:last-child { border-bottom: none; }
}

/* ===== Contact readability upgrade ===== */
/* ใช้ภาพพื้นหลังเดิมของคุณ: เปลี่ยน path ถ้าจำเป็น */
.contact-wrap{
  position: relative;
  background: url("../img/bg-contact.jpg") center/cover no-repeat;
  color:#fff;
  overflow:hidden;
}
/* ไล่สีทับทั้งส่วน เพื่อคุมคอนทราสต์รวม */
.contact-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.15) 70%, rgba(0,0,0,0) 100%),
    radial-gradient(800px 400px at 15% 20%, rgba(0,0,0,.45), transparent 60%);
  pointer-events:none;
}

/* กล่องข้อความแบบ glass panel */
.contact-panel{
  background: rgba(10,15,26,.72);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 22px 22px 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  /* เพิ่มความชัดตัวอักษร */
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* รายการติดต่อ */
.contact-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
  font-size: 1.05rem;
  line-height: 1.65;
}
.contact-icon{
  width:1.6em; display:inline-block; text-align:center; margin-right:.25rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.link-inline{
  color:#fff; text-decoration: underline; text-underline-offset: 3px;
}
.link-inline:hover{ color:#ffd666 }

/* ปุ่มขอบขาวอ่านชัดบนภาพ */
.btn.btn-outline-light{
  border-color: rgba(255,255,255,.8);
  color:#fff;
  background: rgba(255,255,255,.08);
}
.btn.btn-outline-light:hover{
  background: rgba(255,255,255,.15);
}

/* จอเล็ก: ขยายแผงให้เต็มและเสริม overlay */
@media (max-width: 991.98px){
  .contact-overlay{
    background:
      linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.55) 50%, rgba(0,0,0,.25)),
      radial-gradient(600px 300px at 50% 10%, rgba(0,0,0,.5), transparent 60%);
  }
  .contact-panel{ padding: 18px }
}

/* ==== FAQ Modern Card Style ==== */
.faq-wrap{
  max-width:800px;
  margin:auto;
}

.faq-item{
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
}
.faq-item:hover{
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}

.faq-question{
  width:100%;
  text-align:left;
  background: rgba(255,255,255,0.1);
  color:#fff;
  font-weight:700;
  padding:18px 20px;
  font-size:1.05rem;
  border:none;
  outline:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  transition:background 0.3s ease;
}
.faq-question:hover{
  background: rgba(255,255,255,0.2);
}

.faq-toggle{
  font-size:1.4rem;
  font-weight:bold;
  transition: transform 0.3s ease;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  background:#fff;
  color:#1a1a1a;
  padding:0 20px;
  line-height:1.75;
  font-size:1rem;
  transition: max-height 0.35s ease, padding 0.3s ease;
}
.faq-answer.active{
  padding:18px 20px 22px;
}

.faq-item.active .faq-answer{
  max-height:600px; /* สูงพอสำหรับข้อความยาว */
}

.faq-item.active .faq-question{
  background:#0f3b6e;
}

.faq-item.active .faq-toggle{
  transform: rotate(45deg); /* เปลี่ยน + เป็น × */
}

/* จุดเด่นข้อความ */
.faq-answer br { line-height: 1.4; }

/* พื้นหลัง + overlay เดิม */
.contact-wrap{ position:relative; background:url("assets/img/bg-contact.jpg") center/cover no-repeat; color:#fff; overflow:hidden; }
.contact-overlay{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.48) 45%,rgba(0,0,0,.15) 70%,transparent 100%); pointer-events:none; }

/* กล่องข้อมูล */
.contact-panel{
  background: rgba(10,15,26,.72);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  border-radius:16px;
  padding:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.contact-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; line-height:1.7; }
.contact-icon{ width:1.6em; display:inline-block; text-align:center; margin-right:.25rem; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.link-inline{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.link-inline:hover{ color:#ffd666 }

/* การ์ดแผนที่ด้านข้าง */
.map-card{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.map-embed{
  width:100%;
  height:100%;
  min-height:340px;
  aspect-ratio: 16 / 11;           /* รักษาสัดส่วนในจอเล็ก */
  border:0;
  display:block;
}

/* มือถือ: แผงเต็มความกว้าง เรียงบน-ล่าง */
@media (max-width: 991.98px){
  .contact-overlay{ background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.55) 50%,rgba(0,0,0,.25)); }
  .map-embed{ min-height:260px; aspect-ratio:auto; }
}

/* ===== FAQ with Background Image ===== */
.bg-photo-faq{
  position: relative;
  background: url("../img/bg-faq.jpg") center/cover no-repeat fixed; /* เปลี่ยนชื่อไฟล์ได้ */
  color:#fff;
  overflow:hidden;
}
.bg-photo-faq .faq-overlay{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.35) 100%),
    radial-gradient(1000px 500px at 50% -10%, rgba(15,59,110,.35), transparent 60%);
  pointer-events:none;
  z-index:0;
}
.bg-photo-faq > .container{ position:relative; z-index:1; }

/* ปรับการ์ด FAQ ให้ลอยบนภาพชัดขึ้น */
.faq-item{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  color:#fff;
}
.faq-question{ color:#fff; }
.faq-item.active .faq-question{ background: rgba(15,59,110,.85); }
.faq-answer{
  background: rgba(255,255,255,.96);
  color:#10141f;
}