.custom-span-hr_value {
    display: inline-block;
    height: 30px; /* ความหนาของแถบ */
    margin: 0; /* ลบระยะห่าง */
    /*border-top-left-radius: 1rem; ความโค้ง */
    /*border-bottom-left-radius: 1rem; ความโค้ง */
    /*border-top-right-radius: 0; ไม่มีโค้งด้านขวา */
    /*border-bottom-right-radius: 0; ไม่มีโค้งด้านขวา */
}

.custom-span-hr_value_full {
    display: inline-block;
    height: 30px; /* ความหนาของแถบ */
    margin: 0; /* ลบระยะห่าง */
    /*border-top-left-radius: 1rem;  ความโค้ง */
    /*border-bottom-left-radius: 1rem;  ความโค้ง */
    /*border-top-right-radius: 1rem;  ความโค้ง */
    /*border-bottom-right-radius: 1rem;  ความโค้ง */
}

.custom-span-hr_fill {
    display: inline-block;
    height: 30px; /* ความหนาของแถบ */
    margin: 0; /* ลบระยะห่าง */
    /* border-top-right-radius: 1rem; ความโค้ง */
    /* border-bottom-right-radius: 1rem; ความโค้ง */
    /* border-top-left-radius: 0; ไม่มีโค้งด้านซ้าย */
    /* border-bottom-left-radius: 0; ไม่มีโค้งด้านซ้าย */
}
.custom-span-hr_null {
    display: inline-block;
    height: 30px; /* ความหนาของแถบ */
    margin: 0; /* ลบระยะห่าง */
    /*border-top-left-radius: 1rem;  ความโค้ง */
    /*border-bottom-left-radius: 1rem;  ความโค้ง */
    /*border-top-right-radius: 1rem;  ความโค้ง */
    /*border-bottom-right-radius: 1rem; ความโค้ง */
}

.buttom_type {
    background-color: #4B908E !important;
    border-color: #4B908E !important;
    border-radius: 1rem!important; /* กำหนดความโค้ง */
    padding: 10px 20px!important; /* เพิ่ม Padding ให้ปุ่มดูสมดุล */
}

.custom-span-prefix-triangle {
    display: inline-block;
    height: 0.5rem; /* ความหนาของแถบ */
    margin: 0; /* ลบระยะห่าง */
    /*border-top-left-radius: 1rem; ความโค้ง */
    /*border-bottom-left-radius: 1rem; ความโค้ง */
    /*border-top-right-radius: 0; ไม่มีโค้งด้านขวา */
    /*border-bottom-right-radius: 0; ไม่มีโค้งด้านขวา */
}

.custom-span-triangle {
    display: inline-block;
    height: 0; /* ความหนาของแถบ */
    margin: 0; /* ลบระยะห่าง */
    border-left: 0.5rem solid transparent; 
    border-right: 0.5rem solid transparent; 
    border-top: 0.5rem solid #e0b81a;
}

[data-tooltip] {
    display: inline-block;
    position: relative;
    cursor: help;
}
/* Tooltip styling */
[data-tooltip]:before {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 200px;
    text-align: center;
    border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
    bottom: 100%;
    margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
    left: 100%;
    margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
    top: 100%;
    margin-top: 6px;
}
[data-tooltip-position="left"]:before {
    right: 100%;
    margin-right: 6px;
}

/* Tooltip arrow styling/placement */
[data-tooltip]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
    left: 50%;
    margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
    top: 50%;
    margin-top: -6px;
}
[data-tooltip-position="top"]:after {
    bottom: 100%;
    border-width: 6px 6px 0;
    border-top-color: #000;
}
[data-tooltip-position="right"]:after {
    left: 100%;
    border-width: 6px 6px 6px 0;
    border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
    top: 100%;
    border-width: 0 6px 6px;
    border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
    right: 100%;
    border-width: 6px 0 6px 6px;
    border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    display: block;
    z-index: 50;
}

@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) 
  and (orientation: portrait) {

  #performance_title {
    width: 100% !important;
  }
}
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) 
  and (orientation: landscape) {

  #performance_title {
    width: 100% !important;
  }
}

/* iPad Pro แนวนอน (1366px กว้าง) */
@media only screen 
  and (min-width: 1366px) 
  and (max-width: 1366px) {
  #performance_title {
    width: 100% !important;
  }
}

@media only screen 
  and ((min-width: 768px) and (max-width: 1024px)),
  (width: 1366px) {
  #performance_title {
    width: 100% !important;
  }
}

/* แก้เฉพาะ performance avg */
#performance-avg-front {
  pointer-events: auto !important;  /* ⭐ สำคัญที่สุด */
  min-height: 14px;                 /* ให้มีพื้นที่ hover */
  cursor: help;
  position: relative;
  z-index: 5;                       /* ลอยขึ้นมารับ mouse */
}