@charset "utf-8";
/* =========================================================
   okman2.css — Selectcon UI (CLEAN + ORGANIZED)
   - Valid CSS
   - Deduped rules
   - Backward compatible with existing class names
   ========================================================= */


/* =========================================================
   0) TOKENS (edit once, affect many components)
   ========================================================= */
:root{
  --sc-blue: #191970;      /* MidnightBlue */
  --sc-text: #111;
  --sc-gray: #4c4c4c;
  --sc-muted: rgba(0,0,0,.06);

  --sc-radius-sm: 8px;
  --sc-radius-md: 12px;
  --sc-radius-lg: 14px;
  --sc-radius-xl: 16px;

  --sc-shadow-sm: 0 6px 18px rgba(0,0,0,.06);
  --sc-shadow-md: 0 6px 18px rgba(0,0,0,.12);
  --sc-shadow-lg: 0 10px 24px rgba(0,0,0,.18);

  --sc-fs-h1: 22pt;
  --sc-fs-h2: 20pt;
  --sc-fs-p: 16pt;
  --sc-lh-p: 1.95;
}


/* =========================================================
   1) UTILITIES
   ========================================================= */

/* ใช้แทน <br> : <span class="break"></span> */
.break{
  display:block !important;
  margin-top:.25rem;
}
.break2{
  display:block !important;
  margin-top:2rem;
}

.font-normal{ font-weight:400 !important; }

/* Spacing utilities (rem) */
.mb-04{ margin-bottom:.4rem !important; }
.mb-08{ margin-bottom:.8rem !important; }
.mb-10{ margin-bottom:1rem !important; }
.mb-20{ margin-bottom:2rem !important; }
.mb-30{ margin-bottom:3rem !important; }
.mb-40{ margin-bottom:4rem !important; }
.mb-50{ margin-bottom:5rem !important; }

/* Safe lazy image (supporting browsers) */
img[loading="lazy"]{ content-visibility:auto; }


/* =========================================================
   2) COLOR UTILITIES (mc-*) — keep legacy classes
   ========================================================= */

