.elementor-11229 .elementor-element.elementor-element-71e758b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-11229 .elementor-element.elementor-element-a9b5e6f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-11229 .elementor-element.elementor-element-94b3bf9{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-11229 .elementor-element.elementor-element-6f0eea4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-11229 .elementor-element.elementor-element-ee2cd6a{text-align:center;}.elementor-11229 .elementor-element.elementor-element-ee2cd6a .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:26px;font-weight:600;color:#AAAAAA;}.elementor-11229 .elementor-element.elementor-element-63bc684{text-align:center;}.elementor-11229 .elementor-element.elementor-element-63bc684 .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:20px;font-weight:400;color:#AAAAAA;}.elementor-11229 .elementor-element.elementor-element-25f28f7{text-align:center;}.elementor-11229 .elementor-element.elementor-element-25f28f7 .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:20px;font-weight:400;color:#AAAAAA;}.elementor-11229 .elementor-element.elementor-element-cfeac34{text-align:center;}.elementor-11229 .elementor-element.elementor-element-cfeac34 .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:14px;font-weight:400;color:#AAAAAA;}.elementor-11229 .elementor-element.elementor-element-f0ec758{--e-image-carousel-slides-to-show:5;}.elementor-11229 .elementor-element.elementor-element-f0ec758 .elementor-swiper-button.elementor-swiper-button-prev, .elementor-11229 .elementor-element.elementor-element-f0ec758 .elementor-swiper-button.elementor-swiper-button-next{font-size:0px;}.elementor-11229 .elementor-element.elementor-element-587bf52{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-11229 .elementor-element.elementor-element-349a68d{--display:flex;}.elementor-11229 .elementor-element.elementor-element-349a68d:not(.elementor-motion-effects-element-type-background), .elementor-11229 .elementor-element.elementor-element-349a68d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#A3A3A3;}.elementor-11229 .elementor-element.elementor-element-bfe97f1{text-align:center;}.elementor-11229 .elementor-element.elementor-element-bfe97f1 .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:36px;font-weight:600;line-height:47px;color:#FFFFFF;}.elementor-widget-fluent-form-widget .fluentform-widget-description{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-11229 .elementor-element.elementor-element-223797c .fluentform-widget-wrapper .ff-el-group .ff-btn-submit{background-color:#1a7efb !important;color:#ffffff !important;}.elementor-11229 .elementor-element.elementor-element-c66527a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-11229 .elementor-element.elementor-element-f67bd31{--display:flex;}.elementor-11229 .elementor-element.elementor-element-af2c154 .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:20px;font-weight:600;color:#000000;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-11229 .elementor-element.elementor-element-df03c31{--display:flex;}.elementor-11229 .elementor-element.elementor-element-e33c31e .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:20px;font-weight:600;color:#000000;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-11229 .elementor-element.elementor-element-15cd3ed .elementor-button{background-color:#000000;font-family:"Kanit", Sans-serif;font-weight:500;border-radius:37px 37px 37px 37px;}.elementor-11229 .elementor-element.elementor-element-15cd3ed > .elementor-widget-container{margin:-44px 0px 0px 0px;}.elementor-11229 .elementor-element.elementor-element-15cd3ed.elementor-element{--align-self:flex-start;}.elementor-11229 .elementor-element.elementor-element-15cd3ed .elementor-button:hover, .elementor-11229 .elementor-element.elementor-element-15cd3ed .elementor-button:focus{color:#FF0000;}.elementor-11229 .elementor-element.elementor-element-15cd3ed .elementor-button:hover svg, .elementor-11229 .elementor-element.elementor-element-15cd3ed .elementor-button:focus svg{fill:#FF0000;}@media(min-width:768px){.elementor-11229 .elementor-element.elementor-element-6f0eea4{--width:50%;}.elementor-11229 .elementor-element.elementor-element-587bf52{--width:50%;}}@media(max-width:1024px){.elementor-11229 .elementor-element.elementor-element-f0ec758{--e-image-carousel-slides-to-show:4;}}@media(max-width:767px){.elementor-11229 .elementor-element.elementor-element-f0ec758{--e-image-carousel-slides-to-show:4;}}/* Start custom CSS */<!-- ============================================================
     BLOCK 00 — CSS (วางก่อนเป็นอันแรก และวางครั้งเดียว)
     ============================================================

     กรณีศึกษา บริษัท พรมณี × HINO-CONNECT
     สร้างตาม Content Brief (Reviewed)

     วางที่ไหน (เลือกอย่างใดอย่างหนึ่ง)
     - Elementor: Site Settings > Custom CSS
       (คัดลอกเฉพาะข้างในแท็ก <style> ไม่ต้องเอาแท็กไปด้วย)
     - หรือ Elementor: ลาก HTML widget ไว้บนสุดของหน้า แล้ววางทั้งไฟล์นี้
     - หรือ Gutenberg: บล็อก Custom HTML อันแรกของหน้า วางทั้งไฟล์นี้

     จากนั้นวางไฟล์ 01-15 เรียงลงมา ไฟล์ละ 1 widget
     - ตัวอักษรใช้ font-family: inherit จึงรับฟอนต์ไทยจากธีมเดิมอัตโนมัติ
     - ทุกสไตล์ครอบด้วยคลาส .ol จึงไม่ชนกับธีม
     - เปลี่ยนสีหลักทั้งหน้าได้ที่ --ol-accent จุดเดียว
     ============================================================ -->
<style>
.ol{
  --ol-ink:#14181D;
  --ol-soft:#5A646E;
  --ol-paper:#FFFFFF;
  --ol-panel:#F4F6F8;
  --ol-rule:#DBE0E6;
  --ol-accent:#C8102E;   /* สีหลัก เปลี่ยนได้ที่นี่จุดเดียว */
  --ol-gain:#0E6B54;     /* สีตัวเลขฝั่งผลลัพธ์ */
  --ol-deep:#0F1B2A;     /* พื้นเข้มของ Section ไฮไลต์ */
  --ol-max:900px;

  font-family:inherit;
  color:var(--ol-ink);
  line-height:1.85;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  padding:clamp(30px,5vw,64px) clamp(18px,5vw,32px);
  background:var(--ol-paper);
}
.ol *{box-sizing:border-box;}
.ol__in{max-width:var(--ol-max);margin:0 auto;}
.ol--panel{background:var(--ol-panel);}
.ol--deep{background:var(--ol-deep);color:#fff;}
.ol--tight{padding-top:clamp(18px,3vw,32px);}

/* ---------- ตัวอักษร ---------- */
.ol h1,.ol h2,.ol h3,.ol h4{font-family:inherit;line-height:1.34;margin:0 0 .55em;font-weight:700;}
.ol h1{font-size:clamp(29px,5.4vw,48px);letter-spacing:-.015em;}
.ol h2{font-size:clamp(23px,3.7vw,34px);letter-spacing:-.01em;}
.ol h3{font-size:clamp(19px,2.6vw,23px);}
.ol h4{font-size:17px;}
.ol p{margin:0 0 1.1em;max-width:68ch;}
.ol--deep h2,.ol--deep h3{color:#fff;}
.ol--deep p{color:#B9C4D0;}
.ol__lead{font-size:clamp(18px,2.3vw,21px);color:var(--ol-soft);line-height:1.75;}
.ol__note{font-size:14.5px;color:var(--ol-soft);line-height:1.7;}
.ol__kicker{
  display:block;font-size:15px;font-weight:700;color:var(--ol-accent);
  margin-bottom:10px;letter-spacing:.02em;
}
.ol--deep .ol__kicker{color:#FF6B7F;}
.ol strong{font-weight:700;}

/* ---------- KPI cards ---------- */
.ol__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ol-rule);border:1px solid var(--ol-rule);margin:28px 0 10px;}
.ol__kpi{background:var(--ol-paper);padding:24px 20px;}
.ol__kpi b{display:block;font-size:clamp(24px,3.6vw,34px);font-weight:700;line-height:1.15;color:var(--ol-gain);font-variant-numeric:tabular-nums;}
.ol__kpi--hero b{color:var(--ol-accent);font-size:clamp(28px,4.6vw,42px);}
.ol__kpi span{display:block;font-size:14.5px;color:var(--ol-soft);line-height:1.55;margin-top:8px;}

/* ---------- การ์ดปัญหา ---------- */
.ol__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ol-rule);border:1px solid var(--ol-rule);margin:26px 0 8px;}
.ol__card{background:var(--ol-paper);padding:26px 24px;}
.ol__card em{display:block;font-style:normal;font-size:14px;font-weight:700;color:var(--ol-accent);font-variant-numeric:tabular-nums;margin-bottom:8px;}
.ol__card h3{margin-bottom:.4em;}
.ol__card p{margin:0;color:var(--ol-soft);font-size:16px;}

/* ---------- Flow 4 ขั้น ---------- */
.ol__flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0 14px;}
.ol__step{border-top:3px solid var(--ol-accent);padding-top:16px;}
.ol__step h3{font-size:19px;margin-bottom:.3em;}
.ol__step p{font-size:15.5px;color:var(--ol-soft);margin:0 0 10px;}
.ol__value{font-size:14.5px;line-height:1.6;color:var(--ol-ink);background:var(--ol-panel);padding:12px 14px;}
.ol__chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0 6px;font-size:15px;font-weight:700;color:var(--ol-soft);}
.ol__chain i{font-style:normal;color:var(--ol-accent);}

