.elementor-34 .elementor-element.elementor-element-e6a89e1{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:15px;margin-bottom:15px;padding:0px 50px 0px 50px;}.elementor-34 .elementor-element.elementor-element-e6a89e1 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-34 .elementor-element.elementor-element-961d8b9:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-34 .elementor-element.elementor-element-961d8b9 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://lohakit.kengweb.co.th/wp-content/uploads/2026/08/Investor-Relations.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-34 .elementor-element.elementor-element-961d8b9 > .elementor-element-populated >  .elementor-background-overlay{background-color:#000000;opacity:0.5;}.elementor-bc-flex-widget .elementor-34 .elementor-element.elementor-element-961d8b9.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-34 .elementor-element.elementor-element-961d8b9.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-34 .elementor-element.elementor-element-961d8b9 > .elementor-element-populated, .elementor-34 .elementor-element.elementor-element-961d8b9 > .elementor-element-populated > .elementor-background-overlay, .elementor-34 .elementor-element.elementor-element-961d8b9 > .elementor-background-slideshow{border-radius:15px 15px 15px 15px;}.elementor-34 .elementor-element.elementor-element-961d8b9 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:150px 150px 150px 150px;}.elementor-34 .elementor-element.elementor-element-961d8b9 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.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-34 .elementor-element.elementor-element-9db4266{text-align:center;}.elementor-34 .elementor-element.elementor-element-9db4266 .elementor-heading-title{font-size:50px;font-weight:600;color:#FFFFFF;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-34 .elementor-element.elementor-element-35f86bb .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-34 .elementor-element.elementor-element-35f86bb .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-34 .elementor-element.elementor-element-35f86bb{--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-34 .elementor-element.elementor-element-35f86bb .elementor-icon-list-item > .elementor-icon-list-text, .elementor-34 .elementor-element.elementor-element-35f86bb .elementor-icon-list-item > a{font-size:20px;font-weight:500;}.elementor-34 .elementor-element.elementor-element-35f86bb .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-34 .elementor-element.elementor-element-8fea678 > .elementor-container{max-width:1400px;}.elementor-34 .elementor-element.elementor-element-8fea678{padding:50px 0px 50px 0px;}.elementor-34 .elementor-element.elementor-element-69ad544 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:15px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-34 .elementor-element.elementor-element-1b973b5 img{border-radius:15px 15px 15px 15px;}.elementor-bc-flex-widget .elementor-34 .elementor-element.elementor-element-d02d387.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-34 .elementor-element.elementor-element-d02d387.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-34 .elementor-element.elementor-element-d02d387 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:15px;}.elementor-34 .elementor-element.elementor-element-d02d387 > .elementor-element-populated{padding:0px 0px 0px 20px;}.elementor-34 .elementor-element.elementor-element-c794ac7{text-align:start;}.elementor-34 .elementor-element.elementor-element-c794ac7 .elementor-heading-title{font-size:35px;font-weight:600;line-height:1.25em;color:#334155;}.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-34 .elementor-element.elementor-element-0b1a339{border-style:none;font-size:17px;font-weight:400;line-height:1.5em;color:#334155;}.elementor-34 .elementor-element.elementor-element-0b1a339 p{margin-block-end:0px;}.elementor-34 .elementor-element.elementor-element-473a99b > .elementor-container{max-width:1400px;}.elementor-34 .elementor-element.elementor-element-9da5a7a:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-34 .elementor-element.elementor-element-9da5a7a > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5F5;}.elementor-34 .elementor-element.elementor-element-9da5a7a > .elementor-element-populated, .elementor-34 .elementor-element.elementor-element-9da5a7a > .elementor-element-populated > .elementor-background-overlay, .elementor-34 .elementor-element.elementor-element-9da5a7a > .elementor-background-slideshow{border-radius:20px 20px 20px 20px;}.elementor-34 .elementor-element.elementor-element-9da5a7a > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:60px 60px 60px 60px;}.elementor-34 .elementor-element.elementor-element-9da5a7a > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-34 .elementor-element.elementor-element-6bffb9f > .elementor-container{max-width:1400px;}.elementor-34 .elementor-element.elementor-element-6bffb9f{padding:50px 0px 50px 0px;}.elementor-34 .elementor-element.elementor-element-10641b5.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-34 .elementor-element.elementor-element-10641b5 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:15px;}.elementor-34 .elementor-element.elementor-element-a7d292a{text-align:center;}.elementor-34 .elementor-element.elementor-element-a7d292a .elementor-heading-title{font-size:35px;font-weight:600;line-height:1.25em;color:#334155;}.elementor-34 .elementor-element.elementor-element-b31d100{border-style:none;text-align:center;font-size:17px;font-weight:400;line-height:1.5em;color:#334155;}.elementor-34 .elementor-element.elementor-element-b31d100 p{margin-block-end:0px;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table{max-width:100%;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table thead tr th{color:#334155;background-color:#BEE8FF;border-style:none;}.elementor-34 .elementor-element.elementor-element-607e033 table.dataTable thead .sorting:after{color:#334155;}.elementor-34 .elementor-element.elementor-element-607e033 table.dataTable thead .sorting_asc:after{color:#334155;}.elementor-34 .elementor-element.elementor-element-607e033 table.dataTable thead .sorting_desc:after{color:#334155;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table thead tr th:hover{color:#334155;}.elementor-34 .elementor-element.elementor-element-607e033 table.dataTable thead .sorting:after:hover{color:#334155;}.elementor-34 .elementor-element.elementor-element-607e033 table.dataTable thead .sorting_asc:after:hover{color:#334155;}.elementor-34 .elementor-element.elementor-element-607e033 table.dataTable thead .sorting_desc:after:hover{color:#334155;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table thead > tr th .data-table-header-text{font-size:16px;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table thead tr th i{font-size:20px;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table thead tr th .data-table-header-svg-icon{height:20px;width:20px;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table tbody > tr:nth-child(2n) td{color:#000000;background:#f2f2f2;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table tbody > tr:nth-child(2n+1) td{color:#000000;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table tbody > tr:nth-child(2n+1) td:hover{color:#6d7882;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table tbody tr td{font-size:16px;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table-wrap table td a{color:#c15959;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table-wrap table td a:hover{color:#6d7882;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table tbody .td-content-wrapper{text-align:center;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table tbody .td-content-wrapper .eael-datatable-icon i{font-size:20px;color:#c15959;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table tbody .td-content-wrapper .eael-datatable-icon svg{height:20px;width:20px;fill:#c15959;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table tbody .td-content-wrapper:hover .eael-datatable-icon i{color:#6d7882;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table tbody .td-content-wrapper:hover .eael-datatable-icon svg{fill:#6d7882;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table .th-mobile-screen{flex-basis:100px;}.elementor-34 .elementor-element.elementor-element-02ea557 > .elementor-container{max-width:1400px;}.elementor-34 .elementor-element.elementor-element-02ea557{padding:0px 0px 50px 0px;}.elementor-34 .elementor-element.elementor-element-cf0b5ee > .elementor-container{max-width:1400px;}.elementor-34 .elementor-element.elementor-element-cf0b5ee{padding:0px 0px 50px 0px;}.elementor-34 .elementor-element.elementor-element-d62141d:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-34 .elementor-element.elementor-element-d62141d > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5F5;}.elementor-34 .elementor-element.elementor-element-d62141d > .elementor-element-populated, .elementor-34 .elementor-element.elementor-element-d62141d > .elementor-element-populated > .elementor-background-overlay, .elementor-34 .elementor-element.elementor-element-d62141d > .elementor-background-slideshow{border-radius:20px 20px 20px 20px;}.elementor-34 .elementor-element.elementor-element-d62141d > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:10px 10px 10px 10px;--e-column-margin-right:10px;--e-column-margin-left:10px;padding:50px 50px 50px 50px;}.elementor-34 .elementor-element.elementor-element-d62141d > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-loop-grid .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-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-34 .elementor-element.elementor-element-b6e0b91{--grid-columns:1;--grid-row-gap:0px;--grid-column-gap:0px;}@media(max-width:1024px) and (min-width:768px){.elementor-34 .elementor-element.elementor-element-69ad544{width:100%;}.elementor-34 .elementor-element.elementor-element-d02d387{width:100%;}}@media(max-width:1440px){.elementor-34 .elementor-element.elementor-element-e6a89e1{padding:0px 30px 0px 30px;}.elementor-34 .elementor-element.elementor-element-8fea678 > .elementor-container{max-width:1200px;}.elementor-34 .elementor-element.elementor-element-c794ac7 .elementor-heading-title{font-size:30px;}.elementor-34 .elementor-element.elementor-element-0b1a339{font-size:16px;}.elementor-34 .elementor-element.elementor-element-473a99b > .elementor-container{max-width:1200px;}.elementor-34 .elementor-element.elementor-element-6bffb9f > .elementor-container{max-width:1200px;}.elementor-34 .elementor-element.elementor-element-10641b5 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:15px;}.elementor-34 .elementor-element.elementor-element-a7d292a .elementor-heading-title{font-size:30px;}.elementor-34 .elementor-element.elementor-element-b31d100{font-size:16px;}.elementor-34 .elementor-element.elementor-element-02ea557 > .elementor-container{max-width:1200px;}.elementor-34 .elementor-element.elementor-element-cf0b5ee > .elementor-container{max-width:1200px;}.elementor-34 .elementor-element.elementor-element-d62141d > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:15px;}.elementor-34 .elementor-element.elementor-element-d62141d > .elementor-element-populated{padding:30px 30px 30px 30px;}}@media(max-width:1024px){.elementor-34 .elementor-element.elementor-element-961d8b9 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:15px;}.elementor-34 .elementor-element.elementor-element-961d8b9 > .elementor-element-populated{padding:75px 75px 75px 75px;}.elementor-34 .elementor-element.elementor-element-9db4266 .elementor-heading-title{font-size:40px;}.elementor-34 .elementor-element.elementor-element-35f86bb{--e-icon-list-icon-size:13px;}.elementor-34 .elementor-element.elementor-element-35f86bb .elementor-icon-list-item > .elementor-icon-list-text, .elementor-34 .elementor-element.elementor-element-35f86bb .elementor-icon-list-item > a{font-size:16px;}.elementor-34 .elementor-element.elementor-element-8fea678{padding:30px 20px 30px 20px;}.elementor-34 .elementor-element.elementor-element-d02d387 > .elementor-element-populated{padding:10px 10px 10px 10px;}.elementor-34 .elementor-element.elementor-element-c794ac7 .elementor-heading-title{font-size:30px;}.elementor-34 .elementor-element.elementor-element-0b1a339{font-size:15px;}.elementor-34 .elementor-element.elementor-element-473a99b{padding:0px 20px 0px 20px;}.elementor-34 .elementor-element.elementor-element-9da5a7a > .elementor-element-populated{padding:40px 40px 40px 40px;}.elementor-34 .elementor-element.elementor-element-6bffb9f{padding:30px 20px 30px 20px;}.elementor-34 .elementor-element.elementor-element-a7d292a .elementor-heading-title{font-size:25px;}.elementor-34 .elementor-element.elementor-element-b31d100{font-size:15px;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table thead > tr th .data-table-header-text{font-size:16px;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table tbody tr td{font-size:15px;}.elementor-34 .elementor-element.elementor-element-02ea557{padding:0px 20px 0px 20px;}.elementor-34 .elementor-element.elementor-element-cf0b5ee{padding:30px 20px 30px 20px;}.elementor-34 .elementor-element.elementor-element-d62141d > .elementor-element-populated{padding:25px 25px 25px 25px;}.elementor-34 .elementor-element.elementor-element-b6e0b91{--grid-columns:1;}}@media(max-width:767px){.elementor-34 .elementor-element.elementor-element-e6a89e1{padding:0px 20px 0px 20px;}.elementor-34 .elementor-element.elementor-element-961d8b9 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:15px;}.elementor-34 .elementor-element.elementor-element-961d8b9 > .elementor-element-populated, .elementor-34 .elementor-element.elementor-element-961d8b9 > .elementor-element-populated > .elementor-background-overlay, .elementor-34 .elementor-element.elementor-element-961d8b9 > .elementor-background-slideshow{border-radius:10px 10px 10px 10px;}.elementor-34 .elementor-element.elementor-element-961d8b9 > .elementor-element-populated{padding:60px 60px 60px 60px;}.elementor-34 .elementor-element.elementor-element-9db4266 .elementor-heading-title{font-size:35px;line-height:1.25em;}.elementor-34 .elementor-element.elementor-element-35f86bb .elementor-icon-list-item > .elementor-icon-list-text, .elementor-34 .elementor-element.elementor-element-35f86bb .elementor-icon-list-item > a{font-size:15px;}.elementor-34 .elementor-element.elementor-element-8fea678{padding:30px 15px 30px 15px;}.elementor-34 .elementor-element.elementor-element-1b973b5 img{border-radius:13px 13px 13px 13px;}.elementor-34 .elementor-element.elementor-element-d02d387 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:15px;}.elementor-34 .elementor-element.elementor-element-c794ac7 .elementor-heading-title{font-size:20px;}.elementor-34 .elementor-element.elementor-element-473a99b{padding:0px 15px 0px 15px;}.elementor-34 .elementor-element.elementor-element-9da5a7a > .elementor-element-populated{padding:25px 25px 25px 25px;}.elementor-34 .elementor-element.elementor-element-6bffb9f{padding:30px 10px 30px 10px;}.elementor-34 .elementor-element.elementor-element-a7d292a .elementor-heading-title{font-size:23px;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table thead > tr th .data-table-header-text{font-size:15px;}.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table tbody tr td{font-size:14px;line-height:1.5em;}.elementor-34 .elementor-element.elementor-element-02ea557{padding:0px 10px 0px 10px;}.elementor-34 .elementor-element.elementor-element-cf0b5ee{padding:30px 10px 30px 10px;}.elementor-34 .elementor-element.elementor-element-d62141d > .elementor-element-populated, .elementor-34 .elementor-element.elementor-element-d62141d > .elementor-element-populated > .elementor-background-overlay, .elementor-34 .elementor-element.elementor-element-d62141d > .elementor-background-slideshow{border-radius:15px 15px 15px 15px;}.elementor-34 .elementor-element.elementor-element-d62141d > .elementor-element-populated{padding:15px 15px 15px 15px;}.elementor-34 .elementor-element.elementor-element-b6e0b91{--grid-columns:1;}}/* Start custom CSS for html, class: .elementor-element-76952b6 */.financial-chart {
  --primary: #5BB9DB;
  --primary-dark: #3297bd;
  --profit: #183B56;
  --text: #173042;
  --muted: #7B8A94;
  --border: #E8EEF1;

  font-family: 'Poppins', 'Noto Sans Thai', sans-serif;
  width: 100%;
  max-width: auto;
  margin: 0 auto;
  color: var(--text);
}


