/* AI article grid + public article pages v1.1.1 */
.ai-article-strip {
  padding: clamp(28px, 4vw, 54px) 0 clamp(12px, 3vw, 30px);
}
.ai-article-strip .container { max-width: var(--site-content-max, 1180px); }
.ai-article-strip__head {
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
  margin-bottom: clamp(18px, 3vw, 26px);
}
.ai-article-strip__head h2 {
  margin: 8px 0 10px; color:#112f53; font-size:clamp(1.45rem,2.7vw,2.15rem); line-height:1.28; font-weight:950;
}
.ai-article-strip__head p { margin:0; max-width:920px; color:#5a7087; line-height:1.8; }
.ai-article-strip__link {
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:12px 16px;
  border-radius:14px; color:#173d67; background:#fff7e8; border:1px solid #efd5a7; font-weight:900; white-space:nowrap;
}
.ai-article-grid {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;
}
.ai-article-card {
  min-width:0; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid #e4eaf1; border-radius:24px;
  box-shadow:0 14px 38px rgba(16,43,76,.08);
}
.ai-article-card__image { display:block; aspect-ratio:2/1; background:linear-gradient(135deg,#0d294a,#123b63); text-decoration:none; }
.ai-article-card__image img { width:100%; height:100%; object-fit:cover; display:block; }
.ai-article-card__placeholder { display:grid; place-items:center; width:100%; height:100%; color:#e0e9f3; font-weight:900; letter-spacing:.12em; }
.ai-article-card__body { display:flex; flex-direction:column; gap:11px; padding:18px 18px 20px; min-height:0; }
.ai-article-card__meta { color:#7f92a7; font-size:.76rem; font-weight:850; }
.ai-article-card h3 { margin:0; font-size:1.05rem; line-height:1.45; }
.ai-article-card h3 a { color:#12355b; text-decoration:none; }
.ai-article-card p { margin:0; color:#50657d; line-height:1.75; font-size:.92rem; }
.ai-article-card__cta { margin-top:auto; color:#a56514; font-weight:900; text-decoration:none; }

.ai-article-page {
  max-width:min(1100px, calc(100% - 32px)); margin:0 auto; padding:clamp(22px, 4vw, 54px) 0 60px;
}
.ai-article-page__hero {
  overflow:hidden; border-radius:32px; border:1px solid rgba(230,186,117,.22);
  background:radial-gradient(circle at 92% 10%, rgba(234,182,95,.2), transparent 30%), linear-gradient(135deg,#091d36 0%,#103a63 100%);
  color:#ebf1f7; box-shadow:0 22px 58px rgba(10,35,67,.12);
}
.ai-article-page__hero img { display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; }
.ai-article-page__hero-body { padding:clamp(22px, 4vw, 46px); }
.ai-article-page__crumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:#cbdbef; font-size:.84rem; font-weight:800; }
.ai-article-page__crumbs a { color:#ffe1af; text-decoration:none; }
.ai-article-page__hero h1 { margin:16px 0 14px; font-size:clamp(1.95rem, 4vw, 3.1rem); line-height:1.22; font-weight:950; color:#fff; }
.ai-article-page__hero p { margin:0; max-width:920px; color:#d7e2f2; line-height:1.85; font-size:1.02rem; }
.ai-article-page__meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; color:#b6c9df; font-size:.8rem; font-weight:800; }
.ai-article-page__meta span:not(:first-child)::before { content:'•'; padding-right:11px; color:#f0be79; }
.ai-article-content {
  margin-top:24px; padding:clamp(18px, 3vw, 34px); background:#fff;
  border:1px solid #e5ebf2; border-radius:28px; box-shadow:0 15px 44px rgba(17,45,76,.08);
}
.ai-article-content :where(h2,h3,h4) { color:#14355b; line-height:1.35; margin-top:26px; }
.ai-article-content h2 { font-size:clamp(1.35rem, 2.5vw, 1.92rem); border-left:4px solid #e5a24e; padding-left:14px; }
.ai-article-content h3 { font-size:1.08rem; }
.ai-article-content p, .ai-article-content li { color:#445a73; line-height:1.85; }
.ai-article-content table { width:100%; border-collapse:collapse; margin:20px 0; overflow:hidden; border-radius:18px; }
.ai-article-content th, .ai-article-content td { border:1px solid #e5ebf2; padding:12px 14px; text-align:left; }
.ai-article-content th { background:#103355; color:#fff; }
.ai-article-content blockquote { margin:20px 0; padding:18px 20px; background:#fff8eb; border-left:4px solid #e4a656; border-radius:14px; }
.ai-article-share {
  margin-top:26px; padding:20px 22px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center;
  border:1px solid #e4ebf2; border-radius:22px; background:linear-gradient(180deg,#fbfcfe,#fff8ef);
}
.ai-article-share__actions { display:flex; flex-wrap:wrap; gap:10px; }
.ai-article-share__actions a, .ai-article-share__actions button {
  appearance:none; border:1px solid #dce4ee; background:#fff; color:#153960; border-radius:12px; padding:11px 14px;
  font:800 .9rem/1.4 system-ui,sans-serif; text-decoration:none; cursor:pointer;
}
.ai-article-share__actions a:hover, .ai-article-share__actions button:hover { border-color:#e7b46a; background:#fff8ed; }
.ai-article-related { margin-top:28px; }
.ai-article-related h2 { margin:0 0 16px; color:#15385f; }
.ai-article-index { max-width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:30px 0 56px; }
.ai-article-index__head { margin-bottom:24px; }
.ai-article-index__head h1 { margin:8px 0 12px; color:#133457; font-size:clamp(1.8rem, 3.3vw, 2.9rem); }
.ai-article-index__head p { color:#586f87; max-width:880px; line-height:1.8; }

@media (max-width: 1120px) {
  .ai-article-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .ai-article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ai-article-page__hero, .ai-article-content { border-radius:24px; }
}
@media (max-width: 620px) {
  .ai-article-grid { grid-template-columns:1fr; }
  .ai-article-share { align-items:flex-start; }
  .ai-article-share__actions { width:100%; }
}

/* v1.1.3 — Shared visual language with the original homepage header */
.ai-public-page {
  --site-content-max:1180px;
  --site-side-gap:clamp(16px,3vw,28px);
  margin:0;
  min-width:0;
  max-width:100%;
  overflow-x:clip;
  font-family:"Noto Sans Thai","Prompt","Sarabun",Tahoma,Arial,sans-serif;
  color:#162e4e;
  line-height:1.75;
  background:radial-gradient(circle at 10% 0%,rgba(255,138,0,.13),transparent 30%),
    radial-gradient(circle at 95% 8%,rgba(36,163,59,.07),transparent 27%),
    linear-gradient(180deg,#fff 0%,#fff8ec 35%,#fff 75%,#fff5e7 100%);
}
.ai-public-page * {box-sizing:border-box}
.ai-public-page a:focus-visible,.ai-public-page button:focus-visible {outline:3px solid #ed9b32;outline-offset:3px}
.ai-skip-link {position:absolute;z-index:99;top:-90px;left:14px;padding:12px 17px;border-radius:14px;background:#0b2a4c;color:#fff;text-decoration:none}
.ai-skip-link:focus{top:10px}
.ai-site-header{
  position:sticky;top:0;z-index:70;
  border-bottom:1px solid rgba(255,138,0,.18);
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 7px 24px rgba(20,47,76,.035);
}
.ai-site-header .nav-wrap{
  width:calc(100% - var(--site-side-gap)*2);max-width:1180px;margin-inline:auto;
  padding:11px 0;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,2.1vw,28px);min-width:0;
}
.ai-site-header .brand{display:inline-flex;flex:0 1 auto;align-items:center;gap:13px;min-width:0;color:inherit;text-decoration:none;max-width:100%}
.ai-site-header .brand img{display:block;width:132px;max-width:34vw;height:auto;flex:0 0 auto;filter:drop-shadow(0 8px 17px rgba(13,38,72,.12));object-fit:contain}
.ai-site-header .ai-header-brand-text{min-width:0;display:block}
.ai-site-header .ai-header-brand-text strong{display:block;color:#093a7a;font-size:1.03rem;font-weight:900;line-height:1.27;overflow-wrap:anywhere}
.ai-site-header .ai-header-brand-text small{display:block;color:#e77b13;font-size:.7rem;font-weight:850;line-height:1.45}
.ai-site-header .nav-links{display:flex;flex:0 1 auto;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;min-width:0}
.ai-site-header .nav-links a{display:inline-flex;align-items:center;min-height:38px;padding:8px 13px;border-radius:999px;color:#233756;font-weight:850;font-size:.86rem;white-space:nowrap;text-decoration:none;transition:background .18s,color .18s}
.ai-site-header .nav-links a:hover{background:#fff0d9;color:#122a47}
.ai-site-header .nav-links a[aria-current="page"]{background:#fff2df;color:#a65b16;box-shadow:inset 0 0 0 1px rgba(236,169,85,.33)}
.ai-site-header .public-menu-toggle{display:none;align-items:center;gap:8px;flex:0 0 auto;border:1px solid #dde5ee;background:#fff;color:#17375a;padding:10px 13px;border-radius:13px;box-shadow:0 5px 16px #0d274018;font:850 .91rem/1.2 inherit;cursor:pointer}

.ai-public-page .ai-article-page{width:calc(100% - var(--site-side-gap)*2);max-width:1180px;margin-inline:auto;padding:clamp(22px,3vw,42px) 0 clamp(42px,5vw,66px)}
.ai-public-page .ai-article-page__hero{
  display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  align-items:center;gap:clamp(22px,3vw,42px);overflow:hidden;
  padding:clamp(23px,3.8vw,46px);border-radius:clamp(22px,3vw,32px);
  border:1px solid rgba(255,166,55,.22);
  background:radial-gradient(ellipse at 92% 4%,rgba(241,176,77,.16),transparent 43%),
    linear-gradient(125deg,#fff 0%,#fffaf1 75%,#fff6e8 100%);
  color:#142f51;box-shadow:0 24px 56px rgba(22,49,82,.10),inset 0 1px 0 rgba(255,255,255,.96);
}
.ai-article-page__hero-body{min-width:0;padding:0}
.ai-public-page .ai-article-page__crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 20px;color:#72849a;font-size:.78rem;font-weight:800;line-height:1.7}
.ai-public-page .ai-article-page__crumbs a{color:#2c6493;font-weight:850;text-decoration:none}
.ai-public-page .ai-article-page__eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(233,158,58,.25);border-radius:999px;padding:8px 14px;color:#a65c17;font-size:.75rem;font-weight:900;letter-spacing:.04em;box-shadow:0 8px 20px rgba(231,143,39,.095)}
.ai-public-page .ai-article-page__hero h1{max-width:100%;margin:17px 0 14px;color:#102e53;font-weight:950;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.28;text-wrap:balance;overflow-wrap:anywhere}
.ai-public-page .ai-article-page__hero-body>p{max-width:100%;margin:0;color:#536b83;font-size:clamp(.93rem,1.2vw,1.02rem);line-height:1.83}
.ai-public-page .ai-article-page__meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px 17px;margin:18px 0 0;color:#76899d;font-size:.77rem;font-weight:750}
.ai-public-page .ai-article-page__meta span:not(:first-child)::before{color:#e7a152}
.ai-article-page__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:24px 0 0}
.ai-article-page__btn{display:inline-flex;align-items:center;justify-content:center;min-height:45px;max-width:100%;padding:11px 17px;border:1px solid transparent;border-radius:999px;font-size:.85rem;font-weight:900;line-height:1.4;text-decoration:none;transition:transform .2s,box-shadow .2s}
.ai-article-page__btn:hover{transform:translateY(-2px);box-shadow:0 10px 21px rgba(29,73,104,.12)}
.ai-article-page__btn--line{color:#082b19;background:linear-gradient(135deg,#30c667,#7bdd90)}
.ai-article-page__btn--ghost{background:#fff;border-color:#dce4ed;color:#153a60}
.ai-public-page .ai-article-page__hero-media{min-width:0;width:100%;margin:0;padding:9px;position:relative;overflow:hidden;border-radius:25px;border:1px solid rgba(19,60,100,.12);background:#fff;box-shadow:0 17px 38px rgba(15,49,77,.10)}
.ai-public-page .ai-article-page__hero-media img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:contain;border-radius:17px;background:#f0f4f8}
.ai-article-page__hero-fallback{display:flex;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:2/1;background:linear-gradient(140deg,#0b2442,#14466d);border-radius:18px;color:#ffdda5;letter-spacing:.12em}
.ai-article-page__hero-fallback strong{font-size:clamp(1.4rem,3vw,2.9rem);color:#fff;line-height:1.15}
.ai-public-page .ai-article-page__hero-media figcaption{position:static;margin-top:9px;padding:0 5px 3px;color:#8794a4;font-size:.7rem;font-weight:650;text-align:center}
.ai-public-page .ai-article-content{width:100%;max-width:100%;min-width:0;overflow-wrap:anywhere;overflow-x:auto;margin-top:24px;padding:clamp(20px,3vw,40px);border-radius:26px}
.ai-public-page .ai-article-content>p{max-width:980px}
.ai-public-page .ai-article-content .ai-editorial-keyword{font-weight:900;color:#0e4d88;text-decoration:underline;text-decoration-color:#eab15e;text-decoration-thickness:2px;text-underline-offset:3px}
.ai-public-page .ai-article-content .ai-editorial-keyword:hover{color:#ae671d}
.ai-public-page .ai-article-index{width:calc(100% - var(--site-side-gap)*2);max-width:1180px;margin-inline:auto}

@media (max-width:1080px){
  .ai-site-header .nav-wrap{position:relative;flex-wrap:wrap;justify-content:space-between;gap:12px}
  .ai-site-header .public-menu-toggle{display:inline-flex;order:1}
  .ai-site-header .nav-links{display:none!important;position:relative;order:2;flex:0 0 100%;width:100%;padding:11px;border:1px solid #e1e8f1;border-radius:16px;background:#fff;box-shadow:0 15px 36px rgba(20,50,81,.12);flex-direction:column;align-items:stretch;z-index:80}
  .ai-site-header .nav-links.is-open{display:flex!important}
  .ai-site-header .nav-links a{padding:10px 15px;border-radius:11px;width:100%}
}
@media (max-width:840px){
  .ai-public-page .ai-article-page__hero{grid-template-columns:minmax(0,1fr)}
  .ai-public-page .ai-article-page__hero h1{font-size:clamp(1.8rem,4.5vw,2.6rem)}
  .ai-public-page .ai-article-page__hero-media{max-width:680px;margin-inline:auto}
}
@media (max-width:620px){
  .ai-site-header .brand img{width:min(134px,35vw)}
  .ai-site-header .ai-header-brand-text strong{font-size:.88rem}
  .ai-site-header .ai-header-brand-text small{font-size:.66rem}
  .ai-public-page .ai-article-page{padding-top:18px}
  .ai-public-page .ai-article-page__hero{padding:18px;gap:20px;border-radius:22px}
  .ai-public-page .ai-article-page__hero h1{font-size:clamp(1.58rem,6.8vw,2.12rem)}
  .ai-public-page .ai-article-page__hero-media{padding:7px;border-radius:19px}
  .ai-article-page__actions{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
  .ai-article-page__btn{width:100%;border-radius:13px}
  .ai-public-page .ai-article-content{margin-top:15px;padding:20px 16px;border-radius:20px}
}