/* ==========================================================
   Coach-Air.net : home 2026 — ส่วนที่ดึงเนื้อหามาจาก Entraining
   (ประวัติและประสบการณ์ / ผลงาน / หลักสูตรฝึกอบรม) ใช้ตัวแปรสีจาก home.css
   ========================================================== */

/* ================= TABS ================= */
.ca-tabs{display:grid;grid-template-columns:360px 1fr;gap:28px;align-items:start}
.ca-tablist{display:flex;flex-direction:column;gap:10px;position:sticky;top:96px}
.ca-tab{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;width:100%;padding:12px 18px 12px 12px;border:0;border-radius:22px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(42,23,80,.1);font-family:var(--ca-th);font-weight:400;font-size:.98rem;line-height:1.45;text-align:left;color:var(--ca-ink);cursor:pointer;transition:background .45s,box-shadow .45s,transform .45s var(--ca-out),color .45s}
.ca-tab i{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:var(--ca-blush);color:#C0429A;font-size:1rem;transition:background .45s,color .45s}
.ca-tab:hover{transform:translateX(6px)}
.ca-tab.is-on{background:var(--ca-ink);color:#fff;font-weight:500;box-shadow:0 22px 40px -22px rgba(42,23,80,.8)}
.ca-tab.is-on i{background:var(--ca-grad);color:var(--ca-night)}
.ca-tabpanel{position:relative;padding:40px 44px 44px;border-radius:32px;background:#fff;color:var(--ca-ink);box-shadow:0 40px 70px -52px rgba(42,23,80,.6),inset 0 0 0 1px rgba(42,23,80,.06);overflow:hidden}
.ca-tabpanel::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ca-grad)}
.ca-tabpanel h3{font-weight:600;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.4;color:var(--ca-ink);margin-bottom:18px}
.ca-tabpanel .ca-more{margin-top:24px}
.ca-tabpanel + .ca-tabpanel{margin-top:20px}
.ca-tabs.is-ready .ca-tabpanel{display:none;margin-top:0}
.ca-tabs.is-ready .ca-tabpanel.is-on{display:block;animation:caTabIn .7s var(--ca-out) both}
@keyframes caTabIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.ca-tree > li{position:relative;padding:16px 0 16px 30px;border-top:1px solid rgba(42,23,80,.09)}
.ca-tree > li:first-child{border-top:0}
.ca-tree > li::before{content:"";position:absolute;left:2px;top:25px;width:11px;height:11px;border-radius:50%;background:var(--ca-grad);box-shadow:0 0 0 5px rgba(255,134,207,.16)}
.ca-tree b{display:block;font-weight:600;font-size:1.06rem;line-height:1.5;color:var(--ca-ink)}
.ca-tree span{display:block;margin-top:3px;font-weight:300;font-size:1rem;color:#4A3D6E}
.ca-leaf{margin-top:10px !important;display:flex;flex-wrap:wrap;gap:8px}
.ca-leaf li{padding:7px 15px;border-radius:999px;background:var(--ca-blush);font-size:.93rem;line-height:1.5;color:#5A2A6E}
.ca-tree-link{position:relative;display:block;padding-right:40px;text-decoration:none}
.ca-tree-link i{position:absolute;right:4px;top:50%;margin-top:-8px;font-size:.85rem;color:#C0429A;transition:transform .4s var(--ca-out)}
.ca-tree-link:hover b{color:#C0429A}
.ca-tree-link:hover i{transform:translate(3px,-3px)}

/* ================= PROFILE ================= */
.ca-profile{position:relative;padding:20px 0 130px;background:radial-gradient(40% 40% at 0 100%,rgba(154,140,245,.18),transparent 70%),linear-gradient(180deg,var(--ca-paper),var(--ca-blush))}
.ca-profile-head{display:grid;grid-template-columns:230px 1fr;gap:54px;align-items:center;margin-bottom:60px}
.ca-profile-avatar{position:relative;aspect-ratio:1;border-radius:50%;padding:7px;background:var(--ca-grad);box-shadow:0 40px 70px -40px rgba(192,66,154,.8)}
.ca-profile-avatar::before{content:"";position:absolute;inset:-16px;border-radius:50%;border:1.5px dashed rgba(192,66,154,.5);animation:caSpin 40s linear infinite}
.ca-profile-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff}
.ca-profile-head h2{margin-top:10px;font-weight:600;font-size:clamp(2rem,4vw,3.3rem);line-height:1.25;color:var(--ca-ink)}
.ca-profile-name{margin-top:4px !important;font-weight:500;font-size:1.25rem;color:#C0429A}
.ca-profile-pos{margin-top:14px !important;max-width:760px;font-weight:300;font-size:1.06rem;color:#4A3D6E}
.ca-profile-pos b{display:block;font-weight:500;font-size:.9rem;letter-spacing:.06em;color:var(--ca-soft)}
.ca-badges{margin:18px 0 26px !important;display:flex;flex-wrap:wrap;gap:10px}
.ca-badges li{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(42,23,80,.1);font-size:.93rem;line-height:1.5}
.ca-badges i{color:#C0429A}
.ca-js .ca-profile-avatar{opacity:0;transform:scale(.8) rotate(-12deg);transition:opacity 1.1s var(--ca-out),transform 1.1s var(--ca-out)}
.ca-js .ca-profile-avatar.is-in{opacity:1;transform:none}

/* ================= PORTFOLIO ================= */
.ca-folio{position:relative;padding:130px 0 0;background:radial-gradient(40% 40% at 0 0,rgba(154,140,245,.34),transparent 70%),radial-gradient(40% 40% at 100% 60%,rgba(255,134,207,.24),transparent 70%),var(--ca-night);color:#fff;overflow:hidden}
.ca-folio-head{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:end;margin-bottom:60px}
.ca-folio-head h2 .ca-en{display:block;font-size:clamp(3rem,6.6vw,5.8rem);line-height:1;background:var(--ca-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.12em}
.ca-folio-quote{justify-self:end;max-width:520px;text-align:right;font-family:var(--ca-en);font-style:italic;font-weight:500;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.5;color:var(--ca-mute)}
.ca-folio .ca-tab{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:rgba(255,255,255,.9)}
.ca-folio .ca-tab i{background:rgba(255,255,255,.12);color:var(--ca-pink)}
.ca-folio .ca-tab.is-on{background:#fff;color:var(--ca-ink)}
.ca-folio .ca-tab.is-on i{background:var(--ca-grad);color:var(--ca-night)}
.ca-orgs{margin-top:90px;padding:34px 0 40px;border-top:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.ca-orgs-title{text-align:center;font-weight:300;font-size:1rem;color:var(--ca-mute);margin-bottom:20px !important}
.ca-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ca-marquee ul{display:flex;gap:14px;width:max-content;animation:caMarquee 70s linear infinite}
.ca-marquee:hover ul{animation-play-state:paused}
.ca-marquee li{flex:none;padding:10px 22px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font-size:1rem;white-space:nowrap;color:#fff}
.ca-marquee li:nth-child(3n+1){box-shadow:inset 0 0 0 1px rgba(255,134,207,.6)}
.ca-marquee li:nth-child(3n+2){box-shadow:inset 0 0 0 1px rgba(255,181,74,.55)}
@keyframes caMarquee{to{transform:translateX(calc(-50% - 7px))}}

/* ================= COURSE OUTLINE : หลักสูตรฝึกอบรม ================= */
.ca-course-sub{margin-top:14px !important;font-weight:400;font-size:1.2rem;color:rgba(255,255,255,.9)}
.ca-outline{margin-top:50px !important;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;counter-reset:none}
.ca-outline a{position:relative;display:grid;grid-template-columns:58px 1fr auto;gap:18px;align-items:center;height:100%;padding:18px 20px 18px 16px;border-radius:24px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);text-decoration:none;color:#fff;overflow:hidden;transition:transform .6s var(--ca-out),background .5s,box-shadow .5s}
.ca-outline a::before{content:"";position:absolute;inset:0;background:var(--ca-grad);opacity:0;transition:opacity .5s}
.ca-outline a > *{position:relative}
.ca-outline a:hover{transform:translateY(-5px);box-shadow:0 30px 50px -30px rgba(255,134,207,.8)}
.ca-outline a:hover::before{opacity:1}
.ca-outline a:hover,.ca-outline a:hover .ca-outline-en,.ca-outline a:hover .ca-outline-day{color:var(--ca-night)}
.ca-outline-no{display:grid;place-items:center;width:58px;height:58px;border-radius:19px;background:rgba(255,255,255,.1);font-family:var(--ca-en);font-style:italic;font-weight:700;font-size:1.5rem;color:var(--ca-pink);transition:background .5s,color .5s}
.ca-outline a:hover .ca-outline-no{background:var(--ca-night);color:#fff}
.ca-outline-name{font-weight:500;font-size:1.06rem;line-height:1.5}
.ca-outline-en{display:block;margin-top:2px;font-weight:300;font-size:.9rem;color:var(--ca-mute);transition:color .5s}
.ca-outline-day{flex:none;padding:6px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;font-size:.86rem;white-space:nowrap;color:var(--ca-amber);transition:color .5s}
.ca-course-foot{margin-top:44px !important;text-align:center}
.ca-js .ca-outline li{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ca-out),transform .8s var(--ca-out)}
.ca-js .ca-outline.is-in li{opacity:1;transform:none}
.ca-js .ca-outline.is-in li:nth-child(n+3){transition-delay:.08s}
.ca-js .ca-outline.is-in li:nth-child(n+5){transition-delay:.16s}
.ca-js .ca-outline.is-in li:nth-child(n+7){transition-delay:.24s}
.ca-js .ca-outline.is-in li:nth-child(n+9){transition-delay:.32s}

@media (max-width:1100px){
  .ca-tabs{grid-template-columns:1fr}
  .ca-tablist{position:relative;top:0}
}
@media (max-width:899px){
  .ca-profile{padding:0 0 90px}
  .ca-profile-head{grid-template-columns:1fr;gap:30px;margin-bottom:40px}
  .ca-profile-avatar{width:180px}
  .ca-folio{padding-top:90px}
  .ca-folio-head{grid-template-columns:1fr;gap:14px;margin-bottom:40px}
  .ca-folio-quote{justify-self:start;text-align:left}
  .ca-tabpanel{padding:30px 22px 32px}
  .ca-orgs{margin-top:60px}
  .ca-outline{grid-template-columns:1fr;margin-top:36px !important}
  .ca-outline a{grid-template-columns:48px 1fr;gap:14px}
  .ca-outline-no{width:48px;height:48px;font-size:1.2rem;border-radius:16px}
  .ca-outline-day{grid-column:2;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .ca-marquee ul{flex-wrap:wrap;justify-content:center;width:auto;padding:0 20px}
  .ca-marquee li[aria-hidden]{display:none}
}