.elementor-kit-7{--e-global-color-primary:#367588;--e-global-color-secondary:#2F3336;--e-global-color-text:#4A5459;--e-global-color-accent:#D4B589;--e-global-typography-primary-font-family:"IBM Plex Sans Thai";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"IBM Plex Sans Thai";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =====================================================================
   Timblick & Partners – Elementor global CSS
   วางที่: Elementor → Site Settings → Custom CSS (ทั้งไฟล์)
   ใส่ลิงก์รูปเรียบร้อยแล้ว วางได้ทันที
   ปลอดภัย: ทุกคำสั่งมีผลเฉพาะส่วนที่ใส่ class tb-... เท่านั้น
   ===================================================================== */
:root{
  --tb-bg:   url("https://timblick.pai.orangethailand.com/wp-content/uploads/2026/06/bg-about.jpg");   /* รูปพื้นผิวพื้นหลัง */
  --tb-hero: url("https://timblick.pai.orangethailand.com/wp-content/uploads/2026/08/cityscape-bangkok-night-view-scaled.jpg");      /* รูปแบนเนอร์หน้า Home */

  --tb-teal:#367587; --tb-fade:#427f90; --tb-deep:#1f5566;
  --tb-dark:#2f3336; --tb-paper:#e6eff2; --tb-muted:#4a5459;
  --tb-max:1100px; --tb-space:34px; --tb-radius:6px;
}

/* ---------- พื้นหลังต่อเนื่องทั้งเว็บ (ทำงานเฉพาะหน้าที่มีส่วนใหม่แล้ว) ---------- */
body:has(.tb-section, .tb-hero, .tb-footer){
  background:var(--tb-bg) top center/100% auto repeat-y, var(--tb-paper);
  background-blend-mode:multiply,normal;
  color:var(--tb-dark);
}

/* ---------- Section (container หลักแต่ละส่วน) ---------- */
.e-con.tb-section{
  --content-width:var(--tb-max);
  --padding-top:var(--tb-space); --padding-bottom:var(--tb-space);
  --padding-left:24px; --padding-right:24px;
  --gap:0px; --row-gap:0px; --column-gap:0px;
}

/* ---------- หัวข้อกลางส่วน: eyebrow + title + lead ---------- */
.e-con.tb-head{
  --gap:0px; --row-gap:0px; --align-items:center;
  --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px;
  max-width:46em; margin:0 auto 8px; text-align:center;
}
.tb-eyebrow .elementor-heading-title{
  margin:0 0 10px; font-size:.8rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--tb-teal);
}
.tb-title .elementor-heading-title{
  margin:0; font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.25; font-weight:700; color:var(--tb-dark);
}
.tb-title .elementor-heading-title::after{
  content:""; display:block; width:48px; height:3px; margin:16px auto 0; background:var(--tb-teal);
}
.tb-lead{margin-top:22px; font-size:1.15rem; line-height:1.75; color:var(--tb-dark)}
.tb-lead p{margin:0}
.tb-lead.tb-muted{font-size:1rem; color:var(--tb-muted)}

.tb-intro-body{max-width:46em; margin:22px auto 0; text-align:center; line-height:1.85; color:var(--tb-muted)}
.tb-intro-body p{margin:0}

/* ---------- แบนเนอร์หน้า Home (ภาพค่อยๆ ซูม + ขอบล่างจางลง) ---------- */
.e-con.tb-hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(80vh,720px); background:var(--tb-deep);
  --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
}
.e-con.tb-hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:1;
  background:var(--tb-hero) center 62%/cover no-repeat;
  transform-origin:60% 60%; animation:tb-zoom 14s ease-in-out infinite alternate; will-change:transform;
}
.e-con.tb-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(20,55,68,.6) 0,rgba(20,55,68,0) 220px),rgba(31,85,102,.10);
}
@keyframes tb-zoom{0%{transform:scale(1.02) translate3d(0,0,0)}100%{transform:scale(1.2) translate3d(-3%,-2%,0)}}
.tb-sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- ลิงก์ขีดเส้นใต้ (See more) ---------- */
.tb-link .elementor-heading-title a{
  display:inline-block; font-size:1rem; font-weight:600; color:inherit; text-decoration:none; padding-bottom:4px;
  background:linear-gradient(currentColor,currentColor) left bottom/30% 3px no-repeat; transition:background-size .3s ease;
}
.tb-link .elementor-heading-title a:hover{background-size:100% 3px}