/* =========================
   HEADER
========================= */

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 30px;
}

.chart-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.chart-header h2 {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 600;
}

.chart-header p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.chart-unit {
  font-size: 13px;
  color: var(--muted);
}


/* =========================
   SUMMARY
========================= */

.chart-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 25px;
}

.summary-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  transition: .3s ease;
}

.summary-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary);
}

.summary-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.summary-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.summary-card strong {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.summary-card small {
  margin-left: 5px;
  color: var(--muted);
}

.summary-card em {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 12px;
  color: #3B9B70;
}


/* =========================
   CHART BOX
========================= */

.chart-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 30px rgba(20,50,70,.04);
}

.chart-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 35px;
}

.chart-title h3 {
  margin: 0 0 5px;
  font-size: 20px;
  font-weight: 600;
}

.chart-title p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.chart-legend {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--muted);
}

.chart-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.chart-legend i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-revenue {
  background: var(--primary);
}

.legend-profit {
  background: var(--profit);
}


/* =========================
   GRAPH
========================= */

.chart-wrapper {
  display: flex;
  height: 350px;
}

.y-axis {
  width: 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 35px;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
  padding-right: 15px;
}

.chart-area {
  position: relative;
  flex: 1;
  height: 100%;
}

.grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #EEF3F5;
}