/* Blue */
.mc-m{ color:#000000 !important; }
.mc-lightblue{ color:#3366CC !important; }
.mc-midblue{ color:#000080 !important; }
.mc-kram{ color:#0c4da2 !important; }
.mc-kram2{ color:#0277bd !important; }
.mc-kroomata{ color:#1b2c55 !important; }
.mc-navyblue{ color:#000080 !important; }
.mc-blueface{ color:#1A77F2 !important; }

/* Green */
.mc-greenwow{ color:#009900 !important; }
.mc-midgreen{ color:#228B22 !important; }
.mc-greenforest{ color:#00a167 !important; }
.mc-greenman{ color:#0F7204 !important; }
.mc-green-khampoo{ color:#17372a !important; }
.mc-green-bikae{ color:#145139 !important; }
.mc-midgreen2{ color:#009900 !important; }
.mc-darkgreen{ color:#006600 !important; }
.mc-darkgreen2{ color:#006400 !important; }

/* Gray */
.mc-midgray{ color:#4c4c4c !important; }

/* Orange */
.mc-matoom{ color:#d88529 !important; }
.mc-sak{ color:#b95831 !important; }
.mc-it{ color:#c1621a !important; }
.mc-jumpa{ color:#eea31f !important; }
.mc-orange{ color:#FF4500 !important; }
.mc-orange2{ color:#bf360c !important; }

/* Red */
.mc-dangtud{ color:#951519 !important; }
.mc-dangchard{ color:#c9242b !important; }
.mc-dangnhummak{ color:#a13422 !important; }
.mc-dindangtud{ color:#76202a !important; }
.mc-fard{ color:#6f2e28 !important; }
.mc-tongdang{ color:#a0564b !important; }
.mc-darkred{ color:#CC0000 !important; }
.mc-nightred{ color:#44140c !important; }

/* Brown */
.mc-kruk{ color:#8a5929 !important; }
.mc-nhumtarn{ color:#7b4a34 !important; }
.mc-nhumtarn-mhai{ color:#522e1a !important; }
.mc-midbrown{ color:#624008 !important; }

/* Black / Dark */
.mc-lheklhai{ color:#29241b !important; }
.mc-kalahhom{ color:#2a0139 !important; }
.mc-sumlittichoke{ color:#5c4606 !important; }
.mc-dumkamhao{ color:#000000 !important; }
.mc-tao{ color:#666666 !important; }

/* Gold */
.mc-Goldenrod{ color:#DAA520 !important; }
.mc-DarkGoldenrod{ color:#B8860B !important; }
.mc-Gold{ color:#744e1d !important; }
.mc-Gold2{ color:#9c6023 !important; }
.mc-Gold3{ color:#876029 !important; }
.mc-Gold4{ color:#987131 !important; }
.mc-Gold5{ color:#b3782c !important; }
.mc-Gold6{ color:#b68e42 !important; }
.mc-Gold7{ color:#b69853 !important; }

/* Purple */
.mc-medmaprang{ color:#702c7d !important; }
.mc-purple{ color:#673ab7 !important; }
.mc-midpurple{ color:#591075 !important; }


/* =========================================================
   3) MARGIN HELPERS (ma-*) — keep legacy classes
   ========================================================= */
.ma-top0{ margin-top:0 !important; }
.ma-top10{ margin-top:10px !important; }
.ma-top20{ margin-top:20px !important; }
.ma-top30{ margin-top:30px !important; }
.ma-top50{ margin-top:50px !important; }

.ma-bottom10{ margin-bottom:10px !important; }
.ma-bottom20{ margin-bottom:20px !important; }
.ma-bottom30{ margin-bottom:30px !important; }

.ma-left5{ margin-left:5px !important; }
.ma-left10{ margin-left:10px !important; }
.ma-left15{ margin-left:15px !important; }
.ma-left20{ margin-left:20px !important; }
.ma-left25{ margin-left:25px !important; }
.ma-left30{ margin-left:30px !important; }
.ma-left40{ margin-left:40px !important; }
.ma-left50{ margin-left:50px !important; }

.ma-right5{ margin-right:5px !important; }
.ma-right10{ margin-right:10px !important; }
.ma-right15{ margin-right:15px !important; }
.ma-right20{ margin-right:20px !important; }
.ma-right25{ margin-right:25px !important; }
.ma-right30{ margin-right:30px !important; }

.ma-line-height-height1{ line-height:1 !important; }
.ma-line-height-height2{ line-height:2 !important; }


/* =========================================================
   4) LEGACY TYPOGRAPHY (md-*) — fixed + compatible
   ========================================================= */
/* Base for md-* */
.md-22,
.md-21,
.md-20,
.md-20-1,
.md-end-20,
.md-lh1-25,
.md-18-0,
.md-18,
.md-18-x,
.md-18-l1,
.md-end-18,
.md-18-90,
.md-18-100,
.md-18-center,
.md-16,
.md-16-2,
.md-16-3,
.md-16-4,
.md-167,
.md-end-16,
.md-16-cc,
.md-16-l1,
.md-16-50,
.md-15,
.md-15-50,
.md-end-15,
.md-end-15-50,
.md-14,
.md-end-14,
.md-14-a,
.md-end-14-a,
.md-14-r,
.md-16-r,
.md-12,
.md-end-12{
  font-family: Arial, Verdana, sans-serif;
  font-weight:400;
  margin-top:0;
  margin-left:5px;
  margin-right:5px;
  text-align:left;
}

/* Sizes */
.md-22{ font-size:22pt; line-height:2; margin-bottom:20px; }
.md-21{ font-size:21pt; line-height:2; margin-bottom:21px; }
.md-20{ font-size:20pt; line-height:2; margin-bottom:21px; }
.md-20-1{ font-size:20pt; line-height:1.5; margin-bottom:21px; }
.md-end-20{ font-size:20pt; line-height:1.5; margin-bottom:0; }

.md-lh1-25{ font-size:25pt; line-height:1.5; margin-bottom:0; }

.md-18-0{ font-size:18pt; line-height:2; margin-left:0; margin-right:0; margin-bottom:20px; }
.md-18{ font-size:18pt; line-height:2; margin-bottom:20px; }
.md-18-x{ font-size:18pt; line-height:2; margin-bottom:20px; }
.md-18-l1{ font-size:18pt; line-height:1.5; margin-bottom:20px; }
.md-end-18{ font-size:18pt; line-height:2; margin-bottom:0; }

.md-18-90{ font-size:18pt; line-height:2; margin-left:90px; margin-bottom:20px; }
.md-18-100{ font-size:18pt; line-height:2; margin-left:100px; margin-bottom:20px; }

.md-18-center{ font-size:18pt; line-height:2; margin-bottom:20px; text-align:center; }

.md-16{ font-size:16pt; line-height:2; margin-bottom:20px; }
.md-16-2{ font-size:16pt; line-height:2; margin-bottom:40px; }
.md-16-3{ font-size:16pt; line-height:2; margin-bottom:30px; }
.md-16-4{ font-size:16pt; line-height:2; margin-bottom:40px; }
.md-167{ font-size:16pt; line-height:2; margin-bottom:70px; }

.md-end-16{ font-size:16pt; line-height:2; margin-bottom:0; }
.md-16-cc{ font-size:16pt; line-height:2; margin-bottom:20px; text-align:center; }
.md-16-l1{ font-size:16pt; line-height:1.5; margin-bottom:15px; }
.md-16-50{ font-size:16pt; line-height:2; margin-left:50px; margin-bottom:0; }

.md-15{ font-size:15pt; line-height:2; margin-bottom:20px; }
.md-15-50{ font-size:15pt; line-height:2; margin-left:50px; margin-bottom:20px; }
.md-end-15{ font-size:15pt; line-height:2; margin-bottom:0; }
.md-end-15-50{ font-size:15pt; line-height:2; margin-left:50px; margin-bottom:0; }

.md-14{ font-size:14pt; line-height:2; margin-bottom:40px; }
.md-end-14{ font-size:14pt; line-height:2; margin-bottom:0; }
.md-14-a{ font-size:14pt; line-height:2; margin-left:50px; margin-bottom:20px; }
.md-end-14-a{ font-size:14pt; line-height:2; margin-left:50px; margin-bottom:0; }

.md-14-r{ font-size:14pt; line-height:2; margin-left:0; margin-bottom:40px; text-align:right; }
.md-16-r{ font-size:16pt; line-height:2; margin-left:0; margin-bottom:40px; text-align:right; }

.md-12{ font-size:12pt; line-height:2; margin-bottom:20px; }
.md-end-12{ font-size:12pt; line-height:2; margin-bottom:0; }

/* Legacy labels */
.md-18-for-b,
.md-16-for-b{
  font-family: Arial, Verdana, sans-serif;
  font-weight:400;
  margin:0 0 20px 0;
  line-height:2;
  text-align:left;
}
.md-18-for-b{ font-size:18pt; }
.md-16-for-b{ font-size:16pt; }


/* =========================================================
   5) BUTTONS (generic) — safe (avoid bootstrap conflict)
   ========================================================= */
.sc-btn{
  display:inline-block;
  padding:10px 22px;
  font-size:17px;
  border-radius:var(--sc-radius-sm);
  font-weight:600;
  text-decoration:none;
  transition:all .2s ease-in-out;
  cursor:pointer;
  border:2px solid transparent;
  line-height:1.5;
  margin:5px;
}

.sc-btn-primary{
  background:#007bff;
  color:#fff;
  border-color:#007bff;
}
.sc-btn-primary:hover{
  background:#0056b3;
  border-color:#004c99;
  color:#fff;
  text-decoration:none;
}

.sc-btn-outline{
  background:#fff;
  color:#007bff;
  border-color:#007bff;
}
.sc-btn-outline:hover{
  background:#007bff;
  color:#fff;
}

.sc-btn-secondary{
  background:#6c757d;
  color:#fff;
  border-color:#6c757d;
}
.sc-btn-secondary:hover{
  background:#555d63;
  border-color:#4e555b;
}

@media (max-width:768px){
  .sc-btn{
    display:block;
    width:100%;
    text-align:center;
    margin-bottom:10px;
  }
}


/* =========================================================
   6) CTA BUTTON SYSTEM (used in Vol pages)
   - supports primary (เด่น) / secondary (อ่อนกว่า)
   ========================================================= */
.sc-cta-bar{
  display:flex;
  justify-content:center;
  margin:18px 0;
}

.sc-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border-radius:var(--sc-radius-lg);
  font-weight:800;
  font-size:16px;
  text-decoration:none;
  transition:all .15s ease;
  box-shadow:var(--sc-shadow-md);
}

/* Primary: เด่น */
.sc-cta-btn--primary{
  background:#778899; /* SlateGray */
  border:2px solid #778899;
  color:#fff;
}
.sc-cta-btn--primary:hover{
  background:#6b7f95;
  border-color:#6b7f95;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:var(--sc-shadow-lg);
}

/* Secondary: อ่อนกว่า */
.sc-cta-btn--secondary{
  background:#fff;
  border:2px solid #778899;
  color:#778899;
}
.sc-cta-btn--secondary:hover{
  background:#778899;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.sc-cta-btn:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(119,136,153,.35), var(--sc-shadow-lg);
}


/* =========================================================
   7) HBCD Layout (home-building-consultant)
   ========================================================= */
.hbcd{
  max-width:920px;
  margin:0 auto;
  padding:28px 18px 52px;
}

.hbcd-hero{ margin:0 0 26px; }

.hbcd-hero img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--sc-radius-lg);
}

.hbcd-hero figcaption{
  margin-top:10px;
  font-size:.95rem;
  line-height:1.6;
  opacity:.8;
}

.hbcd h1{
  margin:8px 0 22px;
  font-size:clamp(1.6rem, 2.6vw, 2.2rem);
  line-height:1.25;
  letter-spacing:-0.2px;
}

.hbcd h2{
  margin:34px 0 14px;
  font-size:18pt;
  line-height:1.35;
  color:var(--sc-blue);
}

.hbcd .text-block{
  margin:0 0 2.2em 0;
  line-height:1.95;
  font-size:16pt;
}

.hbcd .card{
  padding:22px 18px;
  border-radius:var(--sc-radius-xl);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:var(--sc-shadow-sm);
  background:#fff;
  margin:0 0 22px;
}

.hbcd .divider{
  height:1px;
  background:rgba(0,0,0,0.12);
  margin:26px 0;
}

.hbcd ul{
  margin:0 0 2.2em 1.2em;
  line-height:1.8;
  font-size:16pt;
}

@media (min-width:900px){
  .hbcd{ padding:36px 22px 64px; }
  .hbcd .card{ padding:26px 22px; }
}


/* =========================================================
   8) SC PAGE BLOCKS (generic)
   ========================================================= */
.sc-page{ padding:28px 0 56px; }

.sc-card{
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:var(--sc-radius-xl);
  box-shadow:var(--sc-shadow-sm);
  padding:22px 18px;
}

.sc-title{
  font-size:24pt;
  line-height:1.3;
  margin:0 0 14px;
}

.sc-h2{
  font-size:18pt;
  line-height:1.35;
  color:var(--sc-blue);
  margin:34px 0 14px;
}

.sc-text{
  font-size:16pt;
  line-height:1.9;
  margin:0 0 2.2em 0;
  color:var(--sc-text);
}

.sc-lead-tight{ margin-bottom:.6em; }

.sc-divider{
  height:1px;
  background:rgba(0,0,0,0.12);
  margin:26px 0;
}

.sc-list{
  font-size:16pt;
  line-height:1.8;
  margin:0 0 2.2em 0;
  padding-left:1.1em;
}
.sc-list li{ margin-bottom:.35em; }

.sc-hero img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--sc-radius-lg);
}

@media (max-width:480px){
  .sc-title{ font-size:20pt; }
  .sc-h2{ font-size:17pt; }
  .sc-text, .sc-list{ font-size:15pt; }
  .sc-card{ padding:20px 16px; }
}


/* =========================================================
   9) SC HERO TEXT (merged from duplicates)
   - plain text + quote with left bar
   ========================================================= */
.sc-heroText{
  max-width:920px;
  margin:0 auto 3rem;
  padding:22px 18px;
  background:#fff;
}

.sc-heroText__title{
  margin:0 0 18px 0;
  font-size:22pt;
  line-height:1.35;
  font-weight:800;
  color:var(--sc-text);
  letter-spacing:-0.2px;
}

/* plain paragraph zone */
.sc-heroText__plain p{
  font-size:18pt;
  line-height:1.7;
  margin:0 0 .6em 0;
  color:#000;
}

/* quote zone (left bar) */
.sc-heroText__quote{
  border-left:4px solid #d0d0d0;
  padding-left:20px;
  margin-top:1.8rem;
}
.sc-heroText__quote p{
  font-size:18pt;
  line-height:1.7;
  margin:0 0 .6em 0;
  color:#000;
}

@media (max-width:768px){
  .sc-heroText__title{ font-size:20pt; }
  .sc-heroText__plain p,
  .sc-heroText__quote p{ font-size:17pt; }
}
@media (max-width:480px){
  .sc-heroText__title{ font-size:18.5pt; }
  .sc-heroText__plain p,
  .sc-heroText__quote p{ font-size:16pt; }
  .sc-heroText__quote{ padding-left:16px; }
}


/* =========================================================
   10) MISC (keep)
   ========================================================= */
#confusedGif{
  background:transparent !important;
  border:none !important;
}

/* ==============================
   FIX FONT SIZE (Vol1-2 stable)
   put at END of okman2.css
   ============================== */

#maincontent .sc-about-h1{
  font-size: 22pt !important;
  line-height: 1.35 !important;
}

#maincontent .sc-about-h2{
  font-size: 20pt !important;
  line-height: 1.35 !important;
}

#maincontent .sc-about-p,
#maincontent .sc-sm1-lead{
  font-size: 16pt !important;
  line-height: 1.95 !important;
}

#maincontent .sc-sm1-bullets ul{
  font-size: 16pt !important;
  line-height: 1.9 !important;
}

/* มือถือ */
@media (max-width:480px){
  #maincontent .sc-about-h1{ font-size: 20pt !important; }
  #maincontent .sc-about-h2{ font-size: 18pt !important; }
  #maincontent .sc-about-p,
  #maincontent .sc-sm1-lead,
  #maincontent .sc-sm1-bullets ul{ font-size: 15.5pt !important; }
}


/* ==============================
   FIX: Decision box typography (Vol1-2)
   put at END of okman2.css
   ============================== */

/* กล่องชมพู */
#maincontent .sc-sm1-decision{
  margin: 30px 0 !important;
  padding: 22px 22px !important;
  border-radius: 16px !important;
  background: #FFF0F5 !important;
}

/* หัวข้อ "ก่อนคุณจะตัดสินใจ" */
#maincontent .sc-sm1-decision .sc-sm1-h2{
  font-size: 20pt !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  color: #191970 !important;
  margin: 0 0 10px !important;

  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

/* ไอคอน ? */
#maincontent .sc-sm1-decision .sc-icon{
  font-size: 1.2em !important;
  line-height: 1 !important;
  margin-top: 2px !important;
  color: #8B0000 !important;
  flex-shrink: 0 !important;
}

/* ข้อความในกล่อง (ให้เท่าเนื้อหาหลัก) */
#maincontent .sc-sm1-decision p{
  font-size: 16pt !important;
  line-height: 1.95 !important;
  margin: 0 !important;
  color: #111 !important;
}

/* มือถือ */
@media (max-width: 480px){
  #maincontent .sc-sm1-decision{ padding: 18px 18px !important; }
  #maincontent .sc-sm1-decision .sc-sm1-h2{ font-size: 18pt !important; }
  #maincontent .sc-sm1-decision p{ font-size: 15.5pt !important; }
}

/* ==============================
   FIX: Bullet list with left bar
   (our_service_Vol1-2)
   ============================== */

/* กล่อง bullet ทั้งก้อน */
#maincontent .sc-sm1-bullets{
  margin: 18px 0 !important;
  padding: 16px 18px 16px 22px !important;

  border-left: 7px solid rgba(25,25,112,0.28) !important; /* เส้นซ้าย */
  border-radius: 14px !important;
  background: rgba(0,0,0,0.02) !important;
}

/* ul ด้านใน */
#maincontent .sc-sm1-bullets ul{
  margin: 0 !important;
  padding-left: 1.25em !important;   /* ระยะ bullet */
  list-style-position: outside !important;

  font-size: 16pt !important;
  line-height: 1.9 !important;
  color: #111 !important;
}

/* li */
#maincontent .sc-sm1-bullets li{
  margin: 0 0 10px !important;
}

#maincontent .sc-sm1-bullets li:last-child{
  margin-bottom: 0 !important;
}

/* มือถือ */
@media (max-width: 480px){
  #maincontent .sc-sm1-bullets ul{
    font-size: 15.5pt !important;
  }
}


/* ==============================
   FIX: Vol1-2 bullets + CTA buttons
   (place at END of okman2.css)
   ============================== */

/* ===== Bullet box (เส้นซ้ายต้องกลับมาแน่นอน) ===== */
#maincontent .sc-sm1-bullets{
  margin: 18px 0;
  padding: 16px 18px 16px 22px;

  border-left: 7px solid rgba(25,25,112,0.28);
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
}

#maincontent .sc-sm1-bullets ul{
  margin: 0;
  padding-left: 1.25em;
  list-style-position: outside;

  font-size: 16pt;
  line-height: 1.9;
  color: #111;
}

#maincontent .sc-sm1-bullets li{ margin: 0 0 10px; }
#maincontent .sc-sm1-bullets li:last-child{ margin-bottom: 0; }

@media (max-width: 480px){
  #maincontent .sc-sm1-bullets ul{ font-size: 15.5pt; }
}

/* ===== CTA Buttons ===== */
#maincontent .sc-cta-bar{
  display:flex;
  justify-content:center;
  margin: 18px 0 26px;
}

#maincontent .sc-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:14px 28px;
  border-radius:999px;

  border:2px solid #191970;
  background:#191970;
  color:#fff;

  font-weight:700;
  font-size:16px;
  text-decoration:none;
  text-align:center;
  white-space:normal;

  box-shadow:0 10px 28px rgba(25,25,112,.28);
  transition: all .18s ease;
}

#maincontent .sc-cta-btn:hover{
  background:#0f0f5c;
  border-color:#0f0f5c;
  color:#fff;
  text-decoration:none;
  transform: translateY(-1px);
  box-shadow:0 14px 36px rgba(25,25,112,.38);
}

#maincontent .sc-cta-btn:active{
  transform: translateY(0);
  box-shadow:0 8px 20px rgba(25,25,112,.25);
}

/* ปุ่มรอง (กลับหน้า) ให้สีอ่อนกว่า */
#maincontent .sc-cta-btn--secondary{
  background:#778899;
  border-color:#778899;
  box-shadow:0 10px 26px rgba(119,136,153,.28);
}

#maincontent .sc-cta-btn--secondary:hover{
  background:#5f7284;
  border-color:#5f7284;
  box-shadow:0 14px 34px rgba(95,114,132,.34);
}