div#container
{
   width: 970px;
   position: relative;
   margin: 0 auto 0 auto;
   text-align: left;
}
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   text-align: center;
}
a
{
   color: #0000FF;
   text-decoration: none;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: none;
}
.visibility-hidden
{
   visibility: hidden;
}
#wb_Text3 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text3 div
{
   text-align: left;
}
#wb_Text4 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text4 div
{
   text-align: left;
}
#wb_Image256
{
   vertical-align: top;
}
#Image256
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image4
{
   vertical-align: top;
}
#Image4
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#Shape1
{
   border-width: 0;
   vertical-align: top;
}
#wb_Image6
{
   vertical-align: top;
}
#Image6
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image7
{
   vertical-align: top;
}
#Image7
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Heading1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   margin: 0;
   padding: 0;
   text-align: left;
}
#Heading1
{
   color: #000000;
   font-family: Arial;
   font-weight: bold;
   font-style: normal;
   font-size: 29px;
   margin: 0;
   text-align: left;
   text-transform: none;
}
#Heading1 a
{
   color: inherit;
   text-decoration: none;
}
#wb_Text5 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text5 div
{
   text-align: left;
}
#wb_Image8
{
   vertical-align: top;
}
#Image8
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#Text9 
{
   border: 0px #000000 solid;
   margin: 0;
}
#wb_Image10
{
   vertical-align: top;
}
#Image10
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text10 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text10 div
{
   text-align: left;
}
#Breadcrumb1
{
   list-style: none;
   padding: 8px 15px 8px 15px;
   background-color: transparent;
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 0;
   margin: 0;
   text-align: left;
}
#Breadcrumb1 > li
{
   display: inline-block;
   font-size: 13px;
   text-transform: none;
}
#Breadcrumb1 a
{
   color: #337AB7;
   text-decoration: none;
}
#Breadcrumb1 a:hover
{
   color: #23527C;
   text-decoration: underline;
}
#Breadcrumb1 > .active
{
   color: #777777;
}
#Breadcrumb1 > .active a
{
   color: inherit;
   pointer-events: none;
}
#Breadcrumb1 > li + li:before
{
   content: "/";
   padding: 0 5px;
   color: #C0C0C0;
}
#wb_Text6 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text6 div
{
   text-align: left;
}
#wb_CssMenu1
{
   border: 0px solid #C0C0C0;
   border-radius: 0px;
   background-color: transparent;
   margin: 0;
   text-align: left;
}
#wb_CssMenu1 ul
{
   list-style-type: none;
   margin: 0;
   padding: 0;
   position: relative;
   display: inline-block;
}
#wb_CssMenu1 li
{
   display: inline-block;
   margin: 0;
   padding: 0px 3px 0px 0px;
   width: 132px;
}
#wb_CssMenu1 a
{
   display: block;
   color: #333333;
   border: 2px solid #CCCCCC;
   border-radius: 0px;
   background-color: #D3D3D3;
   background-image: none;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
   text-align: center;
   vertical-align: middle;
}
#wb_CssMenu1 > ul > li > a
{
   width: 118px;
   height: 24px;
   padding: 0 5px 0px 5px;
   line-height: 24px;
}
#wb_CssMenu1 li:hover a, #wb_CssMenu1 a:hover
{
   color: #FFFFFF;
   border: 2px solid #2E6DA4;
   background-color: #337AB7;
   background-image: none;
}
#wb_CssMenu1 li.firstmain
{
   padding-left: 0px;
}
#wb_CssMenu1 li.lastmain
{
   padding-right: 0px;
}
#wb_CssMenu1 br
{
   clear: both;
   font-size: 1px;
   height: 0;
   line-height: 0;
}
#wb_Text1 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text1 div
{
   text-align: left;
}
#wb_Text2 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text2 div
{
   text-align: left;
}
#wb_Image3
{
   vertical-align: top;
}
#Image3
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#Image3:hover
{
   transform: rotate(0deg) scale(1.08,1.08) ;
   transition: transform 500ms linear 0ms;
}
#Layer1
{
   background-color: #F8F9FA;
   background-image: none;
   border-radius: 0px;
}
#RollOver1
{
   border: 0px solid #000000;
   border-radius: 0px;
   margin: 0;
}
#RollOver1 a
{
   display: block;
   position: relative;
   height: 100%;
   width: 100%;
}
#RollOver1 a img
{
   position: absolute;
   z-index: 1;
   border-width: 0;
}
#RollOver1 span
{
   display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   z-index: 2;
}
#RollOver1 .hover
{
   visibility: hidden;
}
#RollOver1:hover .hover
{
   visibility: visible;
}
#RollOver1:hover span
{
   visibility: hidden;
}
#RollOver1 img
{
   border-width: 0;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#PageFooter1
{
   background-color: #DC143C;
   background-image: none;
   border-radius: 0px;
   box-sizing: border-box;
}
  :root {
    --tups-primary: #f36c21;       /* สีส้มหลักประจำแบรนด์ */
    --tups-primary-hover: #d9560c; /* สีส้มเข้มตอน Hover */
    --tups-dark: #222222;          /* สีดำ/เทาเข้ม */
    --tups-bg: #f8f9fa;
    --tups-card-bg: #ffffff;
    --tups-text: #333333;
    --tups-accent: #28a745;        /* สีเขียวเน้นผลลัพธ์ */
    --tups-radius: 12px;
  }

  .ups-calc-wrapper {
    font-family: 'Kanit', 'Prompt', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 850px;
    margin: 20px auto;
    background: var(--tups-card-bg);
    padding: 30px;
    border-radius: var(--tups-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    color: var(--tups-text);
    border-top: 5px solid var(--tups-primary);
    box-sizing: border-box;
  }

  .ups-calc-wrapper * {
    box-sizing: border-box;
  }

  .ups-calc-header {
    text-align: center;
    margin-bottom: 25px;
  }

  .ups-calc-header h2 {
    color: var(--tups-dark);
    margin: 0 0 8px 0;
    font-size: 1.8rem;
    font-weight: 700;
  }

  .ups-calc-header h2 span {
    color: var(--tups-primary);
  }

  .ups-calc-header p {
    color: #666;
    margin: 0;
    font-size: 0.95rem;
  }

  /* 3 Tabs Navigation */
  .ups-calc-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
    background: #f1f3f5;
    padding: 6px;
    border-radius: 10px;
  }

  .ups-nav-btn {
    flex: 1;
    padding: 12px 8px;
    border: none;
    background: transparent;
    color: #555;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.3;
  }

  .ups-nav-btn.active {
    background: var(--tups-primary);
    color: white;
    box-shadow: 0 3px 10px rgba(243, 108, 33, 0.3);
  }

  .ups-tab-pane {
    display: none;
  }

  .ups-tab-pane.active {
    display: block;
  }

  /* Form Elements */
  .form-group {
    margin-bottom: 20px;
  }

  .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--tups-dark);
  }

  .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .input-wrapper input, .input-wrapper select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s ease;
  }

  .input-wrapper input:focus, .input-wrapper select:focus {
    border-color: var(--tups-primary);
    box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.15);
  }

  .unit-text {
    position: absolute;
    right: 15px;
    color: #888;
    font-weight: 500;
    pointer-events: none;
  }

  .time-input-group {
    display: flex;
    gap: 10px;
  }

  /* Dynamic Device List */
  .device-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
  }

  .device-row input {
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 0.95rem;
  }

  .device-name { flex: 2; }
  .device-watts { flex: 1; }
  .device-qty { flex: 0.8; }

  .btn-remove {
    background: #dc3545;
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
  }

  .btn-remove:hover {
    background: #bd2130;
  }

  .btn-add {
    background: var(--tups-dark);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 5px;
    transition: background 0.2s;
  }

  .btn-add:hover {
    background: #000000;
  }

  .btn-calculate {
    width: 100%;
    background: var(--tups-primary);
    color: white;
    border: none;
    padding: 14px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 15px;
    transition: background 0.3s ease;
  }

  .btn-calculate:hover {
    background: var(--tups-primary-hover);
  }

  /* Result Box */
  .result-container {
    margin-top: 25px;
    background: #fff8f4;
    border: 1px solid #ffe2d1;
    border-left: 5px solid var(--tups-primary);
    padding: 20px;
    border-radius: 0 8px 8px 0;
    display: none;
  }

  .result-container h3 {
    margin: 0 0 15px 0;
    color: var(--tups-dark);
    font-size: 1.2rem;
  }

  .result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
  }

  .result-card {
    background: white;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    border: 1px solid #eee;
  }

  .result-card .val {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--tups-primary);
    margin: 5px 0;
  }

  .result-card .lbl {
    font-size: 0.85rem;
    color: #666;
  }

  .note-info {
    font-size: 0.85rem;
    color: #666;
    margin-top: 15px;
    line-height: 1.5;
  }

  .cta-box {
    margin-top: 15px;
    padding: 12px;
    background: var(--tups-dark);
    color: white;
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
  }

  @media (max-width: 650px) {
    .ups-calc-nav {
      flex-direction: column;
    }
    .device-row {
      flex-direction: column;
      align-items: stretch;
    }
    .time-input-group {
      flex-direction: column;
    }
  }