.grid-line:nth-child(1) {
  top: 0;
}

.grid-line:nth-child(2) {
  top: 25%;
}

.grid-line:nth-child(3) {
  top: 50%;
}

.grid-line:nth-child(4) {
  top: 75%;
}

.grid-line:nth-child(5) {
  bottom: 35px;
}


/* =========================
   BARS
========================= */

.bars {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 35px;

  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 20px;
}

.bar-group {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  position: relative;
}

.bar {
  width: 30px;
  max-width: 45%;
  border-radius: 7px 7px 0 0;
  position: relative;
  transform-origin: bottom;
  animation: growBar .9s ease forwards;
  transition: .3s ease;
}

.bar span {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 500;
  opacity: 0;
  transition: .3s ease;
}

.bar:hover {
  transform: scaleX(1.08);
}

.bar:hover span {
  opacity: 1;
}

.bar.revenue {
  background: var(--primary);
}

.bar.profit {
  background: var(--profit);
}

.bar-group label {
  position: absolute;
  bottom: -30px;
  font-size: 12px;
  color: var(--muted);
}


/* =========================
   ANIMATION
========================= */

@keyframes growBar {

  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }

}


/* =========================
   TABLET
========================= */

@media (max-width: 768px) {

  .chart-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .chart-header h2 {
    font-size: 25px;
  }

  .chart-summary {
    gap: 12px;
  }

  .summary-card {
    padding: 18px;
  }

  .summary-card strong {
    font-size: 24px;
  }

  .chart-box {
    padding: 22px;
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

  .chart-header {
    margin-bottom: 20px;
  }

  .chart-header h2 {
    font-size: 22px;
  }

  .chart-summary {
    grid-template-columns: 1fr;
  }

  .summary-card {
    padding: 18px 20px;
  }

  .chart-title {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 30px;
  }

  .chart-legend {
    gap: 12px;
    flex-wrap: wrap;
  }

  .chart-box {
    padding: 18px 12px;
    border-radius: 16px;
  }

  .chart-wrapper {
    height: 280px;
  }

  .y-axis {
    width: 50px;
    padding-right: 8px;
    font-size: 9px;
  }

  .bars {
    gap: 5px;
  }

  .bar {
    width: 18px;
  }

  .bar span {
    font-size: 8px;
    top: -20px;
  }

  .bar-group label {
    font-size: 10px;
  }

}/* End custom CSS */
/* Start custom CSS for eael-data-table, class: .elementor-element-607e033 */.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table,
.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table * {
    font-family: 'Poppins', 'Noto Sans Thai', sans-serif !important;
}

.elementor-34 .elementor-element.elementor-element-607e033 .eael-data-table {
    border-radius: 15px !important;
    overflow: hidden !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7390eff *//* =====================================================
   LOHAKIT FINANCIAL TREND
===================================================== */

.lohakit-financial-trend {

    --primary: #5BB9DB;
    --primary-dark: #2D91B8;
    --primary-light: #EAF7FB;

    --navy: #123247;
    --text: #203746;
    --muted: #80909A;

    --border: #E7EEF1;
    --grid: #EAF0F3;

    width: 100%;
    max-width: auto;

    margin: 0 auto;

    font-family:
        'Poppins',
        'Noto Sans Thai',
        sans-serif;

    color: var(--text);

}


/* =====================================================
   HEADER
===================================================== */

.lf-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 30px;

    margin-bottom: 32px;

}


.lf-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: var(--primary-dark);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1.8px;

}


