/* ============================================================
   ไทยดาต้าเทค — Apple-Inspired Stylesheet
   โทนสีสว่าง / Clean / Trustworthy / Premium
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* ── Design Tokens ── */
:root {
  --white:        #ffffff;
  --bg-primary:   #f5f5f7;
  --bg-card:      #ffffff;
  --bg-card-alt:  #fbfbfd;

  --text-primary:   #1d1d1f;
  --text-secondary: #515154;
  --text-tertiary:  #6e6e73;
  --text-accent:    #0071e3;

  --border:       rgba(0, 0, 0, 0.08);
  --shadow-sm:    0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 20px 60px rgba(0, 0, 0, 0.10);

  --radius-sm:    10px;
  --radius-md:    18px;
  --radius-lg:    24px;

  --transition:   0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --font-th: 'IBM Plex Sans Thai', 'Sarabun', sans-serif;
  --font-en: 'IBM Plex Sans', sans-serif;
}

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-th);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

/* ── Background Section (hero wrapper) ── */
body.background {
  background-image: none !important;
  background-color: var(--bg-primary) !important;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-th);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

h1 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 300;
  color: var(--text-secondary);
  letter-spacing: 0;
  margin-bottom: 0;
}

h2.logo-font,
h2.section-font {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 600;
  color: var(--text-primary);
}

h2.logo-font {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: 1px;
}

h3.alt-font {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-accent);
  font-family: var(--font-en);
}

p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.75;
}

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: opacity var(--transition);
}

a:hover {
  opacity: 0.75;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Container & Grid ── */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
}

[class*="col-"] {
  padding: 0 12px;
}

.col-md-3  { width: 25%; }
.col-md-4  { width: 33.333%; }
.col-md-5  { width: 41.666%; }
.col-md-6  { width: 50%; }
.col-md-7  { width: 58.333%; }
.col-md-12 { width: 100%; }
.col-sm-6  { width: 50%; }
.col-sm-12 { width: 100%; }
.col-xs-6  { width: 50%; }
.col-xs-12 { width: 100%; }

/* ── Hero Section ── */
section.no-padding {
  padding: 0;
}

section > .container {
  padding-top: 0;
}

.page-title-small {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.extra-small-screen {
  width: 100%;
}

/* Hero content */
section .display-table-cell.text-center {
  padding: 80px 24px 60px;
}

section .display-table-cell.text-center img {
  margin: 0 auto 24px;
  width: 56px;
  opacity: 0.9;
}

section .display-table-cell.text-center h2.logo-font {
  margin-bottom: 12px;
}

section .display-table-cell.text-center h1 {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  color: var(--text-tertiary);
  font-weight: 300;
}

/* ── Article / Card Sections ── */
.half-article {
  padding: 0 0 28px;
}

.container-setting {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 56px 52px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  margin-bottom: 0;
  transition: box-shadow var(--transition);
}

.container-setting:hover {
  box-shadow: var(--shadow-md);
}

/* Alternating background */
.half-article:nth-child(even) .container-setting {
  background: var(--bg-card-alt);
}

/* ── Lists ── */
ul {
  list-style: none;
  padding: 0;
}

ul.no-padding {
  padding: 0;
}

/* Check list */
ul.list-style-check li,
ul.list-style-arrow li,
ul.list-style-globe li {
  padding: 10px 0 10px 32px;
  position: relative;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 0.97rem;
}

ul.list-style-check li:last-child,
ul.list-style-arrow li:last-child,
ul.list-style-globe li:last-child {
  border-bottom: none;
}

ul.list-style-check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--text-accent);
  font-weight: 700;
  font-size: 0.9rem;
}

ul.list-style-arrow li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--text-accent);
  font-size: 0.9rem;
}

ul.list-style-globe li::before {
  content: '○';
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--text-accent);
  font-size: 0.75rem;
}

/* ── Typography Helpers ── */
.text-extra-dark-gray { color: var(--text-primary); }
.text-medium-gray     { color: var(--text-tertiary); }
.text-medium          { font-weight: 500; }
.text-small           { font-size: 0.82rem; color: var(--text-tertiary); }

.title-font {
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-en);
  font-size: 0.95rem;
}