/* ---------- กล่อง About (สีเขียวอมฟ้า + เครื่องหมายคำพูด) ---------- */
.e-con.tb-about{
  position:relative; max-width:820px; width:100%; margin:36px auto 0;
  --padding-top:48px; --padding-bottom:40px; --padding-left:56px; --padding-right:56px;
  --gap:0px; --row-gap:0px; --align-items:center;
  text-align:center; color:#fff; background:var(--tb-teal); border-radius:var(--tb-radius);
  box-shadow:0 22px 44px -22px rgba(20,60,75,.55);
}
.e-con.tb-about::before{
  content:"\201C"; position:absolute; top:-4px; left:28px; font-size:5.2rem; line-height:1;
  font-family:Georgia,serif; color:rgba(255,255,255,.25); background:none; opacity:1;
  right:auto; bottom:auto; width:auto; height:auto; text-align:left; mix-blend-mode:normal; pointer-events:none;
}
.tb-about, .tb-about p{color:#fff}
.tb-about p{margin:0 0 14px; line-height:1.8; font-size:1.05rem}
.tb-about p:first-child{font-size:1.15rem; font-weight:600}
.tb-about .tb-link{margin-top:12px; color:#fff}

/* ---------- ตาราง 3 คอลัมน์ (บริการ / ทีม) ---------- */
.e-con.tb-grid:not(:has(>.e-con-inner)), .e-con.tb-grid>.e-con-inner{
  display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
}
.e-con.tb-grid{margin-top:32px; --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px}
.e-con.tb-grid > .e-con, .e-con.tb-grid > .e-con-inner > .e-con{--width:100%; width:100%}

/* ---------- การ์ดบริการ ---------- */
.e-con.tb-card{
  position:relative; isolation:isolate; overflow:hidden; min-height:210px;
  --flex-direction:column; --align-items:flex-start; --justify-content:flex-start;
  --gap:16px; --row-gap:16px;
  --padding-top:30px; --padding-bottom:30px; --padding-left:30px; --padding-right:30px;
  color:#fff; text-decoration:none; background:var(--tb-teal); border-radius:var(--tb-radius);
  transition:transform .25s ease, box-shadow .25s ease;
}
.e-con.tb-card::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; background:var(--tb-fade); transition:opacity .3s ease;
}
.e-con.tb-card:hover, .e-con.tb-card:focus-visible{transform:translateY(-6px); box-shadow:0 18px 36px -14px rgba(20,60,75,.5)}
.e-con.tb-card:hover::before, .e-con.tb-card:focus-visible::before{opacity:1}
.e-con.tb-card:focus-visible{outline:3px solid var(--tb-dark); outline-offset:3px}
.tb-card .elementor-heading-title{margin:0; font-size:1.15rem; line-height:1.4; font-weight:700; color:#fff; text-align:left}

.tb-icon .elementor-icon-wrapper{text-align:left; line-height:0}
.tb-icon .elementor-icon{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  font-size:21px; color:#fff; fill:#fff; background:rgba(255,255,255,.14);
  transition:background .25s ease, transform .25s ease;
}
.tb-icon .elementor-icon svg{width:21px; height:21px; fill:#fff}
.tb-card:hover .tb-icon .elementor-icon{background:var(--tb-dark); transform:rotate(-6deg)}

.e-con.tb-card > .tb-go{margin-top:auto}
.tb-go .elementor-heading-title{
  font-size:.95rem; font-weight:600; color:#fff; padding-bottom:5px;
  background:linear-gradient(var(--tb-dark),var(--tb-dark)) left bottom/28% 3px no-repeat; transition:background-size .3s ease;
}
.tb-card:hover .tb-go .elementor-heading-title{background-size:100% 3px}

/* ---------- การ์ดทีม (รูปแนวตั้ง + ปุ่ม View profile ตอนชี้เมาส์) ---------- */
.e-con.tb-person{
  --gap:0px; --row-gap:0px;
  --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px;
  overflow:hidden; background:#fff; border-radius:var(--tb-radius); text-decoration:none; color:var(--tb-dark);
  border-bottom:4px solid var(--tb-teal); box-shadow:0 10px 26px -18px rgba(20,60,75,.35);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.e-con.tb-photo{
  position:relative; overflow:hidden; aspect-ratio:4/5; background:#e3ebee;
  --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px; --gap:0px;
}
.tb-photo > .elementor-widget-image{position:static}
.tb-photo img{
  position:absolute; inset:0; width:100%!important; height:100%!important; max-width:none;
  object-fit:cover; object-position:center top; transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.e-con.tb-photo::after{
  content:""; position:absolute; inset:0; z-index:1; opacity:0;
  background:linear-gradient(180deg,rgba(31,85,102,.15) 0%,rgba(31,85,102,.82) 100%); transition:opacity .35s ease;
}
.tb-photo > .tb-view{
  position:absolute!important; left:50%; bottom:28px; z-index:2; width:auto!important;
  transform:translate(-50%,14px); opacity:0; transition:opacity .35s ease, transform .35s ease;
}
.tb-view .elementor-heading-title{
  white-space:nowrap; padding:12px 26px; border:2px solid #fff; border-radius:2px; color:#fff;
  font-size:.85rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transition:background .25s ease, color .25s ease;
}
.tb-view .elementor-heading-title:hover{background:#fff; color:var(--tb-deep)}
.e-con.tb-person:hover, .e-con.tb-person:focus-visible{transform:translateY(-6px); box-shadow:0 22px 40px -18px rgba(20,60,75,.45); border-color:var(--tb-dark)}
.tb-person:hover .tb-photo img, .tb-person:focus-visible .tb-photo img{transform:scale(1.06)}
.tb-person:hover .tb-photo::after, .tb-person:focus-visible .tb-photo::after{opacity:1}
.tb-person:hover .tb-view, .tb-person:focus-visible .tb-view{opacity:1; transform:translate(-50%,0)}
.e-con.tb-person:focus-visible{outline:3px solid var(--tb-dark); outline-offset:3px}
.e-con.tb-info{--padding-top:20px; --padding-bottom:22px; --padding-left:24px; --padding-right:24px; --gap:4px; --row-gap:4px}
.tb-info .elementor-heading-title{margin:0; font-size:1.1rem; font-weight:700; color:var(--tb-dark)}
.tb-info p{margin:0; font-size:.95rem; color:var(--tb-muted)}
@media (hover:none){.tb-photo > .tb-view{opacity:1; transform:translate(-50%,0)} .tb-view .elementor-heading-title{background:rgba(31,85,102,.55)}}

/* ---------- Header โปร่งใสทับแบนเนอร์ (Theme Builder → Header) ---------- */
.elementor-location-header:has(.tb-header){position:absolute; top:0; left:0; right:0; z-index:1000}
body.admin-bar .elementor-location-header:has(.tb-header){top:32px}
.e-con.tb-header{
  --content-width:var(--tb-max); --min-height:76px;
  --padding-top:0px; --padding-bottom:0px; --padding-left:24px; --padding-right:24px;
  --flex-direction:row; --justify-content:space-between; --align-items:center;
  background:transparent; transition:background .3s ease, box-shadow .3s ease;
}
.e-con.tb-header.elementor-sticky--effects{background:var(--tb-deep); box-shadow:0 4px 18px rgba(0,0,0,.14)}
.tb-header img{height:48px; width:auto}
@media (max-width:560px){.tb-header img{height:36px}}

/* ---------- Footer / Contact (Theme Builder → Footer) ---------- */
.e-con.tb-footer{
  --content-width:var(--tb-max);
  --padding-top:calc(var(--tb-space) + 80px); --padding-bottom:var(--tb-space);
  --padding-left:24px; --padding-right:24px; --gap:0px; --row-gap:0px;
  color:#fff; background:linear-gradient(180deg,transparent 0,var(--tb-teal) 110px,var(--tb-deep) 100%);
}
.e-con.tb-cols:not(:has(>.e-con-inner)), .e-con.tb-cols>.e-con-inner{
  display:grid!important; grid-template-columns:1fr 2fr; gap:48px; align-items:start;
}
.e-con.tb-cols{--padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px}
.tb-contact-title .elementor-heading-title{
  margin:4px 0 0; font-size:clamp(1.5rem,2.6vw,2rem); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#fff;
}
.tb-contact-title .elementor-heading-title::after{content:""; display:block; width:48px; height:3px; margin-top:14px; background:#fff}
.tb-company .elementor-heading-title{margin:0 0 12px; font-size:clamp(1.35rem,2.4vw,1.75rem); font-weight:600; line-height:1.3; color:#fff}
.tb-contact-text p{margin:0 0 6px; line-height:1.7; color:rgba(255,255,255,.88)}
.tb-contact-text a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4)}
.tb-copy{margin-top:44px; padding-top:20px; border-top:1px solid rgba(255,255,255,.2); text-align:center}
.tb-copy p{margin:0; font-size:.9rem; color:rgba(255,255,255,.8)}

/* ---------- มือถือ / แท็บเล็ต ---------- */
@media (max-width:900px){
  .e-con.tb-grid:not(:has(>.e-con-inner)), .e-con.tb-grid>.e-con-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .e-con.tb-cols:not(:has(>.e-con-inner)), .e-con.tb-cols>.e-con-inner{grid-template-columns:1fr; gap:20px}
  .e-con.tb-about{--padding-top:40px; --padding-bottom:32px; --padding-left:26px; --padding-right:26px}
}
@media (max-width:560px){
  .e-con.tb-grid:not(:has(>.e-con-inner)), .e-con.tb-grid>.e-con-inner{grid-template-columns:1fr}
  .e-con.tb-section{--padding-top:28px; --padding-bottom:28px}
  .e-con.tb-hero{min-height:56vh}
}
@media (prefers-reduced-motion:reduce){
  .e-con.tb-hero::before{animation:none}
  .tb-card,.tb-person,.tb-icon .elementor-icon,.tb-card::before,.tb-photo img{transition:none}
}/* End custom CSS */