.lf-heading h2 {

    margin: 0 0 8px;

    font-size: 32px;

    line-height: 1.25;

    font-weight: 600;

    color: var(--navy);

}


.lf-heading p {

    margin: 0;

    max-width: 620px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;

}


.lf-unit {

    display: flex;

    align-items: center;

    gap: 8px;

    padding-bottom: 4px;

    font-size: 13px;

    color: var(--muted);

}


.lf-unit strong {

    color: var(--navy);

    font-weight: 600;

}


/* =====================================================
   TABS
===================================================== */

.lf-tabs {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 14px;

    padding: 5px;

    width: fit-content;

    background: #F5F9FA;

    border: 1px solid var(--border);

    border-radius: 12px;

}


.lf-tab {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 18px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: var(--muted);

    font-family: inherit;

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

    transition: all .25s ease;

}


.lf-tab:hover {

    color: #ffffff;
    background-color: #5bb9db;

}


.lf-tab.active {

    background: #fff;

    color: var(--navy);

    box-shadow:
        0 3px 12px rgba(18,50,71,.07);

}


.lf-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #B8C7CD;

    transition: .25s ease;

}


.lf-tab.active .lf-dot {

    background: var(--primary);

    box-shadow:
        0 0 0 4px rgba(91,185,219,.13);

}