.section-font {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.alt-font {
  font-family: var(--font-en);
}

/* ── Spacing Utilities ── */
.no-margin-bottom      { margin-bottom: 0 !important; }
.margin-10px-bottom    { margin-bottom: 10px; }
.margin-15px-bottom    { margin-bottom: 15px; }
.margin-25px-bottom    { margin-bottom: 25px; }
.sm-margin-20px-bottom { margin-bottom: 20px; }
.xs-margin-30px-bottom { margin-bottom: 30px; }
.sm-margin-50px-bottom { margin-bottom: 50px; }

.padding-10px-top  { padding-top: 10px; }
.padding-15px-bottom { padding-bottom: 15px; }
.padding-20px-top  { padding-top: 20px; }
.padding-30px-left { padding-left: 30px; }
.padding-40px-bottom { padding-bottom: 40px; }
.no-padding-bottom { padding-bottom: 0 !important; }
.xs-padding-15px-bottom { padding-bottom: 15px; }
.xs-padding-15px-top    { padding-top: 15px; }
.sm-padding-15px-top    { padding-top: 15px; }
.padding-30px-top { padding-top: 30px; }

/* ── Display Helpers ── */
.display-table      { display: flex; }
.display-table-cell { display: flex; flex-direction: column; justify-content: center; }
.vertical-align-middle { justify-content: center; }
.width-100 { width: 100%; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.display-block  { display: block; }
.display-inline-block { display: inline-block; }
.overflow-hidden { overflow: hidden; }

/* ── Blog Post / Portfolio Cards ── */
.blog-post {
  padding: 20px 12px;
}

.blog-post-images {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-primary);
}

.blog-post-images img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  padding: 16px;
  transition: transform 0.4s ease;
}

.blog-post:hover .blog-post-images img {
  transform: scale(1.05);
}

.post-details {
  padding-top: 10px;
}

.post-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-tertiary);
  font-family: var(--font-en);
  letter-spacing: 0.01em;
}

/* Portfolio example images */
.blog-post-images a img {
  height: 200px;
  object-fit: cover;
  padding: 0;
  border-radius: var(--radius-sm);
  filter: grayscale(10%);
  transition: filter 0.4s ease, transform 0.4s ease;
}

.blog-post:hover .blog-post-images a img {
  filter: grayscale(0%);
  transform: scale(1.03);
}

/* ── Footer ── */
footer.footer-strip-dark {
  background: #f5f5f7;
  border-top: 1px solid var(--border);
  padding: 36px 0;
  margin-top: 8px;
}

footer .col-md-6 {
  display: flex;
  align-items: center;
}

footer .text-right {
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-end;
}

footer strong {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

footer .text-small {
  margin-top: 4px;
}

footer img.width-20 { width: 48px; }
footer img.md-width-30 { width: 48px; }

/* ── Sizing Utilities ── */
.width-10  { width: 56px; }
.xs-width-25 { width: 56px; }
.width-55  { max-width: 600px; }
.sm-width-80 { max-width: 80%; }
.xs-width-100 { max-width: 100%; }
.height-300px { height: 300px; }
.width-100 { width: 100%; }
.center-col { margin-left: auto; margin-right: auto; }

/* ── Line Height ── */
.line-height-50    { line-height: 1.15; }
.sm-line-height-45 { line-height: 1.2;  }
.xs-line-height-30 { line-height: 1.25; }

/* ── Last paragraph no margin ── */
.last-paragraph-no-margin > *:last-child { margin-bottom: 0; }

/* ── Links in body ── */
.container-setting a:not([class]) {
  color: var(--text-accent);
  font-weight: 500;
}

/* Telephone & contact links */
a[href^="tel"],
a[href^="mailto"],
a[href*="line.me"] {
  color: var(--text-accent);
  font-weight: 500;
}

/* ── Responsive Tweaks ── */
@media (max-width: 991px) {
  .container-setting {
    padding: 40px 32px;
  }

  .col-md-3, .col-md-4, .col-md-5,
  .col-md-6, .col-md-7, .col-md-12 {
    width: 100%;
  }

  .display-table { flex-direction: column; }
  .display-table-cell { width: 100% !important; }

  .text-right { justify-content: center !important; align-items: center !important; text-align: center !important; }
  .text-left  { text-align: left !important; }

  footer .col-md-6 { justify-content: center; text-align: center; margin-bottom: 16px; }
  footer .text-right { align-items: center !important; }
}

@media (max-width: 767px) {
  .container-setting {
    padding: 32px 20px;
    border-radius: var(--radius-md);
  }

  .half-article { padding-bottom: 20px; }

  .col-sm-6 { width: 50%; }
  .col-xs-6 { width: 50%; }
  .col-xs-12 { width: 100%; }

  .blog-post-images img { height: 120px; }
  .blog-post-images a img { height: 160px; }

  .sm-no-padding { padding: 0 !important; }
  .xs-no-padding { padding: 0 !important; }
  .xs-text-center { text-align: center; }

  section .display-table-cell.text-center {
    padding: 60px 16px 40px;
  }
}

/* Visibility helpers */
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md { display: none !important; }
}
@media (min-width: 1200px) {
  .hidden-lg { display: none !important; }
}

/* ── Scroll fade-in animation ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.container-setting {
  animation: fadeUp 0.5s ease both;
}

.half-article:nth-child(1) .container-setting { animation-delay: 0.05s; }
.half-article:nth-child(2) .container-setting { animation-delay: 0.10s; }
.half-article:nth-child(3) .container-setting { animation-delay: 0.15s; }
.half-article:nth-child(4) .container-setting { animation-delay: 0.20s; }
.half-article:nth-child(5) .container-setting { animation-delay: 0.25s; }
.half-article:nth-child(6) .container-setting { animation-delay: 0.30s; }

/* ── iframe (map) ── */
iframe { border: none; border-radius: var(--radius-sm); }