{"id":2242,"date":"2026-08-25T10:35:19","date_gmt":"2026-08-25T10:35:19","guid":{"rendered":"https:\/\/a2jobs.com\/Vanship_website_preview\/?page_id=2242"},"modified":"2026-09-07T16:58:53","modified_gmt":"2026-09-07T16:58:53","slug":"cbm-calculator","status":"publish","type":"page","link":"https:\/\/vanchile.com\/cbm-calculator\/","title":{"rendered":"CBM Calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2242\" class=\"elementor elementor-2242\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-655f01b e-con-full e-flex e-con e-parent\" data-id=\"655f01b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-04b863c elementor-widget elementor-widget-html\" data-id=\"04b863c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"freight-cbm-calculator\">\r\n\r\n<style>\r\n#freight-cbm-calculator{\r\n  --primary:#F96C0A;\r\n  --primary-dark:#d95700;\r\n  --text:#1f2937;\r\n  --muted:#6b7280;\r\n  --border:#e5e7eb;\r\n  --bg:#f7f8fa;\r\n  --white:#fff;\r\n  --danger:#dc2626;\r\n  --success:#15803d;\r\n\r\n  width:100%;\r\n  font-family:\"Segoe UI\",Arial,Helvetica,sans-serif;\r\n  color:var(--text);\r\n  box-sizing:border-box;\r\n}\r\n\r\n#freight-cbm-calculator *,\r\n#freight-cbm-calculator *::before,\r\n#freight-cbm-calculator *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n#freight-cbm-calculator button,\r\n#freight-cbm-calculator input,\r\n#freight-cbm-calculator select{\r\n  font-family:inherit;\r\n}\r\n\r\n\/* ================================\r\n   MAIN WRAPPER\r\n================================ *\/\r\n\r\n#freight-cbm-calculator .cbm-wrapper{\r\n  width:100%;\r\n  max-width:1250px;\r\n  margin:0 auto;\r\n  background:#fff;\r\n  border:1px solid #ececec;\r\n  border-radius:18px;\r\n  overflow:hidden;\r\n  box-shadow:0 12px 40px rgba(0,0,0,.07);\r\n}\r\n\r\n\/* ================================\r\n   HEADER\r\n================================ *\/\r\n\r\n#freight-cbm-calculator .cbm-header{\r\n  padding:30px;\r\n  color:#fff;\r\n  background:linear-gradient(135deg,#F96C0A,#f49a5e);\r\n}\r\n\r\n#freight-cbm-calculator .cbm-header h2{\r\n  margin:0 0 7px;\r\n  color:#fff;\r\n  font-size:28px;\r\n  line-height:1.2;\r\n  font-weight:700;\r\n}\r\n\r\n#freight-cbm-calculator .cbm-header p{\r\n  margin:0;\r\n  color:#fff;\r\n  opacity:.94;\r\n  font-size:14px;\r\n  line-height:1.6;\r\n}\r\n\r\n\/* ================================\r\n   FREIGHT TABS\r\n================================ *\/\r\n\r\n#freight-cbm-calculator .freight-tabs{\r\n  display:grid;\r\n  grid-template-columns:repeat(5,1fr);\r\n  gap:10px;\r\n  padding:20px;\r\n  background:#fff;\r\n  border-bottom:1px solid var(--border);\r\n}\r\n\r\n#freight-cbm-calculator .freight-tab{\r\n  min-height:48px;\r\n  padding:12px 10px;\r\n  border:1px solid var(--border);\r\n  border-radius:10px;\r\n  background:#fff;\r\n  color:var(--text);\r\n  cursor:pointer;\r\n  font-size:14px;\r\n  font-weight:600;\r\n  transition:.2s ease;\r\n}\r\n\r\n#freight-cbm-calculator .freight-tab:hover{\r\n  border-color:var(--primary);\r\n  color:var(--primary);\r\n}\r\n\r\n#freight-cbm-calculator .freight-tab.active{\r\n  background:var(--primary);\r\n  border-color:var(--primary);\r\n  color:#fff;\r\n  box-shadow:0 5px 15px rgba(249,108,10,.25);\r\n}\r\n\r\n\/* ================================\r\n   BODY\r\n================================ *\/\r\n\r\n#freight-cbm-calculator .cbm-body{\r\n  padding:25px;\r\n  background:var(--bg);\r\n}\r\n\r\n#freight-cbm-calculator .section-title{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:15px;\r\n  margin-bottom:15px;\r\n}\r\n\r\n#freight-cbm-calculator .section-title h3{\r\n  margin:0;\r\n  color:var(--text);\r\n  font-size:18px;\r\n  line-height:1.3;\r\n}\r\n\r\n#freight-cbm-calculator .section-title span{\r\n  color:var(--muted);\r\n  font-size:12px;\r\n}\r\n\r\n\/* ================================\r\n   ERROR\r\n================================ *\/\r\n\r\n#freight-cbm-calculator .calculator-error{\r\n  display:none;\r\n  margin-bottom:18px;\r\n  padding:12px 14px;\r\n  border:1px solid #fecaca;\r\n  border-radius:9px;\r\n  background:#fef2f2;\r\n  color:var(--danger);\r\n  font-size:13px;\r\n  line-height:1.5;\r\n}\r\n\r\n#freight-cbm-calculator .calculator-error.show{\r\n  display:block;\r\n}\r\n\r\n\/* ================================\r\n   PACKAGE\r\n================================ *\/\r\n\r\n#freight-cbm-calculator .package-row{\r\n  margin-bottom:12px;\r\n  padding:18px;\r\n  border:1px solid var(--border);\r\n  border-radius:12px;\r\n  background:#fff;\r\n}\r\n\r\n#freight-cbm-calculator .package-top{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:10px;\r\n  margin-bottom:15px;\r\n}\r\n\r\n#freight-cbm-calculator .package-number{\r\n  color:var(--primary);\r\n  font-size:14px;\r\n  font-weight:700;\r\n}\r\n\r\n#freight-cbm-calculator .remove-package{\r\n  padding:7px 12px;\r\n  border:1px solid #ffd4c1;\r\n  border-radius:7px;\r\n  background:#fff1eb;\r\n  color:#d65317;\r\n  cursor:pointer;\r\n  font-size:12px;\r\n  font-weight:600;\r\n  transition:.2s ease;\r\n}\r\n\r\n#freight-cbm-calculator .remove-package:hover{\r\n  border-color:#d65317;\r\n  background:#d65317;\r\n  color:#fff;\r\n}\r\n\r\n\/* ================================\r\n   PACKAGE GRID\r\n================================ *\/\r\n\r\n#freight-cbm-calculator .package-grid{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr 1fr 130px 110px 150px;\r\n  gap:12px;\r\n}\r\n\r\n#freight-cbm-calculator .form-group label{\r\n  display:block;\r\n  margin-bottom:6px;\r\n  color:#4b5563;\r\n  font-size:12px;\r\n  font-weight:600;\r\n}\r\n\r\n#freight-cbm-calculator .form-group input,\r\n#freight-cbm-calculator .form-group select{\r\n  width:100%;\r\n  height:44px;\r\n  padding:0 12px;\r\n  border:1px solid #dfe3e8;\r\n  border-radius:8px;\r\n  outline:none;\r\n  background:#fff;\r\n  color:var(--text);\r\n  font-size:14px;\r\n  transition:.2s ease;\r\n}\r\n\r\n#freight-cbm-calculator .form-group input:focus,\r\n#freight-cbm-calculator .form-group select:focus{\r\n  border-color:var(--primary);\r\n  box-shadow:0 0 0 3px rgba(249,108,10,.10);\r\n}\r\n\r\n\/* Remove number arrows *\/\r\n\r\n#freight-cbm-calculator input[type=\"number\"]::-webkit-inner-spin-button,\r\n#freight-cbm-calculator input[type=\"number\"]::-webkit-outer-spin-button{\r\n  -webkit-appearance:none;\r\n  margin:0;\r\n}\r\n\r\n#freight-cbm-calculator input[type=\"number\"]{\r\n  -moz-appearance:textfield;\r\n}\r\n\r\n\/* ================================\r\n   LIVE PACKAGE RESULT\r\n================================ *\/\r\n\r\n#freight-cbm-calculator .package-live{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:6px 18px;\r\n  margin-top:14px;\r\n  padding:10px 12px;\r\n  border:1px solid #f7d8c5;\r\n  border-radius:8px;\r\n  background:#fffaf7;\r\n  color:#666;\r\n  font-size:11px;\r\n  line-height:1.6;\r\n}\r\n\r\n#freight-cbm-calculator .package-live strong{\r\n  color:var(--primary);\r\n}\r\n\r\n#freight-cbm-calculator .package-live .package-cbm,\r\n#freight-cbm-calculator .package-live .package-weight{\r\n  font-weight:600;\r\n}\r\n\r\n\/* ================================\r\n   ACTION BUTTONS\r\n================================ *\/\r\n\r\n#freight-cbm-calculator .package-actions{\r\n  display:grid;\r\n  grid-template-columns:1fr 140px 160px;\r\n  gap:10px;\r\n  margin:5px 0 25px;\r\n}\r\n\r\n#freight-cbm-calculator .add-package,\r\n#freight-cbm-calculator .reset-btn,\r\n#freight-cbm-calculator .remove-last-btn{\r\n  height:46px;\r\n  border-radius:9px;\r\n  cursor:pointer;\r\n  font-size:13px;\r\n  font-weight:700;\r\n  transition:.2s ease;\r\n}\r\n\r\n#freight-cbm-calculator .add-package{\r\n  border:1px dashed var(--primary);\r\n  background:#fff8f4;\r\n  color:var(--primary);\r\n}\r\n\r\n#freight-cbm-calculator .add-package:hover{\r\n  background:var(--primary);\r\n  color:#fff;\r\n}\r\n\r\n#freight-cbm-calculator .reset-btn{\r\n  border:1px solid var(--border);\r\n  background:#fff;\r\n  color:var(--text);\r\n}\r\n\r\n#freight-cbm-calculator .reset-btn:hover{\r\n  border-color:var(--primary);\r\n  color:var(--primary);\r\n}\r\n\r\n#freight-cbm-calculator .remove-last-btn{\r\n  border:1px solid #ffd0be;\r\n  background:#fff4ef;\r\n  color:#d65317;\r\n}\r\n\r\n#freight-cbm-calculator .remove-last-btn:hover{\r\n  border-color:#d65317;\r\n  background:#d65317;\r\n  color:#fff;\r\n}\r\n\r\n#freight-cbm-calculator button:disabled{\r\n  opacity:.45;\r\n  cursor:not-allowed;\r\n}\r\n\r\n\/* ================================\r\n   CALCULATION FORMULA\r\n================================ *\/\r\n\r\n#freight-cbm-calculator .calculation-section{\r\n  margin-bottom:20px;\r\n  overflow:hidden;\r\n  border:1px solid var(--border);\r\n  border-radius:14px;\r\n  background:#fff;\r\n}\r\n\r\n#freight-cbm-calculator .calculation-section-header{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:15px;\r\n  padding:16px 20px;\r\n  background:#20242b;\r\n  color:#fff;\r\n}\r\n\r\n#freight-cbm-calculator .calculation-section-header h3{\r\n  margin:0;\r\n  color:#fff;\r\n  font-size:17px;\r\n  font-weight:700;\r\n}\r\n\r\n#freight-cbm-calculator .calculation-section-header span{\r\n  color:#fff;\r\n  opacity:.85;\r\n  font-size:12px;\r\n}\r\n\r\n#freight-cbm-calculator .formula-display{\r\n  padding:18px 20px;\r\n  border-bottom:1px solid var(--border);\r\n  background:#fffaf7;\r\n}\r\n\r\n#freight-cbm-calculator .formula-label{\r\n  display:block;\r\n  margin-bottom:7px;\r\n  color:var(--primary);\r\n  font-size:12px;\r\n  font-weight:700;\r\n  letter-spacing:.3px;\r\n  text-transform:uppercase;\r\n}\r\n\r\n#freight-cbm-calculator .formula-main{\r\n  color:#252525;\r\n  font-size:15px;\r\n  font-weight:600;\r\n  line-height:1.7;\r\n}\r\n\r\n#freight-cbm-calculator .formula-result{\r\n  margin-top:7px;\r\n  color:#666;\r\n  font-size:12px;\r\n  line-height:1.6;\r\n}\r\n\r\n\/* ================================\r\n   SHIPMENT RESULT\r\n================================ *\/\r\n\r\n#freight-cbm-calculator .result-box{\r\n  overflow:hidden;\r\n  border:1px solid var(--border);\r\n  border-radius:14px;\r\n  background:#fff;\r\n}\r\n\r\n#freight-cbm-calculator .result-header{\r\n  padding:16px 20px;\r\n  background:#20242b;\r\n  color:#fff;\r\n}\r\n\r\n#freight-cbm-calculator .result-header h3{\r\n  margin:0;\r\n  color:#fff;\r\n  font-size:17px;\r\n  font-weight:700;\r\n}\r\n\r\n#freight-cbm-calculator .result-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(5,1fr);\r\n}\r\n\r\n#freight-cbm-calculator .result-card{\r\n  padding:22px 15px;\r\n  border-right:1px solid var(--border);\r\n  text-align:center;\r\n}\r\n\r\n#freight-cbm-calculator .result-card:last-child{\r\n  border-right:0;\r\n}\r\n\r\n#freight-cbm-calculator .result-card small{\r\n  display:block;\r\n  margin-bottom:7px;\r\n  color:var(--muted);\r\n  font-size:11px;\r\n}\r\n\r\n#freight-cbm-calculator .result-card strong{\r\n  display:block;\r\n  color:var(--primary);\r\n  font-size:23px;\r\n  line-height:1.2;\r\n  font-weight:700;\r\n}\r\n\r\n#freight-cbm-calculator .result-card span{\r\n  display:block;\r\n  margin-top:3px;\r\n  color:var(--muted);\r\n  font-size:11px;\r\n}\r\n\r\n#freight-cbm-calculator .chargeable-card{\r\n  background:#fff8f4;\r\n}\r\n\r\n#freight-cbm-calculator .chargeable-card strong{\r\n  color:var(--success);\r\n}\r\n\r\n\/* ================================\r\n   CALCULATION NOTE\r\n================================ *\/\r\n\r\n#freight-cbm-calculator .calculation-note{\r\n  padding:16px 20px;\r\n  border-top:1px solid var(--border);\r\n  background:#fffaf7;\r\n  color:#555;\r\n  font-size:12px;\r\n  line-height:1.7;\r\n}\r\n\r\n#freight-cbm-calculator .calculation-note strong{\r\n  color:var(--text);\r\n}\r\n\r\n\/* ================================\r\n   FOOTER\r\n================================ *\/\r\n\r\n#freight-cbm-calculator .cbm-footer{\r\n  padding:16px;\r\n  border-top:1px solid var(--border);\r\n  background:#fff;\r\n  color:var(--muted);\r\n  font-size:11px;\r\n  text-align:center;\r\n}\r\n\r\n\/* ================================\r\n   TABLET\r\n================================ *\/\r\n\r\n@media(max-width:1050px){\r\n\r\n  #freight-cbm-calculator .package-grid{\r\n    grid-template-columns:repeat(3,1fr);\r\n  }\r\n\r\n  #freight-cbm-calculator .result-grid{\r\n    grid-template-columns:repeat(3,1fr);\r\n  }\r\n\r\n  #freight-cbm-calculator .result-card:nth-child(3){\r\n    border-right:0;\r\n  }\r\n\r\n  #freight-cbm-calculator .result-card:nth-child(-n+3){\r\n    border-bottom:1px solid var(--border);\r\n  }\r\n\r\n  #freight-cbm-calculator .package-actions{\r\n    grid-template-columns:1fr 130px 150px;\r\n  }\r\n}\r\n\r\n\/* ================================\r\n   MOBILE\r\n================================ *\/\r\n\r\n@media(max-width:800px){\r\n\r\n  #freight-cbm-calculator .freight-tabs{\r\n    grid-template-columns:repeat(2,1fr);\r\n  }\r\n\r\n  #freight-cbm-calculator .package-grid{\r\n    grid-template-columns:repeat(2,1fr);\r\n  }\r\n\r\n  #freight-cbm-calculator .result-grid{\r\n    grid-template-columns:repeat(2,1fr);\r\n  }\r\n\r\n  #freight-cbm-calculator .result-card:nth-child(2),\r\n  #freight-cbm-calculator .result-card:nth-child(4){\r\n    border-right:0;\r\n  }\r\n\r\n  #freight-cbm-calculator .result-card:nth-child(3){\r\n    border-right:1px solid var(--border);\r\n  }\r\n\r\n  #freight-cbm-calculator .package-actions{\r\n    grid-template-columns:1fr 1fr;\r\n  }\r\n\r\n  #freight-cbm-calculator .add-package{\r\n    grid-column:span 2;\r\n  }\r\n}\r\n\r\n\/* ================================\r\n   SMALL MOBILE\r\n================================ *\/\r\n\r\n@media(max-width:550px){\r\n\r\n  #freight-cbm-calculator .cbm-wrapper{\r\n    border-radius:12px;\r\n  }\r\n\r\n  #freight-cbm-calculator .cbm-header{\r\n    padding:22px 18px;\r\n  }\r\n\r\n  #freight-cbm-calculator .cbm-header h2{\r\n    font-size:22px;\r\n  }\r\n\r\n  #freight-cbm-calculator .cbm-header p{\r\n    font-size:12px;\r\n  }\r\n\r\n  #freight-cbm-calculator .cbm-body{\r\n    padding:15px;\r\n  }\r\n\r\n  #freight-cbm-calculator .freight-tabs{\r\n    padding:12px;\r\n    gap:7px;\r\n  }\r\n\r\n  #freight-cbm-calculator .freight-tab{\r\n    padding:12px 6px;\r\n    font-size:12px;\r\n  }\r\n\r\n  #freight-cbm-calculator .section-title{\r\n    align-items:flex-start;\r\n    flex-direction:column;\r\n    gap:5px;\r\n  }\r\n\r\n  #freight-cbm-calculator .package-row{\r\n    padding:13px;\r\n  }\r\n\r\n  #freight-cbm-calculator .package-grid{\r\n    grid-template-columns:1fr 1fr;\r\n    gap:10px;\r\n  }\r\n\r\n  \/*\r\n     Mobile arrangement:\r\n     Length\r\n     Width\r\n     Height\r\n     Unit\r\n     Quantity\r\n     Weight\r\n  *\/\r\n\r\n  #freight-cbm-calculator .package-grid .form-group:nth-child(1),\r\n  #freight-cbm-calculator .package-grid .form-group:nth-child(2),\r\n  #freight-cbm-calculator .package-grid .form-group:nth-child(3),\r\n  #freight-cbm-calculator .package-grid .form-group:nth-child(6){\r\n    grid-column:span 2;\r\n  }\r\n\r\n  #freight-cbm-calculator .package-actions{\r\n    grid-template-columns:1fr 1fr;\r\n    gap:8px;\r\n  }\r\n\r\n  #freight-cbm-calculator .add-package{\r\n    grid-column:span 2;\r\n  }\r\n\r\n  #freight-cbm-calculator .result-grid{\r\n    grid-template-columns:1fr 1fr;\r\n  }\r\n\r\n  #freight-cbm-calculator .result-card{\r\n    padding:18px 8px;\r\n  }\r\n\r\n  #freight-cbm-calculator .result-card strong{\r\n    font-size:20px;\r\n  }\r\n\r\n  #freight-cbm-calculator .result-card:nth-child(3){\r\n    border-right:1px solid var(--border);\r\n  }\r\n\r\n  #freight-cbm-calculator .result-card:nth-child(4){\r\n    border-right:0;\r\n  }\r\n\r\n  #freight-cbm-calculator .calculation-section-header{\r\n    align-items:flex-start;\r\n    flex-direction:column;\r\n    gap:5px;\r\n  }\r\n\r\n  #freight-cbm-calculator .formula-main{\r\n    font-size:14px;\r\n  }\r\n}\r\n\r\n\/* ================================\r\n   VERY SMALL\r\n================================ *\/\r\n\r\n@media(max-width:360px){\r\n\r\n  #freight-cbm-calculator .freight-tabs{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  #freight-cbm-calculator .result-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  #freight-cbm-calculator .result-card,\r\n  #freight-cbm-calculator .result-card:nth-child(2),\r\n  #freight-cbm-calculator .result-card:nth-child(3),\r\n  #freight-cbm-calculator .result-card:nth-child(4){\r\n    border-right:0;\r\n    border-bottom:1px solid var(--border);\r\n  }\r\n\r\n  #freight-cbm-calculator .result-card:last-child{\r\n    border-bottom:0;\r\n  }\r\n\r\n  #freight-cbm-calculator .package-actions{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  #freight-cbm-calculator .add-package{\r\n    grid-column:auto;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div class=\"cbm-wrapper\">\r\n\r\n  <!-- HEADER -->\r\n\r\n  <div class=\"cbm-header\">\r\n    <h2>Freight CBM &amp; Volumetric Weight Calculator<\/h2>\r\n\r\n\r\n<p>\r\n  Calculate CBM, cargo weight, volumetric weight and\r\n  chargeable weight for your shipment automatically.\r\n<\/p>\r\n\r\n\r\n  <\/div>\r\n\r\n  <!-- FREIGHT TABS -->\r\n\r\n  <div class=\"freight-tabs\">\r\n\r\n<button type=\"button\"\r\n        class=\"freight-tab active\"\r\n        data-mode=\"air\">\r\n  \u2708\ufe0f Air Cargo\r\n<\/button>\r\n\r\n<button type=\"button\"\r\n        class=\"freight-tab\"\r\n        data-mode=\"courier\">\r\n  \ud83d\udce6 Courier\r\n<\/button>\r\n\r\n<button type=\"button\"\r\n        class=\"freight-tab\"\r\n        data-mode=\"sea\">\r\n  \ud83d\udea2 Sea Cargo\r\n<\/button>\r\n\r\n<button type=\"button\"\r\n        class=\"freight-tab\"\r\n        data-mode=\"road\">\r\n  \ud83d\ude9b Road \/ Rail Cargo\r\n<\/button>\r\n\r\n\r\n  <\/div>\r\n\r\n  <!-- BODY -->\r\n\r\n  <div class=\"cbm-body\">\r\n\r\n\r\n<div class=\"section-title\">\r\n\r\n  <h3>Package Details<\/h3>\r\n\r\n  <span>\r\n    Enter dimensions in CM, INCHES, FEET or METER\r\n  <\/span>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- ERROR -->\r\n\r\n<div id=\"calculator-error\"\r\n     class=\"calculator-error\"><\/div>\r\n\r\n\r\n<!-- PACKAGE CONTAINER -->\r\n\r\n<div id=\"package-container\"><\/div>\r\n\r\n\r\n<!-- ACTIONS -->\r\n\r\n<div class=\"package-actions\">\r\n\r\n  <button type=\"button\"\r\n          class=\"add-package\"\r\n          id=\"add-package\">\r\n    + Add Another Package\r\n  <\/button>\r\n\r\n  <button type=\"button\"\r\n          class=\"reset-btn\"\r\n          id=\"reset\">\r\n    \u21bb Reset\r\n  <\/button>\r\n\r\n  <button type=\"button\"\r\n          class=\"remove-last-btn\"\r\n          id=\"remove-last\">\r\n    \u2212 Remove Last Package\r\n  <\/button>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n\r\n<!-- =================================\r\n     SHIPMENT CALCULATION\r\n================================== -->\r\n\r\n<div class=\"result-box\">\r\n\r\n  <div class=\"result-header\">\r\n\r\n    <h3>Shipment Calculation<\/h3>\r\n\r\n  <\/div>\r\n\r\n\r\n  <div class=\"result-grid\">\r\n\r\n    <div class=\"result-card\">\r\n\r\n      <small>Total Packages<\/small>\r\n\r\n      <strong id=\"result-packages\">\r\n        0\r\n      <\/strong>\r\n\r\n      <span>Packages<\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"result-card\">\r\n\r\n      <small>Total CBM<\/small>\r\n\r\n      <strong id=\"result-cbm\">\r\n        0.000\r\n      <\/strong>\r\n\r\n      <span>m\u00b3<\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"result-card\">\r\n\r\n      <small>Cargo Weight<\/small>\r\n\r\n      <strong id=\"result-cargo\">\r\n        0.00\r\n      <\/strong>\r\n\r\n      <span>kg<\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"result-card\">\r\n\r\n      <small>Volumetric Weight<\/small>\r\n\r\n      <strong id=\"result-volume\">\r\n        0.00\r\n      <\/strong>\r\n\r\n      <span>kg<\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"result-card chargeable-card\">\r\n\r\n      <small>Chargeable Weight<\/small>\r\n\r\n      <strong id=\"chargeable-weight\">\r\n        0.00\r\n      <\/strong>\r\n\r\n      <span>kg<\/span>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n  <div class=\"calculation-note\">\r\n\r\n    <strong>Calculation:<\/strong>\r\n\r\n    <span id=\"calculation-text\">\r\n      Enter package details to calculate.\r\n    <\/span>\r\n\r\n    <br>\r\n\r\n    <strong>Note:<\/strong>\r\n\r\n    Carrier-specific chargeable weight rules may vary\r\n    depending on service, route and shipment terms.\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<br>\r\n\r\n<!-- =================================\r\n     CALCULATION FORMULA\r\n================================== -->\r\n\r\n<div class=\"calculation-section\">\r\n\r\n  <div class=\"calculation-section-header\">\r\n\r\n    <h3>Calculation Formula<\/h3>\r\n\r\n    <span id=\"mode-label\">\r\n      Air Cargo\r\n    <\/span>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"formula-display\">\r\n\r\n    <span class=\"formula-label\">\r\n      Active Formula\r\n    <\/span>\r\n\r\n    <div class=\"formula-main\"\r\n         id=\"formula-main\">\r\n      Length (cm) \u00d7 Width (cm) \u00d7 Height (cm)\r\n      \u00f7 6,000 = Volumetric Weight (kg)\r\n    <\/div>\r\n\r\n    <div class=\"formula-result\"\r\n         id=\"formula-result\">\r\n      Air Cargo uses the dimensional weight formula.\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n  <\/div>\r\n\r\n  <div class=\"cbm-footer\">\r\n    Results are calculated automatically based on the selected freight mode.\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n\r\n  \"use strict\";\r\n\r\n  \/*\r\n   * Prevent duplicate initialization if Elementor\r\n   * re-renders the HTML widget.\r\n   *\/\r\n\r\n  const root = document.getElementById(\"freight-cbm-calculator\");\r\n\r\n  if(!root || root.dataset.initialized === \"true\"){\r\n    return;\r\n  }\r\n\r\n  root.dataset.initialized = \"true\";\r\n\r\n\r\n  \/* ==========================================\r\n     ELEMENTS\r\n  ========================================== *\/\r\n\r\n  const packageContainer =\r\n    root.querySelector(\"#package-container\");\r\n\r\n  const addPackageBtn =\r\n    root.querySelector(\"#add-package\");\r\n\r\n  const removeLastBtn =\r\n    root.querySelector(\"#remove-last\");\r\n\r\n  const resetBtn =\r\n    root.querySelector(\"#reset\");\r\n\r\n  const errorBox =\r\n    root.querySelector(\"#calculator-error\");\r\n\r\n  const modeLabel =\r\n    root.querySelector(\"#mode-label\");\r\n\r\n  const formulaMain =\r\n    root.querySelector(\"#formula-main\");\r\n\r\n  const formulaResult =\r\n    root.querySelector(\"#formula-result\");\r\n\r\n  const resultPackages =\r\n    root.querySelector(\"#result-packages\");\r\n\r\n  const resultCbm =\r\n    root.querySelector(\"#result-cbm\");\r\n\r\n  const resultCargo =\r\n    root.querySelector(\"#result-cargo\");\r\n\r\n  const resultVolume =\r\n    root.querySelector(\"#result-volume\");\r\n\r\n  const chargeableWeight =\r\n    root.querySelector(\"#chargeable-weight\");\r\n\r\n  const calculationText =\r\n    root.querySelector(\"#calculation-text\");\r\n\r\n\r\n  \/* ==========================================\r\n     STATE\r\n  ========================================== *\/\r\n\r\n  let currentMode = \"air\";\r\n\r\n  let packageCounter = 0;\r\n\r\n\r\n  \/* ==========================================\r\n     FORMULAS\r\n  ========================================== *\/\r\n\r\n  const formulas = {\r\n\r\n    air: {\r\n      label: \"Air Cargo\",\r\n      type: \"dimension\",\r\n      divisor: 6000,\r\n      formula:\r\n        \"Length (cm) \u00d7 Width (cm) \u00d7 Height (cm) \u00f7 6,000 = Volumetric Weight (kg)\",\r\n      description:\r\n        \"Air Cargo volumetric weight is calculated using a 6,000 dimensional factor.\"\r\n    },\r\n\r\n    courier: {\r\n      label: \"Courier\",\r\n      type: \"dimension\",\r\n      divisor: 5000,\r\n      formula:\r\n        \"Length (cm) \u00d7 Width (cm) \u00d7 Height (cm) \u00f7 5,000 = Volumetric Weight (kg)\",\r\n      description:\r\n        \"Courier volumetric weight is calculated using a 5,000 dimensional factor.\"\r\n    },\r\n\r\n    sea: {\r\n      label: \"Sea Cargo\",\r\n      type: \"cbm\",\r\n      factor: 1000,\r\n      formula:\r\n        \"CBM \u00d7 1,000 = Volumetric Weight (kg)\",\r\n      description:\r\n        \"Sea Cargo volumetric weight is calculated from total CBM using a 1,000 factor.\"\r\n    },\r\n\r\n    road: {\r\n      label: \"Road Freight\",\r\n      type: \"dimension\",\r\n      divisor: 3000,\r\n      formula:\r\n        \"Length (cm) \u00d7 Width (cm) \u00d7 Height (cm) \u00f7 3,000 = Volumetric Weight (kg)\",\r\n      description:\r\n        \"Road freight volumetric weight is calculated using a 3,000 dimensional factor.\"\r\n    },\r\n\r\n    rail: {\r\n      label: \"Rail \/ Road Cargo\",\r\n      type: \"dimension\",\r\n      divisor: 6000,\r\n      formula:\r\n        \"Length (cm) \u00d7 Width (cm) \u00d7 Height (cm) \u00f7 6,000 = Volumetric Weight (kg)\",\r\n      description:\r\n        \"Rail \/ Road Cargo volumetric weight is calculated using a 6,000 dimensional factor.\"\r\n    }\r\n\r\n  };\r\n\r\n\r\n  \/* ==========================================\r\n     HELPERS\r\n  ========================================== *\/\r\n\r\n  function number(value){\r\n\r\n    const n = parseFloat(value);\r\n\r\n    return Number.isFinite(n) && n > 0 ? n : 0;\r\n\r\n  }\r\n\r\n\r\n  function formatNumber(value, decimals){\r\n\r\n    return Number(value || 0).toFixed(decimals);\r\n\r\n  }\r\n\r\n\r\n  function escapeHtml(value){\r\n\r\n    return String(value)\r\n      .replace(\/&\/g,\"&amp;\")\r\n      .replace(\/<\/g,\"&lt;\")\r\n      .replace(\/>\/g,\"&gt;\")\r\n      .replace(\/\"\/g,\"&quot;\")\r\n      .replace(\/'\/g,\"&#039;\");\r\n\r\n  }\r\n\r\n\r\n  \/*\r\n   * Convert the supplied dimension to meters.\r\n   *\/\r\n\r\n  function toMeters(value, unit){\r\n\r\n    const v = number(value);\r\n\r\n    switch(unit){\r\n\r\n      case \"mm\":\r\n        return v \/ 1000;\r\n\r\n      case \"cm\":\r\n        return v \/ 100;\r\n\r\n      case \"inch\":\r\n        return v * 0.0254;\r\n\r\n      case \"ft\":\r\n        return v * 0.3048;\r\n\r\n      case \"m\":\r\n        return v;\r\n\r\n      default:\r\n        return 0;\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/*\r\n   * Convert the supplied dimension to centimeters.\r\n   *\/\r\n\r\n  function toCentimeters(value, unit){\r\n\r\n    const v = number(value);\r\n\r\n    switch(unit){\r\n\r\n      case \"mm\":\r\n        return v \/ 10;\r\n\r\n      case \"cm\":\r\n        return v;\r\n\r\n      case \"inch\":\r\n        return v * 2.54;\r\n\r\n      case \"ft\":\r\n        return v * 30.48;\r\n\r\n      case \"m\":\r\n        return v * 100;\r\n\r\n      default:\r\n        return 0;\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  function showError(message){\r\n\r\n    if(!message){\r\n\r\n      errorBox.textContent = \"\";\r\n      errorBox.classList.remove(\"show\");\r\n\r\n      return;\r\n\r\n    }\r\n\r\n    errorBox.textContent = message;\r\n    errorBox.classList.add(\"show\");\r\n\r\n  }\r\n\r\n\r\n  \/* ==========================================\r\n     PACKAGE HTML\r\n  ========================================== *\/\r\n\r\n  function createPackage(){\r\n\r\n    packageCounter++;\r\n\r\n    const id = packageCounter;\r\n\r\n    const row = document.createElement(\"div\");\r\n\r\n    row.className = \"package-row\";\r\n\r\n    row.dataset.packageId = id;\r\n\r\n    row.innerHTML = `\r\n\r\n      <div class=\"package-top\">\r\n\r\n        <div class=\"package-number\">\r\n          Package Type ${id}\r\n        <\/div>\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"remove-package\"\r\n          data-remove-package=\"${id}\">\r\n          \u2212 Remove\r\n        <\/button>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"package-grid\">\r\n\r\n        <div class=\"form-group\">\r\n\r\n          <label>\r\n            Length\r\n          <\/label>\r\n\r\n          <input\r\n            type=\"number\"\r\n            min=\"0\"\r\n            step=\"any\"\r\n            inputmode=\"decimal\"\r\n            class=\"dimension-length\"\r\n            placeholder=\"e.g. 100\">\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"form-group\">\r\n\r\n          <label>\r\n            Width\r\n          <\/label>\r\n\r\n          <input\r\n            type=\"number\"\r\n            min=\"0\"\r\n            step=\"any\"\r\n            inputmode=\"decimal\"\r\n            class=\"dimension-width\"\r\n            placeholder=\"e.g. 80\">\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"form-group\">\r\n\r\n          <label>\r\n            Height\r\n          <\/label>\r\n\r\n          <input\r\n            type=\"number\"\r\n            min=\"0\"\r\n            step=\"any\"\r\n            inputmode=\"decimal\"\r\n            class=\"dimension-height\"\r\n            placeholder=\"e.g. 60\">\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"form-group\">\r\n\r\n          <label>\r\n            Unit\r\n          <\/label>\r\n\r\n          <select class=\"dimension-unit\">\r\n\r\n            <option value=\"cm\">\r\n              CM\r\n            <\/option>\r\n\r\n\r\n            <option value=\"inch\">\r\n              INCHES\r\n            <\/option>\r\n\r\n            <option value=\"ft\">\r\n              FEET\r\n            <\/option>\r\n\r\n            <option value=\"m\">\r\n              METER\r\n            <\/option>\r\n\r\n          <\/select>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"form-group\">\r\n\r\n          <label>\r\n            Quantity\r\n          <\/label>\r\n\r\n          <input\r\n            type=\"number\"\r\n            min=\"1\"\r\n            step=\"1\"\r\n            value=\"1\"\r\n            inputmode=\"numeric\"\r\n            class=\"package-quantity\">\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"form-group\">\r\n\r\n          <label>\r\n            Cargo Weight\/Package (kg)\r\n          <\/label>\r\n\r\n          <input\r\n            type=\"number\"\r\n            min=\"0\"\r\n            step=\"any\"\r\n            inputmode=\"decimal\"\r\n            class=\"package-weight\"\r\n            placeholder=\"e.g. 25\">\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"package-live\">\r\n\r\n        <span>\r\n          CBM:\r\n          <strong class=\"live-cbm\">0.000<\/strong> m\u00b3\r\n        <\/span>\r\n\r\n        <span>\r\n          Total Cargo:\r\n          <strong class=\"live-weight\">0.00<\/strong> kg\r\n        <\/span>\r\n\r\n        <span>\r\n          Quantity:\r\n          <strong class=\"live-quantity\">1<\/strong>\r\n        <\/span>\r\n\r\n      <\/div>\r\n\r\n    `;\r\n\r\n    packageContainer.appendChild(row);\r\n\r\n    updateRemoveButtons();\r\n\r\n    calculate();\r\n\r\n  }\r\n\r\n\r\n  \/* ==========================================\r\n     UPDATE PACKAGE NUMBERS\r\n  ========================================== *\/\r\n\r\n  function renumberPackages(){\r\n\r\n    const rows =\r\n      packageContainer.querySelectorAll(\".package-row\");\r\n\r\n    rows.forEach(function(row,index){\r\n\r\n      const number =\r\n        row.querySelector(\".package-number\");\r\n\r\n      if(number){\r\n\r\n        number.textContent =\r\n          \"Package Type \" + (index + 1);\r\n\r\n      }\r\n\r\n    });\r\n\r\n  }\r\n\r\n\r\n  \/* ==========================================\r\n     REMOVE BUTTON STATES\r\n  ========================================== *\/\r\n\r\n  function updateRemoveButtons(){\r\n\r\n    const rows =\r\n      packageContainer.querySelectorAll(\".package-row\");\r\n\r\n    const disable =\r\n      rows.length <= 1;\r\n\r\n    rows.forEach(function(row){\r\n\r\n      const button =\r\n        row.querySelector(\".remove-package\");\r\n\r\n      if(button){\r\n\r\n        button.disabled = disable;\r\n\r\n      }\r\n\r\n    });\r\n\r\n    removeLastBtn.disabled =\r\n      rows.length <= 1;\r\n\r\n  }\r\n\r\n\r\n  \/* ==========================================\r\n     READ PACKAGE\r\n  ========================================== *\/\r\n\r\n  function readPackage(row){\r\n\r\n    const length =\r\n      number(\r\n        row.querySelector(\".dimension-length\").value\r\n      );\r\n\r\n    const width =\r\n      number(\r\n        row.querySelector(\".dimension-width\").value\r\n      );\r\n\r\n    const height =\r\n      number(\r\n        row.querySelector(\".dimension-height\").value\r\n      );\r\n\r\n    const unit =\r\n      row.querySelector(\".dimension-unit\").value;\r\n\r\n    const quantityInput =\r\n      parseInt(\r\n        row.querySelector(\".package-quantity\").value,\r\n        10\r\n      );\r\n\r\n    const quantity =\r\n      Number.isFinite(quantityInput) && quantityInput > 0\r\n        ? quantityInput\r\n        : 0;\r\n\r\n    const weight =\r\n      number(\r\n        row.querySelector(\".package-weight\").value\r\n      );\r\n\r\n    const lengthCm =\r\n      toCentimeters(length,unit);\r\n\r\n    const widthCm =\r\n      toCentimeters(width,unit);\r\n\r\n    const heightCm =\r\n      toCentimeters(height,unit);\r\n\r\n    const lengthM =\r\n      toMeters(length,unit);\r\n\r\n    const widthM =\r\n      toMeters(width,unit);\r\n\r\n    const heightM =\r\n      toMeters(height,unit);\r\n\r\n    const cbmPerPackage =\r\n      lengthM *\r\n      widthM *\r\n      heightM;\r\n\r\n    const totalCbm =\r\n      cbmPerPackage *\r\n      quantity;\r\n\r\n    const totalCargoWeight =\r\n      weight *\r\n      quantity;\r\n\r\n    return {\r\n\r\n      length,\r\n      width,\r\n      height,\r\n      unit,\r\n\r\n      quantity,\r\n      weight,\r\n\r\n      lengthCm,\r\n      widthCm,\r\n      heightCm,\r\n\r\n      cbmPerPackage,\r\n      totalCbm,\r\n\r\n      totalCargoWeight\r\n\r\n    };\r\n\r\n  }\r\n\r\n\r\n  \/* ==========================================\r\n     UPDATE LIVE PACKAGE DISPLAY\r\n  ========================================== *\/\r\n\r\n  function updatePackageLive(row,data){\r\n\r\n    const liveCbm =\r\n      row.querySelector(\".live-cbm\");\r\n\r\n    const liveWeight =\r\n      row.querySelector(\".live-weight\");\r\n\r\n    const liveQuantity =\r\n      row.querySelector(\".live-quantity\");\r\n\r\n    liveCbm.textContent =\r\n      formatNumber(data.totalCbm,3);\r\n\r\n    liveWeight.textContent =\r\n      formatNumber(data.totalCargoWeight,2);\r\n\r\n    liveQuantity.textContent =\r\n      data.quantity || 0;\r\n\r\n  }\r\n\r\n\r\n  \/* ==========================================\r\n     MAIN CALCULATION\r\n  ========================================== *\/\r\n\r\n  function calculate(){\r\n\r\n    const rows =\r\n      Array.from(\r\n        packageContainer.querySelectorAll(\".package-row\")\r\n      );\r\n\r\n    if(!rows.length){\r\n\r\n      resultPackages.textContent = \"0\";\r\n      resultCbm.textContent = \"0.000\";\r\n      resultCargo.textContent = \"0.00\";\r\n      resultVolume.textContent = \"0.00\";\r\n      chargeableWeight.textContent = \"0.00\";\r\n\r\n      calculationText.textContent =\r\n        \"Enter package details to calculate.\";\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    let totalPackages = 0;\r\n\r\n    let totalCbm = 0;\r\n\r\n    let totalCargoWeight = 0;\r\n\r\n    let airCourierRoadRailVolume = 0;\r\n\r\n\r\n    let hasIncompleteDimensions = false;\r\n\r\n\r\n    rows.forEach(function(row){\r\n\r\n      const data =\r\n        readPackage(row);\r\n\r\n      updatePackageLive(row,data);\r\n\r\n\r\n      \/*\r\n       * Only count a package row in the shipment\r\n       * when quantity is valid.\r\n       *\/\r\n\r\n      totalPackages += data.quantity;\r\n\r\n      totalCbm += data.totalCbm;\r\n\r\n      totalCargoWeight +=\r\n        data.totalCargoWeight;\r\n\r\n\r\n      \/*\r\n       * Dimension-based volumetric calculations\r\n       * use centimeters.\r\n       *\/\r\n\r\n      const dimensionProduct =\r\n        data.lengthCm *\r\n        data.widthCm *\r\n        data.heightCm;\r\n\r\n\r\n      if(\r\n        data.quantity > 0 &&\r\n        dimensionProduct > 0\r\n      ){\r\n\r\n        airCourierRoadRailVolume +=\r\n          (\r\n            dimensionProduct \/\r\n            formulas[currentMode].divisor\r\n          ) *\r\n          data.quantity;\r\n\r\n      }\r\n\r\n\r\n      \/*\r\n       * Detect incomplete rows.\r\n       *\/\r\n\r\n      const hasSomeDimension =\r\n        data.length > 0 ||\r\n        data.width > 0 ||\r\n        data.height > 0;\r\n\r\n      const hasAllDimensions =\r\n        data.length > 0 &&\r\n        data.width > 0 &&\r\n        data.height > 0;\r\n\r\n      if(\r\n        hasSomeDimension &&\r\n        !hasAllDimensions\r\n      ){\r\n\r\n        hasIncompleteDimensions = true;\r\n\r\n      }\r\n\r\n    });\r\n\r\n\r\n    \/*\r\n     * Calculate volumetric weight.\r\n     *\/\r\n\r\n    let volumetricWeight = 0;\r\n\r\n\r\n    if(currentMode === \"sea\"){\r\n\r\n      volumetricWeight =\r\n        totalCbm *\r\n        formulas.sea.factor;\r\n\r\n    }else{\r\n\r\n      volumetricWeight =\r\n        airCourierRoadRailVolume;\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * Chargeable weight is always\r\n     * the greater of cargo and volumetric.\r\n     *\/\r\n\r\n    const chargeable =\r\n      Math.max(\r\n        totalCargoWeight,\r\n        volumetricWeight\r\n      );\r\n\r\n\r\n    \/*\r\n     * Update results.\r\n     *\/\r\n\r\n    resultPackages.textContent =\r\n      totalPackages;\r\n\r\n    resultCbm.textContent =\r\n      formatNumber(totalCbm,3);\r\n\r\n    resultCargo.textContent =\r\n      formatNumber(totalCargoWeight,2);\r\n\r\n    resultVolume.textContent =\r\n      formatNumber(volumetricWeight,2);\r\n\r\n    chargeableWeight.textContent =\r\n      formatNumber(chargeable,2);\r\n\r\n\r\n    \/*\r\n     * Formula calculation text.\r\n     *\/\r\n\r\n    if(totalPackages <= 0){\r\n\r\n      calculationText.textContent =\r\n        \"Enter package dimensions and quantity to calculate.\";\r\n\r\n    }else if(currentMode === \"sea\"){\r\n\r\n      calculationText.innerHTML =\r\n        \"Total CBM (\" +\r\n        formatNumber(totalCbm,3) +\r\n        \" m\u00b3) \u00d7 4,000 = \" +\r\n        \"<strong>\" +\r\n        formatNumber(volumetricWeight,2) +\r\n        \" kg<\/strong>. \" +\r\n        \"Chargeable weight = higher of cargo weight (\" +\r\n        formatNumber(totalCargoWeight,2) +\r\n        \" kg) and volumetric weight (\" +\r\n        formatNumber(volumetricWeight,2) +\r\n        \" kg).\";\r\n\r\n    }else{\r\n\r\n      calculationText.innerHTML =\r\n        \"Total volumetric weight = \" +\r\n        \"<strong>\" +\r\n        formatNumber(volumetricWeight,2) +\r\n        \" kg<\/strong>. \" +\r\n        \"Chargeable weight = higher of cargo weight (\" +\r\n        formatNumber(totalCargoWeight,2) +\r\n        \" kg) and volumetric weight (\" +\r\n        formatNumber(volumetricWeight,2) +\r\n        \" kg).\";\r\n\r\n    }\r\n\r\n\r\n    if(hasIncompleteDimensions){\r\n\r\n      showError(\r\n        \"Please enter Length, Width and Height for every package type you have started.\"\r\n      );\r\n\r\n    }else{\r\n\r\n      showError(\"\");\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* ==========================================\r\n     CHANGE FREIGHT MODE\r\n  ========================================== *\/\r\n\r\n  function setMode(mode){\r\n\r\n    if(!formulas[mode]){\r\n      return;\r\n    }\r\n\r\n    currentMode = mode;\r\n\r\n\r\n    \/*\r\n     * Update active tab.\r\n     *\/\r\n\r\n    root.querySelectorAll(\".freight-tab\")\r\n      .forEach(function(tab){\r\n\r\n        tab.classList.toggle(\r\n          \"active\",\r\n          tab.dataset.mode === mode\r\n        );\r\n\r\n      });\r\n\r\n\r\n    \/*\r\n     * Update formula section.\r\n     *\/\r\n\r\n    const config =\r\n      formulas[mode];\r\n\r\n    modeLabel.textContent =\r\n      config.label;\r\n\r\n    formulaMain.textContent =\r\n      config.formula;\r\n\r\n    formulaResult.textContent =\r\n      config.description;\r\n\r\n\r\n    calculate();\r\n\r\n  }\r\n\r\n\r\n  \/* ==========================================\r\n     ADD PACKAGE\r\n  ========================================== *\/\r\n\r\n  addPackageBtn.addEventListener(\r\n    \"click\",\r\n    function(){\r\n\r\n      createPackage();\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* ==========================================\r\n     REMOVE LAST PACKAGE\r\n  ========================================== *\/\r\n\r\n  removeLastBtn.addEventListener(\r\n    \"click\",\r\n    function(){\r\n\r\n      const rows =\r\n        packageContainer.querySelectorAll(\".package-row\");\r\n\r\n      if(rows.length <= 1){\r\n        return;\r\n      }\r\n\r\n      rows[rows.length - 1].remove();\r\n\r\n      renumberPackages();\r\n\r\n      updateRemoveButtons();\r\n\r\n      calculate();\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* ==========================================\r\n     INDIVIDUAL PACKAGE REMOVE\r\n  ========================================== *\/\r\n\r\n  packageContainer.addEventListener(\r\n    \"click\",\r\n    function(event){\r\n\r\n      const button =\r\n        event.target.closest(\r\n          \"[data-remove-package]\"\r\n        );\r\n\r\n      if(!button){\r\n        return;\r\n      }\r\n\r\n      const rows =\r\n        packageContainer.querySelectorAll(\".package-row\");\r\n\r\n      if(rows.length <= 1){\r\n        return;\r\n      }\r\n\r\n      const row =\r\n        button.closest(\".package-row\");\r\n\r\n      if(row){\r\n\r\n        row.remove();\r\n\r\n      }\r\n\r\n      renumberPackages();\r\n\r\n      updateRemoveButtons();\r\n\r\n      calculate();\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* ==========================================\r\n     LIVE INPUT CALCULATION\r\n  ========================================== *\/\r\n\r\n  packageContainer.addEventListener(\r\n    \"input\",\r\n    function(){\r\n\r\n      calculate();\r\n\r\n    }\r\n  );\r\n\r\n\r\n  packageContainer.addEventListener(\r\n    \"change\",\r\n    function(){\r\n\r\n      calculate();\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* ==========================================\r\n     FREIGHT TAB EVENTS\r\n  ========================================== *\/\r\n\r\n  root.querySelectorAll(\".freight-tab\")\r\n    .forEach(function(tab){\r\n\r\n      tab.addEventListener(\r\n        \"click\",\r\n        function(){\r\n\r\n          setMode(\r\n            tab.dataset.mode\r\n          );\r\n\r\n        }\r\n      );\r\n\r\n    });\r\n\r\n\r\n  \/* ==========================================\r\n     RESET\r\n  ========================================== *\/\r\n\r\n  resetBtn.addEventListener(\r\n    \"click\",\r\n    function(){\r\n\r\n      packageContainer.innerHTML = \"\";\r\n\r\n      packageCounter = 0;\r\n\r\n      showError(\"\");\r\n\r\n      createPackage();\r\n\r\n      setMode(\"air\");\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* ==========================================\r\n     INITIALIZE\r\n  ========================================== *\/\r\n\r\n  createPackage();\r\n\r\n  setMode(\"air\");\r\n\r\n})();\r\n<\/script>\r\n\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Freight CBM &amp; Volumetric Weight Calculator Calculate CBM, cargo weight, volumetric weight and chargeable weight for your shipment automatically. \u2708\ufe0f Air Cargo \ud83d\udce6 Courier \ud83d\udea2 Sea Cargo \ud83d\ude9b Road \/ Rail Cargo Package Details Enter dimensions in CM, INCHES, FEET or METER + Add Another Package \u21bb Reset \u2212 Remove Last Package Shipment Calculation Total [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"_xspeed_no_cache":false,"_xspeed_expiry_hours":0,"footnotes":""},"class_list":["post-2242","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/vanchile.com\/wp-json\/wp\/v2\/pages\/2242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vanchile.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vanchile.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vanchile.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vanchile.com\/wp-json\/wp\/v2\/comments?post=2242"}],"version-history":[{"count":1,"href":"https:\/\/vanchile.com\/wp-json\/wp\/v2\/pages\/2242\/revisions"}],"predecessor-version":[{"id":3162,"href":"https:\/\/vanchile.com\/wp-json\/wp\/v2\/pages\/2242\/revisions\/3162"}],"wp:attachment":[{"href":"https:\/\/vanchile.com\/wp-json\/wp\/v2\/media?parent=2242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}