/* =====================================================
   CHART CARD
===================================================== */

.lf-chart-card {

    position: relative;

    padding: 30px 32px 24px;

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 20px;

    box-shadow:
        0 10px 35px rgba(25,65,85,.045);

    overflow: hidden;

}


.lf-chart-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            #B9E5F1,
            transparent
        );

}


/* =====================================================
   CHART TOP
===================================================== */

.lf-chart-top {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 30px;

}


.lf-chart-label {

    display: block;

    margin-bottom: 4px;

    color: var(--primary-dark);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.5px;

}


.lf-chart-top h3 {

    margin: 0;

    font-size: 22px;

    font-weight: 600;

    color: var(--navy);

}


.lf-current {

    display: flex;

    align-items: baseline;

    gap: 7px;

}


.lf-current span {

    margin-right: 5px;

    color: var(--muted);

    font-size: 12px;

}


.lf-current strong {

    font-size: 25px;

    font-weight: 600;

    color: var(--navy);

}


.lf-current small {

    color: var(--muted);

    font-size: 11px;

}


/* =====================================================
   GRAPH
===================================================== */

.lf-graph {

    display: flex;

    height: 420px;

}


.lf-y-axis {

    width: 65px;

    padding-right: 14px;

    padding-bottom: 42px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    text-align: right;

    color: #9AA8AE;

    font-size: 10px;

}