/* ---------- Business impact ---------- */
.ol__impact{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,4vw,40px);align-items:center;margin:px;}
.ol__ba small{display:block;font-size:14px;letter-spacing:.06em;color:#8FA0B2;margin-bottom:8px;}
.ol__ba b{display:block;font-size:clamp(30px,7vw,100px);font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums;}
.ol__ba span{display:block;font-size:15px;color:#B9C4D0;margin-top:8px;line-height:1.6;}
.ol__ba--before b{color:#7F8FA0;}
.ol__ba--after b{color:#4ADE9E;}
.ol__to{font-size:26px;color:var(--ol-accent);line-height:1;}
.ol__saving{border-top:1px solid #2A3949;padding-top:26px;margin-top:6px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.ol__saving div b{display:block;font-size:clamp(26px,5vw,44px);font-weight:700;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums;}
.ol__saving div span{display:block;font-size:15px;color:#B9C4D0;margin-top:6px;}
.ol--deep .ol__note{color:#8FA0B2;}

/* ---------- รายการติ๊ก ---------- */
.ol__ul{list-style:none;margin:0 0 18px;padding:0;}
.ol__ul li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--ol-rule);font-size:16.5px;line-height:1.7;}
.ol__ul li:before{content:"";position:absolute;left:4px;top:22px;width:9px;height:9px;background:var(--ol-accent);}
.ol--deep .ol__ul li{border-bottom-color:#2A3949;color:#DCE3EA;}

/* ---------- ตาราง ---------- */
.ol__scroll{overflow-x:auto;margin:8px 0 26px;-webkit-overflow-scrolling:touch;}
.ol table{width:100%;border-collapse:collapse;min-width:520px;font-size:16px;}
.ol th,.ol td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--ol-rule);vertical-align:top;line-height:1.65;}
.ol th{font-weight:700;background:var(--ol-panel);border-bottom:2px solid var(--ol-ink);}
.ol td:first-child{font-weight:700;}

/* ---------- คำพูดลูกค้า ---------- */
.ol__voice{display:grid;grid-template-columns:280px 1fr;gap:clamp(20px,4vw,40px);align-items:start;margin-top:26px;}
.ol__voice img{width:100%;height:auto;display:block;background:var(--ol-panel);}
.ol__voice blockquote{margin:0;}
.ol__voice blockquote p{font-size:clamp(19px,2.7vw,25px);line-height:1.65;margin:0 0 16px;max-width:none;}
.ol__voice cite{font-style:normal;font-size:15.5px;color:var(--ol-soft);line-height:1.6;display:block;}

/* ---------- รูปภาพ ---------- */
.ol figure{margin:0 0 24px;}
.ol figure img{width:100%;height:auto;display:block;background:var(--ol-panel);}
.ol figcaption{font-size:14px;color:var(--ol-soft);margin-top:10px;line-height:1.6;}

/* ---------- ปุ่ม ---------- */
.ol__btns{display:flex;flex-wrap:wrap;gap:13px;margin-top:24px;}
.ol__btn{display:inline-block;padding:15px 30px;border-radius:3px;font-size:17px;font-weight:700;text-decoration:none;transition:background .15s ease,color .15s ease;}
.ol__btn--main{background:var(--ol-accent);color:#fff;}
.ol__btn--main:hover,.ol__btn--main:focus-visible{background:#A50D26;color:#fff;}
.ol__btn--ghost{border:1px solid var(--ol-rule);color:var(--ol-ink);}
.ol__btn--ghost:hover,.ol__btn--ghost:focus-visible{background:var(--ol-ink);border-color:var(--ol-ink);color:#fff;}
.ol--deep .ol__btn--ghost{border-color:#41525F;color:#fff;}
.ol--deep .ol__btn--ghost:hover{background:#fff;color:var(--ol-deep);}
.ol a:focus-visible,.ol button:focus-visible,.ol input:focus-visible,.ol select:focus-visible{outline:3px solid var(--ol-accent);outline-offset:3px;}

/* ---------- ฟอร์ม ---------- */
.ol__form{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px;}
.ol__field{display:flex;flex-direction:column;gap:7px;}
.ol__field--full{grid-column:1/-1;}
.ol__field label{font-size:15px;font-weight:700;}
.ol__field input,.ol__field select{
  font-family:inherit;font-size:16px;padding:13px 14px;
  border:1px solid var(--ol-rule);border-radius:3px;background:#fff;color:var(--ol-ink);width:100%;
}
.ol__checks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px;}
.ol__checks label{display:flex;gap:9px;align-items:flex-start;font-size:15.5px;font-weight:400;line-height:1.55;}
.ol__checks input{width:auto;margin-top:5px;}

/* ---------- มือถือ ---------- */
@media (max-width:820px){
  .ol__kpis{grid-template-columns:repeat(2,1fr);}
  .ol__flow{grid-template-columns:repeat(2,1fr);gap:22px;}
  .ol__voice{grid-template-columns:1fr;}
  .ol__voice img{max-width:260px;}
}
@media (max-width:620px){
  .ol{font-size:16.5px;}
  .ol__kpis,.ol__cards,.ol__flow,.ol__form,.ol__checks,.ol__saving{grid-template-columns:1fr;}
  .ol__impact{grid-template-columns:1fr;gap:18px;text-align:left;}
  .ol__to{transform:rotate(90deg);width:26px;}
}
@media (prefers-reduced-motion:reduce){.ol *{transition:none !important;}}
</style>/* End custom CSS */