.lf-graph-area {

    position: relative;

    flex: 1;

    min-width: 0;

}


/* =====================================================
   GRID
===================================================== */

.lf-grid {

    position: absolute;

    inset: 0 0 42px 0;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.lf-grid span {

    width: 100%;

    height: 1px;

    background: var(--grid);

}


/* =====================================================
   SVG
===================================================== */

.lf-svg {

    position: absolute;

    left: 0;
    right: 0;

    top: 0;

    width: 100%;

    height: calc(100% - 42px);

    overflow: visible;

}


.lf-area-path {

    fill: url(#none);

    fill: rgba(91,185,219,.09);

    opacity: .8;

}


.lf-line-path {

    fill: none;

    stroke: var(--primary);

    stroke-width: 5;

    stroke-linecap: round;

    stroke-linejoin: round;

    filter:
        drop-shadow(
            0 5px 8px rgba(91,185,219,.18)
        );

}


/* =====================================================
   POINTS
===================================================== */

.lf-point {

    position: absolute;

    width: 14px;
    height: 14px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background: #fff;

    border: 4px solid var(--primary);

    z-index: 5;

    cursor: pointer;

    transition: all .25s ease;

}


.lf-point:hover {

    width: 18px;
    height: 18px;

    box-shadow:
        0 0 0 7px rgba(91,185,219,.12);

}


.lf-point span {

    position: absolute;

    left: 50%;

    bottom: 24px;

    transform:
        translateX(-50%)
        translateY(5px);

    padding: 6px 9px;

    border-radius: 7px;

    background: var(--navy);

    color: #fff;

    font-size: 10px;

    white-space: nowrap;

    opacity: 0;

    pointer-events: none;

    transition: .25s ease;

}


.lf-point:hover span,
.lf-point.active-point span {

    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);

}


.lf-point.active-point {

    width: 18px;
    height: 18px;

    border-width: 5px;

    box-shadow:
        0 0 0 7px rgba(91,185,219,.12);

}


/* =====================================================
   X AXIS
===================================================== */

.lf-x-axis {

    position: absolute;

    left: 0;
    right: 0;

    bottom: 0;

    height: 30px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    color: #80909A;

    font-size: 11px;

}


.lf-x-axis span {

    transform:
        translateX(-50%);

}


/* =====================================================
   FOOTER
===================================================== */

.lf-chart-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 12px;

    padding-top: 20px;

    border-top: 1px solid var(--border);

}


.lf-trend {

    display: flex;

    align-items: center;

    gap: 10px;

}


.lf-trend-icon {

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--primary-light);

    color: var(--primary-dark);

    font-size: 16px;

}


.lf-trend strong {

    display: block;

    color: #31956D;

    font-size: 14px;

}


.lf-trend small {

    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 10px;

}


.lf-note {

    color: var(--muted);

    font-size: 11px;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 768px) {

    .lf-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

    }


    .lf-heading h2 {

        font-size: 27px;

    }


    .lf-chart-card {

        padding: 25px 22px 20px;

    }


    .lf-graph {

        height: 360px;

    }


    .lf-y-axis {

        width: 55px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .lf-header {

        margin-bottom: 22px;

    }


    .lf-eyebrow {

        font-size: 10px;

    }


    .lf-heading h2 {

        font-size: 23px;

    }


    .lf-heading p {

        font-size: 12px;

        line-height: 1.7;

    }


    .lf-unit {

        font-size: 11px;

    }


    /* TABS */

    .lf-tabs {

        width: 100%;

        gap: 4px;

    }


    .lf-tab {

        flex: 1;

        justify-content: center;

        padding: 9px 7px;

        font-size: 11px;

    }


    .lf-dot {

        width: 6px;
        height: 6px;

    }


    /* CARD */

    .lf-chart-card {

        padding: 22px 12px 18px;

        border-radius: 16px;

    }


    .lf-chart-top {

        margin-bottom: 25px;

    }


    .lf-chart-label {

        font-size: 9px;

    }


    .lf-chart-top h3 {

        font-size: 18px;

    }


    .lf-current {

        gap: 3px;

    }


    .lf-current span {

        display: none;

    }


    .lf-current strong {

        font-size: 19px;

    }


    .lf-current small {

        font-size: 9px;

    }


    /* GRAPH */

    .lf-graph {

        height: 270px;

    }


    .lf-y-axis {

        width: 42px;

        padding-right: 8px;

        padding-bottom: 35px;

        font-size: 8px;

    }


    .lf-grid {

        inset-bottom: 35px;

    }


    .lf-svg {

        height: calc(100% - 35px);

    }


    .lf-line-path {

        stroke-width: 4;

    }


    .lf-point {

        width: 10px;
        height: 10px;

        border-width: 3px;

    }


    .lf-point.active-point {

        width: 14px;
        height: 14px;

        border-width: 4px;

    }


    .lf-point span {

        bottom: 20px;

        padding: 5px 7px;

        font-size: 8px;

    }


    .lf-x-axis {

        height: 25px;

        font-size: 9px;

    }


    /* FOOTER */

    .lf-chart-footer {

        margin-top: 8px;

        padding-top: 15px;

    }


    .lf-note {

        display: none;

    }


}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-b6e0b91 */.elementor-34 .elementor-element.elementor-element-b6e0b91 .e-loop-item {
    border-bottom: 1px solid #E5E7EB;
}

.elementor-34 .elementor-element.elementor-element-b6e0b91 .e-loop-item:last-child {
    border-bottom: none;
}/* End custom CSS */